Implement requested changes

biigle · Feb 5, 2025 · dc64908 · dc64908
1 parent 12fd12b
commit dc64908
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 40 deletions.
diff --git 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
@@ -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
@@ -8,17 +8,14 @@ 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.
  *
  * @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
@@ -54,7 +54,7 @@
                 </div>
 
                 <div class="sidebar-tab__section">
-                    <power-toggle :active="singleAnnotation" title-off="Enable Single-Frame Annotation" title-on="Disable Single-Frame Annotation" v-on:on="handleSingleAnnotation" v-on:off="handleDisableSingleAnnotation">Single-Frame Annotation</power-toggle>
+                    <power-toggle :active="singleAnnotation" title-off="Enable always creating single-frame annotations" title-on="Disable always creating single-frame annotations" v-on:on="handleSingleAnnotation" v-on:off="handleDisableSingleAnnotation">Single-Frame Annotation</power-toggle>
                 </div>
             </div>
     </settings-tab>