feat: add SVGController skeleton and InteractionMode#91
feat: add SVGController skeleton and InteractionMode#91jwindhager wants to merge 4 commits intodevelopmentfrom
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## development #91 +/- ##
============================================
Coverage 99.78% 99.78%
============================================
Files 9 9
Lines 459 459
Branches 115 115
============================================
Hits 458 458
Misses 1 1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR introduces an SVG overlay pipeline alongside the existing OpenSeadragon + WebGL viewer stack by adding a core-level SVGController and wiring a new interactionMode state through the app store into the viewer, so future shape-drawing modes can be implemented on top of a synchronized SVG transform layer.
Changes:
- Add
SVGController(core) and a newInteractionModetype ("pan"for now). - Add a
useSVGhook and integrate it into the viewer to keep the SVG overlay viewport/size synchronized with OpenSeadragon. - Add
interactionModestate +setInteractionMode()action to the app store and plumb it into the viewer adapter/context.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/@tissuumaps-viewer/src/hooks/useSVG.ts | New hook that mounts an SVG overlay and forwards resize/viewport updates to SVGController. |
| packages/@tissuumaps-viewer/src/context.ts | Extends viewer adapter to include interactionMode and optional onShapeAdded. |
| packages/@tissuumaps-viewer/src/components/Viewer/index.tsx | Wires SVG overlay lifecycle and keeps it in sync with container resize + viewport changes. |
| packages/@tissuumaps-core/src/types.ts | Adds InteractionMode type. |
| packages/@tissuumaps-core/src/index.ts | Exports SVGController from core public API. |
| packages/@tissuumaps-core/src/controllers/SVGController.ts | Adds SVG overlay controller with transform-node synchronization methods. |
| apps/tissuumaps/src/store/slices/app.ts | Adds interactionMode state and setInteractionMode action with default "pan". |
| apps/tissuumaps/src/App.tsx | Passes interactionMode from Zustand store into the viewer adapter. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
909abb7 to
dac787b
Compare
This PR adds an
SVGControllerskeleton to@tissuumaps/corefor managing the drawing of SVG shapesSpecifically, the
SVGControllermanages an<svg>element that is overlayed on top of the OpenSeadragon drawer and the WebGL canvas elements. Depending on the newly introducedInteractionMode, the controller is supposed to handle mouse events for drawing Shapes. Currently, the onlyInteractionModeis"pan"(i.e., no drawing), but this may be extended as needed (e.g. by adding"drawRectangle"). CorrespondinginteractionModeadapters (in@tissuumaps/viewer) andinteractionMode/setInteractionMode()application states/actions were added and wired up.Importantly, all shapes are supposed to be added under the
transformNodeSVG group element, which transforms internal world coordinates to viewport coordinates in screen space, and is reactively synchronized to the current OpenSeadragon/WebGL viewport using thesetViewport(),resizeContainer()andupdateTransformNode()methods (already implemented and wired up in the@tissuumaps/viewerReact component). Any cleanup code may be added to thedestroy()method.A React component skeleton for controlling the application's
interactionModewill be added in a separate PR.