ls1intum / Apollon

UML Modeling Editor written in React
https://apollon-library.readthedocs.io
MIT License
61 stars 21 forks source link

add support for continuous patching #334

Closed loreanvictor closed 6 months ago

loreanvictor commented 7 months ago

Checklist

Motivation and Context

In realtime collaboration, it helps if changes made by one collaborator are visible to other collaborators continuously, i.e. when moving or resizing an element.

Description

This PR adds APIs to Apollon to allow tracking and syncing continuous patches during moving and resizing of elements. The feature is opt-in (off by default for previous consumers of Apollon), as continuous patches need to be throttled and are ok to miss, unlike discrete patches, and syncing continuous change might require more sophisticated reconciliation mechanisms and backpressure handling that consumers might not have implemented.

Specifically the following APIs are added:

subscribeToAllModelChangePatches(callback: (patch: Patch) => void): number 

This will emit patches for all changes, whether they are discrete or continuous (previous API, subscribeToModelChangePatches(), only emits patches for discrete changes).

subscribeToModelContinuousChangePatches(callback: (patch: Patch) => void): number

This will emit patches for continuous changes, and is useful for when consumers want to handle discrete and continuous changes via different channels.

All of these new subscription options can be unsubscribed using the already existing unsubscribeFromModelChangePatches() method.

Steps for Testing

  1. Clone this PR
  2. Clone Apollon standalone.
  3. Link Apollon standalone to this repo.
  4. Run Apollon standalone, open a diagram and share for collaboration. Open in two distinct browser windows.
  5. Test if the realtime collaboration works (without changes being synced continuously).
  6. Change this line on Apollon standalone webapp to use subscribeToAllModelChangePatches() instead.
  7. Rebuild and rerun Apollon standalone. Now you should get continuous syncing of changes (during moving and resizing of elements).

Test Coverage

File Branch Line
apollon-editor.ts 80.39% 83.52%
components/store/model-store.tsx 100% 100%
services/patcher/patcher-middleware.ts 83.33% 100%
services/patcher/patcher.ts 92.85% 100%

Screenshots

ezgif com-video-to-gif-converted