Changeset 35608 for main/trunk

Timestamp:

2021-10-15T12:46:35+13:00 (3 years ago)

Author:

cstephen

Message:

Implement full support for word time editing

Location:

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

Files:

• TranscriptionItemEditor.vue (modified) (1 diff)
• WordTimingSelector.vue (modified) (9 diffs)

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

@@ -20 +20 @@
     </div>
 
-    <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" :wordIndex="surroundingWordPrincipleIndex" @wordUpdated="onWordUpdated" v-if="enableEditing" />
+    <word-timing-selector class="word-timing-selector" @wordUpdated="onWordUpdated" v-if="enableEditing"
+        :surroundingWords="surroundingWords" :wordIndex="surroundingWordPrincipleIndex" />
 </div>
 </template>

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

@@ -119 +119 @@
             canAdjustWordStartTime: false,
             canAdjustWordEndTime: false,
-            wordsContainerWidth: 0,
-            isProduction: false
+            wordsContainerWidth: 0
         }
     },
@@ -168 +167 @@
                 if (this.wordIndex !== 0) {
                     length -= this.surroundingWords[0].startTime;
+                }
+
+                // Gives 0.5s of time to play with while adjusting the last word.
+                if (this.wordIndex === this.surroundingWords.length - 1) {
+                    length += 0.5;
                 }
 
@@ -225 +229 @@
             return word === this.myWord;
         },
+
         onDocumentMouseMove(event) {
-            if (this.isProduction) {
-                return;
-            }
-
             if (this.canAdjustWordStartTime) {
                 this.onMinHandleMouseMove(event);
@@ -245 +246 @@
             }
 
-            // 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);
 
@@ -267 +255 @@
             }
 
-            const word = this.myWord;
-
-            const lastWord = this.mySurroundingWords[this.mySurroundingWords.length - 1];
-
-            if (event.movementX > 0 && word.right() + event.movementX > lastWord.right()) {
-                return;
-            }
-
-            if (event.movementX < 0 && word.right() + event.movementX <= word.left) {
-                return;
-            }
-
-            word.length += event.movementX;
+            this.adjustWordEndTime(event.movementX);
 
             this.updateSurroundingWords();
@@ -287 +263 @@
             this.canAdjustWordEndTime = false;
         },
+
         adjustWordStartTime(amount) {
             const word = this.myWord;
@@ -324 +301 @@
             }
             else {
-                if (word.left > (word.right() - this.scaleTime(0.1))) {
-                    const diff = word.left - (word.right() - this.scaleTime(0.1)) // Will be positive
+                const rightBoundary = word.right() - this.scaleTime(0.1);
+                if (word.left > rightBoundary) {
+                    const diff = word.left - rightBoundary // Will be positive
                     word.left -= diff;
                     word.length += diff;
@@ -331 +309 @@
             }
         },
+        adjustWordEndTime(amount) {
+            const word = this.myWord;
+            word.length += amount;
+
+            if (amount > 0) {
+                if (this.wordIndex === this.mySurroundingWords.length - 1) {
+                    const rightBoundary = this.scaleTime(this.audioSnippetLength);
+
+                    if (word.right() < rightBoundary) {
+                        return;
+                    }
+
+                    const diff = word.right() - rightBoundary;
+                    word.length -= diff;
+                }
+                else {
+                    const nextWord = this.mySurroundingWords[this.wordIndex + 1];
+
+                    if (word.right() < nextWord.left) {
+                        return;
+                    }
+
+                    nextWord.left += amount;
+                    nextWord.length -= amount;
+
+                    const rightBoundary = nextWord.right() - this.scaleTime(0.1);
+
+                    if (nextWord.left < rightBoundary) {
+                        return;
+                    }
+
+                    const diff = word.right() - rightBoundary;
+                    word.length -= diff;
+                    nextWord.left -= diff;
+                    nextWord.length += diff;
+                }
+            }
+            else {
+                const leftBoundary = word.left + this.scaleTime(0.1);
+                if (word.right() < leftBoundary) {
+                    const diff = leftBoundary - word.right();
+                    word.length += diff;
+                }
+            }
+        },
+
         updateSurroundingWords() {
             for (let i = 0; i < this.mySurroundingWords.length; i++) {
@@ -344 +368 @@
         }
     },
-    beforeMount() {
-        this.isProduction = process.env.NODE_ENV === "production";
-    },
     mounted() {
         this.isMounted = true;