Skip to content

Right click drag for polygon brush tools#1470

Open
yannik131 wants to merge 16 commits into
masterfrom
795-drag-with-active-tool
Open

Right click drag for polygon brush tools#1470
yannik131 wants to merge 16 commits into
masterfrom
795-drag-with-active-tool

Conversation

@yannik131
Copy link
Copy Markdown
Contributor

Closes #795

@yannik131
Copy link
Copy Markdown
Contributor Author

yannik131 commented May 22, 2026

@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.
Also, I made right click drag work only when no modifiers (shift, alt, ...) are present.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 DragPan interaction 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.

Comment thread resources/assets/js/annotations/components/annotationCanvas.vue Outdated
Comment thread resources/assets/js/annotations/components/annotationCanvas.vue
Comment thread resources/assets/js/annotations/components/annotationCanvas.vue Outdated
Comment thread resources/assets/js/annotations/ol/MagicWandInteraction.js Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 7 comments.

Comment thread resources/assets/js/videos/components/videoScreen.vue Outdated
Comment thread resources/assets/js/videos/components/videoScreen.vue Outdated
Comment thread resources/assets/js/videos/components/videoScreen.vue
Comment thread resources/assets/js/annotations/components/annotationCanvas.vue Outdated
Comment thread resources/assets/js/videos/components/videoScreen.vue Outdated
Comment thread resources/assets/js/annotations/components/annotationCanvas.vue Outdated
Comment thread resources/assets/js/videos/components/videoScreen/drawInteractions.vue Outdated
yannik131 and others added 2 commits May 22, 2026 18:16
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@yannik131 yannik131 marked this pull request as ready for review May 22, 2026 16:34
@yannik131 yannik131 requested a review from mzur May 22, 2026 16:34
Comment thread resources/assets/js/annotations/ol/MagicWandInteraction.js Outdated
Comment thread resources/assets/js/videos/components/videoScreen/drawInteractions.vue Outdated
Comment on lines 248 to +303
@@ -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();
}
});

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines 615 to +673
@@ -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();
}
});
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again maybe move this to the mixin files?

Comment thread resources/views/partials/image-annotation-shortcuts.blade.php Outdated
Comment thread resources/views/partials/video-annotation-shortcuts.blade.php Outdated
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.

Move image/video with advanced polygon tools

3 participants