bfg-common 1.4.418 → 1.4.420

package/components/common/layout/theHeader/feedback/new/additionalDetails/AdditionalDetails.vue

@@ -70,6 +70,7 @@
           type="default"
           variant="outline"
           class="btn marker"
+          :class="drawerMarker === 'marker' && 'active'"
           @click="onUseRedMarker"
         >
           <ui-icon
@@ -87,6 +88,7 @@
           type="default"
           variant="outline"
           class="btn eraser"
+          :class="drawerMarker === 'eraser' && 'active'"
           @click="onUseGrayEraser"
         >
           <ui-icon
@@ -203,13 +205,14 @@ const optionsModel = defineModel<UI_I_FeedbackCanvasOptions>({ required: true })
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const drawerMarker = ref<'marker' | 'eraser' | null>(null)
 const isFileLoad = ref(null)
 const feedbackImgWrap = ref()
 const feedbackImg = ref()
 const memoryParentModalDialog = ref<string>('')
 const memoryParentMain = ref<string>('')
 
-const drawingArray: any = []
+let drawingArray: any = []
 const indexArray = ref<number>(0) // index of feedbackImg itself
 let isDrawing = false
 let startDrawingX: number | null = null
@@ -279,8 +282,7 @@ const onUploadFile = (): void => {
       feedbackImg.value.width = img.width
       feedbackImg.value.height = img.height
 
-      feedbackImg.value.style.width = '500px'
-      feedbackImg.value.style.height = img.height / (img.width / 500) + 'px'
+      updateFeedbackImageDimensions()
 
       context.drawImage(img, 0, 0, img.width, img.height)
       drawingArray.length = 0
@@ -389,24 +391,13 @@ const onRemoveScreenshot = (): void => {
   // emits('screen-shot', value)
   clearAll()
 }
-
-const clearAll = (): void => {
-  const context = feedbackImg.value.getContext('2d')
-  // drawColor = ''
-  // drawWidth = ''
-  if (indexArray.value <= 0) return
-  while (indexArray.value > 0) {
-    drawingArray.pop()
-    indexArray.value -= 1
-    context.putImageData(drawingArray[indexArray.value], 0, 0)
-  }
-}
-
 const onUseRedMarker = (): void => {
+  drawerMarker.value = 'marker'
   drawColor = '#f76945'
   drawWidth = '5'
 }
 const onUseGrayEraser = (): void => {
+  drawerMarker.value = 'eraser'
   drawColor = 'lightgray'
   drawWidth = '14'
 }
@@ -414,6 +405,7 @@ const onUseGrayEraser = (): void => {
 const onUndoLast = (): void => {
   drawColor = ''
   drawWidth = ''
+  drawerMarker.value = null
   const context = feedbackImg.value.getContext('2d')
   if (indexArray.value > 0) {
     indexArray.value -= 1
@@ -421,6 +413,18 @@ const onUndoLast = (): void => {
     context.putImageData(drawingArray[indexArray.value], 0, 0)
   }
 }
+const clearAll = (): void => {
+  const context = feedbackImg.value.getContext('2d')
+  drawColor = ''
+  drawWidth = ''
+  drawerMarker.value = null
+  if (indexArray.value <= 0) return
+  while (indexArray.value > 0) {
+    drawingArray.pop()
+    indexArray.value -= 1
+    context.putImageData(drawingArray[indexArray.value], 0, 0)
+  }
+}
 
 onMounted(() => {
   feedbackImg.value.addEventListener('touchstart', start, false)
@@ -448,13 +452,25 @@ const onAnnotateImage = (): void => {
 
   optionsModel.value.isAnnotateImage = true
 }
+
+const updateFeedbackImageDimensions = (): void => {
+  if (feedbackImg.value) {
+    feedbackImg.value.style.width = '500px'
+    feedbackImg.value.style.height =
+      feedbackImg.value.height / (feedbackImg.value.width / 500) + 'px'
+  }
+}
+const resetDrawingState = (): void => {
+  drawingArray = [drawingArray.at(-1)]
+  indexArray.value = 0
+}
+
 watch(
   optionsModel,
   (newValue: UI_I_FeedbackCanvasOptions) => {
-    if (!newValue.isAnnotateImage && feedbackImg.value) {
-      feedbackImg.value.style.width = '500px'
-      feedbackImg.value.style.height =
-        feedbackImg.value.height / (feedbackImg.value.width / 500) + 'px'
+    if (!newValue.isAnnotateImage) {
+      updateFeedbackImageDimensions()
+      resetDrawingState()
     }
   },
   { deep: true, immediate: true }
@@ -481,16 +497,12 @@ watch(
     }
   }
   .drawer-btn-container {
+    @include flex($align: center, $just: space-between);
     margin-bottom: 12px;
     & > div {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+      @include flex($align: center, $just: space-between);
       gap: 15px;
     }
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
 
     .ui-btn {
       width: initial;
@@ -498,6 +510,11 @@ watch(
       &.clear-all {
         color: #ea3223;
       }
+
+      &.active {
+        border: 1.4px solid var(--feedback-tab-active-text-color);
+        color: var(--feedback-tab-active-text-color);
+      }
     }
   }
 
@@ -532,8 +549,7 @@ watch(
     opacity: 0;
 
     & > div {
-      display: flex;
-      align-items: center;
+      @include flex($align: center);
       gap: 12px;
       .ui-btn {
         width: initial;
@@ -555,9 +571,7 @@ watch(
   }
 
   &:hover:not(&.annotate) &__backdrop {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @include flex($align: center, $just: center);
     opacity: 1;
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.418",
+  "version": "1.4.420",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",