Changeset 35602 for main

Timestamp:

2021-10-15T10:45:15+13:00 (3 years ago)

Author:

cstephen

Message:

Broken attempt to update all words

Location:

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

Files:

• TranscriptionItemEditor.vue (modified) (6 diffs)
• WordTimingSelector.vue (modified) (8 diffs)

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

@@ -12 +12 @@
         <ul class="list-view" v-else>
             <li v-for="(word, index) in words" :key="word.id" class="word-container">
-                <input :size="word.word.length === 0 ? 1 : word.word.length" :ref="word.id"
+                <!-- :size="word.word.length === 0 ? 1 : word.word.length" -->
+                <input :ref="word.id"
                     class="editor-word" v-model="word.word" type="text" :class="{ 'word-highlight-applied': word.shouldHighlight }"
                     @beforeinput="onEditorBeforeInput($event, index)" @focusout="onEditorFocusOut(index)" @focus="onEditorFocus(index)" />
@@ -20 +21 @@
     </div>
 
-    <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" v-model:word="selectedWord" v-if="enableEditing" />
+    <word-timing-selector class="word-timing-selector" v-model:surroundingWords="surroundingWords" :wordIndex="surroundingWordPrincipleIndex" v-if="enableEditing" />
 </div>
 </template>
@@ -114 +115 @@
             words: [],
             lastHighlightedWordIndex: 0,
-            selectedIndex: 0
+            selectedIndex: 0,
+            surroundingWordPrincipleIndex: 0
         }
     },
@@ -126 +128 @@
             }
         },
-        surroundingWords() {
-            return this.getSurroundingWords(this.selectedIndex);
-        },
-        selectedWord: {
+        surroundingWords: {
             get() {
-                return this.words[this.selectedIndex];
+                return this.getSurroundingWords(this.selectedIndex);
             },
             set(value) {
-                this.words[this.selectedIndex] = value;
+                this.setSurroundingWords(this.selectedIndex, value);
             }
         },
@@ -194 +193 @@
         },
 
+        /**
+         * Gets the minimum viable index that surrounding words can start at.
+         * @param {Number} principleIndex The index of the primary surrounding word.
+         * @param {Number} buffer The maximum number of words to take on each side of the principle word.
+         */
+        getSurroundingWordMinIndex(principleIndex, buffer) {
+            let min = principleIndex;
+            for (let i = principleIndex; i > principleIndex - buffer && i > 0; i--) {
+                min--;
+            }
+
+            return min;
+        },
+
         getSurroundingWords(index) {
             const BUFFER = 2; // The number of words to take on each side
 
-            let min = index;
-            for (let i = index; i > index - BUFFER && i > 0; i--) {
-                min--;
-            }
+            const min = this.getSurroundingWordMinIndex(index, BUFFER);
 
             let max = index + 1;
@@ -207 +217 @@
             }
 
+            this.surroundingWordPrincipleIndex = index - min;
             return this.words.slice(min, max);
+        },
+
+        /**
+         * Sets the backing value of the surrounding words variable.
+         * @param {Number} index The index in the back array at which to update the words.
+         * @param {Array<Word>} value The updated words.
+         */
+        setSurroundingWords(index, value) {
+            const BUFFER = 2; // The number of words to take on each side TODO: Global constant
+
+            const startIndex = this.getSurroundingWordMinIndex(index, BUFFER);
+            console.log(this.words);
+            this.words.splice(startIndex, value.length - 1, value);
+            console.log(this.words);
         },
 

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

@@ -112 +112 @@
         /** @type {Array<TWord>} */
         surroundingWords: Array,
-        word: TWord
+        wordIndex: Number
     },
     data() {
         return {
             isMounted: false,
-            /** @type {Array<Word>} */
-            // mySurroundingWords: [],
             canAdjustWordStartTime: false,
             canAdjustWordEndTime: false,
@@ -125 +123 @@
         }
     },
-    emits: [ "update:word" ],
+    emits: [ "update:surroundingWords" ],
     computed: {
+        word() {
+            return this.surroundingWords[this.wordIndex];
+        },
         myWord() {
             return this.mySurroundingWords[this.wordIndex];
@@ -156 +157 @@
         rightHandleLeft() {
             return `calc(${this.myWord.left}px + ${this.myWord.length}px)`;
-        },
-        wordIndex() {
-            return this.surroundingWords.indexOf(this.word);
         },
         audioSnippetLength() {
@@ -212 +210 @@
             this.wordsContainerWidth = newValue;
         },
-        convertSurroundingWords() {
-            const myWords = [];
-
-            if (this.surroundingWords.length === 0) {
-                return myWords;
-            }
-
-            for (const word of this.surroundingWords) {
-                myWords.push(this.convertWord(word));
-            }
-
-            return myWords;
-        },
         scaleTime(time) {
             return time * this.scalingFactor;
@@ -275 +260 @@
             this.adjustWordStartTime(event.movementX);
 
-            this.myWordToWord();
+            this.updateSurroundingWords();
         },
         onMaxHandleMouseMove(event) {
@@ -296 +281 @@
             word.length += event.movementX;
 
-            this.myWordToWord();
+            this.updateSurroundingWords();
         },
         onDocumentMouseUp() {
@@ -302 +287 @@
             this.canAdjustWordEndTime = 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);
-        },
         adjustWordStartTime(amount) {
-            const word = this.mySurroundingWords[this.wordIndex];
+            const word = this.myWord;
             word.left += amount;
             word.length -= amount;
@@ -361 +336 @@
                 }
             }
+        },
+        updateSurroundingWords() {
+            const updatedWords = [];
+
+            for (let i = 0; i < this.mySurroundingWords.length; i++) {
+                updatedWords.push(
+                    this.convertMyWord(this.mySurroundingWords[i], this.surroundingWords[i])
+                );
+            }
+
+            console.log(updatedWords);
+            this.$emit("update:surroundingWords", updatedWords);
+        },
+        convertMyWord(myWord, actualWord) {
+            const startTime = (myWord.left + this.wordLeftOffsetPx) / this.scalingFactor;
+            const endTime = (myWord.right() + this.wordLeftOffsetPx) / this.scalingFactor;
+
+            return new TWord(actualWord.word, startTime, endTime, actualWord.id, actualWord.shouldHighlight, actualWord.deletionAttempts);
         }
     },