bfg-common 1.3.19 → 1.3.21

package/components/common/feedback/Message.vue

@@ -1,509 +1,509 @@
-<template>
-  <div class="message">
-    <div class="main-block">
-      <span class="text">{{ localization.description }}</span>
-      <textarea
-        id="feedback-message-textarea"
-        v-model="descriptionLocal"
-        :disabled="props.type === undefined"
-        class="clr-textarea ng-pristine ng-invalid ng-touched textarea"
-        :placeholder="descriptionTextPlaceholder"
-      ></textarea>
-    </div>
-    <div class="main-block">
-      <span class="text">{{ localization.emailAddress }} </span>
-      <atoms-tooltip-error
-        class="tooltip-error"
-        :has-error="isInvalidEmail"
-        selector="#vm-wizard-vcpus-field input"
-      >
-        <template #elem>
-          <input
-            id="feedback-email-input"
-            v-model="emailLocal"
-            type="email"
-            :class="['email', { 'has-error': isInvalidEmail }]"
-            :placeholder="localization.optionalInCaseWeNeed"
-            @blur="isStartEmailValidation = true"
-          />
-        </template>
-        <template #content>{{ localization.emailErrorText }}</template>
-      </atoms-tooltip-error>
-    </div>
-    <div class="main-block">
-      <span class="text">{{ localization.additionalDetails }} </span>
-      <button
-        v-if="!hasTakeScreenshot"
-        id="feedback-take-screenshot-button"
-        class="btn btn-sm ng-star-inserted"
-        @click="takeScreenshot"
-      >
-        {{ localization.takeScreenshot }}
-      </button>
-
-      <button
-        v-else
-        id="feedback-remove-button"
-        class="btn btn-sm btn-warning-outline ng-star-inserted"
-        @click="removeScreenshot"
-      >
-        {{ localization.remove }}
-      </button>
-    </div>
-    <template v-if="hasTakeScreenshot">
-      <div class="main-block main-block__last">
-        <span class="text"></span>
-        {{ localization.clickAndDragTheMouseToAnnotate }}
-        <!-- <a
-        v-for="tab in drawingPanel"
-        :key="tab.function"
-        href="javascript:void(0)"
-        role="button"
-        class="content-padding"
-        @click="tab.function"
-      >
-        {{ tab.text }}</a
-      > -->
-        <a
-          id="feedback-use-red-marker-button"
-          href="javascript:void(0)"
-          role="button"
-          class="content-padding"
-          @click="useRedMarker"
-        >
-          {{ localization.useRedMarker }}</a
-        >
-        <a
-          id="feedback-use-grey-marker-button"
-          href="javascript:void(0)"
-          role="button"
-          class="content-padding"
-          @click="useGrayEraser"
-        >
-          {{ localization.useGrayEraser }}</a
-        >
-        <a
-          id="feedback-undo-button"
-          href="javascript:void(0)"
-          role="button"
-          class="content-padding"
-          @click="undoLast"
-        >
-          {{ localization.undo }}</a
-        >
-        <a
-          id="feedback-clear-all-button"
-          href="javascript:void(0)"
-          role="button"
-          class="content-padding"
-          @click="clearAll"
-        >
-          {{ localization.clearAll }}</a
-        >
-      </div>
-      <div class="main-block main-block__last">
-        <span class="text"></span>
-        <atoms-alert
-          v-show="true"
-          test-id="feedback-message"
-          status="alert-info"
-          :items="[localization.screenshotQualityMayVary]"
-        />
-      </div>
-    </template>
-    <div v-else class="main-block main-block__last">
-      <span class="text"></span>
-      <div>
-        <div class="btn btn-sm loadFile">
-          <label id="labelFileLoad" for="fileLoad">{{
-            localization.uploadImage
-          }}</label>
-          <input
-            id="fileLoad"
-            ref="isFileLoad"
-            type="file"
-            accept=".png, .jpeg"
-            @change="onChangeImgLoad"
-          />
-        </div>
-        <span>{{ localization.pngJpegFilesSupported }}</span>
-      </div>
-    </div>
-
-    <div id="feedbackImgWrap" ref="feedbackImgWrap">
-      <canvas
-        id="feedbackImg"
-        ref="feedbackImg"
-        :class="{ feedbackImg: !hasTakeScreenshot }"
-      ></canvas>
-      <canvas id="feedbackImgBlank" style="display: none"></canvas>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import html2canvas from 'html2canvas'
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_I_MessageImg } from '~/components/common/feedback/lib/models/interfaces'
-import { UI_T_FeedbackType } from '~/components/common/feedback/lib/models/types'
-
-const props = defineProps<{
-  type: UI_T_FeedbackType
-  description: string
-  email: string
-}>()
-const emits = defineEmits<{
-  (event: 'screen-shot', value: UI_I_MessageImg): void
-  (event: 'update:description', value: string): void
-  (event: 'update:email', value: string): void
-}>()
-
-const descriptionLocal = computed<string>({
-  get() {
-    return props.description
-  },
-  set(value) {
-    emits('update:description', value)
-  },
-})
-const emailLocal = computed<string>({
-  get() {
-    return props.email
-  },
-  set(value) {
-    emits('update:email', value)
-  },
-})
-const isInvalidEmail = computed<boolean>(
-  () =>
-    isStartEmailValidation.value &&
-    !!emailLocal.value &&
-    !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailLocal.value)
-)
-const isStartEmailValidation = ref<boolean>(false)
-const localization = computed<UI_I_Localization>(() => useLocal())
-// const drawingPanel = computed(() => drawingPanelFunc(localization.value))
-
-const descriptionTextPlaceholder = computed<string>(() => {
-  if (props.type === 0) return localization.value.whatIsTheProblemHowCan
-  if (props.type === 1) return localization.value.tellUsWhatYouEnjoyedSo
-  return localization.value.selectFeedbackType
-})
-const hasTakeScreenshot = ref<boolean>(false)
-const feedbackImgWrap = ref()
-const feedbackImg = ref()
-const isFileLoad = ref(null)
-const memoryParentMain = ref<string>('')
-const memoryParentModalDialog = ref<string>('')
-
-const takeScreenshot = (): void => {
-  hasTakeScreenshot.value = true
-  const value = {
-    hasTakeScreenshot: true,
-    width: window.outerWidth + 'px',
-  }
-
-  emits('screen-shot', value)
-  const parentMain = document.getElementById('feedbackId')
-  const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
-  if (!parentMain || !parentModalDialog) return
-
-  const display = parentMain.style.display
-  memoryParentMain.value = parentMain.style.display
-  parentMain.style.display = 'none'
-  html2canvas(document.body).then(function (thisCanvas) {
-    parentMain.style.display = display
-    memoryParentMain.value = parentMain.style.width
-    memoryParentModalDialog.value = parentModalDialog.style.width
-    parentMain.style.width = window.outerWidth + 'px'
-    parentModalDialog.style.width = window.outerWidth + 'px'
-    parentModalDialog.style.margin = '20px'
-    const context = feedbackImg.value.getContext('2d')
-    feedbackImg.value.width = thisCanvas.width
-    feedbackImg.value.height = thisCanvas.height
-    context.drawImage(
-      thisCanvas,
-      0,
-      0,
-      feedbackImg.value.width,
-      feedbackImg.value.height
-    )
-    drawingArray.length = 0
-    indexArray = 0
-    drawingArray.push(
-      context.getImageData(
-        0,
-        0,
-        feedbackImg.value.width,
-        feedbackImg.value.height
-      )
-    )
-  })
-}
-const removeScreenshot = (): void => {
-  hasTakeScreenshot.value = false
-  const parentMain = document.getElementById('feedbackId')
-  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 = {
-    hasTakeScreenshot: false,
-    width: memoryParentModalDialog.value,
-  }
-  emits('screen-shot', value)
-  clearAll()
-}
-
-const onChangeImgLoad = (): void => {
-  hasTakeScreenshot.value = true
-  if (!isFileLoad.value) return
-
-  const isFileRead = new FileReader()
-  if (!isFileRead) return
-
-  isFileRead.readAsDataURL(isFileLoad.value.files[0])
-  isFileRead.onload = () => {
-    const img = new Image()
-    if (!feedbackImg.value) return
-
-    const context = feedbackImg.value.getContext('2d')
-    img.onload = () => {
-      feedbackImg.value.width = img.width
-      feedbackImg.value.height = img.height
-      context.drawImage(img, 0, 0, img.width, img.height)
-      drawingArray.length = 0
-      indexArray = 0
-      drawingArray.push(
-        context.getImageData(
-          0,
-          0,
-          feedbackImg.value.width,
-          feedbackImg.value.height
-        )
-      )
-      const value = {
-        hasTakeScreenshot: true,
-        width: window.outerWidth + 'px',
-      }
-      emits('screen-shot', value)
-      const parentMain = document.getElementById('feedbackId')
-      const parentModalDialog = document.getElementById(
-        'feedback-modal-dialog-Id'
-      )
-      if (!parentMain || !parentModalDialog) return
-
-      parentMain.style.width = window.outerWidth + 'px'
-      parentModalDialog.style.width = window.outerWidth + 'px'
-      parentModalDialog.style.margin = '20px'
-    }
-    img.src = isFileRead.result
-  }
-}
-const drawingArray: any = []
-let indexArray = 0 // index of feedbackImg itself
-let isDrawing = false
-let startDrawingX: number | null = null
-let startDrawingY: number | null = null
-let drawColor = ''
-let drawWidth = ''
-
-const useRedMarker = (): void => {
-  drawColor = '#f76945'
-  drawWidth = '5'
-}
-const useGrayEraser = (): void => {
-  drawColor = 'lightgray'
-  drawWidth = '14'
-}
-const undoLast = (): void => {
-  drawColor = ''
-  drawWidth = ''
-  const context = feedbackImg.value.getContext('2d')
-  if (indexArray > 0) {
-    indexArray -= 1
-    drawingArray.pop()
-    context.putImageData(drawingArray[indexArray], 0, 0)
-  }
-}
-const clearAll = (): void => {
-  const context = feedbackImg.value.getContext('2d')
-  drawColor = ''
-  drawWidth = ''
-  if (indexArray <= 0) return
-  while (indexArray > 0) {
-    drawingArray.pop()
-    indexArray -= 1
-    context.putImageData(drawingArray[indexArray], 0, 0)
-  }
-}
-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 += 1
-  }
-}
-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(() => {
-  removeScreenshot()
-  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)
-})
-</script>
-
-<style scoped lang="scss">
-.message {
-  overflow-x: auto;
-  .main-block {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    margin-bottom: 20px;
-    .text {
-      padding-top: 0;
-      min-width: 140px;
-      margin-right: 10px;
-    }
-    .textarea {
-      height: 150px;
-      width: 100%;
-      vertical-align: start;
-      background-color: var(--modal-bg-color);
-    }
-    .email {
-      width: 100%;
-    }
-
-    &__last {
-      margin-top: -20px;
-      width: 100%;
-      .content-padding {
-        padding-left: 4px;
-        color: var(--a-link-color);
-      }
-    }
-    :deep(.alert.alert-info) {
-      width: 100%;
-    }
-
-    .tooltip-error {
-      flex: 1;
-
-      :deep(.element-content) {
-        width: 100%;
-      }
-    }
-    .has-error {
-      border: 1px solid #db2100;
-    }
-  }
-}
-.loadFile {
-  width: fit-content;
-  margin-right: 10px;
-  padding: 0;
-  z-index: 11;
-  label {
-    color: inherit;
-    cursor: pointer;
-    padding: 0 10px;
-    line-height: calc(1rem - 1px);
-    letter-spacing: 0.073em;
-    font-size: 0.458333rem;
-    font-weight: 500;
-    height: 1rem;
-    padding: 0 0.5rem;
-  }
-  input {
-    width: 0.01px;
-    height: 0.01px;
-    opacity: 0;
-    overflow: hidden;
-    z-index: -1;
-  }
-}
-.feedbackImg {
-  display: none;
-}
-</style>
-<style>
-:root {
-  --a-link-color: #0072a3;
-}
-:root.dark-theme {
-  --a-link-color: #4aaed9;
-}
-</style>
+<template>
+  <div class="message">
+    <div class="main-block">
+      <span class="text">{{ localization.description }}</span>
+      <textarea
+        id="feedback-message-textarea"
+        v-model="descriptionLocal"
+        :disabled="props.type === undefined"
+        class="clr-textarea ng-pristine ng-invalid ng-touched textarea"
+        :placeholder="descriptionTextPlaceholder"
+      ></textarea>
+    </div>
+    <div class="main-block">
+      <span class="text">{{ localization.emailAddress }} </span>
+      <atoms-tooltip-error
+        class="tooltip-error"
+        :has-error="isInvalidEmail"
+        selector="#vm-wizard-vcpus-field input"
+      >
+        <template #elem>
+          <input
+            id="feedback-email-input"
+            v-model="emailLocal"
+            type="email"
+            :class="['email', { 'has-error': isInvalidEmail }]"
+            :placeholder="localization.optionalInCaseWeNeed"
+            @blur="isStartEmailValidation = true"
+          />
+        </template>
+        <template #content>{{ localization.emailErrorText }}</template>
+      </atoms-tooltip-error>
+    </div>
+    <div class="main-block">
+      <span class="text">{{ localization.additionalDetails }} </span>
+      <button
+        v-if="!hasTakeScreenshot"
+        id="feedback-take-screenshot-button"
+        class="btn btn-sm ng-star-inserted"
+        @click="takeScreenshot"
+      >
+        {{ localization.takeScreenshot }}
+      </button>
+
+      <button
+        v-else
+        id="feedback-remove-button"
+        class="btn btn-sm btn-warning-outline ng-star-inserted"
+        @click="removeScreenshot"
+      >
+        {{ localization.remove }}
+      </button>
+    </div>
+    <template v-if="hasTakeScreenshot">
+      <div class="main-block main-block__last">
+        <span class="text"></span>
+        {{ localization.clickAndDragTheMouseToAnnotate }}
+        <!-- <a
+        v-for="tab in drawingPanel"
+        :key="tab.function"
+        href="javascript:void(0)"
+        role="button"
+        class="content-padding"
+        @click="tab.function"
+      >
+        {{ tab.text }}</a
+      > -->
+        <a
+          id="feedback-use-red-marker-button"
+          href="javascript:void(0)"
+          role="button"
+          class="content-padding"
+          @click="useRedMarker"
+        >
+          {{ localization.useRedMarker }}</a
+        >
+        <a
+          id="feedback-use-grey-marker-button"
+          href="javascript:void(0)"
+          role="button"
+          class="content-padding"
+          @click="useGrayEraser"
+        >
+          {{ localization.useGrayEraser }}</a
+        >
+        <a
+          id="feedback-undo-button"
+          href="javascript:void(0)"
+          role="button"
+          class="content-padding"
+          @click="undoLast"
+        >
+          {{ localization.undo }}</a
+        >
+        <a
+          id="feedback-clear-all-button"
+          href="javascript:void(0)"
+          role="button"
+          class="content-padding"
+          @click="clearAll"
+        >
+          {{ localization.clearAll }}</a
+        >
+      </div>
+      <div class="main-block main-block__last">
+        <span class="text"></span>
+        <atoms-alert
+          v-show="true"
+          test-id="feedback-message"
+          status="alert-info"
+          :items="[localization.screenshotQualityMayVary]"
+        />
+      </div>
+    </template>
+    <div v-else class="main-block main-block__last">
+      <span class="text"></span>
+      <div>
+        <div class="btn btn-sm loadFile">
+          <label id="labelFileLoad" for="fileLoad">{{
+            localization.uploadImage
+          }}</label>
+          <input
+            id="fileLoad"
+            ref="isFileLoad"
+            type="file"
+            accept=".png, .jpeg"
+            @change="onChangeImgLoad"
+          />
+        </div>
+        <span>{{ localization.pngJpegFilesSupported }}</span>
+      </div>
+    </div>
+
+    <div id="feedbackImgWrap" ref="feedbackImgWrap">
+      <canvas
+        id="feedbackImg"
+        ref="feedbackImg"
+        :class="{ feedbackImg: !hasTakeScreenshot }"
+      ></canvas>
+      <canvas id="feedbackImgBlank" style="display: none"></canvas>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import html2canvas from 'html2canvas'
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_I_MessageImg } from '~/components/common/feedback/lib/models/interfaces'
+import { UI_T_FeedbackType } from '~/components/common/feedback/lib/models/types'
+
+const props = defineProps<{
+  type: UI_T_FeedbackType
+  description: string
+  email: string
+}>()
+const emits = defineEmits<{
+  (event: 'screen-shot', value: UI_I_MessageImg): void
+  (event: 'update:description', value: string): void
+  (event: 'update:email', value: string): void
+}>()
+
+const descriptionLocal = computed<string>({
+  get() {
+    return props.description
+  },
+  set(value) {
+    emits('update:description', value)
+  },
+})
+const emailLocal = computed<string>({
+  get() {
+    return props.email
+  },
+  set(value) {
+    emits('update:email', value)
+  },
+})
+const isInvalidEmail = computed<boolean>(
+  () =>
+    isStartEmailValidation.value &&
+    !!emailLocal.value &&
+    !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailLocal.value)
+)
+const isStartEmailValidation = ref<boolean>(false)
+const localization = computed<UI_I_Localization>(() => useLocal())
+// const drawingPanel = computed(() => drawingPanelFunc(localization.value))
+
+const descriptionTextPlaceholder = computed<string>(() => {
+  if (props.type === 0) return localization.value.whatIsTheProblemHowCan
+  if (props.type === 1) return localization.value.tellUsWhatYouEnjoyedSo
+  return localization.value.selectFeedbackType
+})
+const hasTakeScreenshot = ref<boolean>(false)
+const feedbackImgWrap = ref()
+const feedbackImg = ref()
+const isFileLoad = ref(null)
+const memoryParentMain = ref<string>('')
+const memoryParentModalDialog = ref<string>('')
+
+const takeScreenshot = (): void => {
+  hasTakeScreenshot.value = true
+  const value = {
+    hasTakeScreenshot: true,
+    width: window.outerWidth + 'px',
+  }
+
+  emits('screen-shot', value)
+  const parentMain = document.getElementById('feedbackId')
+  const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
+  if (!parentMain || !parentModalDialog) return
+
+  const display = parentMain.style.display
+  memoryParentMain.value = parentMain.style.display
+  parentMain.style.display = 'none'
+  html2canvas(document.body).then(function (thisCanvas) {
+    parentMain.style.display = display
+    memoryParentMain.value = parentMain.style.width
+    memoryParentModalDialog.value = parentModalDialog.style.width
+    parentMain.style.width = window.outerWidth + 'px'
+    parentModalDialog.style.width = window.outerWidth + 'px'
+    parentModalDialog.style.margin = '20px'
+    const context = feedbackImg.value.getContext('2d')
+    feedbackImg.value.width = thisCanvas.width
+    feedbackImg.value.height = thisCanvas.height
+    context.drawImage(
+      thisCanvas,
+      0,
+      0,
+      feedbackImg.value.width,
+      feedbackImg.value.height
+    )
+    drawingArray.length = 0
+    indexArray = 0
+    drawingArray.push(
+      context.getImageData(
+        0,
+        0,
+        feedbackImg.value.width,
+        feedbackImg.value.height
+      )
+    )
+  })
+}
+const removeScreenshot = (): void => {
+  hasTakeScreenshot.value = false
+  const parentMain = document.getElementById('feedbackId')
+  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 = {
+    hasTakeScreenshot: false,
+    width: memoryParentModalDialog.value,
+  }
+  emits('screen-shot', value)
+  clearAll()
+}
+
+const onChangeImgLoad = (): void => {
+  hasTakeScreenshot.value = true
+  if (!isFileLoad.value) return
+
+  const isFileRead = new FileReader()
+  if (!isFileRead) return
+
+  isFileRead.readAsDataURL(isFileLoad.value.files[0])
+  isFileRead.onload = () => {
+    const img = new Image()
+    if (!feedbackImg.value) return
+
+    const context = feedbackImg.value.getContext('2d')
+    img.onload = () => {
+      feedbackImg.value.width = img.width
+      feedbackImg.value.height = img.height
+      context.drawImage(img, 0, 0, img.width, img.height)
+      drawingArray.length = 0
+      indexArray = 0
+      drawingArray.push(
+        context.getImageData(
+          0,
+          0,
+          feedbackImg.value.width,
+          feedbackImg.value.height
+        )
+      )
+      const value = {
+        hasTakeScreenshot: true,
+        width: window.outerWidth + 'px',
+      }
+      emits('screen-shot', value)
+      const parentMain = document.getElementById('feedbackId')
+      const parentModalDialog = document.getElementById(
+        'feedback-modal-dialog-Id'
+      )
+      if (!parentMain || !parentModalDialog) return
+
+      parentMain.style.width = window.outerWidth + 'px'
+      parentModalDialog.style.width = window.outerWidth + 'px'
+      parentModalDialog.style.margin = '20px'
+    }
+    img.src = isFileRead.result
+  }
+}
+const drawingArray: any = []
+let indexArray = 0 // index of feedbackImg itself
+let isDrawing = false
+let startDrawingX: number | null = null
+let startDrawingY: number | null = null
+let drawColor = ''
+let drawWidth = ''
+
+const useRedMarker = (): void => {
+  drawColor = '#f76945'
+  drawWidth = '5'
+}
+const useGrayEraser = (): void => {
+  drawColor = 'lightgray'
+  drawWidth = '14'
+}
+const undoLast = (): void => {
+  drawColor = ''
+  drawWidth = ''
+  const context = feedbackImg.value.getContext('2d')
+  if (indexArray > 0) {
+    indexArray -= 1
+    drawingArray.pop()
+    context.putImageData(drawingArray[indexArray], 0, 0)
+  }
+}
+const clearAll = (): void => {
+  const context = feedbackImg.value.getContext('2d')
+  drawColor = ''
+  drawWidth = ''
+  if (indexArray <= 0) return
+  while (indexArray > 0) {
+    drawingArray.pop()
+    indexArray -= 1
+    context.putImageData(drawingArray[indexArray], 0, 0)
+  }
+}
+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 += 1
+  }
+}
+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(() => {
+  removeScreenshot()
+  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)
+})
+</script>
+
+<style scoped lang="scss">
+.message {
+  overflow-x: auto;
+  .main-block {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: 20px;
+    .text {
+      padding-top: 0;
+      min-width: 140px;
+      margin-right: 10px;
+    }
+    .textarea {
+      height: 150px;
+      width: 100%;
+      vertical-align: start;
+      background-color: var(--modal-bg-color);
+    }
+    .email {
+      width: 100%;
+    }
+
+    &__last {
+      margin-top: -20px;
+      width: 100%;
+      .content-padding {
+        padding-left: 4px;
+        color: var(--a-link-color);
+      }
+    }
+    :deep(.alert.alert-info) {
+      width: 100%;
+    }
+
+    .tooltip-error {
+      flex: 1;
+
+      :deep(.element-content) {
+        width: 100%;
+      }
+    }
+    .has-error {
+      border: 1px solid #db2100;
+    }
+  }
+}
+.loadFile {
+  width: fit-content;
+  margin-right: 10px;
+  padding: 0;
+  z-index: 11;
+  label {
+    color: inherit;
+    cursor: pointer;
+    padding: 0 10px;
+    line-height: calc(1rem - 1px);
+    letter-spacing: 0.073em;
+    font-size: 0.458333rem;
+    font-weight: 500;
+    height: 1rem;
+    padding: 0 0.5rem;
+  }
+  input {
+    width: 0.01px;
+    height: 0.01px;
+    opacity: 0;
+    overflow: hidden;
+    z-index: -1;
+  }
+}
+.feedbackImg {
+  display: none;
+}
+</style>
+<style>
+:root {
+  --a-link-color: #0072a3;
+}
+:root.dark-theme {
+  --a-link-color: #4aaed9;
+}
+</style>