bfg-common 1.4.417 → 1.4.419

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

@@ -197,19 +197,20 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
 
 const optionsModel = defineModel<UI_I_FeedbackCanvasOptions>({ required: true })
-const emits = defineEmits<{
-  (event: 'screen-shot', value: any): void
-}>()
+// const emits = defineEmits<{
+//   (event: 'screen-shot', value: any): void
+// }>()
 
 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
@@ -221,11 +222,11 @@ const isDisabledButton = computed<boolean>(() => indexArray.value === 0)
 
 const onTakeScreenshot = (): void => {
   optionsModel.value.hasTakeScreenshot = true
-  const value = {
-    width: window.outerWidth + 'px',
-  }
+  // const value = {
+  //   width: window.outerWidth + 'px',
+  // }
 
-  emits('screen-shot', value)
+  // emits('screen-shot', value)
   const parentMain = document.getElementById('feedbackId')
   const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
   if (!parentMain || !parentModalDialog) return
@@ -278,6 +279,10 @@ const onUploadFile = (): void => {
     img.onload = (): 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'
+
       context.drawImage(img, 0, 0, img.width, img.height)
       drawingArray.length = 0
       indexArray.value = 0
@@ -289,10 +294,10 @@ const onUploadFile = (): void => {
           feedbackImg.value.height
         )
       )
-      const value = {
-        width: window.outerWidth + 'px',
-      }
-      emits('screen-shot', value)
+      // const value = {
+      //   width: window.outerWidth + 'px',
+      // }
+      // emits('screen-shot', value)
       const parentMain = document.getElementById('feedbackId')
       const parentModalDialog = document.getElementById(
         'feedback-modal-dialog-Id'
@@ -379,30 +384,19 @@ const onRemoveScreenshot = (): void => {
   feedbackImg.value.height = 0
   feedbackImgWrap.value.style.width = 0 + 'px'
   feedbackImgWrap.value.style.height = 0 + 'px'
-  const value = {
-    width: memoryParentModalDialog.value,
-  }
-  emits('screen-shot', value)
+  // const value = {
+  //   width: memoryParentModalDialog.value,
+  // }
+  // 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'
 }
@@ -410,6 +404,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
@@ -417,6 +412,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)
@@ -439,8 +446,34 @@ onBeforeUnmount(() => {
   feedbackImg.value.removeEventListener('mouseout', stop, false)
 })
 const onAnnotateImage = (): void => {
+  feedbackImg.value.style.width = feedbackImg.value.width + 'px'
+  feedbackImg.value.style.height = feedbackImg.value.height + 'px'
+
   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) {
+      updateFeedbackImageDimensions()
+      resetDrawingState()
+    }
+  },
+  { deep: true, immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>
@@ -463,16 +496,12 @@ const onAnnotateImage = (): void => {
     }
   }
   .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;
@@ -480,6 +509,11 @@ const onAnnotateImage = (): void => {
       &.clear-all {
         color: #ea3223;
       }
+
+      &.active {
+        border: 1.4px solid var(--feedback-tab-active-text-color);
+        color: var(--feedback-tab-active-text-color);
+      }
     }
   }
 
@@ -494,6 +528,7 @@ const onAnnotateImage = (): void => {
   &.annotate {
     width: 100%;
     height: 460px;
+    overflow: auto;
   }
   &.disabled {
     display: none;
@@ -513,8 +548,7 @@ const onAnnotateImage = (): void => {
     opacity: 0;
 
     & > div {
-      display: flex;
-      align-items: center;
+      @include flex($align: center);
       gap: 12px;
       .ui-btn {
         width: initial;
@@ -536,9 +570,7 @@ const onAnnotateImage = (): void => {
   }
 
   &: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.417",
+  "version": "1.4.419",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",