Merge pull request #2030 from frankrousseau/main

[players] Add a vector eraser to the annotation players

Author: frankrousseau

src/components/modals/ShortcutModal.vue

@@ -112,6 +112,7 @@ const shortcutGroups = computed(() => [
     icon: markRaw(Pencil),
     shortcuts: [
       { keys: ['d'], text: t('keyboard.draw') },
+      { keys: ['e'], text: t('keyboard.erase') },
       { keys: ['Shift', 'Mouse Drag'], text: t('keyboard.straight_line') },
       { keys: ['Ctrl', 'Mouse Drag'], text: t('keyboard.constant_width') },
       { keys: ['Ctrl', 'z'], text: t('keyboard.undo') },

src/components/pages/Playlist.vue

@@ -1238,22 +1238,30 @@ export default {
     onNewEntityDropped(info) {
       let entity
       this.setSilent()
+      const entityId = info.after.entity_id
       if (this.isAssetPlaylist) {
-        entity = assetStore.cache.assetMap.get(info.after)
+        entity = assetStore.cache.assetMap.get(entityId)
       } else if (this.isSequencePlaylist) {
-        entity = sequenceStore.cache.sequenceMap.get(info.after)
+        entity = sequenceStore.cache.sequenceMap.get(entityId)
       } else if (this.isEditPlaylist) {
-        entity = editStore.cache.editMap.get(info.after)
+        entity = editStore.cache.editMap.get(entityId)
       } else if (this.isEpisodePlaylist) {
-        entity = episodeStore.cache.episodeMap.get(info.after)
+        entity = episodeStore.cache.episodeMap.get(entityId)
       } else {
-        entity = shotStore.cache.shotMap.get(info.after)
+        entity = shotStore.cache.shotMap.get(entityId)
       }
 
       if (entity && !this.currentEntitiesMap[entity.id]) {
         const notScrollRight = false
         const playlist = this.currentPlaylist
-        this.addEntity(entity, playlist, notScrollRight).then(() => {
+        this.addEntity(entity, playlist, notScrollRight).then(addedEntity => {
+          // The preview file id is only resolved when the entity is added, so
+          // the dragged payload can't carry it. Patch it in before replaying
+          // the drop so findEntity can locate the newly added entity and move
+          // it to the drop position instead of leaving it at the end.
+          if (addedEntity) {
+            info.after.preview_file_id = addedEntity.preview_file_id
+          }
           this.playlistPlayer.onEntityDropped(info)
           this.clearSilent()
         })

src/components/players/annotations/AnnotationCanvas.vue

@@ -196,6 +196,10 @@ watch(
     canvas.defaultCursor = value
     canvas.freeDrawingCursor = value
     canvas.hoverCursor = value
+    // Fabric only flushes its cursor properties to the DOM during its own
+    // mouse events, so a tool switch via keyboard / button (pointer idle)
+    // wouldn't show until the next move. Push it to the element directly.
+    if (canvas.upperCanvasEl) canvas.upperCanvasEl.style.cursor = value
   }
 )
 

src/components/players/bars/PlayerAnnotationBar.vue

@@ -132,6 +132,34 @@
       "
     />
 
+    <transition name="slide">
+      <div
+        class="annotation-tools"
+        v-show="isEraserModeOn && (!light || fullScreen)"
+      >
+        <pencil-picker
+          v-bind="pickerState('eraser-pencil')"
+          :pencil="pencilWidth"
+          :sizes="pencilPalette"
+          @change="$emit('change-pencil-width', $event)"
+        />
+      </div>
+    </transition>
+
+    <button-simple
+      class="flexrow-item"
+      icon="eraser"
+      :active="isEraserModeOn"
+      :title="$t('playlists.actions.annotation_erase')"
+      @click="$emit('erase-clicked')"
+      v-if="
+        isEraserModeOn !== undefined &&
+        !readOnly &&
+        (!light || fullScreen) &&
+        !isConcept
+      "
+    />
+
     <button-simple
       class="flexrow-item"
       icon="delete"
@@ -292,6 +320,7 @@ defineEmits([
   'change-text-color',
   'comment-clicked',
   'delete-clicked',
+  'erase-clicked',
   'object-background-selected',
   'pencil-annotate-clicked',
   'redo',
@@ -307,6 +336,7 @@ const isEnvironmentSkybox = defineModel('isEnvironmentSkybox', {
 })
 const isWireframe = defineModel('isWireframe', { default: false })
 const isLaserModeOn = defineModel('isLaserModeOn', { default: undefined })
+const isEraserModeOn = defineModel('isEraserModeOn', { default: undefined })
 const isShapeMode = defineModel('isShapeMode', { default: undefined })
 const currentShape = defineModel('currentShape', { default: undefined })
 

src/components/players/players/PlaylistPlayer.vue

@@ -627,6 +627,7 @@
         v-model:current-background="currentBackground"
         v-model:current-shape="currentShape"
         v-model:is-environment-skybox="isEnvironmentSkybox"
+        v-model:is-eraser-mode-on="isEraserModeOn"
         v-model:is-laser-mode-on="isLaserModeOn"
         v-model:is-shape-mode="isShapeMode"
         v-model:is-wireframe="isWireframe"
@@ -639,6 +640,7 @@
         @change-text-color="onChangeTextColor"
         @comment-clicked="onCommentClicked"
         @delete-clicked="onDeleteClicked"
+        @erase-clicked="onEraseClicked"
         @object-background-selected="onObjectBackgroundSelected"
         @pencil-annotate-clicked="onAnnotateClicked"
         @redo="redoLastAction"
@@ -1529,6 +1531,7 @@ const {
   clearComparisonCanvas,
   currentShape,
   isShapeMode,
+  isEraserModeOn,
   onChangePencilColor,
   onChangePencilWidth,
   onChangeTextColor,
@@ -1666,7 +1669,9 @@ const { cursor: annotationCursor } = useAnnotationCursor({
   isDrawing,
   isTyping,
   isShapeMode,
-  isLaserModeOn
+  isLaserModeOn,
+  isEraserModeOn,
+  pencilWidth
 })
 
 // DOM utility helpers (inlined from domMixin)
@@ -2915,8 +2920,14 @@ const extractPicturePreviewSnapshots = async ({ withLabel = false } = {}) => {
   for (const { preview, index } of picturePreviews) {
     if (currentPreviewIndex.value !== index) {
       currentPreviewIndex.value = index
-      await new Promise(resolve => setTimeout(resolve, 500))
     }
+    // Always wait for the live canvas to settle before compositing.
+    // Iteration #1 often skips the index switch (the user is already
+    // on the main preview), but the live canvas can still be mid-load
+    // when the snapshot is triggered right after opening the task —
+    // composite would then capture an empty canvas and the resulting
+    // PNG would come out without any annotation.
+    await new Promise(resolve => setTimeout(resolve, 500))
     const canvas = document.getElementById('annotation-snapshot')
     extractPicture(canvas)
     await compositeLiveAnnotationsOntoCanvas(canvas)
@@ -3621,6 +3632,7 @@ const onAnnotateClicked = () => {
   } else {
     isShapeMode.value = false
     isTyping.value = false
+    isEraserModeOn.value = false
     if (fabricCanvas.value) {
       fabricCanvas.value.isDrawingMode = true
       const brush = new PSBrush(fabricCanvas.value)
@@ -3633,6 +3645,19 @@ const onAnnotateClicked = () => {
   }
 }
 
+// Eraser is a fourth mutually-exclusive tool. The wrapper clears the
+// player-owned mode refs on entry, then delegates the brush swap and the
+// isEraserModeOn toggle to the composable.
+const onEraseClicked = () => {
+  showCanvas()
+  if (!isEraserModeOn.value) {
+    isDrawing.value = false
+    isShapeMode.value = false
+    isTyping.value = false
+  }
+  annotation.onEraseClicked()
+}
+
 const onTypeClicked = () => {
   const clickarea =
     canvasWrapper.value?.getElementsByClassName('upper-canvas')[0]
@@ -3644,6 +3669,7 @@ const onTypeClicked = () => {
     if (fabricCanvas.value) fabricCanvas.value.isDrawingMode = false
     isShapeMode.value = false
     isDrawing.value = false
+    isEraserModeOn.value = false
     isTyping.value = true
     clickarea?.addEventListener('dblclick', addText)
   }
@@ -3654,6 +3680,7 @@ const onShapeModeClicked = () => {
   if (isShapeMode.value) {
     isDrawing.value = false
     isTyping.value = false
+    isEraserModeOn.value = false
     if (!isAnnotationsDisplayed.value) isAnnotationsDisplayed.value = true
   }
 }
@@ -3818,6 +3845,7 @@ watch(isAnnotationsDisplayed, () => {
   if (!isAnnotationsDisplayed.value) {
     if (isDrawing.value) onAnnotateClicked()
     else if (isTyping.value) onTypeClicked()
+    else if (isEraserModeOn.value) onEraseClicked()
   }
   isRoomSilent = false
   resetCanvasVisibility()

src/components/players/players/PreviewPlayer.vue

@@ -15,7 +15,11 @@
             :panzoom-transform="panzoomTransform"
             :interactive="isOverlayInteractive"
             :wheel-target="mainMediaElement"
-            v-show="isAnnotationsDisplayed"
+            v-show="
+              isAnnotationsDisplayed &&
+              (isMovie || isPicture) &&
+              mainMediaElement
+            "
             @click="onCanvasClicked"
             @resized="onMainCanvasResized"
           />
@@ -30,7 +34,9 @@
               isAnnotationsDisplayed &&
               isComparing &&
               previewToCompare &&
-              !isComparisonOverlay
+              !isComparisonOverlay &&
+              (isMovie || isPicture) &&
+              comparisonMediaElement
             "
             @click="onCanvasClicked"
             @resized="onComparisonCanvasResized"
@@ -215,6 +221,7 @@
             v-model:current-background="currentBackground"
             v-model:current-shape="currentShape"
             v-model:is-environment-skybox="isEnvironmentSkybox"
+            v-model:is-eraser-mode-on="isEraserModeOn"
             v-model:is-shape-mode="isShapeMode"
             v-model:is-wireframe="isWireframe"
             @annotation-displayed-clicked="onAnnotationDisplayedClicked"
@@ -224,6 +231,7 @@
             @change-text-color="onChangeTextColor"
             @comment-clicked="onCommentClicked"
             @delete-clicked="onDeleteClicked"
+            @erase-clicked="onEraseClicked"
             @object-background-selected="onObjectBackgroundSelected"
             @pencil-annotate-clicked="onPencilAnnotateClicked"
             @redo="redoLastAction"
@@ -650,6 +658,7 @@ const {
   currentShape,
   deleteSelection,
   isShapeMode,
+  isEraserModeOn,
   isWriting,
   getNewAnnotations,
   loadSingleAnnotation,
@@ -1213,17 +1222,32 @@ const onPencilAnnotateClicked = () => {
     _resetPencil()
     isShapeMode.value = false
     isTyping.value = false
+    isEraserModeOn.value = false
     isDrawing.value = true
   }
 }
 
+// Eraser is a fourth mutually-exclusive tool. The wrapper clears the
+// player-owned mode refs on entry, then delegates the brush swap and the
+// isEraserModeOn toggle to the composable.
+const onEraseClicked = () => {
+  clearFocus()
+  if (!isEraserModeOn.value) {
+    isDrawing.value = false
+    isShapeMode.value = false
+    isTyping.value = false
+  }
+  annotation.onEraseClicked()
+}
+
 const onTypeClicked = () => {
   clearFocus()
   if (isTyping.value) {
     isTyping.value = false
   } else {
     isDrawing.value = false
     isShapeMode.value = false
+    isEraserModeOn.value = false
     isTyping.value = true
   }
 }
@@ -1235,6 +1259,7 @@ const onShapeModeClicked = () => {
   if (isShapeMode.value) {
     isDrawing.value = false
     isTyping.value = false
+    isEraserModeOn.value = false
     if (!isAnnotationsDisplayed.value) isAnnotationsDisplayed.value = true
   }
 }
@@ -1468,12 +1493,15 @@ const extractPicturePreviewSnapshots = async ({ withLabel = false } = {}) => {
   for (const { preview, index } of picturePreviews) {
     if (currentIndex.value !== index) {
       currentIndex.value = index
-      // Wait for the picture to swap and annotations to reload. The
-      // chain is async (image load -> resetPlayerPositions ->
-      // AnnotationCanvas resized -> reloadAnnotations) so a single tick
-      // isn't enough.
-      await new Promise(resolve => setTimeout(resolve, 500))
     }
+    // Always wait for the picture to load and the live canvas to
+    // settle before compositing. Iteration #1 often skips the index
+    // switch (the user is already on the main preview), but the chain
+    // is async (image load -> resetPlayerPositions -> AnnotationCanvas
+    // resized -> reloadAnnotations) and composite would otherwise
+    // capture an empty live canvas, producing a PNG without any
+    // annotation.
+    await new Promise(resolve => setTimeout(resolve, 500))
     const canvas = document.getElementById('annotation-snapshot')
     previewViewer.value.extractPicture(canvas)
     await compositeLiveAnnotationsOntoCanvas(canvas)
@@ -1536,6 +1564,10 @@ const { isAltHeld } = usePreviewShortcuts({
     container.value.focus()
     onPencilAnnotateClicked()
   },
+  onErase: () => {
+    container.value.focus()
+    onEraseClicked()
+  },
   onUndo: () => undoLastAction(),
   onRedo: () => redoLastAction(),
   onPrevPreview: () => onPreviousClicked(),
@@ -1549,7 +1581,9 @@ const { cursor: annotationCursor } = useAnnotationCursor({
   isAltHeld,
   isDrawing,
   isTyping,
-  isShapeMode
+  isShapeMode,
+  isEraserModeOn,
+  pencilWidth
 })
 
 const onCommentClicked = () => {
@@ -1875,6 +1909,7 @@ watch(isTyping, () => {
 watch(isAnnotationsDisplayed, () => {
   if (!isAnnotationsDisplayed.value) {
     isDrawing.value = false
+    if (isEraserModeOn.value) onEraseClicked()
   }
 })
 

src/components/widgets/ButtonSimple.vue

@@ -43,7 +43,7 @@
     <list-icon class="icon" v-else-if="icon === 'list'" />
     <triangle-icon class="icon" v-else-if="icon === 'triangle'" />
     <music-icon class="icon" v-else-if="icon === 'music'" />
-    <square-icon class="icon" v-else-if="icon === 'eraser'" />
+    <eraser-icon class="icon" v-else-if="icon === 'eraser'" />
     <key-icon class="icon" v-else-if="icon === 'key'" />
     <zoom-in-icon class="icon" v-else-if="icon === 'loupe'" />
     <globe-icon class="icon" v-else-if="icon === 'globe'" />
@@ -106,6 +106,7 @@ import {
   FileDigitIcon,
   EditIcon,
   Edit2Icon,
+  EraserIcon,
   GlobeIcon,
   GridIcon,
   FileDownIcon,
@@ -129,7 +130,6 @@ import {
   SkipBackIcon,
   SkipForwardIcon,
   SmileIcon,
-  SquareIcon,
   TriangleIcon,
   XIcon,
   ZoomInIcon