Changeset 35543

Timestamp:

2021-10-01T15:08:29+13:00 (3 years ago)

Author:

cstephen

Message:

Improve mouse tracking on handles in WordTimingSelector

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/WordTimingSelector.vue (modified) (5 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/WordTimingSelector.vue

@@ -10 +10 @@
 
         <span v-if="isMounted && !isProduction" class="material-icons mdi-m word-handle" :style="{ left: leftHandleLeft }"
-            @mousemove="onMinHandleMouseMove" @mouseup="onHandleMouseUp" @mousedown="canShiftMinValue = true">
+            @mousedown="canShiftMinValue = true">
             first_page
         </span>
-        <span v-if="isMounted && !isProduction" class="material-icons mdi-m word-handle" :style="{ left: rightHandleLeft }" @mousemove="onMaxHandleMouseMove">last_page</span>
+        <span v-if="isMounted && !isProduction" class="material-icons mdi-m word-handle" :style="{ left: rightHandleLeft }"
+            @mousedown="canShiftMaxValue = true">
+            last_page
+        </span>
     </div>
 
@@ -204 +207 @@
             return word === this.myWord;
         },
+        onDocumentMouseMove(event) {
+            if (this.canShiftMinValue) {
+                this.onMinHandleMouseMove(event);
+            }
+            else if (this.canShiftMaxValue) {
+                this.onMaxHandleMouseMove(event);
+            }
+        },
         /**
          * @param {MouseEvent} event
@@ -224 +235 @@
             this.mySurroundingWords[this.wordIndex].left += event.movementX;
             word.length -= event.movementX;
+
+            this.myWordToWord();
         },
         onMaxHandleMouseMove(event) {
@@ -243 +256 @@
 
             word.length += event.movementX;
+
             this.myWordToWord();
         },
-        onHandleMouseUp() {
+        onDocumentMouseUp() {
             this.canShiftMinValue = false;
             this.canShiftMaxValue = false;
@@ -265 +279 @@
     mounted() {
         this.isMounted = true;
+
+        document.addEventListener("mousemove", this.onDocumentMouseMove);
+        document.addEventListener("mouseup", this.onDocumentMouseUp);
+    },
+    beforeUnmount() {
+        document.removeEventListener("mousemove", this.onDocumentMouseMove);
+        document.removeEventListener("mouseup", this.onDocumentMouseUp);
     }
 }