Merge pull request #68 from JeremyYu-cn/feat-upgrade-vue3

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,107 +9,130 @@
   <div></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, watch } from 'vue'
+import { watch, defineProps } from 'vue'
 import { useStore } from 'vuex'
-import Guides from '@scena/guides'
+import Guides, { GuideOptions } from '@scena/guides'
 
-export default defineComponent({
+type TProps = {
-  props: ['show'],
+  show: boolean
-  setup(props) {
+}
-    const store = useStore()
-    const container = 'page-design' // page-design out-page
-    let guidesTop: any = null
-    let guidesLeft: any = null
 
-    watch(
+type TSameParams = {
-      () => props.show,
+  backgroundColor: string,
-      (open) => {
+  lineColor: string
-        open ? render() : destroy()
+  textColor: string
-      },
+  // direction: 'start',
-    )
+  // height: 30,
+  displayDragPos: boolean,
+  dragPosFormat: (v: string | number) => string,
+}
 
-    watch(
+type TGuidesData = Guides & GuideOptions
-      () => store.getters.dZoom,
-      () => {
-        changeScroll()
-      },
-    )
 
-    // onMounted(() => {
+const props = withDefaults(defineProps<TProps>(), {
-    //   // let scrollX = 0
+  show: false
-    //   // let scrollY = 0
-    //   // window.addEventListener('resize', () => {
-    //   //   guides.resize()
-    //   // })
-    //   // window.addEventListener('wheel', (e) => {
-    //   //   scrollX += e.deltaX
-    //   //   scrollY += e.deltaY
-    //   //   guides.scrollGuides(scrollY)
-    //   //   guides.scroll(scrollX)
-    //   // })
-    // })
-
-    function destroy() {
-      guidesTop.destroy()
-      guidesLeft.destroy()
-      guidesTop = null
-      guidesLeft = null
-    }
-    function render() {
-      const sameParams: any = {
-        backgroundColor: '#f9f9fa',
-        lineColor: '#bec2c7',
-        textColor: '#999999',
-        // direction: 'start',
-        // height: 30,
-        displayDragPos: true,
-        dragPosFormat: (v: any) => v + 'px',
-      }
-      guidesTop = new Guides(document.getElementById(container), {
-        ...sameParams,
-        type: 'horizontal',
-        className: 'my-horizontal',
-      }).on('changeGuides', (e) => {
-        console.log(e, e.guides)
-        // const el = document.getElementById('out-page')
-        // const top = 20 + (el?.offsetTop || 0)
-        // store.commit('updateGuidelines', { horizontalGuidelines: e.guides.map((x) => x + top) })
-      })
-
-      guidesLeft = new Guides(document.getElementById(container), {
-        ...sameParams,
-        type: 'vertical',
-        className: 'my-vertical',
-      }).on('changeGuides', (e) => {
-        console.log(e, e.guides)
-        // store.commit('updateGuidelines', { verticalGuidelines: e.guides })
-      })
-
-      changeScroll()
-    }
-    function changeScroll() {
-      if (guidesTop && guidesLeft) {
-        const zoom = store.getters.dZoom / 100
-        guidesTop.zoom = zoom
-        guidesLeft.zoom = zoom
-        if (zoom < 0.9) {
-          guidesTop.unit = Math.floor(1 / zoom) * 50
-          guidesLeft.unit = Math.floor(1 / zoom) * 50
-        }
-        setTimeout(() => {
-          const el = document.getElementById('out-page')
-          const left = 60 + (el?.offsetLeft || 0)
-          const top = 30 + (el?.offsetTop || 0)
-          guidesTop.scroll(-left / zoom)
-          guidesTop.scrollGuides(-top / zoom)
-          guidesLeft.scroll(-top / zoom)
-          guidesLeft.scrollGuides(-(left - 30) / zoom)
-        }, 300)
-      }
-    }
-  },
 })
+
+const store = useStore()
+const container = 'page-design' // page-design out-page
+let guidesTop: TGuidesData | null = null
+let guidesLeft: TGuidesData | null = null
+
+watch(
+  () => props.show,
+  (open) => {
+    open ? render() : destroy()
+  },
+)
+
+watch(
+  () => store.getters.dZoom,
+  () => {
+    changeScroll()
+  },
+)
+
+// onMounted(() => {
+//   // let scrollX = 0
+//   // let scrollY = 0
+//   // window.addEventListener('resize', () => {
+//   //   guides.resize()
+//   // })
+//   // window.addEventListener('wheel', (e) => {
+//   //   scrollX += e.deltaX
+//   //   scrollY += e.deltaY
+//   //   guides.scrollGuides(scrollY)
+//   //   guides.scroll(scrollX)
+//   // })
+// })
+
+function destroy() {
+  guidesTop?.destroy()
+  guidesLeft?.destroy()
+  guidesTop = null
+  guidesLeft = null
+}
+
+function render() {
+  const sameParams: TSameParams = {
+    backgroundColor: '#f9f9fa',
+    lineColor: '#bec2c7',
+    textColor: '#999999',
+    // direction: 'start',
+    // height: 30,
+    displayDragPos: true,
+    dragPosFormat: (v) => v + 'px',
+  }
+
+  const containerEl = document.getElementById(container)
+  if (!containerEl) return
+
+  guidesTop = new Guides(containerEl, {
+    ...sameParams,
+    type: 'horizontal',
+    className: 'my-horizontal',
+  }).on('changeGuides', (e) => {
+    console.log(e, e.guides)
+    // const el = document.getElementById('out-page')
+    // const top = 20 + (el?.offsetTop || 0)
+    // store.commit('updateGuidelines', { horizontalGuidelines: e.guides.map((x) => x + top) })
+  })
+
+  guidesLeft = new Guides(containerEl, {
+    ...sameParams,
+    type: 'vertical',
+    className: 'my-vertical',
+  }).on('changeGuides', (e) => {
+    console.log(e, e.guides)
+    // store.commit('updateGuidelines', { verticalGuidelines: e.guides })
+  })
+
+  changeScroll()
+}
+
+function changeScroll() {
+  if (guidesTop && guidesLeft) {
+    const zoom = store.getters.dZoom / 100
+    guidesTop.zoom = zoom
+    guidesLeft.zoom = zoom
+    if (zoom < 0.9) {
+      guidesTop.unit = Math.floor(1 / zoom) * 50
+      guidesLeft.unit = Math.floor(1 / zoom) * 50
+    }
+    setTimeout(() => {
+      if (guidesTop && guidesLeft) {
+        const el = document.getElementById('out-page')
+        const left = 60 + (el?.offsetLeft ?? 0)
+        const top = 30 + (el?.offsetTop ?? 0)
+        guidesTop.scroll(-left / zoom)
+        guidesTop.scrollGuides(-top / zoom)
+        guidesLeft.scroll(-top / zoom)
+        guidesLeft.scrollGuides(-(left - 30) / zoom)
+      }
+    }, 300)
+  }
+}
 </script>
 
 <style lang="less">

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'