fix: pointImg.ts convert problem

package.json

@@ -17,6 +17,7 @@
     "@palxp/color-picker": "^1.5.5",
     "@palxp/image-extraction": "^1.2.4",
     "@scena/guides": "^0.18.1",
+    "@types/cropperjs": "^1.3.0",
     "@webtoon/psd": "^0.4.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
@@ -41,11 +42,11 @@
     "@types/node": "^20.11.24",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.3.1",
     "cross-env": "^7.0.3",
-    "eslint": "^7.29.0",
+    "eslint": "^8.56.0",
     "eslint-config-alloy": "~4.1.0",
     "eslint-plugin-vue": "^7.12.1",
     "less": "^4.1.1",

src/components/modules/layout/lineGuides.vue

@@ -9,7 +9,7 @@
   <div></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { watch, defineProps } from 'vue'
 import { useStore } from 'vuex'
 import Guides, { GuideOptions } from '@scena/guides'
@@ -30,7 +30,9 @@ type TSameParams = {
 
 type TGuidesData = Guides & GuideOptions
 
-const props = defineProps<TProps>()
+const props = withDefaults(defineProps<TProps>(), {
+  show: false
+})
 
 const store = useStore()
 const container = 'page-design' // page-design out-page

src/components/modules/layout/sizeControl.vue

@@ -5,6 +5,7 @@
  * @LastEditors: ShawnPhang
  * @LastEditTime: 2021-08-09 11:13:09
 -->
+
 <template>
   <div v-if="dActiveElement.record && dActiveElement.uuid !== '-1'" id="size-control">
     <!-- 上左 -->
@@ -99,73 +100,74 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+// import { mapGetters, mapActions } from 'vuex'
 
-// 组件大小控制器
+// // 组件大小控制器
-const NAME = 'size-control'
+// const NAME = 'size-control'
 
-export default {
+// export default {
-  name: NAME,
+//   name: NAME,
-  data() {
+//   data() {
-    return {
+//     return {
-      dirs: [],
+//       dirs: [],
-    }
+//     }
-  },
+//   },
-  computed: {
+//   computed: {
-    ...mapGetters(['dActiveElement', 'dWidgets']),
+//     ...mapGetters(['dActiveElement', 'dWidgets']),
-    left() {
+//     left() {
-      return parseInt(this.dActiveElement.left)
+//       return parseInt(this.dActiveElement.left)
-    },
+//     },
-    top() {
+//     top() {
-      return parseInt(this.dActiveElement.top)
+//       return parseInt(this.dActiveElement.top)
-    },
+//     },
-    width() {
+//     width() {
-      return parseInt(this.dActiveElement.record.width)
+//       return parseInt(this.dActiveElement.record.width)
-    },
+//     },
-    height() {
+//     height() {
-      return parseInt(this.dActiveElement.record.height)
+//       return parseInt(this.dActiveElement.record.height)
-    },
+//     },
-  },
+//   },
-  watch: {},
+//   watch: {},
-  methods: {
+//   methods: {
-    ...mapActions(['dResize', 'initDResize', 'dResize', 'stopDResize']),
+//     ...mapActions(['dResize', 'initDResize', 'dResize', 'stopDResize']),
-    handlemousedown(e, dirs) {
+//     handlemousedown(e, dirs) {
-      e.stopPropagation()
+//       e.stopPropagation()
-      this.dirs = dirs.split('-')
+//       this.dirs = dirs.split('-')
-      this.initDResize({
+//       this.initDResize({
-        startX: e.pageX,
+//         startX: e.pageX,
-        startY: e.pageY,
+//         startY: e.pageY,
-        originX: this.dActiveElement.left,
+//         originX: this.dActiveElement.left,
-        originY: this.dActiveElement.top,
+//         originY: this.dActiveElement.top,
-        width: this.width,
+//         width: this.width,
-        height: this.height,
+//         height: this.height,
-      })
+//       })
 
-      document.addEventListener('mousemove', this.handlemousemove, true)
+//       document.addEventListener('mousemove', this.handlemousemove, true)
-      document.addEventListener('mouseup', this.handlemouseup, true)
+//       document.addEventListener('mouseup', this.handlemouseup, true)
-    },
+//     },
 
-    handlemousemove(e) {
+//     handlemousemove(e) {
-      e.stopPropagation()
+//       e.stopPropagation()
-      e.preventDefault()
+//       e.preventDefault()
 
-      this.dResize({
+//       this.dResize({
-        x: e.pageX,
+//         x: e.pageX,
-        y: e.pageY,
+//         y: e.pageY,
-        dirs: this.dirs,
+//         dirs: this.dirs,
-      })
+//       })
-    },
+//     },
 
-    handlemouseup() {
+//     handlemouseup() {
-      document.removeEventListener('mousemove', this.handlemousemove, true)
+//       document.removeEventListener('mousemove', this.handlemousemove, true)
-      document.removeEventListener('mouseup', this.handlemouseup, true)
+//       document.removeEventListener('mouseup', this.handlemouseup, true)
-      this.stopDResize()
+//       this.stopDResize()
-    },
+//     },
-  },
+//   },
-}
+// }
 </script>
 
 <style lang="less" scoped>
+/*
 #size-control {
   position: absolute;
   .square {
@@ -178,4 +180,5 @@ export default {
     z-index: 999;
   }
 }
+*/
 </style>

src/utils/plugins/pointImg.ts

@@ -9,7 +9,7 @@ export default class PointImg {
   private canvas: HTMLCanvasElement | undefined
   private cvs: CanvasRenderingContext2D | null | undefined
 
-  constructor(img: any) {
+  constructor(img: HTMLImageElement) {
     if (img.src) {
       try {
         this.canvas = document.createElement('canvas')
@@ -33,24 +33,25 @@ export default class PointImg {
      */
     const color: Record<string, string> = {}
     try {
-      if (!this.cvs) return
+      if (this.cvs) {
-      const obj = this.cvs.getImageData(x, y, 1, 1)
+        const obj = this.cvs.getImageData(x, y, 1, 1)
-      const arr = obj.data.toString().split(',')
+        const arr = obj.data.toString().split(',')
 
-      let first = parseInt(arr[0], 10).toString(16)
+        let first = parseInt(arr[0], 10).toString(16)
-      first = first.length === 2 ? first : first + first
+        first = first.length === 2 ? first : first + first
 
-      let second = parseInt(arr[1], 10).toString(16)
+        let second = parseInt(arr[1], 10).toString(16)
-      second = second.length === 2 ? second : second + second
+        second = second.length === 2 ? second : second + second
 
-      let third = parseInt(arr[2], 10).toString(16)
+        let third = parseInt(arr[2], 10).toString(16)
-      third = third.length === 2 ? third : third + third
+        third = third.length === 2 ? third : third + third
 
-      let last = parseInt(arr.pop() || '0', 10) / 255
+        let last = parseInt(arr.pop() || '0', 10) / 255
-      last = Number(last.toFixed(0))
+        last = Number(last.toFixed(0))
 
-      color['rgba'] = 'rgba(' + arr.join(',') + ',' + last + ')'
+        color['rgba'] = 'rgba(' + arr.join(',') + ',' + last + ')'
-      color['#'] = '#' + first + second + third
+        color['#'] = '#' + first + second + third
+      }
     } catch (error) {
       // console.log('此为解析图片点位异常')
     }

src/views/Draw.vue

@@ -17,7 +17,7 @@ import Preload from '@/utils/plugins/preload'
 import FontFaceObserver from 'fontfaceobserver'
 import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
 import designBoard from '@/components/modules/layout/designBoard.vue'
-import zoomControl from '@/components/modules/layout/zoomControl.vue'
+import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 
 export default defineComponent({
   components: { designBoard, zoomControl },

src/views/Index.vue

@@ -59,7 +59,7 @@ import { mapActions, mapGetters } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import designBoard from '@/components/modules/layout/designBoard.vue'
-import zoomControl from '@/components/modules/layout/zoomControl.vue'
+import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 import lineGuides from '@/components/modules/layout/lineGuides.vue'
 
 import shortcuts from '@/mixins/shortcuts'

src/views/Psd.vue

@@ -53,7 +53,7 @@ import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import useLoading from '@/common/methods/loading'
 import uploader from '@/components/common/Uploader/index.vue'
 import designBoard from '@/components/modules/layout/designBoard.vue'
-import zoomControl from '@/components/modules/layout/zoomControl.vue'
+import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 import HeaderOptions from './components/UploadTemplate.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 // import MyWorker from '@/utils/plugins/webWorker'