From dc64908b332325599075ed14fbb5da22b979599b Mon Sep 17 00:00:00 2001 From: aneust Date: Wed, 5 Feb 2025 15:41:48 +0100 Subject: [PATCH] Implement requested changes --- .../annotationCanvas/drawInteractions.vue | 14 ++--- resources/assets/js/prevent-doubleclick.js | 18 +++++++ .../videoScreen/drawInteractions.vue | 54 +++++++++---------- .../videos/show/sidebar-settings.blade.php | 2 +- 4 files changed, 48 insertions(+), 40 deletions(-) create mode 100644 resources/assets/js/prevent-doubleclick.js diff --git a/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue b/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue index 2e0b3fd1d..2abd93c32 100644 --- a/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue +++ b/resources/assets/js/annotations/components/annotationCanvas/drawInteractions.vue @@ -5,14 +5,9 @@ import Styles from '../../stores/styles'; import { shiftKeyOnly } from '@biigle/ol/events/condition'; import snapInteraction from '../../snapInteraction.vue'; import { Point } from '@biigle/ol/geom'; +import * as preventDoubleclick from '../../../prevent-doubleclick'; -function computeDistance(point1, point2) { - let p1=point1.getCoordinates(); - let p2=point2.getCoordinates(); - return Math.sqrt(Math.pow(p2[0] - p1[0], 2) + Math.pow(p2[1] - p1[1], 2)); -} - /** * Mixin for the annotationCanvas component that contains logic for the draw interactions. * @@ -21,9 +16,6 @@ function computeDistance(point1, point2) { let drawInteraction; -const POINT_CLICK_COOLDOWN = 400; -const POINT_CLICK_DISTANCE = 5; - // Custom OpenLayers freehandCondition that is true if a pen is used for input or // if Shift is pressed otherwise. let penOrShift = function (mapBrowserEvent) { @@ -142,8 +134,8 @@ export default { } }, isPointDoubleClick(e) { - return new Date().getTime() - this.lastDrawnPointTime < POINT_CLICK_COOLDOWN - && computeDistance(this.lastDrawnPoint,e.feature.getGeometry()) < POINT_CLICK_DISTANCE; + return new Date().getTime() - this.lastDrawnPointTime < preventDoubleclick.POINT_CLICK_COOLDOWN + && preventDoubleclick.computeDistance(this.lastDrawnPoint,e.feature.getGeometry()) < preventDoubleclick.POINT_CLICK_DISTANCE; }, }, watch: { diff --git a/resources/assets/js/prevent-doubleclick.js b/resources/assets/js/prevent-doubleclick.js new file mode 100644 index 000000000..52d1d1521 --- /dev/null +++ b/resources/assets/js/prevent-doubleclick.js @@ -0,0 +1,18 @@ +/** +* Compute the Euclidean distance between two points. +* +* @param Object point1 - The first point with getCoordinates() method. +* @param Object point2 - The second point with getCoordinates() method. +* @returns number - The computed distance between the two points. +*/ + +const POINT_CLICK_COOLDOWN = 400; +const POINT_CLICK_DISTANCE = 5; + +let computeDistance = function (point1, point2) { + let p1 = point1.getCoordinates(); + let p2 = point2.getCoordinates(); + return Math.sqrt(Math.pow(p2[0] - p1[0], 2) + Math.pow(p2[1] - p1[1], 2)); +}; + +export { computeDistance, POINT_CLICK_COOLDOWN, POINT_CLICK_DISTANCE }; diff --git a/resources/assets/js/videos/components/videoScreen/drawInteractions.vue b/resources/assets/js/videos/components/videoScreen/drawInteractions.vue index 06409c6d5..e07b87266 100644 --- a/resources/assets/js/videos/components/videoScreen/drawInteractions.vue +++ b/resources/assets/js/videos/components/videoScreen/drawInteractions.vue @@ -8,7 +8,7 @@ import VectorSource from '@biigle/ol/source/Vector'; import snapInteraction from "./snapInteraction.vue"; import { isInvalidShape } from '../../../annotations/utils'; import { Point } from '@biigle/ol/geom'; -import { computeDistance } from '../../utils'; +import * as preventDoubleclick from '../../../prevent-doubleclick'; /** * Mixin for the videoScreen component that contains logic for the draw interactions. @@ -16,9 +16,6 @@ import { computeDistance } from '../../utils'; * @type {Object} */ -const POINT_CLICK_COOLDOWN = 400; -const POINT_CLICK_DISTANCE = 5; - export default { mixins: [snapInteraction], data() { @@ -213,19 +210,31 @@ export default { let lastFrame = this.pendingAnnotation.frames[this.pendingAnnotation.frames.length - 1]; if (lastFrame === undefined || lastFrame < this.video.currentTime) { - if (this.singleAnnotation && this.isPointDoubleClick(e)) { - this.pendingAnnotationSource.once('addfeature', function (e) { - this.removeFeature(e.feature); - }); - } else { - this.pendingAnnotation.frames.push(this.video.currentTime); - this.pendingAnnotation.points.push(this.getPointsFromGeometry(e.feature.getGeometry())); + this.pendingAnnotation.frames.push(this.video.currentTime); + this.pendingAnnotation.points.push(this.getPointsFromGeometry(e.feature.getGeometry())); + + if (!this.video.ended && this.autoplayDraw > 0) { + this.play(); + window.clearTimeout(this.autoplayDrawTimeout); + this.autoplayDrawTimeout = window.setTimeout(this.pause, this.autoplayDraw * 1000); + } - if (!this.video.ended && this.autoplayDraw > 0) { - this.play(); - window.clearTimeout(this.autoplayDrawTimeout); - this.autoplayDrawTimeout = window.setTimeout(this.pause, this.autoplayDraw * 1000); + if (this.singleAnnotation) { + if (this.isDrawingPoint) { + if (this.isPointDoubleClick(e)) { + // The feature is added to the source only after this event + // is handled, so remove has to happen after the addfeature + // event. + this.pendingAnnotationSource.once('addfeature', function (e) { + this.removeFeature(e.feature); + }); + this.resetPendingAnnotation(this.pendingAnnotation.shape); + return + } + this.lastDrawnPointTime = new Date().getTime(); + this.lastDrawnPoint = e.feature.getGeometry(); } + this.pendingAnnotationSource.once('addfeature', this.finishDrawAnnotation); } } else { // If the pending annotation (time) is invalid, remove it again. @@ -238,21 +247,10 @@ export default { this.$emit('pending-annotation', this.pendingAnnotation); - if (this.singleAnnotation) { - if (this.isDrawingPoint) { - if (this.isPointDoubleClick(e)) { - this.resetPendingAnnotation(this.pendingAnnotation.shape); - return; - } - this.lastDrawnPointTime = new Date().getTime(); - this.lastDrawnPoint = e.feature.getGeometry(); - } - this.pendingAnnotationSource.once('addfeature', this.finishDrawAnnotation); - } }, isPointDoubleClick(e) { - return new Date().getTime() - this.lastDrawnPointTime < POINT_CLICK_COOLDOWN - && computeDistance(this.lastDrawnPoint, e.feature.getGeometry()) < POINT_CLICK_DISTANCE; + return new Date().getTime() - this.lastDrawnPointTime < preventDoubleclick.POINT_CLICK_COOLDOWN + && preventDoubleclick.computeDistance(this.lastDrawnPoint, e.feature.getGeometry()) < preventDoubleclick.POINT_CLICK_DISTANCE; }, }, created() { diff --git a/resources/views/videos/show/sidebar-settings.blade.php b/resources/views/videos/show/sidebar-settings.blade.php index 0f9f7743e..76d81a3d7 100644 --- a/resources/views/videos/show/sidebar-settings.blade.php +++ b/resources/views/videos/show/sidebar-settings.blade.php @@ -54,7 +54,7 @@
- Single-Frame Annotation + Single-Frame Annotation