Changeset 35601

Timestamp:

2021-10-15T09:50:47+13:00 (3 years ago)

Author:

cstephen

Message:

Begin updating time adjustment logic

File:

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

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

@@ -10 +10 @@
 
         <div class="word-attachment-container" :style="{ left: leftHandleLeft }">
-            <span>{{ wordStartTime }}</span>
-            <span v-if="isMounted" class="material-icons mdi-m word-handle" @mousedown="canShiftMinValue = true">
+            <span>{{ wordStartTimeString }}</span>
+            <span v-if="isMounted" class="material-icons mdi-m word-handle" @mousedown="canAdjustWordStartTime = true">
                 first_page
             </span>
@@ -17 +17 @@
 
         <div class="word-attachment-container" :style="{ left: rightHandleLeft }">
-            <span v-if="isMounted" class="material-icons mdi-m word-handle" @mousedown="canShiftMaxValue = true">
+            <span v-if="isMounted" class="material-icons mdi-m word-handle" @mousedown="canAdjustWordEndTime = true">
                 last_page
             </span>
-            <span>{{ wordEndTime }}</span>
+            <span>{{ wordEndTimeString }}</span>
         </div>
     </div>
@@ -112 +112 @@
         /** @type {Array<TWord>} */
         surroundingWords: Array,
-        word: TWord,
-        upperBound: Number
+        word: TWord
     },
     data() {
@@ -120 +119 @@
             /** @type {Array<Word>} */
             // mySurroundingWords: [],
-            canShiftMinValue: false,
-            canShiftMaxValue: false,
+            canAdjustWordStartTime: false,
+            canAdjustWordEndTime: false,
             wordsContainerWidth: 0,
             isProduction: false
@@ -145 +144 @@
             return Util.formatSecondsTimeString(this.surroundingWords[this.surroundingWords.length - 1].endTime, false, 2);
         },
-        wordStartTime() {
+        wordStartTimeString() {
             return Util.formatSecondsTimeString(this.word.startTime, false, 2);
         },
-        wordEndTime() {
+        wordEndTimeString() {
             return Util.formatSecondsTimeString(this.word.endTime, false, 2);
         },
@@ -166 +165 @@
             }
             else {
-                return this.surroundingWords[this.surroundingWords.length - 1].endTime - this.surroundingWords[0].startTime;
+                let length = this.surroundingWords[this.surroundingWords.length - 1].endTime;
+
+                // Removes the buffer from 0s
+                if (this.wordIndex !== 0) {
+                    length -= this.surroundingWords[0].startTime;
+                }
+
+                return length;
             }
         },
@@ -181 +187 @@
          */
         wordLeftOffsetPx() {
-            return this.surroundingWords[0].startTime * this.scalingFactor;
+            if (this.wordIndex === 0) {
+                return 0;
+            }
+            else {
+                return this.surroundingWords[0].startTime * this.scalingFactor;
+            }
         },
         mySurroundingWords() {
@@ -214 +225 @@
             return myWords;
         },
+        scaleTime(time) {
+            return time * this.scalingFactor;
+        },
+        timeToPosition(time) {
+            return time * this.scalingFactor - this.wordLeftOffsetPx;
+        },
         convertWord(word) {
-            const left = (word.startTime * this.scalingFactor - this.wordLeftOffsetPx);
+            const left = this.timeToPosition(word.startTime);
             const length = (word.endTime - word.startTime) * this.scalingFactor;
 
@@ -228 +245 @@
             }
 
-            if (this.canShiftMinValue) {
+            if (this.canAdjustWordStartTime) {
                 this.onMinHandleMouseMove(event);
             }
-            else if (this.canShiftMaxValue) {
+            else if (this.canAdjustWordEndTime) {
                 this.onMaxHandleMouseMove(event);
             }
@@ -243 +260 @@
             }
 
-            const word = this.mySurroundingWords[this.wordIndex];
-
-            if (event.movementX < 0 && word.left + event.movementX < 0) {
-                return;
-            }
-
-            if (event.movementX > 0 && word.left + event.movementX >= word.right()) {
-                return;
-            }
-
-            this.mySurroundingWords[this.wordIndex].left += event.movementX;
-            word.length -= event.movementX;
+            // const word = this.mySurroundingWords[this.wordIndex];
+
+            // if (event.movementX < 0 && word.left + event.movementX < 0) {
+            //     return;
+            // }
+
+            // if (event.movementX > 0 && word.left + event.movementX >= word.right()) {
+            //     return;
+            // }
+
+            // word.left += event.movementX;
+            // word.length -= event.movementX;
+
+            this.adjustWordStartTime(event.movementX);
 
             this.myWordToWord();
@@ -280 +299 @@
         },
         onDocumentMouseUp() {
-            this.canShiftMinValue = false;
-            this.canShiftMaxValue = false;
+            this.canAdjustWordStartTime = false;
+            this.canAdjustWordEndTime = false;
         },
         myWordToWord() {
@@ -292 +311 @@
             const word = new TWord(this.word.word, startTime, endTime, this.word.id, this.word.shouldHighlight, this.word.deletionAttempts);
             this.$emit("update:word", word);
+        },
+        adjustWordStartTime(amount) {
+            const word = this.mySurroundingWords[this.wordIndex];
+            word.left += amount;
+            word.length -= amount;
+
+            if (amount < 0) {
+                if (this.wordIndex === 0) {
+                    if (word.left > 0) {
+                        return;
+                    }
+
+                    const diff = 0 - word.left;
+                    word.left = 0;
+                    word.length -= diff;
+                }
+                else {
+                    // Adjust previous word
+                    const previousWord = this.mySurroundingWords[this.wordIndex - 1];
+
+                    if (word.left > previousWord.right()) {
+                        return;
+                    }
+
+                    const diff = word.left - previousWord.right(); // Will be negative
+                    word.left -= diff;
+                    word.length += diff;
+
+                    // TODO: This logic needs all words to be reactively updated to work
+
+                    // previousWord.length += amount;
+                    // const leftBoundary = previousWord.left + this.timeToPosition(0.1);
+
+                    // if (previousWord.right() > leftBoundary) {
+                    //     return;
+                    // }
+
+                    // const diff = leftBoundary - previousWord.right(); // Will be negative
+                    // word.left -= diff;
+                    // word.length += diff;
+                    // previousWord.length -= diff;
+                }
+            }
+            else {
+                if (word.left > (word.right() - this.scaleTime(0.1))) {
+                    const diff = word.left - (word.right() - this.scaleTime(0.1)) // Will be positive
+                    word.left -= diff;
+                    word.length += diff;
+                }
+            }
         }
     },