[previews] Keep pencil configuration over time

frankrousseau · Jan 6, 2025 · 8ba33cb · 8ba33cb
1 parent 85ac16d
commit 8ba33cb
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 38 deletions.
diff --git a/src/components/mixins/annotation.js b/src/components/mixins/annotation.js
@@ -9,6 +9,7 @@ import { markRaw } from 'vue'
 
 import clipboard from '@/lib/clipboard'
 import { formatFullDate } from '@/lib/time'
+import localPreferences from '@/lib/preferences'
 
 /* Monkey patch needed to have text background including the padding. */
 if (fabric) {
@@ -41,7 +42,10 @@ export const annotationMixin = {
       updates: [],
       isShowingPalette: false,
       isShowingPencilPalette: false,
-      notSave: false
+      notSave: false,
+      pencilColor: '#ff3860',
+      pencilWidth: 'big',
+      textColor: '#ff3860',
     }
   },
 
@@ -612,57 +616,88 @@ export const annotationMixin = {
     /*
      * Enable / disabl showing pencil palette flag.
      */
-    onPickPencil() {
+    onPickPencilWidth() {
       this.isShowingPencilPalette = !this.isShowingPencilPalette
     },
 
     /*
-     * Enable / disabl showing color palette flag.
+     * Enable / disable showing color palette flag.
      */
-    onPickColor() {
+    onPickPencilColor() {
       this.isShowingPalette = !this.isShowingPalette
     },
 
     /*
-     * When a drawing color is changed, store it in local state.
+     * Enable / disable showing color palette flag.
      */
-    onChangeColor(color) {
-      this.color = color
+    onPickTextColor() {
+      this.isShowingPalette = !this.isShowingPalette
+    },
+
+    /*
+     * When a drawing color is changed, change fabric configuration and save
+     * the new color in the local preferences.
+     */
+    onChangePencilColor(color) {
+      this.pencilColor = color
       this._resetColor()
       this.isShowingPalette = false
+      localPreferences.setPreference('player:pencil-color', this.pencilColor)
     },
 
     /*
-     * When a text color is changed, store it in local state.
+     * When a pencil width is changed, change fabric configuration and save
+     * the new width in the local preferences.
      */
-    onChangeTextColor(color) {
-      this.textColor = color
+    onChangePencilWidth(pencil) {
+      this.pencilWidth = pencil
+      this._resetPencil()
       this.isShowingPalette = false
+      localPreferences.setPreference('player:pencil-width', this.pencilWidth)
     },
 
     /*
-     * When a pencil is changed, store it in local state.
+     * When a text color is changed, change fabric configuration and save
+     * the new color in the local preferences.
      */
-    onChangePencil(pencil) {
-      this.pencil = pencil
-      this._resetPencil()
+    onChangeTextColor(newValue) {
+      this.textColor = newValue
       this.isShowingPalette = false
+      localPreferences.setPreference('player:text-color', this.textColor)
     },
 
     _resetColor() {
-      this.fabricCanvas.freeDrawingBrush.color = this.color
+      if (!this.fabricCanvas) return
+      this.fabricCanvas.freeDrawingBrush.color = this.pencilColor
     },
 
     _resetPencil() {
+      if (!this.fabricCanvas) return
       const converter = {
         big: 4,
         medium: 2,
         small: 1
       }
-      const strokeWidth = converter[this.pencil]
+      const strokeWidth = converter[this.pencilWidth]
       this.fabricCanvas.freeDrawingBrush.width = strokeWidth
     },
 
+
+    /*
+     * Reset pencil configuration to the last saved preferences.
+     */
+    resetPencilConfiguration() {
+      this.pencilColor =
+        localPreferences.getPreference('player:pencil-color') || '#ff3860'
+      this.textColor =
+        localPreferences.getPreference('player:text-color') || '#ff3860'
+      this.pencilWidth =
+        localPreferences.getPreference('player:pencil-width') || 'big'
+
+      this._resetColor()
+      this._resetPencil()
+    },
+
     /*
      * Enable / disable the drawing mode. Differentiate text from path drawing.
      */
@@ -987,7 +1022,7 @@ export const annotationMixin = {
       this.fabricCanvas.on('mouse:move', this.onCanvasMouseMoved)
       this.fabricCanvas.on('mouse:down', this.onCanvasClicked)
       this.fabricCanvas.on('mouse:up', this.onCanvasReleased)
-      this.fabricCanvas.freeDrawingBrush.color = this.color
+      this.fabricCanvas.freeDrawingBrush.color = this.pencilColor
       this.fabricCanvas.freeDrawingBrush.width = 4
 
       fabric.Group.prototype._controlsVisibility = {

diff --git a/src/components/pages/playlists/PlaylistPlayer.vue b/src/components/pages/playlists/PlaylistPlayer.vue
@@ -688,7 +688,7 @@
           <div class="annotation-tools" v-show="isTyping">
             <color-picker
               :color="textColor"
-              @toggle-palette="onPickColor"
+              @toggle-palette="onPickPencilColor"
               @change="onChangeTextColor"
             />
           </div>
@@ -704,16 +704,16 @@
         <transition name="slide">
           <div class="annotation-tools" v-show="isDrawing">
             <pencil-picker
-              :pencil="pencil"
+              :pencil="pencilWidth"
               :sizes="pencilPalette"
-              @toggle-palette="onPickPencil"
-              @change="onChangePencil"
+              @toggle-palette="onPickPencilWidth"
+              @change="onChangePencilWidth"
             />
 
             <color-picker
-              :color="color"
-              @toggle-palette="onPickColor"
-              @change="onChangeColor"
+              :color="pencilColor"
+              @toggle-palette="onPickPencilColor"
+              @change="onChangePencilColor"
             />
           </div>
         </transition>
@@ -1154,6 +1154,8 @@ export default {
       this.productionBackgrounds.find(this.isDefaultBackground) || null
     this.onObjectBackgroundSelected()
     this.isMounted = true
+
+    this.resetPencilConfiguration()
   },
 
   computed: {

diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
@@ -294,7 +294,7 @@
               >
                 <color-picker
                   :color="textColor"
-                  @toggle-palette="onPickColor"
+                  @toggle-palette="onPickTextColor"
                   @change="onChangeTextColor"
                 />
               </div>
@@ -315,15 +315,15 @@
                 v-show="isDrawing && (!light || fullScreen)"
               >
                 <pencil-picker
-                  :pencil="pencil"
+                  :pencil="pencilWidth"
                   :sizes="pencilPalette"
-                  @toggle-palette="onPickPencil"
-                  @change="onChangePencil"
+                  @toggle-palette="onPickPencilWidth"
+                  @change="onChangePencilWidth"
                 />
                 <color-picker
-                  :color="color"
-                  @toggle-palette="onPickColor"
-                  @change="onChangeColor"
+                  :color="pencilColor"
+                  @toggle-palette="onPickPencilColor"
+                  @change="onChangePencilColor"
                 />
               </div>
             </transition>
@@ -665,7 +665,6 @@ export default {
       currentFrame: 0,
       currentIndex: 1,
       fullScreen: false,
-      color: '#ff3860',
       currentBackground: null,
       currentTime: '00:00:00:00',
       currentTimeRaw: 0,
@@ -749,6 +748,7 @@ export default {
         this.productionBackgrounds.find(this.isDefaultBackground) || null
       this.onObjectBackgroundSelected()
     }
+    this.resetPencilConfiguration()
   },
 
   beforeUnmount() {
@@ -1484,12 +1484,6 @@ export default {
       this.deleteSelection()
     },
 
-    onChangeColor(newValue) {
-      this.color = newValue
-      this.fabricCanvas.freeDrawingBrush.color = this.color
-      this.isShowingPalette = false
-    },
-
     onPencilAnnotateClicked() {
       this.clearFocus()
       if (this.isDrawing) {