Changeset 35538 for main

Timestamp:

2021-10-01T11:56:50+13:00 (3 years ago)

Author:

cstephen

Message:

Implement word merging when deleting. Show word timing selector in production, but disable handles

Location:

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

Files:

• TranscriptionItemEditor.vue (modified) (12 diffs)
• WordTimingSelector.vue (modified) (4 diffs)

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

@@ -14 +14 @@
                 <input :size="word.word.length === 0 ? 1 : word.word.length" :ref="word.id"
                     class="editor-word" v-model="word.word" type="text" onpaste="return false;" :class="{ 'word-highlight-applied': word.shouldHighlight }"
-                    @beforeinput="onEditorBeforeInput($event, index)" @focusout="onEditorFocusOut(index)" @keyup="onEditorKeyUp($event, index)" @focus="onEditorFocus(index)" />
+                    @beforeinput="onEditorBeforeInput($event, index)" @focusout="onEditorFocusOut(index)" @focus="onEditorFocus(index)" />
                 <span>&nbsp;</span>
             </li>
@@ -20 +20 @@
     </div>
 
-    <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" :word="selectedWord" v-if="isProduction" />
+    <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" :word="selectedWord" v-if="enableEditing" />
 
     <div class="editor-controls">
@@ -88 +88 @@
 import AudioTimeBar from "./AudioTimeBar.vue"
 import WordTimingSelector from "./WordTimingSelector.vue"
-import Util, { log } from "../js/Util";
+import Util from "../js/Util";
 
 export class Word {
@@ -132 +132 @@
             words: [],
             lastHighlightedWordIndex: 0,
-            selectedIndex: 0,
-            isProduction: false
+            selectedIndex: 0
         }
     },
@@ -184 +183 @@
          */
         onEditorBeforeInput(event, index) {
-            log(event);
-
             // https://rawgit.com/w3c/input-events/v1/index.html#interface-InputEvent-Attributes
             const deletionEvents = [
@@ -195 +192 @@
             ];
 
+            const backwardDeletionEvents = [
+                "deleteWordBackward", "deleteSoftLineBackward", "deleteHardLineBackward", "deleteContentBackward"
+            ]
+
+            const forwardDeletionEvents = [
+                "deleteWordForward", "deleteSoftLineForward", "deleteHardLineForward", "deleteContentForward"
+            ]
+
             const insertionEvents = [
                 "insertText", "insertReplacementText",
@@ -211 +216 @@
             const word = this.words[index];
             const inputIndex = this.$refs[word.id].selectionStart;
+            const inputEndIndex = this.$refs[word.id].selectionEnd;
 
             if (deletionEvents.includes(event.inputType)) {
                 if (word.word.length === 0) { // Remove the word
-                    this.setFocus(index, event.inputType === "deleteContentBackward"); // Shifting focus off an empty input, hence the word will be removed
-                    // TODO: Shuffle timestamps
+                    if (index === 0) {
+                        this.mergeWordForward(word, index);
+                    }
+                    else if (index === this.words.length - 1) {
+                        this.mergeWordBackward(word, index);
+                    }
+                    else if (backwardDeletionEvents.includes(event.inputType)) {
+                        this.mergeWordBackward(word, index);
+                    }
+                    else if (forwardDeletionEvents.includes(event.inputType)) {
+                        this.mergeWordForward(word, index);
+                    }
 
                     event.preventDefault();
                 }
-                else if (inputIndex === 0 && event.inputType === "deleteContentBackward") { // Join with last word
+                else if (inputIndex === 0 && backwardDeletionEvents.includes(event.inputType) && !inputEndIndex) { // Join with last word
                     if (index === 0) {
                         return;
                     }
-                    else if (this.words.length > 1) {
-                        this.words[index - 1].endTime = word.endTime;
-                        this.words[index - 1].word += word.word;
-
-                        word.word = "";
-                        this.setFocus(index, true);
+                    else {
+                        this.mergeWordBackward(word, index);
                     }
 
                     event.preventDefault();
                 }
-                else if (inputIndex === word.word.length && event.inputType === "deleteContentForward") { // Join with next word
+                else if (inputIndex === word.word.length && forwardDeletionEvents.includes(event.inputType)) { // Join with next word
                     if (index === this.words.length - 1) {
                         return;
                     }
-                    else if (this.words.length > 1) {
-                        this.words[index + 1].startTime = word.startTime;
-                        this.words[index + 1].word = word.word + this.words[index + 1].word;
-
-                        word.word = "";
-                        this.setFocus(index, false);
+                    else {
+                        this.mergeWordForward(word, index);
                     }
 
@@ -295 +303 @@
             }
         },
+        mergeWordForward(word, index) {
+            if (this.words.length < 2) {
+                return;
+            }
+
+            this.words[index + 1].startTime = word.startTime;
+            this.words[index + 1].word = word.word + this.words[index + 1].word;
+
+            word.word = "";
+            this.setFocus(index, false);
+        },
+        mergeWordBackward(word, index) {
+            if (this.words.length < 2) {
+                return;
+            }
+
+            this.words[index - 1].endTime = word.endTime;
+            this.words[index - 1].word += word.word;
+
+            word.word = "";
+            this.setFocus(index, true);
+        },
         onEditorFocus(index) {
             if (this.currentPlaybackTime < this.words[index].startTime || this.currentPlaybackTime > this.words[index].endTime) {
@@ -308 +338 @@
                 this.words.splice(index, 1);
             }
-        },
-        onEditorKeyUp(event, index) {
-            /** @type {Word} */
-            const word = this.words[index];
-
-            if (event.code === "Spacebar" && word.length > 0) {
-                // - if at either edge, create new word before/after
-                // - else split word
-            }
-
-            // // Focus on the next word if the user is moving right with their caret at the word's end
-            // if (event.code === "ArrowRight") {
-            //     const inputElement = this.$refs[word.id];
-
-            //     if (inputElement.selectionStart === word.word.length) {
-            //         this.setFocus(index, false);
-            //     }
-            // }
-
-            // // Focus on the previous word if the user is moving left with their caret at the word's start
-            // if (event.code === "ArrowLeft") {
-            //     const inputElement = this.$refs[word.id];
-
-            //     if (inputElement.selectionStart === 0) {
-            //         this.setFocus(index, true);
-            //     }
-            // }
         },
 
@@ -349 +352 @@
             }
             else {
-                focusIndex = index === this.words.length - 1 ? this.words.length - 1 : index + 1;
+                focusIndex = index === this.words.length - 1 ? index : index + 1;
             }
 
@@ -366 +369 @@
 
             if (!focusLeft) {
-                this.$refs[focusId].setSelectionRange(-1, 0);
+                this.$refs[focusId].setSelectionRange(0, 0);
             }
         }
@@ -396 +399 @@
     beforeMount() {
         this.words = getWords(this.transcription);
-        this.isProduction = process.env.NODE_ENV !== "production";
     }
 }

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

@@ -9 +9 @@
         </div>
 
-        <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">
+        <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: leftHandleLeft }"
+            @mousemove="onMinHandleMouseMove" @mouseup="onHandleMouseUp" @mousedown="canShiftMinValue = true" :disabled="isProduction">
             first_page
         </span>
@@ -73 +73 @@
     top: -100%;
     background-color: var(--highlighted-word-bg);
-}
-
-.large-shift-handle {
-    border: 100px solid transparent;
 }
 </style>
@@ -113 +109 @@
             canShiftMinValue: false,
             canShiftMaxValue: false,
-            wordsContainerWidth: 0
+            wordsContainerWidth: 0,
+            isProduction: false
         }
     },
@@ -238 +235 @@
         }
     },
+    beforeMount() {
+        this.isProduction = process.env.NODE_ENV !== "production";
+    },
     mounted() {
         this.isMounted = true;