bfg-common 1.4.417 → 1.4.418

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

@@ -197,9 +197,9 @@ 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())
 
@@ -221,11 +221,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 +278,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 +293,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,10 +383,10 @@ 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()
 }
 
@@ -439,8 +443,22 @@ 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
 }
+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'
+    }
+  },
+  { deep: true, immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>
@@ -494,6 +512,7 @@ const onAnnotateImage = (): void => {
   &.annotate {
     width: 100%;
     height: 460px;
+    overflow: auto;
   }
   &.disabled {
     display: none;

package/package.json

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