Skip to content

Right click drag for polygon brush tools #1470

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yannik131 wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Right click drag for polygon brush tools #1470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
980ecf0
Right click drag for polygon brush tools
yannik131 May 22, 2026
acb1934
Fixed linter errors
yannik131 May 22, 2026
d1ac17b
Disable context menu for annotation tools
yannik131 May 22, 2026
ef3be7c
Only block right mouse button, allow original conditions
yannik131 May 22, 2026
c4e9919
Copy-pasted right click drag to video annotation tool
yannik131 May 22, 2026
edff36d
Only disallow right mouse button for wand interaction
yannik131 May 22, 2026
feb1a98
Removed unused code
yannik131 May 22, 2026
fba81f2
Unified naming
yannik131 May 22, 2026
ea5f71d
Linter fixes
yannik131 May 22, 2026
3d1d18f
Added semicolon
yannik131 May 22, 2026
789dc1e
Apply suggestions from code review
yannik131 May 22, 2026
326eb51
Documented right click drag in shortcuts manual
yannik131 May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions resources/assets/js/annotations/components/annotationCanvas.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ import ZoomLevel from './annotationCanvas/zoomLevel.vue';
import ZoomToExtentControl from '@biigle/ol/control/ZoomToExtent';
import ZoomToNativeControl from '../ol/ZoomToNativeControl.js';
import { isInvalidShape } from '../utils.js';
import {click as clickCondition} from '@biigle/ol/events/condition';
import {defaults as defaultInteractions} from '@biigle/ol/interaction'
import {click as clickCondition, noModifierKeys} from '@biigle/ol/events/condition';
import {defaults as defaultInteractions, DragPan} from '@biigle/ol/interaction';
import {getCenter} from '@biigle/ol/extent';
import {markRaw} from 'vue';
import {shiftKeyOnly as shiftKeyOnlyCondition} from '@biigle/ol/events/condition';
Expand Down Expand Up @@ -155,7 +155,7 @@ export default {
},
draftAnnotationUsesLabelColor: {
type: Boolean,
default: true,
default: true,
},
},
data() {
Expand Down Expand Up @@ -245,6 +245,12 @@ export default {
return 'Next image';
}
},
isBrushOrWandMode() {
return this.interactionMode === 'polygonBrush'
|| this.interactionMode === 'polygonEraser'
|| this.interactionMode === 'polygonFill'
|| this.interactionMode === 'magicWand';
},
},
methods: {
createMap() {
Expand Down Expand Up @@ -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();
}
});
Comment thread
yannik131 marked this conversation as resolved.

Comment on lines 248 to +303
Copy link
Copy Markdown
Member

@mzur mzur May 29, 2026

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.

control = new ZoomToNativeControl({
// fontawesome expand icon
label: '\uf065'
Expand Down
5 changes: 3 additions & 2 deletions resources/assets/js/annotations/components/annotationCanvas/polygonBrushInteraction.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export default {
style: Styles.editing,
brushRadius: brushRadius,
resizeCondition: altKeyOnly,
condition: (event) => event.originalEvent.button !== 2
Copy link
Copy Markdown
Member

@mzur mzur May 29, 2026

Choose a reason for hiding this comment

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

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

});
currentInteraction.on('drawend', this.handleNewFeature);
this.map.addInteraction(currentInteraction);
Expand All @@ -78,7 +79,7 @@ export default {
brushRadius: brushRadius,
allowRemove: false,
addCondition: never,
subtractCondition: noModifierKeys,
subtractCondition: (event) => noModifierKeys(event) && event.originalEvent.button !== 2,
resizeCondition: altKeyOnly,
});
currentInteraction.on('modifystart', this.handleFeatureModifyStart);
Expand All @@ -93,7 +94,7 @@ export default {
features: this.selectInteraction.getFeatures(),
style: Styles.editing,
brushRadius: brushRadius,
addCondition: noModifierKeys,
addCondition: (event) => noModifierKeys(event) && event.originalEvent.button !== 2,
subtractCondition: never,
resizeCondition: altKeyOnly,
});
Expand Down
5 changes: 4 additions & 1 deletion resources/assets/js/annotations/ol/MagicWandInteraction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ class MagicWandInteraction extends PointerInteraction {
// Add feature to annotation source to prevent flickering feature
this.source.addFeature(this.sketchFeature);
}

this.sketchSource.removeFeature(this.sketchFeature);

this.sketchFeature = null;
Expand All @@ -205,6 +205,9 @@ class MagicWandInteraction extends PointerInteraction {
* Start drawing of a sketch.
*/
handleDownEvent(e) {
if (e.originalEvent.button === 2) {
return false;
}
Comment on lines +208 to +210
Copy link
Copy Markdown
Member

@mzur mzur May 29, 2026

Choose a reason for hiding this comment

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

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

this.downPoint[0] = Math.round(e.coordinate[0]);
this.downPoint[1] = Math.round(e.coordinate[1]);
this.drawSketch();
Expand Down
27 changes: 23 additions & 4 deletions resources/assets/js/videos/components/videoScreen.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
icon="fa-check"
title="Disable the single-frame annotation option to create multi-frame annotations"
:disabled="true"
></control-button>
></control-button>
<control-button
v-else
icon="fa-check"
Expand All @@ -122,7 +122,7 @@
icon="fa-project-diagram"
title="Disable the single-frame annotation option to track annotations"
:disabled="true"
></control-button>
></control-button>
<control-button
v-else
icon="fa-project-diagram"
Expand Down Expand Up @@ -197,7 +197,7 @@
icon="fa-project-diagram"
title="Disable the single-frame annotation option to track annotations"
:disabled="true"
></control-button>
></control-button>
<control-button
v-else
icon="fa-project-diagram"
Expand Down Expand Up @@ -429,8 +429,9 @@ import ZoomToExtentControl from '@biigle/ol/control/ZoomToExtent';
import ZoomToNativeControl from '@/annotations/ol/ZoomToNativeControl.js';
import {click as clickCondition} from '@biigle/ol/events/condition';
import {containsCoordinate} from '@biigle/ol/extent';
import {defaults as defaultInteractions} from '@biigle/ol/interaction';
import {defaults as defaultInteractions, DragPan} from '@biigle/ol/interaction';
import {markRaw} from 'vue';
import { noModifierKeys } from '@biigle/ol/events/condition';

export default {
emits: [
Expand Down Expand Up @@ -611,6 +612,12 @@ export default {
isDefaultInteractionMode() {
return this.interactionMode === 'default';
},
isBrushOrWandMode() {
return this.interactionMode === 'polygonBrush'
|| this.interactionMode === 'polygonEraser'
|| this.interactionMode === 'polygonFill'
|| this.interactionMode === 'drawMagicWand';
},
styleObject() {
if (this.heightOffset !== 0) {
return `height: calc(65% + ${this.heightOffset}px);`;
Expand Down Expand Up @@ -653,6 +660,18 @@ export default {
}),
});

map.addInteraction(new DragPan({
condition: (mapBrowserEvent) => {
return mapBrowserEvent.originalEvent.button === 2 && noModifierKeys(mapBrowserEvent) && this.isBrushOrWandMode;
},
}));
Comment thread
yannik131 marked this conversation as resolved.

map.getViewport().addEventListener('contextmenu', (e) => {
if (this.isBrushOrWandMode) {
e.preventDefault();
}
});
Comment on lines 615 to +673
Copy link
Copy Markdown
Member

@mzur mzur May 29, 2026

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?


control = new ZoomToNativeControl({
// fontawesome expand icon
label: '\uf065'
Expand Down
2 changes: 1 addition & 1 deletion resources/assets/js/videos/components/videoScreen/drawInteractions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export default {
style: Styles.editing,
indicatorPointStyle: Styles.editing,
indicatorCrossStyle: Styles.cross,
simplifyTolerant: 0.1,
simplifyTolerant: 0.1
Copy link
Copy Markdown
Member

@mzur mzur May 29, 2026

Choose a reason for hiding this comment

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

The codebase prefers trailing commas everywhere.

Suggested change
simplifyTolerant: 0.1
simplifyTolerant: 0.1,

});
} else {
this.drawInteraction = new DrawInteraction({
Expand Down
5 changes: 3 additions & 2 deletions resources/assets/js/videos/components/videoScreen/polygonBrushInteractions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export default {
style: Styles.editing,
brushRadius: this.polygonBrushRadius,
resizeCondition: altKeyOnlyCondition,
condition: (event) => event.originalEvent.button !== 2
});
this.polygonBrushInteraction.on('drawend', this.extendPendingAnnotation);
this.pendingAnnotation.shape = 'Polygon';
Expand All @@ -85,7 +86,7 @@ export default {
brushRadius: this.polygonBrushRadius,
allowRemove: false,
addCondition: neverCondition,
subtractCondition: noModifierKeysCondition,
subtractCondition: (event) => noModifierKeysCondition(event) && event.originalEvent.button !== 2,
resizeCondition: altKeyOnlyCondition,
});
this.polygonEraserInteraction.on('modifystart', this.handleModifyStart);
Expand All @@ -106,7 +107,7 @@ export default {
style: Styles.editing,
brushRadius: this.polygonBrushRadius,
allowRemove: false,
addCondition: noModifierKeysCondition,
addCondition: (event) => noModifierKeysCondition(event) && event.originalEvent.button !== 2,
subtractCondition: neverCondition,
resizeCondition: altKeyOnlyCondition,
});
Expand Down
19 changes: 19 additions & 0 deletions resources/views/partials/image-annotation-shortcuts.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,25 @@
</tbody>
</table>

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

Comment on lines +161 to +179
Copy link
Copy Markdown
Member

@mzur mzur May 29, 2026

Choose a reason for hiding this comment

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

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.

<p>
When the ruler tool is activated:
</p>
Expand Down
19 changes: 19 additions & 0 deletions resources/views/partials/video-annotation-shortcuts.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,25 @@
</tbody>
</table>

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

Comment on lines +175 to +193
Copy link
Copy Markdown
Member

@mzur mzur May 29, 2026

Choose a reason for hiding this comment

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

See above.

<p>
When any of the rectangle, line string or polygon annotation tools are activated:
</p>
Expand Down