Changeset 35506 for main

Timestamp:

2021-09-28T12:14:10+13:00 (3 years ago)

Author:

cstephen

Message:

Improve WordTimingSelector logic and prevent invalid movement

Location:

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

Files:

• TranscriptionItemEditor.vue (modified) (3 diffs)
• WordTimingSelector.vue (modified) (11 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" /> -->
+    <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" :word="selectedWord" />
 
     <div class="editor-controls">
@@ -87 +87 @@
 import AudioPlayback from "../js/AudioPlaybackModule"
 import AudioTimeBar from "./AudioTimeBar.vue"
-// import WordTimingSelector from "./WordTimingSelector.vue"
+import WordTimingSelector from "./WordTimingSelector.vue"
 import Util from "../js/Util";
 
@@ -121 +121 @@
     name: "TranscriptionItemEditor",
     components: {
-        AudioTimeBar//,
-        // WordTimingSelector
+        AudioTimeBar,
+        WordTimingSelector
     },
     props: {

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

@@ -1 +1 @@
 <template>
 <div class="word-timing-selector-root">
-    <span>{{ minTime }}</span>
+    <span>{{ minTimeString }}</span>
 
     <div class="words-container" ref="wordsContainer">
@@ -9 +9 @@
         </div>
 
-        <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: leftHandleLeft }"
+        <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: leftHandleLeft }" :class="{ 'large-shift-handle': canShiftMinValue }"
             @mousemove="onMinHandleMouseMove" @mouseup="onHandleMouseUp" @mousedown="canShiftMinValue = true">
             first_page
@@ -16 +16 @@
     </div>
 
-    <span>{{ maxTime }}</span>
+    <span>{{ maxTimeString }}</span>
 </div>
 </template>
@@ -73 +73 @@
     top: -100%;
     background-color: var(--highlighted-word-bg);
+}
+
+.large-shift-handle {
+    border: 100px solid transparent;
 }
 </style>
@@ -88 +92 @@
         this.length = length;
     }
+
+    right() {
+        return this.left + this.length;
+    }
 }
 
@@ -109 +117 @@
     emits: [ "update:word" ],
     computed: {
-        minTime() {
+        myWord() {
+            console.log("updated");
+            return this.convertWord(this.word);
+        },
+        minTimeString() {
             if (this.surroundingWords.length === 0) {
                 return 0;
@@ -116 +128 @@
             return Util.formatSecondsTimeString(this.surroundingWords[0].startTime, false, 2);
         },
-        maxTime() {
+        maxTimeString() {
             if (this.surroundingWords.length === 0) {
                 return 0;
@@ -131 +143 @@
         wordIndex() {
             return this.surroundingWords.indexOf(this.word);
+        },
+        audioSnippetLength() {
+            return this.surroundingWords[this.surroundingWords.length - 1].endTime - this.surroundingWords[0].startTime;
+        },
+        /**
+         * Gets the amount of pixel space in which words can be position on-screen.
+         */
+        wordSpacePx() {
+            if (!this.isMounted) {
+                return 0;
+            }
+            else {
+                return this.$refs.wordsContainer.offsetWidth;
+            }
+        },
+        /**
+         * Gets the factor used to scale word's audio parameters into on-screen positional values.
+         * @returns {Number} The scaling factor.
+         */
+        scalingFactor() {
+            return this.wordSpacePx / this.audioSnippetLength;
+        },
+        /**
+         * Gets the required pixel offset of a word's left position.
+         * @returns {Number} The offset.
+         */
+        wordLeftOffsetPx() {
+            return this.surroundingWords[0].startTime * this.scalingFactor;
         }
     },
     watch: {
         surroundingWords() {
-            this.getMySurroundingWords();
+            this.mySurroundingWords = this.convertSurroundingWords();
         }
     },
     methods: {
-        getMySurroundingWords() {
-            if (!this.isMounted) {
-                return;
-            }
-
+        convertSurroundingWords() {
             const myWords = [];
+
             if (this.surroundingWords.length === 0) {
                 return myWords;
             }
 
-            const audioLength = this.surroundingWords[this.surroundingWords.length - 1].endTime - this.surroundingWords[0].startTime;
-            const sliderLengthPx = this.$refs.wordsContainer.offsetWidth;
-
-            const scalingFactor = sliderLengthPx / audioLength;
-
-            const offset = this.surroundingWords[0].startTime * scalingFactor;
-
             for (const word of this.surroundingWords) {
-                const left = (word.startTime * scalingFactor - offset);
-                const length = (word.endTime - word.startTime) * scalingFactor;
-
-                myWords.push(new Word(word.word, word.startTime, word.endTime, left, length));
-            }
-
-            this.mySurroundingWords = myWords;
+                myWords.push(this.convertWord(word));
+            }
+
+            return myWords;
+        },
+        convertWord(word) {
+            const left = (word.startTime * this.scalingFactor - this.wordLeftOffsetPx);
+            const length = (word.endTime - word.startTime) * this.scalingFactor;
+
+            return new Word(word.word, word.startTime, word.endTime, left, length);
         },
         shouldHoist(word) {
@@ -180 +213 @@
 
             const word = this.getWord();
+
+            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;
@@ -189 +231 @@
 
             const word = this.getWord();
+
+            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;
         },
@@ -198 +251 @@
     mounted() {
         this.isMounted = true;
-        this.getMySurroundingWords();
+        this.mySurroundingWords = this.convertSurroundingWords();
     }
 }