Right click drag for polygon brush tools by yannik131 · Pull Request #1470 · biigle/core

yannik131 · 2026-05-22T11:43:43Z

Closes #795

yannik131 · 2026-05-22T11:49:41Z

@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.

Copilot

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.

Copilot

Pull request overview

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

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

mzur · 2026-05-29T11:31:05Z

+        if (e.originalEvent.button === 2) {
+            return false;
+        }


Maybe implement this as a generic condition similar to the other interactions?

mzur · 2026-05-29T11:31:58Z

                            indicatorPointStyle: Styles.editing,
                            indicatorCrossStyle: Styles.cross,
-                            simplifyTolerant: 0.1,
+                            simplifyTolerant: 0.1


The codebase prefers trailing commas everywhere.

Suggested change

simplifyTolerant: 0.1

simplifyTolerant: 0.1,

mzur · 2026-05-29T11:37:57Z

                    style: Styles.editing,
                    brushRadius: brushRadius,
                    resizeCondition: altKeyOnly,
+                    condition: (event) => event.originalEvent.button !== 2


Maybe we could also use the existing primaryAction condition as "must be something like left click" instead of "must not be right click"? Or we implement a custom rightClick condition (see annotations/ol/events/conditions.js) and (re-)use !rightClick.

Example:

Suggested change

condition: (event) => event.originalEvent.button !== 2

condition: primaryAction

mzur · 2026-05-29T11:43:37Z

@@ -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();
+                }
+            });
+


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.

mzur · 2026-05-29T11:44:26Z

@@ -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();
+                }
+            });


Again maybe move this to the mixin files?

mzur · 2026-05-29T11:47:47Z

+<p>
+    When any of the polygon brush/fill/eraser tools or the magic wand tool is active:
+</p>
+
+<table class="table">
+    <thead>
+        <tr>
+            <th>Key</th>
+            <th>Function</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><kbd>Right click</kbd> (held)</td>
+            <td>Drag the map<br></td>
+        </tr>
+    </tbody>
+</table>
+


I'm not sure about this. Some kind of documentation is good but this is not really a keyboard shortcut. Maybe we should rather add a note about it to the manual articles on creating/editing annotations.

mzur · 2026-05-29T11:47:54Z

+<p>
+    When any of the polygon brush/fill/eraser tools or the magic wand tool is active:
+</p>
+
+<table class="table">
+    <thead>
+        <tr>
+            <th>Key</th>
+            <th>Function</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><kbd>Right click</kbd> (held)</td>
+            <td>Drag the map<br></td>
+        </tr>
+    </tbody>
+</table>
+


yannik131 added 2 commits May 22, 2026 13:41

Right click drag for polygon brush tools

980ecf0

Fixed linter errors

acb1934

yannik131 requested a review from Copilot May 22, 2026 11:49

Copilot started reviewing on behalf of yannik131 May 22, 2026 11:49 View session

Copilot AI reviewed May 22, 2026

View reviewed changes

yannik131 added 8 commits May 22, 2026 14:09

Disable context menu for annotation tools

d1ac17b

Only block right mouse button, allow original conditions

ef3be7c

Copy-pasted right click drag to video annotation tool

c4e9919

Only disallow right mouse button for wand interaction

edff36d

Removed unused code

feb1a98

Unified naming

fba81f2

Linter fixes

ea5f71d

Added semicolon

3d1d18f

yannik131 requested a review from Copilot May 22, 2026 16:01

Copilot started reviewing on behalf of yannik131 May 22, 2026 16:01 View session

Copilot AI reviewed May 22, 2026

View reviewed changes

yannik131 and others added 2 commits May 22, 2026 18:16

Apply suggestions from code review

789dc1e

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Documented right click drag in shortcuts manual

326eb51

yannik131 marked this pull request as ready for review May 22, 2026 16:34

yannik131 requested a review from mzur May 22, 2026 16:34

mzur reviewed May 29, 2026

View reviewed changes

	condition: (event) => event.originalEvent.button !== 2
	condition: primaryAction

Conversation

yannik131 commented May 22, 2026

Uh oh!

yannik131 commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mzur May 29, 2026

Choose a reason for hiding this comment

Uh oh!

mzur May 29, 2026

Choose a reason for hiding this comment

Uh oh!

mzur May 29, 2026

Choose a reason for hiding this comment

Uh oh!

mzur May 29, 2026

Choose a reason for hiding this comment

Uh oh!

mzur May 29, 2026

Choose a reason for hiding this comment

Uh oh!

mzur May 29, 2026

Choose a reason for hiding this comment

Uh oh!

mzur May 29, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yannik131 commented May 22, 2026 •

edited

Loading