Changeset 35538 for main/trunk
- Timestamp:
- 2021-10-01T11:56:50+13:00 (3 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue
r35537 r35538 14 14 <input :size="word.word.length === 0 ? 1 : word.word.length" :ref="word.id" 15 15 class="editor-word" v-model="word.word" type="text" onpaste="return false;" :class="{ 'word-highlight-applied': word.shouldHighlight }" 16 @beforeinput="onEditorBeforeInput($event, index)" @focusout="onEditorFocusOut(index)" @ keyup="onEditorKeyUp($event, index)" @focus="onEditorFocus(index)" />16 @beforeinput="onEditorBeforeInput($event, index)" @focusout="onEditorFocusOut(index)" @focus="onEditorFocus(index)" /> 17 17 <span> </span> 18 18 </li> … … 20 20 </div> 21 21 22 <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" :word="selectedWord" v-if=" isProduction" />22 <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" :word="selectedWord" v-if="enableEditing" /> 23 23 24 24 <div class="editor-controls"> … … 88 88 import AudioTimeBar from "./AudioTimeBar.vue" 89 89 import WordTimingSelector from "./WordTimingSelector.vue" 90 import Util , { log }from "../js/Util";90 import Util from "../js/Util"; 91 91 92 92 export class Word { … … 132 132 words: [], 133 133 lastHighlightedWordIndex: 0, 134 selectedIndex: 0, 135 isProduction: false 134 selectedIndex: 0 136 135 } 137 136 }, … … 184 183 */ 185 184 onEditorBeforeInput(event, index) { 186 log(event);187 188 185 // https://rawgit.com/w3c/input-events/v1/index.html#interface-InputEvent-Attributes 189 186 const deletionEvents = [ … … 195 192 ]; 196 193 194 const backwardDeletionEvents = [ 195 "deleteWordBackward", "deleteSoftLineBackward", "deleteHardLineBackward", "deleteContentBackward" 196 ] 197 198 const forwardDeletionEvents = [ 199 "deleteWordForward", "deleteSoftLineForward", "deleteHardLineForward", "deleteContentForward" 200 ] 201 197 202 const insertionEvents = [ 198 203 "insertText", "insertReplacementText", … … 211 216 const word = this.words[index]; 212 217 const inputIndex = this.$refs[word.id].selectionStart; 218 const inputEndIndex = this.$refs[word.id].selectionEnd; 213 219 214 220 if (deletionEvents.includes(event.inputType)) { 215 221 if (word.word.length === 0) { // Remove the word 216 this.setFocus(index, event.inputType === "deleteContentBackward"); // Shifting focus off an empty input, hence the word will be removed 217 // TODO: Shuffle timestamps 222 if (index === 0) { 223 this.mergeWordForward(word, index); 224 } 225 else if (index === this.words.length - 1) { 226 this.mergeWordBackward(word, index); 227 } 228 else if (backwardDeletionEvents.includes(event.inputType)) { 229 this.mergeWordBackward(word, index); 230 } 231 else if (forwardDeletionEvents.includes(event.inputType)) { 232 this.mergeWordForward(word, index); 233 } 218 234 219 235 event.preventDefault(); 220 236 } 221 else if (inputIndex === 0 && event.inputType === "deleteContentBackward") { // Join with last word237 else if (inputIndex === 0 && backwardDeletionEvents.includes(event.inputType) && !inputEndIndex) { // Join with last word 222 238 if (index === 0) { 223 239 return; 224 240 } 225 else if (this.words.length > 1) { 226 this.words[index - 1].endTime = word.endTime; 227 this.words[index - 1].word += word.word; 228 229 word.word = ""; 230 this.setFocus(index, true); 241 else { 242 this.mergeWordBackward(word, index); 231 243 } 232 244 233 245 event.preventDefault(); 234 246 } 235 else if (inputIndex === word.word.length && event.inputType === "deleteContentForward") { // Join with next word247 else if (inputIndex === word.word.length && forwardDeletionEvents.includes(event.inputType)) { // Join with next word 236 248 if (index === this.words.length - 1) { 237 249 return; 238 250 } 239 else if (this.words.length > 1) { 240 this.words[index + 1].startTime = word.startTime; 241 this.words[index + 1].word = word.word + this.words[index + 1].word; 242 243 word.word = ""; 244 this.setFocus(index, false); 251 else { 252 this.mergeWordForward(word, index); 245 253 } 246 254 … … 295 303 } 296 304 }, 305 mergeWordForward(word, index) { 306 if (this.words.length < 2) { 307 return; 308 } 309 310 this.words[index + 1].startTime = word.startTime; 311 this.words[index + 1].word = word.word + this.words[index + 1].word; 312 313 word.word = ""; 314 this.setFocus(index, false); 315 }, 316 mergeWordBackward(word, index) { 317 if (this.words.length < 2) { 318 return; 319 } 320 321 this.words[index - 1].endTime = word.endTime; 322 this.words[index - 1].word += word.word; 323 324 word.word = ""; 325 this.setFocus(index, true); 326 }, 297 327 onEditorFocus(index) { 298 328 if (this.currentPlaybackTime < this.words[index].startTime || this.currentPlaybackTime > this.words[index].endTime) { … … 308 338 this.words.splice(index, 1); 309 339 } 310 },311 onEditorKeyUp(event, index) {312 /** @type {Word} */313 const word = this.words[index];314 315 if (event.code === "Spacebar" && word.length > 0) {316 // - if at either edge, create new word before/after317 // - else split word318 }319 320 // // Focus on the next word if the user is moving right with their caret at the word's end321 // if (event.code === "ArrowRight") {322 // const inputElement = this.$refs[word.id];323 324 // if (inputElement.selectionStart === word.word.length) {325 // this.setFocus(index, false);326 // }327 // }328 329 // // Focus on the previous word if the user is moving left with their caret at the word's start330 // if (event.code === "ArrowLeft") {331 // const inputElement = this.$refs[word.id];332 333 // if (inputElement.selectionStart === 0) {334 // this.setFocus(index, true);335 // }336 // }337 340 }, 338 341 … … 349 352 } 350 353 else { 351 focusIndex = index === this.words.length - 1 ? this.words.length - 1: index + 1;354 focusIndex = index === this.words.length - 1 ? index : index + 1; 352 355 } 353 356 … … 366 369 367 370 if (!focusLeft) { 368 this.$refs[focusId].setSelectionRange( -1, 0);371 this.$refs[focusId].setSelectionRange(0, 0); 369 372 } 370 373 } … … 396 399 beforeMount() { 397 400 this.words = getWords(this.transcription); 398 this.isProduction = process.env.NODE_ENV !== "production";399 401 } 400 402 } -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/WordTimingSelector.vue
r35525 r35538 9 9 </div> 10 10 11 <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: leftHandleLeft }" :class="{ 'large-shift-handle': canShiftMinValue }"12 @mousemove="onMinHandleMouseMove" @mouseup="onHandleMouseUp" @mousedown="canShiftMinValue = true" >11 <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: leftHandleLeft }" 12 @mousemove="onMinHandleMouseMove" @mouseup="onHandleMouseUp" @mousedown="canShiftMinValue = true" :disabled="isProduction"> 13 13 first_page 14 14 </span> … … 73 73 top: -100%; 74 74 background-color: var(--highlighted-word-bg); 75 }76 77 .large-shift-handle {78 border: 100px solid transparent;79 75 } 80 76 </style> … … 113 109 canShiftMinValue: false, 114 110 canShiftMaxValue: false, 115 wordsContainerWidth: 0 111 wordsContainerWidth: 0, 112 isProduction: false 116 113 } 117 114 }, … … 238 235 } 239 236 }, 237 beforeMount() { 238 this.isProduction = process.env.NODE_ENV !== "production"; 239 }, 240 240 mounted() { 241 241 this.isMounted = true;
Note:
See TracChangeset
for help on using the changeset viewer.