bfg-common 1.5.80 → 1.5.82

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

@@ -1,591 +1,604 @@
-<template>
-  <div class="additional-details">
-    <template v-if="!optionsModel.isAnnotateImage">
-      <common-layout-the-header-feedback-new-additional-details-headline />
-
-      <ui-alert
-        v-if="optionsModel.hasTakeScreenshot"
-        test-id="additional-details-info-alert"
-        :messages="[localization.common.screenshotQualityMayVary]"
-        type="info"
-        class="additional-details__alert"
-      ></ui-alert>
-    </template>
-
-    <div
-      v-if="!optionsModel.hasTakeScreenshot"
-      class="flex gap-4 button-container"
-    >
-      <ui-button
-        test-id="feedback-take-screenshot-btn"
-        size="md"
-        type="default"
-        variant="outline"
-        min-width="96px"
-        class="take-screenshot"
-        @click="onTakeScreenshot"
-      >
-        <ui-icon
-          name="take-screenshot"
-          width="18"
-          height="18"
-          class="feedback__btn-icon"
-        />
-        {{ localization.common.takeScreenshot }}
-      </ui-button>
-
-      <ui-button
-        test-id="feedback-upload-file-btn"
-        size="md"
-        type="default"
-        variant="outline"
-        min-width="96px"
-        class="upload-image"
-      >
-        <label id="labelFileLoad" for="fileLoad">
-          <ui-icon
-            name="upload-icon"
-            width="18"
-            height="18"
-            class="feedback__btn-icon"
-          />
-          {{ localization.common.uploadImage }}
-        </label>
-        <input
-          id="fileLoad"
-          ref="isFileLoad"
-          type="file"
-          accept=".png, .jpeg"
-          data-id="feedback-file-load-input"
-          @change="onUploadFile"
-        />
-      </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"
-          :class="drawerMarker === 'marker' && 'active'"
-          @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"
-          :class="drawerMarker === 'eraser' && 'active'"
-          @click="onUseGrayEraser"
-        >
-          <ui-icon
-            name="grey-eraser"
-            width="16"
-            height="16"
-            class="feedback__btn-icon"
-          />
-          {{ localization.common.useGrayEraser }}
-        </ui-button>
-        <div class="separator-line"></div>
-        <ui-button
-          test-id="feedback-undo-button"
-          size="sm"
-          type="default"
-          variant="outline"
-          class="btn undo"
-          :disabled="isDisabledButton"
-          @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"
-        :disabled="isDisabledButton"
-        @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"
-      class="preview-container"
-      :class="{
-        disabled: !optionsModel.hasTakeScreenshot,
-        annotate: optionsModel.isAnnotateImage,
-      }"
-    >
-      <div class="preview-container__backdrop">
-        <div>
-          <ui-button
-            test-id="feedback-image-annotate-btn"
-            size="sm"
-            type="default"
-            variant="outline"
-            class=""
-            @click="onAnnotateImage"
-          >
-            <ui-icon
-              name="annotate-icon"
-              width="16"
-              height="16"
-              class="feedback__btn-icon"
-            />
-            {{ localization.feedback.annotate }}
-          </ui-button>
-
-          <ui-button
-            test-id="feedback-image-remove-btn"
-            size="sm"
-            type="default"
-            variant="outline"
-            class=""
-            @click="onRemoveScreenshot"
-          >
-            <ui-icon
-              name="delete"
-              width="16"
-              height="16"
-              class="feedback__btn-icon"
-            />
-            {{ localization.common.remove }}
-          </ui-button>
-        </div>
-      </div>
-      <canvas
-        id="feedbackImg"
-        ref="feedbackImg"
-        class="preview-container__image"
-      ></canvas>
-      <canvas id="feedbackImgBlank" style="display: none"></canvas>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import html2canvas from 'html2canvas'
-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 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>('')
-
-let drawingArray: any = []
-const indexArray = ref<number>(0) // index of feedbackImg itself
-let isDrawing = false
-let startDrawingX: number | null = null
-let startDrawingY: number | null = null
-let drawColor = ''
-let drawWidth = ''
-
-const isDisabledButton = computed<boolean>(() => indexArray.value === 0)
-
-const onTakeScreenshot = (): void => {
-  optionsModel.value.hasTakeScreenshot = true
-
-  const feedbackDialog = document.getElementById('feedback-dialog')
-  if (!feedbackDialog) return
-
-  const display = feedbackDialog.style.display
-  feedbackDialog.style.display = 'none'
-  html2canvas(document.body).then(function (thisCanvas) {
-    feedbackDialog.style.display = display
-
-    const context = feedbackImg.value.getContext('2d')
-    feedbackImg.value.width = thisCanvas.width
-    feedbackImg.value.height = thisCanvas.height
-
-    feedbackImg.value.style.width = '500px'
-    feedbackImg.value.style.height =
-      thisCanvas.height / (thisCanvas.width / 500) + 'px'
-
-    context.drawImage(
-      thisCanvas,
-      0,
-      0,
-      feedbackImg.value.width,
-      feedbackImg.value.height
-    )
-    drawingArray.length = 0
-    indexArray.value = 0
-    drawingArray.push(
-      context.getImageData(
-        0,
-        0,
-        feedbackImg.value.width,
-        feedbackImg.value.height
-      )
-    )
-  })
-}
-const onUploadFile = (): void => {
-  optionsModel.value.hasTakeScreenshot = true
-  if (!isFileLoad.value) return
-
-  const isFileRead = new FileReader()
-  if (!isFileRead) return
-
-  isFileRead.readAsDataURL(isFileLoad.value.files[0])
-  isFileRead.onload = (): void => {
-    const img = new Image()
-    if (!feedbackImg.value) return
-
-    const context = feedbackImg.value.getContext('2d')
-    img.onload = (): void => {
-      feedbackImg.value.width = img.width
-      feedbackImg.value.height = img.height
-
-      updateFeedbackImageDimensions()
-
-      context.drawImage(img, 0, 0, img.width, img.height)
-      drawingArray.length = 0
-      indexArray.value = 0
-      drawingArray.push(
-        context.getImageData(
-          0,
-          0,
-          feedbackImg.value.width,
-          feedbackImg.value.height
-        )
-      )
-    }
-    img.src = isFileRead.result
-  }
-}
-
-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('feedback-dialog')
-  const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
-  if (!parentMain || !parentModalDialog) return
-
-  parentMain.style.width = memoryParentMain.value
-  parentModalDialog.style.width = memoryParentModalDialog.value
-  const context = feedbackImg.value.getContext('2d')
-  context.fillStyle = 'green'
-  context.fillRect(0, 0, feedbackImg.value.width, feedbackImg.value.height)
-  feedbackImg.value.width = 0
-  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)
-  clearAll()
-}
-const onUseRedMarker = (): void => {
-  drawerMarker.value = 'marker'
-  drawColor = '#f76945'
-  drawWidth = '5'
-}
-const onUseGrayEraser = (): void => {
-  drawerMarker.value = 'eraser'
-  drawColor = 'lightgray'
-  drawWidth = '14'
-}
-
-const onUndoLast = (): void => {
-  drawColor = ''
-  drawWidth = ''
-  drawerMarker.value = null
-  const context = feedbackImg.value.getContext('2d')
-  if (indexArray.value > 0) {
-    indexArray.value -= 1
-    drawingArray.pop()
-    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)
-  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 => {
-  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>
-@import 'assets/scss/common/mixins.scss';
-.additional-details {
-  .button-container {
-    :deep(.ui-btn) {
-      font-size: 13px;
-      gap: 8px;
-    }
-    .upload-image {
-      label {
-        @include flex($align: center, $just: center);
-        width: 100%;
-        height: 100%;
-        color: inherit;
-        //font-size: 13px;
-        font-weight: 500;
-        gap: 8px;
-        cursor: pointer;
-      }
-      input {
-        display: none;
-      }
-    }
-  }
-  .drawer-btn-container {
-    @include flex($align: center, $just: space-between);
-    margin-bottom: 12px;
-    & > div {
-      @include flex($align: center, $just: space-between);
-      gap: 15px;
-
-      .separator-line {
-        width: 1px;
-        height: 24px;
-        background: #e9ebed;
-        margin: 0;
-      }
-    }
-
-    .ui-btn {
-      width: initial;
-      height: 28px;
-      font-size: 12px;
-      padding: 0 8px;
-      column-gap: 4px;
-
-      &.undo {
-        &:disabled {
-          color: var(--btn-primary-outline-disabled-color);
-        }
-        svg {
-          transform: scaleX(-1);
-        }
-      }
-      &.clear-all {
-        color: #ea3223;
-        &:disabled {
-          color: var(--btn-primary-outline-disabled-color);
-        }
-      }
-
-      &.active {
-        color: var(--feedback-tab-active-text-color);
-        border: 1.4px solid var(--feedback-tab-active-text-color);
-        &:hover {
-          background: var(--feedback-tab-active-bg-color);
-        }
-      }
-    }
-  }
-
-  &__alert {
-    margin-bottom: 16px;
-  }
-}
-.preview-container {
-  width: 500px;
-  height: 280px;
-  position: relative;
-  &.annotate {
-    width: 100%;
-    height: 460px;
-    overflow: auto;
-  }
-  &.disabled {
-    display: none;
-  }
-
-  &__backdrop {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(27, 42, 55, 0.32);
-    backdrop-filter: blur(1.5px);
-    border-radius: 8px;
-    transition: opacity 0.3s ease;
-    opacity: 0;
-
-    & > div {
-      @include flex($align: center);
-      gap: 12px;
-      .ui-btn {
-        width: initial;
-        font-size: 12px;
-        line-height: 14.52px;
-        column-gap: 4px;
-
-        &:last-child {
-          color: #ea3223;
-        }
-      }
-    }
-  }
-
-  &__image {
-    width: inherit;
-    height: inherit;
-    border-radius: 8px;
-    .disabled & {
-      display: none;
-    }
-  }
-
-  &:hover:not(&.annotate) &__backdrop {
-    @include flex($align: center, $just: center);
-    opacity: 1;
-  }
-}
-</style>
+<template>
+  <div class="additional-details">
+    <template v-if="!optionsModel.isAnnotateImage">
+      <common-layout-the-header-feedback-new-additional-details-headline />
+
+      <ui-alert
+        v-if="optionsModel.hasTakeScreenshot"
+        test-id="additional-details-info-alert"
+        :messages="[localization.common.screenshotQualityMayVary]"
+        type="info"
+        class="additional-details__alert"
+      ></ui-alert>
+    </template>
+
+    <div
+      v-if="!optionsModel.hasTakeScreenshot"
+      class="flex gap-4 button-container"
+    >
+      <ui-button
+        test-id="feedback-take-screenshot-btn"
+        size="md"
+        type="default"
+        variant="outline"
+        min-width="96px"
+        class="take-screenshot"
+        @click="onTakeScreenshot"
+      >
+        <ui-icon
+          name="take-screenshot"
+          width="18"
+          height="18"
+          class="feedback__btn-icon"
+        />
+        {{ localization.common.takeScreenshot }}
+      </ui-button>
+
+      <ui-button
+        test-id="feedback-upload-file-btn"
+        size="md"
+        type="default"
+        variant="outline"
+        min-width="96px"
+        class="upload-image"
+      >
+        <label id="labelFileLoad" for="fileLoad">
+          <ui-icon
+            name="upload-icon"
+            width="18"
+            height="18"
+            class="feedback__btn-icon"
+          />
+          {{ localization.common.uploadImage }}
+        </label>
+        <input
+          id="fileLoad"
+          ref="isFileLoad"
+          type="file"
+          accept=".png, .jpeg"
+          data-id="feedback-file-load-input"
+          @change="onUploadFile"
+        />
+      </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"
+          :class="drawerMarker === 'marker' && 'active'"
+          @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"
+          :class="drawerMarker === 'eraser' && 'active'"
+          @click="onUseGrayEraser"
+        >
+          <ui-icon
+            name="grey-eraser"
+            width="16"
+            height="16"
+            class="feedback__btn-icon"
+          />
+          {{ localization.common.useGrayEraser }}
+        </ui-button>
+        <div class="separator-line"></div>
+        <ui-button
+          test-id="feedback-undo-button"
+          size="sm"
+          type="default"
+          variant="outline"
+          class="btn undo"
+          :disabled="isDisabledButton"
+          @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"
+        :disabled="isDisabledButton"
+        @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"
+      class="preview-container"
+      :class="{
+        disabled: !optionsModel.hasTakeScreenshot,
+        annotate: optionsModel.isAnnotateImage,
+      }"
+    >
+      <div class="preview-container__backdrop">
+        <div>
+          <ui-button
+            test-id="feedback-image-annotate-btn"
+            size="sm"
+            type="default"
+            variant="outline"
+            class=""
+            @click="onAnnotateImage"
+          >
+            <ui-icon
+              name="annotate-icon"
+              width="16"
+              height="16"
+              class="feedback__btn-icon"
+            />
+            {{ localization.feedback.annotate }}
+          </ui-button>
+
+          <ui-button
+            test-id="feedback-image-remove-btn"
+            size="sm"
+            type="default"
+            variant="outline"
+            class=""
+            @click="onRemoveScreenshot"
+          >
+            <ui-icon
+              name="delete"
+              width="16"
+              height="16"
+              class="feedback__btn-icon"
+            />
+            {{ localization.common.remove }}
+          </ui-button>
+        </div>
+      </div>
+      <canvas
+        id="feedbackImg"
+        ref="feedbackImg"
+        class="preview-container__image"
+      ></canvas>
+      <canvas id="feedbackImgBlank" style="display: none"></canvas>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import html2canvas from 'html2canvas'
+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 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>('')
+
+let drawingArray: any = []
+const indexArray = ref<number>(0) // index of feedbackImg itself
+let isDrawing = false
+let startDrawingX: number | null = null
+let startDrawingY: number | null = null
+let drawColor = ''
+let drawWidth = ''
+
+const isDisabledButton = computed<boolean>(() => indexArray.value === 0)
+
+const onTakeScreenshot = (): void => {
+  optionsModel.value.hasTakeScreenshot = true
+
+  const feedbackDialog = document.getElementById('feedback-dialog')
+  if (!feedbackDialog) return
+
+  const display = feedbackDialog.style.display
+  feedbackDialog.style.display = 'none'
+  html2canvas(document.body).then(function (thisCanvas) {
+    feedbackDialog.style.display = display
+
+    const context = feedbackImg.value.getContext('2d')
+    feedbackImg.value.width = thisCanvas.width
+    feedbackImg.value.height = thisCanvas.height
+
+    feedbackImg.value.style.width = '500px'
+    feedbackImg.value.style.height =
+      thisCanvas.height / (thisCanvas.width / 500) + 'px'
+
+    context.drawImage(
+      thisCanvas,
+      0,
+      0,
+      feedbackImg.value.width,
+      feedbackImg.value.height
+    )
+    drawingArray.length = 0
+    indexArray.value = 0
+    drawingArray.push(
+      context.getImageData(
+        0,
+        0,
+        feedbackImg.value.width,
+        feedbackImg.value.height
+      )
+    )
+  })
+}
+const onUploadFile = (): void => {
+  optionsModel.value.hasTakeScreenshot = true
+  if (!isFileLoad.value) return
+
+  const isFileRead = new FileReader()
+  if (!isFileRead) return
+
+  isFileRead.readAsDataURL(isFileLoad.value.files[0])
+  isFileRead.onload = (): void => {
+    const img = new Image()
+    if (!feedbackImg.value) return
+
+    const context = feedbackImg.value.getContext('2d')
+    img.onload = (): void => {
+      feedbackImg.value.width = img.width
+      feedbackImg.value.height = img.height
+
+      updateFeedbackImageDimensions()
+
+      context.drawImage(img, 0, 0, img.width, img.height)
+      drawingArray.length = 0
+      indexArray.value = 0
+      drawingArray.push(
+        context.getImageData(
+          0,
+          0,
+          feedbackImg.value.width,
+          feedbackImg.value.height
+        )
+      )
+    }
+    img.src = isFileRead.result
+  }
+}
+
+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('feedback-dialog')
+  const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
+  if (!parentMain || !parentModalDialog) return
+
+  parentMain.style.width = memoryParentMain.value
+  parentModalDialog.style.width = memoryParentModalDialog.value
+  const context = feedbackImg.value.getContext('2d')
+  context.fillStyle = 'green'
+  context.fillRect(0, 0, feedbackImg.value.width, feedbackImg.value.height)
+  feedbackImg.value.width = 0
+  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)
+  clearAll()
+}
+const onUseRedMarker = (): void => {
+  drawerMarker.value = 'marker'
+  drawColor = '#f76945'
+  drawWidth = '5'
+}
+const onUseGrayEraser = (): void => {
+  drawerMarker.value = 'eraser'
+  drawColor = 'lightgray'
+  drawWidth = '14'
+}
+
+const onUndoLast = (): void => {
+  drawColor = ''
+  drawWidth = ''
+  drawerMarker.value = null
+  const context = feedbackImg.value.getContext('2d')
+  if (indexArray.value > 0) {
+    indexArray.value -= 1
+    drawingArray.pop()
+    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)
+  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 => {
+  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>
+:root {
+  --upload-image-hover-bg-color: #f6f7f8;
+}
+:root.dark-theme {
+  --upload-image-hover-bg-color: #283948;
+}
+</style>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.additional-details {
+  .button-container {
+    :deep(.ui-btn) {
+      font-size: 13px;
+      gap: 8px;
+    }
+    .upload-image {
+      &:hover {
+        background-color: var(--upload-image-hover-bg-color);
+      }
+      label {
+        @include flex($align: center, $just: center);
+        width: 100%;
+        height: 100%;
+        color: inherit;
+        //font-size: 13px;
+        font-weight: 500;
+        gap: 8px;
+        cursor: pointer;
+      }
+      input {
+        display: none;
+      }
+    }
+  }
+  .drawer-btn-container {
+    @include flex($align: center, $just: space-between);
+    margin-bottom: 12px;
+    & > div {
+      @include flex($align: center, $just: space-between);
+      gap: 15px;
+
+      .separator-line {
+        width: 1px;
+        height: 24px;
+        background: #e9ebed1f;
+        margin: 0;
+      }
+    }
+
+    .ui-btn {
+      width: initial;
+      height: 28px;
+      font-size: 12px;
+      padding: 0 8px;
+      column-gap: 4px;
+      border-radius: 6px;
+
+      &.undo {
+        &:disabled {
+          color: var(--btn-primary-outline-disabled-color);
+        }
+        svg {
+          transform: scaleX(-1);
+        }
+      }
+      &.clear-all {
+        color: #ea3223;
+        &:disabled {
+          color: var(--btn-primary-outline-disabled-color);
+        }
+      }
+
+      &.active {
+        color: var(--feedback-tab-active-text-color);
+        border: 1.4px solid var(--feedback-tab-active-text-color);
+        &:hover {
+          background: var(--feedback-tab-active-bg-color);
+        }
+      }
+    }
+  }
+
+  &__alert {
+    margin-bottom: 16px;
+  }
+}
+.preview-container {
+  width: 500px;
+  height: 280px;
+  position: relative;
+  &.annotate {
+    width: 100%;
+    height: 460px;
+    overflow: auto;
+  }
+  &.disabled {
+    display: none;
+  }
+
+  &__backdrop {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(27, 42, 55, 0.32);
+    backdrop-filter: blur(1.5px);
+    border-radius: 8px;
+    transition: opacity 0.3s ease;
+    opacity: 0;
+
+    & > div {
+      @include flex($align: center);
+      gap: 12px;
+      .ui-btn {
+        width: initial;
+        font-size: 12px;
+        line-height: 14.52px;
+        column-gap: 4px;
+
+        &:last-child {
+          color: #ea3223;
+        }
+      }
+    }
+  }
+
+  &__image {
+    width: inherit;
+    height: inherit;
+    border-radius: 8px;
+    .disabled & {
+      display: none;
+    }
+  }
+
+  &:hover:not(&.annotate) &__backdrop {
+    @include flex($align: center, $just: center);
+    opacity: 1;
+  }
+}
+</style>