Changeset 35603

Timestamp:

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

Author:

cstephen

Message:

Fix last

Location:

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

Files:

• TranscriptionItemEditor.vue (modified) (5 diffs)
• WordTimingSelector.vue (modified) (2 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">
-                <!-- :size="word.word.length === 0 ? 1 : word.word.length" -->
-                <input :ref="word.id"
+                <input :size="word.word.length === 0 ? 1 : word.word.length" :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)" />
@@ -21 +20 @@
     </div>
 
-    <word-timing-selector class="word-timing-selector" v-model:surroundingWords="surroundingWords" :wordIndex="surroundingWordPrincipleIndex" v-if="enableEditing" />
+    <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" :wordIndex="surroundingWordPrincipleIndex" @wordUpdated="onWordUpdated" v-if="enableEditing" />
 </div>
 </template>
@@ -128 +127 @@
             }
         },
-        surroundingWords: {
-            get() {
-                return this.getSurroundingWords(this.selectedIndex);
-            },
-            set(value) {
-                this.setSurroundingWords(this.selectedIndex, value);
-            }
+        surroundingWords() {
+            return this.getSurroundingWords(this.selectedIndex);
         },
         ...mapState({
@@ -208 +202 @@
 
         getSurroundingWords(index) {
-            const BUFFER = 2; // The number of words to take on each side
+            const BUFFER = 2; // The number of words to take on each side TODO: Global constant
 
             const min = this.getSurroundingWordMinIndex(index, BUFFER);
@@ -221 +215 @@
         },
 
-        /**
-         * 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);
+        onWordUpdated(relativeIndex, word) {
+            const BUFFER = 2; // The number of words to take on each side
+
+            const min = this.getSurroundingWordMinIndex(this.selectedIndex, BUFFER);
+
+            this.words[min + relativeIndex] = word;
         },
 

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

@@ -123 +123 @@
         }
     },
-    emits: [ "update:surroundingWords" ],
+    emits: [ "wordUpdated" ],
     computed: {
         word() {
@@ -338 +338 @@
         },
         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);
+                const updatedWord = this.convertMyWord(this.mySurroundingWords[i], this.surroundingWords[i]);
+                this.$emit("wordUpdated", i, updatedWord);
+            }
         },
         convertMyWord(myWord, actualWord) {