bfg-common 1.4.391 → 1.4.393

package/components/common/layout/theHeader/feedback/new/New.vue

@@ -2,7 +2,7 @@
   <Teleport to="body">
     <ui-modal
       show
-      width="560px"
+      :width="!options.isAnnotateImage ? '560px' : '880px'"
       test-id="feedback-modal"
       :title="title"
       class="feedback"

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

@@ -62,6 +62,77 @@
       </ui-button>
     </div>
 
+    <div v-if="optionsModel.isAnnotateImage" class="drawer-btn-container">
+      <div>
+        <ui-button
+          test-id="feedback-use-red-marker-button"
+          size="sm"
+          type="default"
+          variant="outline"
+          class="btn marker"
+          @click="onUseRedMarker"
+        >
+          <ui-icon
+            name="marker"
+            width="16"
+            height="16"
+            class="feedback__btn-icon"
+          />
+          {{ localization.common.useRedMarker }}
+        </ui-button>
+
+        <ui-button
+          test-id="feedback-use-grey-marker-button"
+          size="sm"
+          type="default"
+          variant="outline"
+          class="btn eraser"
+          @click="onUseGrayEraser"
+        >
+          <ui-icon
+            name="grey-eraser"
+            width="16"
+            height="16"
+            class="feedback__btn-icon"
+          />
+          {{ localization.common.useGrayEraser }}
+        </ui-button>
+        <ui-button
+          test-id="feedback-undo-button"
+          size="sm"
+          type="default"
+          variant="outline"
+          class="btn undo"
+          @click="onUndoLast"
+        >
+          <ui-icon
+            name="reset"
+            width="16"
+            height="16"
+            class="feedback__btn-icon"
+          />
+          {{ localization.common.undo }}
+        </ui-button>
+      </div>
+
+      <ui-button
+        test-id="feedback-clear-all-button"
+        size="sm"
+        type="default"
+        variant="outline"
+        class="btn clear-all"
+        @click="clearAll"
+      >
+        <ui-icon
+          name="delete"
+          width="16"
+          height="16"
+          class="feedback__btn-icon"
+        />
+        {{ localization.common.clearAll }}
+      </ui-button>
+    </div>
+
     <div
       id="feedbackImgWrap"
       ref="feedbackImgWrap"
@@ -139,8 +210,11 @@ const memoryParentMain = ref<string>('')
 const drawingArray: any = []
 // const indexArray = 0 // index of feedbackImg itself
 const indexArray = ref<number>(0) // index of feedbackImg itself
-// let drawColor = ''
-// let drawWidth = ''
+let isDrawing = false
+let startDrawingX: number | null = null
+let startDrawingY: number | null = null
+let drawColor = ''
+let drawWidth = ''
 
 const onTakeScreenshot = (): void => {
   optionsModel.value.hasTakeScreenshot = true
@@ -230,6 +304,63 @@ const onUploadFile = (): void => {
   }
 }
 
+const start = (event: MouseEvent): void => {
+  if (!drawColor) return
+  const context = feedbackImg.value.getContext('2d')
+  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
+  startDrawingX = event.pageX - canvasCoordinates.left
+  startDrawingY = event.pageY - canvasCoordinates.top
+  isDrawing = true
+  context.beginPath()
+  context.moveTo(
+    event.pageX - canvasCoordinates.left,
+    event.pageY - canvasCoordinates.top
+  )
+  event.preventDefault()
+}
+const draw = (event: MouseEvent): void => {
+  if (!drawColor) return
+  const context = feedbackImg.value.getContext('2d')
+  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
+  if (!isDrawing) return
+  context.lineTo(
+    event.pageX - canvasCoordinates.left,
+    event.pageY - canvasCoordinates.top
+  )
+  context.strokeStyle = drawColor
+  context.lineWidth = drawWidth
+  context.lineCap = 'round'
+  context.lineJoin = 'round'
+  context.stroke()
+  event.preventDefault()
+}
+
+const stop = (event: MouseEvent): void => {
+  if (!drawColor) return
+
+  const context = feedbackImg.value.getContext('2d')
+  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
+  if (!isDrawing) return
+
+  context.stroke()
+  context.closePath()
+  isDrawing = false
+  event.preventDefault()
+  if (
+    startDrawingX !== event.pageX - canvasCoordinates.left &&
+    startDrawingY !== event.pageY - canvasCoordinates.top
+  ) {
+    drawingArray.push(
+      context.getImageData(
+        0,
+        0,
+        feedbackImg.value.width,
+        feedbackImg.value.height
+      )
+    )
+    indexArray.value += 1
+  }
+}
 const onRemoveScreenshot = (): void => {
   optionsModel.value.hasTakeScreenshot = false
   const parentMain = document.getElementById('feedbackId')
@@ -263,6 +394,47 @@ const clearAll = (): void => {
     context.putImageData(drawingArray[indexArray.value], 0, 0)
   }
 }
+
+const onUseRedMarker = (): void => {
+  drawColor = '#f76945'
+  drawWidth = '5'
+}
+const onUseGrayEraser = (): void => {
+  drawColor = 'lightgray'
+  drawWidth = '14'
+}
+
+const onUndoLast = (): void => {
+  drawColor = ''
+  drawWidth = ''
+  const context = feedbackImg.value.getContext('2d')
+  if (indexArray.value > 0) {
+    indexArray.value -= 1
+    drawingArray.pop()
+    context.putImageData(drawingArray[indexArray.value], 0, 0)
+  }
+}
+
+onMounted(() => {
+  feedbackImg.value.addEventListener('touchstart', start, false)
+  feedbackImg.value.addEventListener('touchmove', draw, false)
+  feedbackImg.value.addEventListener('mousedown', start, false)
+  feedbackImg.value.addEventListener('mousemove', draw, false)
+  feedbackImg.value.addEventListener('touchend', stop, false)
+  feedbackImg.value.addEventListener('mouseup', stop, false)
+  feedbackImg.value.addEventListener('mouseout', stop, false)
+})
+
+onBeforeUnmount(() => {
+  onRemoveScreenshot()
+  feedbackImg.value.removeEventListener('touchstart', start, false)
+  feedbackImg.value.removeEventListener('touchmove', draw, false)
+  feedbackImg.value.removeEventListener('mousedown', start, false)
+  feedbackImg.value.removeEventListener('mousemove', draw, false)
+  feedbackImg.value.removeEventListener('touchend', stop, false)
+  feedbackImg.value.removeEventListener('mouseup', stop, false)
+  feedbackImg.value.removeEventListener('mouseout', stop, false)
+})
 const onAnnotateImage = (): void => {
   optionsModel.value.isAnnotateImage = true
 }
@@ -287,6 +459,27 @@ const onAnnotateImage = (): void => {
       }
     }
   }
+  .drawer-btn-container {
+    margin-bottom: 12px;
+    & > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 15px;
+    }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .ui-btn {
+      width: initial;
+
+      &.clear-all {
+        color: #ea3223;
+      }
+    }
+  }
+
   &__alert {
     margin-bottom: 16px;
   }
@@ -295,6 +488,10 @@ const onAnnotateImage = (): void => {
   width: 500px;
   height: 280px;
   position: relative;
+  &.annotate {
+    width: 100%;
+    height: 460px;
+  }
   &.disabled {
     display: none;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.391",
+  "version": "1.4.393",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -35,7 +35,7 @@
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
     "bfg-nuxt-3-graph": "1.0.15",
-    "bfg-uikit": "1.0.193",
+    "bfg-uikit": "1.0.195",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }