Changeset 35516

Timestamp:

2021-09-29T13:37:53+13:00 (3 years ago)

Author:

cstephen

Message:

Improve word insertion and deletion

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue (modified) (4 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" :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" onpaste="return false;" :class="{ 'word-highlight-applied': word.shouldHighlight }"
-                    @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" @keyup="onEditorKeyUp($event, index)" @focus="onEditorFocus(index)" />
+                    @beforeinput="onEditorBeforeInput($event, index)" @focusout="onEditorFocusOut(index)" @keyup="onEditorKeyUp($event, index)" @focus="onEditorFocus(index)" />
                 <span>&nbsp;</span>
             </li>
@@ -88 +88 @@
 import AudioTimeBar from "./AudioTimeBar.vue"
 import WordTimingSelector from "./WordTimingSelector.vue"
-import Util from "../js/Util";
+import Util, { log } from "../js/Util";
 
 export class Word {
@@ -179 +179 @@
         /**
          * Invoked when the value of a word changes.
-         * @param event The input event.
+         * @param {InputEvent} event The input event.
          * @param {Number} index The index of the word that has changed.
          */
-        onEditorInput(event, index) {
+        onEditorBeforeInput(event, index) {
+            log(event);
+
+            const deletionEvents = [
+                "deleteWordForward", "deleteWordBackward",
+                "deleteSoftLineBackward", "deleteSoftLineForward", "deleteEntireSoftLine",
+                "deleteHardLineBackward", "deleteHardLineForward",
+                "deleteByDrag", "deleteByCut",
+                "deleteContent", "deleteContentBackward", "deleteContentForward"
+            ];
+
+            const insertionEvents = [
+                "insertText", "insertReplacementText",
+                "insertLineBreak", "insertParagraph",
+                "insertOrderedList", "insertUnorderedList", "insertHorizontalRule",
+                "insertFromYank", "insertFromDrop", "insertFromPaste", "insertFromPasteAsQuotation",
+                "insertTranspose", "insertCompositionText", "insertLink"
+            ];
+
+            if (event.inputType === "historyUndo" || event.inputType === "historyRedo") {
+                event.preventDefault();
+                return;
+            }
+
             /** @type {Word} */
             const word = this.words[index];
 
-            if (event.inputType === "insertText") {
-                // Insert a new word if whitespace is entered on an existing word
-                if (event.data === " " && word.word !== " ") {
-                    const newStartTime = word.startTime + ((word.endTime - word.startTime) / 2);
-                    const newWord = new Word("", newStartTime, word.endTime);
-                    this.words.splice(index + 1, 0, newWord);
-
-                    // We have to give the element some time to render, even though the ref is registered immediately
-                    setTimeout(() => this.$refs[newWord.id].focus(), 50);
+            if (deletionEvents.includes(event.inputType) && word.word.length === 0) {
+                event.preventDefault(); // Prevents the event from being propagated to the newly focused input
+                this.setFocus(index, event.inputType === "deleteContentBackward"); // Shifting focus off an empty input, hence the word will be removed
+            }
+
+            if (insertionEvents.includes(event.inputType)) {
+                if (event.data === " ") {
+                    // Only insert if the current word isn't blank, to prevent 'jumping jacks' as the duplicate empty boxes are removed
+                    if (word.word !== "") {
+                        const newStartTime = word.startTime + ((word.endTime - word.startTime) / 2);
+                        const newWord = new Word("", newStartTime, word.endTime);
+                        this.words.splice(index + 1, 0, newWord);
+
+                        // We have to give the element some time to be mounted before we can focus it
+                        setTimeout(() => this.$refs[newWord.id].focus(), 50);
+                    }
+
+                    event.preventDefault();
                 }
-
-                word.word = word.word.replace(" ", "");
             }
         },
@@ -218 +248 @@
             const word = this.words[index];
 
-            // Remove the word if the user is repetitively hitting backspace/delete on an empty cell
-            if (event.code === "Backspace" || event.code === "Delete") {
-                if (word.word.length < 1) {
-                    if (word.deletionAttempts === 1) {
-                        this.words.splice(index, 1);
-
-                        this.setFocus(index, event.code === "Backspace");
-                    }
-
-                    word.deletionAttempts++;
-                }
-            }
-            else {
-                word.deletionAttempts = 0;
-            }
-
-            // Focus on the next word if the user is moving right with their caret at the word's end
+            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) {
-            //         setFocus(false, this);
+            //         this.setFocus(index, false);
             //     }
             // }
 
-            // Focus on the previous word if the user is moving left with their caret at the word's start
+            // // 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) {
-            //         setFocus(true, this);
+            //         this.setFocus(index, true);
             //     }
             // }