Right click drag for polygon brush tools#1470
Conversation
|
@mzur The fill/erase/magic wand/brush tools were all triggered with the right mouse button as well, I hope this doesn't break anybody's work flow. If it does we could add additional modifiers like shift + right click for dragging. |
There was a problem hiding this comment.
Pull request overview
Adds a right-click drag pan gesture to the image annotation map while “advanced” polygon tools (polygon brush/eraser/fill, magic wand) are active, so users can move the image without triggering the active tool (Issue #795).
Changes:
- Adds a dedicated
DragPaninteraction that activates on right-mouse-button drag when brush/wand modes are active. - Updates polygon brush/eraser/fill interactions to use a mouse-button-based condition.
- Updates the magic wand interaction to ignore non-matching mouse actions on pointer down.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| resources/assets/js/annotations/ol/MagicWandInteraction.js | Gates magic-wand drawing start based on a mouse-action condition. |
| resources/assets/js/annotations/components/annotationCanvas/polygonBrushInteraction.vue | Changes brush/eraser/fill interaction conditions to use mouseActionButton. |
| resources/assets/js/annotations/components/annotationCanvas/magicWandInteraction.vue | Passes a condition option into the magic wand interaction construction. |
| resources/assets/js/annotations/components/annotationCanvas.vue | Adds right-click drag panning via DragPan and suppresses context menu while active. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
| @@ -283,6 +289,18 @@ export default { | |||
| }, | |||
| })); | |||
|
|
|||
| map.addInteraction(new DragPan({ | |||
| condition: (mapBrowserEvent) => { | |||
| return mapBrowserEvent.originalEvent.button === 2 && noModifierKeys(mapBrowserEvent) && this.isBrushOrWandMode; | |||
| }, | |||
| })); | |||
|
|
|||
| map.getViewport().addEventListener('contextmenu', (e) => { | |||
| if (this.isBrushOrWandMode) { | |||
| e.preventDefault(); | |||
| } | |||
| }); | |||
|
|
|||
There was a problem hiding this comment.
I'd suggest to put this into the polygonBrushInteraction mixin but this wouldn't fit with the magic wand tool. Maybe add a DragPan for the polygon tools and another one for the magic wand interaction? This would repeat code but the separation is cleaner in the different files.
| @@ -653,6 +660,18 @@ export default { | |||
| }), | |||
| }); | |||
|
|
|||
| map.addInteraction(new DragPan({ | |||
| condition: (mapBrowserEvent) => { | |||
| return mapBrowserEvent.originalEvent.button === 2 && noModifierKeys(mapBrowserEvent) && this.isBrushOrWandMode; | |||
| }, | |||
| })); | |||
|
|
|||
| map.getViewport().addEventListener('contextmenu', (e) => { | |||
| if (this.isBrushOrWandMode) { | |||
| e.preventDefault(); | |||
| } | |||
| }); | |||
There was a problem hiding this comment.
Again maybe move this to the mixin files?
…ions.vue Co-authored-by: Martin Zurowietz <mzur@users.noreply.github.com>
Closes #795