Changeset 35542

Timestamp:

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

Author:

cstephen

Message:

WordTimingSelector is now fully reactive

Location:

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

Files:

• TranscriptionItemEditor.vue (modified) (4 diffs)
• WordTimingSelector.vue (modified) (10 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" :word="selectedWord" v-if="enableEditing" />
+    <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" v-model:word="selectedWord" v-if="enableEditing" />
 
     <div class="editor-controls">
@@ -97 +97 @@
      * @param {Number} endTime The time within the audio that this word finishes being spoken.
      */
-    constructor(word, startTime, endTime) {
+    constructor(word, startTime, endTime, id = null, shouldHighlight = false, deletionAttempts = 0) {
         /** @type {String} The ID of this word. */
-        this.id = Util.generateUuid();
+        this.id = id ?? Util.generateUuid();
 
         /** @type {String} The word. */
@@ -111 +111 @@
 
         /** @type {Boolean} A value indicating whether this word should be highlighted. */
-        this.shouldHighlight = false;
+        this.shouldHighlight = shouldHighlight;
 
         /** @type {Number} The number of times the user has tried to delete this word. */
-        this.deletionAttempts = 0;
+        this.deletionAttempts = deletionAttempts;
     }
 }
@@ -150 +150 @@
             return this.getSurroundingWords(this.selectedIndex);
         },
-        selectedWord() {
-            return this.words[this.selectedIndex];
+        selectedWord: {
+            get() {
+                return this.words[this.selectedIndex];
+            },
+            set(value) {
+                this.words[this.selectedIndex] = value;
+            }
         },
         ...mapState({

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

@@ -77 +77 @@
 
 <script>
+import { Word as TWord } from "./TranscriptionItemEditor.vue"
 import Util from "../js/Util"
 
@@ -97 +98 @@
     name: "WordTimingSelector",
     props: {
-        /** @type {Array<{ word: String, startTime: Number, endTime: Number }>} */
+        /** @type {Array<TWord>} */
         surroundingWords: Array,
-        word: { word: String, startTime: Number, endTime: Number },
+        word: TWord,
         upperBound: Number
     },
@@ -106 +107 @@
             isMounted: false,
             /** @type {Array<Word>} */
-            mySurroundingWords: [],
+            // mySurroundingWords: [],
             canShiftMinValue: false,
             canShiftMaxValue: false,
@@ -142 +143 @@
         },
         audioSnippetLength() {
-            return this.surroundingWords[this.surroundingWords.length - 1].endTime - this.surroundingWords[0].startTime;
+            if (this.surroundingWords.length === 0) {
+                return 0;
+            }
+            else {
+                return this.surroundingWords[this.surroundingWords.length - 1].endTime - this.surroundingWords[0].startTime;
+            }
         },
         /**
@@ -157 +163 @@
         wordLeftOffsetPx() {
             return this.surroundingWords[0].startTime * this.scalingFactor;
-        }
-    },
-    watch: {
-        surroundingWords() {
-            this.mySurroundingWords = this.convertSurroundingWords();
+        },
+        mySurroundingWords() {
+            const myWords = [];
+
+            if (this.surroundingWords.length === 0) {
+                return myWords;
+            }
+
+            for (const word of this.surroundingWords) {
+                myWords.push(this.convertWord(word));
+            }
+
+            return myWords;
         }
     },
@@ -188 +202 @@
         },
         shouldHoist(word) {
-            return word && this.word && word.startTime === this.word.startTime && word.word === this.word.word;
+            return word === this.myWord;
         },
         /**
@@ -198 +212 @@
             }
 
-            const word = this.myWord;
+            const word = this.mySurroundingWords[this.wordIndex];
 
             if (event.movementX < 0 && word.left + event.movementX < 0) {
@@ -208 +222 @@
             }
 
-            word.left += event.movementX;
+            this.mySurroundingWords[this.wordIndex].left += event.movementX;
             word.length -= event.movementX;
         },
@@ -229 +243 @@
 
             word.length += event.movementX;
+            this.myWordToWord();
         },
         onHandleMouseUp() {
             this.canShiftMinValue = false;
             this.canShiftMaxValue = false;
+        },
+        myWordToWord() {
+            const pxLeft = this.myWord.left;
+            const pxRight = this.myWord.left + this.myWord.length;
+
+            const startTime = (pxLeft + this.wordLeftOffsetPx) / this.scalingFactor;
+            const endTime = (pxRight + this.wordLeftOffsetPx) / this.scalingFactor;
+
+            const word = new TWord(this.word.word, startTime, endTime, this.word.id, this.word.shouldHighlight, this.word.deletionAttempts);
+            this.$emit("update:word", word);
         }
     },
@@ -240 +265 @@
     mounted() {
         this.isMounted = true;
-        this.mySurroundingWords = this.convertSurroundingWords();
     }
 }