Changeset 35491 for main

Timestamp:

2021-09-27T14:08:38+13:00 (3 years ago)

Author:

cstephen

Message:

Add basic time selection for words

Location:

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

Files:

• .eslintrc.js (modified) (1 diff)
• src/components/WordTimingSelector.vue (modified) (7 diffs)
• src/styles/_material.scss (modified) (5 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/.eslintrc.js

@@ -12 +12 @@
     },
     rules: {
-        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
         "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
         "space-before-function-paren": "off",

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

@@ -4 +4 @@
 
     <div class="words-container" ref="wordsContainer">
-        <div class="word" v-for="word in mySurroundingWords" :key="word.id" :style="{ left: word.left, width: word.length }"
-            :class="[ shouldHoist(word) ? 'hoisted' : 'surround-word' ]">
+        <div class="word" v-for="word in mySurroundingWords" :key="word.id" :style="{ left: `${word.left}px`, width: `${word.length}px` }"
+            :class="{ 'hoisted': shouldHoist(word) }">
             <span>{{ word.word }}</span>
         </div>
+
+        <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: leftHandleLeft }"
+            @mousemove="onMinHandleMouseMove" @mouseup="onHandleMouseUp" @mousedown="canShiftMinValue = true">
+            first_page
+        </span>
+        <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: rightHandleLeft }" @mousemove="onMaxHandleMouseMove">last_page</span>
     </div>
 
@@ -17 +23 @@
 .word-timing-selector-root {
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     justify-content: center;
     gap: 1em;
@@ -42 +48 @@
 }
 
-.surround-word {
-    top: 50%;
+.word-handle {
+    @extend .theme-flat;
+
+    position: absolute;
+    top: -105%;
+
+    color: var(--fg-color);
+    cursor: pointer;
+    user-select: none;
+
+    animation: pulse 0.8s linear 0s infinite alternate;
+}
+
+@keyframes pulse {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0.2;
+    }
 }
 
 .hoisted {
-    top: -50%;
+    top: -100%;
     background-color: var(--highlighted-word-bg);
 }
@@ -61 +85 @@
         this.startTime = startTime;
         this.endTime = endTime;
-        this.left = `${left}px`;
-        this.length = `${length}px`;
+        this.left = left;
+        this.length = length;
     }
 }
@@ -77 +101 @@
         return {
             isMounted: false,
-            mySurroundingWords: []
-        }
-    },
-    emits: [ "update:word", "update:word" ],
+            /** @type {Array<Word>} */
+            mySurroundingWords: [],
+            canShiftMinValue: false,
+            canShiftMaxValue: false
+        }
+    },
+    emits: [ "update:word" ],
     computed: {
         minTime() {
@@ -95 +122 @@
 
             return Util.formatSecondsTimeString(this.surroundingWords[this.surroundingWords.length - 1].endTime, false, 2);
+        },
+        leftHandleLeft() {
+            return `calc(${this.getWord().left}px - 1em)`;
+        },
+        rightHandleLeft() {
+            return `calc(${this.getWord().left}px + ${this.getWord().length}px)`;
+        },
+        wordIndex() {
+            return this.surroundingWords.indexOf(this.word);
         }
     },
@@ -127 +163 @@
             }
 
-            // myWords.splice(this.surroundingWords.indexOf(this.word), 1);
             this.mySurroundingWords = myWords;
         },
         shouldHoist(word) {
             return word.startTime === this.word.startTime && word.word === this.word.word;
+        },
+        getWord() {
+            return this.mySurroundingWords[this.wordIndex];
+        },
+        /**
+         * @param {MouseEvent} event
+         */
+        onMinHandleMouseMove(event) {
+            if (event.buttons < 1) {
+                return;
+            }
+
+            const word = this.getWord();
+            word.left += event.movementX;
+            word.length -= event.movementX;
+        },
+        onMaxHandleMouseMove(event) {
+            if (event.buttons < 1) {
+                return;
+            }
+
+            const word = this.getWord();
+            word.length += event.movementX;
+        },
+        onHandleMouseUp() {
+            this.canShiftMinValue = false;
+            this.canShiftMaxValue = false;
         }
     },

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss

@@ -333 +333 @@
     border-radius: 50%;
 
-    animation: 1.5s linear 0s infinite running rotate360;
+    animation: rotate360 1.5s linear 0s infinite running;
 }
 
@@ -429 +429 @@
     --bg-color-raw: var(--primary-bg-color);
     --fg-color: rgb(var(--primary-fg-color));
+    --fg-color-faw: var(--primary-fg-color);
 }
 
@@ -435 +436 @@
     --bg-color-raw: var(--primary-bg-color-l1);
     --fg-color: rgb(var(--primary-fg-color));
+    --fg-color-raw: var(--primary-fg-color);
 }
 
@@ -446 +448 @@
     --bg-color-raw: transparent;
     --fg-color: rgb(var(--primary-bg-color));
+    --fg-color-raw: var(--primary-bg-color);
 
     box-shadow: none;
@@ -458 +461 @@
     --bg-color-raw: var(--accent-bg-color);
     --fg-color: rgb(var(--accent-fg-color));
+    --fg-color-raw: var(--accent-fg-color);
 }