Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add support for remote selection #323

Merged
merged 5 commits into from
Nov 24, 2023
Merged

Conversation

loreanvictor
Copy link
Contributor

@loreanvictor loreanvictor commented Nov 19, 2023

Checklist

  • I documented the TypeScript code using JSDoc style.
  • I added multiple screenshots/screencasts of my UI changes
  • I translated all the newly inserted strings into German and English (NA)

Motivation and Context

A common feature of realtime collaboration is highlighting elements and relationships selected by some other collaborator. Currently this is implemented via a selectedBy property on elements, which has the downside that this ephemeral state will be persisted alongside the diagram, potentially leading to corrupt diagram data (a collaborator marked as selecting an element might not be present anymore).

It is notable that currently highlighting relationships selected by a remote collaborator is not possible as well.

Description

This PR will add a property to model state, independent of the exported diagram, called remoteSelection, alongside two new APIs for Apollon:

remoteSelect(selectorName: string, selectorColor: string, select: string[], deselect?: string[])

👆 This method highlights given elements and relationships, for given collaborator (marked by their name and color), or removes their corresponding highlighting from given deselected elements.

pruneRemoteSelectors(allowedSelectors: { name: string; color: string }[])

👆 This method removes any remote selector not in the allowed list.

Steps for Testing

  1. Clone Apollon_standalone and switch to this PR
  2. Ensure /diagrams folder exists (btw this should be added to the README of standalone).
  3. Link local Apollon
  4. Run Apollon_standalone and test realtime collaboration.

You should:

  • See elements selected/deselected by another collaborator (name and color)
  • See relationships selected/deselected by another collaborator (color)
  • See highlights related to a collaborator vanish when they disconnect

Test Coverage

File Branch Line
apollon-editor.ts 80.39% 84%
components/model-state.ts 97.05% 90.86%
components/uml-element/canvas-element.tsx 40% 76.12%
components/uml-element/canvas-relationship.tsx 55% 67.63%
services/uml-element/remote-selectable/remote-selection-reducer.ts 100% 100%
services/uml-element/remote-selectable/remote-selection-repository.ts 100% 100%

Screenshots

ezgif com-video-to-gif-3

@loreanvictor loreanvictor marked this pull request as ready for review November 20, 2023 08:07
@matthiaslehnertum
Copy link
Collaborator

Nice Documentation! Could you update the base branch just to make sure Tests still go through then? Otherwise good to go from my side!

@matthiaslehnertum matthiaslehnertum self-requested a review November 24, 2023 11:47
@matthiaslehnertum matthiaslehnertum merged commit bbd593c into develop Nov 24, 2023
5 checks passed
@matthiaslehnertum matthiaslehnertum deleted the feature/remote-selection branch November 24, 2023 14:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants