Changeset 35396

Timestamp:

2021-09-14T17:01:31+12:00 (3 years ago)

Author:

cstephen

Message:

Improvements to word editing

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue (modified) (5 diffs)

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

@@ -24 +24 @@
                     <input :size="word.word.length <= 1 ? 1 : word.word.length - 1" :ref="word.id"
                         class="editor-word" v-model="word.word" type="text"
-                        @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" />
+                        @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" @keydown="onEditorKeyDown($event, index)" />
                     <span>&nbsp;</span>
                 </li>
@@ -85 +85 @@
     /**
      * Initialises a new instance of the Word class.
-     * @param {String} id The ID of the word.
      * @param {String} word The word.
      * @param {Number} startTime The time within the audio that this word starts being spoken.
@@ -105 +104 @@
         /** @type {Boolean} A value indicating whether this word should be highlighted. */
         this.shouldHighlight = false;
+
+        /** @type {Number} The number of times the user has tried to delete this word. */
+        this.deletionAttempts = 0;
     }
 }
@@ -134 +136 @@
          */
         onEditorInput(event, index) {
-            console.log(event);
-
             /** @type {Word} */
             const word = this.words[index];
 
             if (event.inputType === "insertText") {
-                if (event.data === " ") {
-                    word.word = word.word.replace(" ", "");
-
+                // Insert a new word if whitespace is entered on an existing word
+                if (event.data === " " && word.word !== " ") {
                     // TODO: Proper timing metadata
                     const newWord = new Word("", word.startTime, word.endTime);
@@ -150 +149 @@
                     setTimeout(() => this.$refs[newWord.id].focus(), 50);
                 }
+
+                word.word = word.word.replace(" ", "");
             }
         },
         onEditorFocusOut(index) {
+            // Remove empty words when they lose focus
             if (this.words[index].word === "") {
                 this.words.splice(index, 1);
+            }
+        },
+        onEditorKeyDown(event, index) {
+            /** @type {Word} */
+            const word = this.words[index];
+
+            // Remove the word if the user is repetitively hitting backspace/backspace 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);
+
+                        setFocus(event.code === "Backspace", this);
+                    }
+
+                    console.log(word.deletionAttempts);
+                    word.deletionAttempts++;
+                }
+            }
+
+            // 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);
+                }
+            }
+
+            // 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);
+                }
+            }
+
+            /**
+             * Gets the index of an adjacent word to focus on.
+             * @param {Boolean} focusLeft Whether to focus on the word to the left or right of the current index.
+             * @param that The view model.
+             */
+            function getFocusIndex(focusLeft, that) {
+                let focusIndex = 0;
+
+                if (focusLeft) {
+                    focusIndex = index === 0 ? 0 : index - 1;
+                }
+                else {
+                    focusIndex = index === that.words.length - 1 ? that.words.length - 1 : index + 1;
+                }
+
+                return focusIndex;
+            }
+
+            /**
+             * Sets the focus to an adjacent word.
+             * @param {Boolean} focusLeft Whether to focus on the word to the left or right of the current index.
+             * @param that The view model.
+             */
+            function setFocus(focusLeft, that) {
+                const focusIndex = getFocusIndex(focusLeft, that);
+                const focusId = that.words[focusIndex].id;
+                that.$refs[focusId].focus();
+
+                if (!focusLeft) {
+                    that.$refs[focusId].setSelectionRange(-1, 0);
+                }
             }
         }