feat: convert draw container to composition API

package.json

@@ -39,6 +39,7 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/fontfaceobserver": "^2.1.3",
     "@types/node": "^20.11.24",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",

src/views/Draw.vue

@@ -8,9 +8,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive, toRefs } from 'vue'
+import { StyleValue, onMounted, reactive, nextTick } from 'vue'
-import { mapActions, mapGetters } from 'vuex'
+import { useStore } from 'vuex'
 import api from '@/api'
 import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import Preload from '@/utils/plugins/preload'
@@ -18,122 +18,129 @@ import FontFaceObserver from 'fontfaceobserver'
 import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
 import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useRoute } from 'vue-router'
 
-export default defineComponent({
+type TState = {
-  components: { designBoard, zoomControl },
+  style: StyleValue
-  // mixins: [shortcuts],
+}
-  setup() {
-    const state = reactive({
-      style: {
-        left: '0px',
-      },
-    })
 
-    return {
+// mixins: [shortcuts],
-      ...toRefs(state),
+const store = useStore()
-    }
+const route = useRoute()
-  },
+const state = reactive<TState>({
-  computed: {
+  style: {
-    ...mapGetters(['dPage']),
+    left: '0px',
-  },
-  mounted() {
-    this.initGroupJson(JSON.stringify(wGroup.setting))
-    this.$nextTick(() => {
-      this.load()
-    })
-  },
-  methods: {
-    ...mapActions(['initGroupJson', 'setTemplate', 'addGroup']),
-    async load() {
-      let loadFlag = false
-      const { id, tempid, tempType: type } = this.$route.query
-      if (id || tempid) {
-        const { data, width, height } = await api.home[id ? 'getWorks' : 'getTempDetail']({ id: id || tempid, type })
-        const content = JSON.parse(data)
-        const widgets = type == 1 ? content : content.widgets
-
-        if (type == 1) {
-          this.dPage.width = width
-          this.dPage.height = height
-          this.dPage.backgroundColor = '#ffffff00'
-          this.addGroup(content)
-        } else {
-          this.$store.commit('setDPage', content.page)
-          id ? this.$store.commit('setDWidgets', widgets) : this.setTemplate(widgets)
-        }
-
-        await this.$nextTick()
-
-        const imgsData: any = []
-        const svgsData: any = []
-        const fontLoaders: any = []
-        const fontContent: any = {}
-        let fontData: any = []
-        widgets.forEach((item: any) => {
-          if (item.fontClass && item.fontClass.value) {
-            const loader = new FontFaceObserver(item.fontClass.value)
-            fontData.push(item.fontClass)
-            fontLoaders.push(loader.load(null, 30000)) // 延长超时让检测不会丢失字体
-            // 按字体来收集所有文字
-            if (fontContent[item.fontClass.value]) {
-              fontContent[item.fontClass.value] += item.text
-            } else {
-              fontContent[item.fontClass.value] = item.text
-            }
-          }
-          // 收集图片元素、svg元素
-          try {
-            if (item.svgUrl && item.type === 'w-svg') {
-              const cNodes: any = (window as any).document.getElementById(item.uuid).childNodes
-              svgsData.push(cNodes)
-            } else if (item.imgUrl && !item.isNinePatch) {
-              const cNodes: any = (window as any).document.getElementById(item.uuid).childNodes
-              for (const el of cNodes) {
-                if (el.className && el.className.includes('img__box')) {
-                  imgsData.push(el.firstChild)
-                }
-              }
-            }
-          } catch (e) {}
-        })
-        // TODO优化: 背景图无法检测是否加载完毕，考虑应该将设置背景作为独立事件
-        if (content.page?.backgroundImage) {
-          const preloadBg = new Preload([content.page.backgroundImage])
-          await preloadBg.imgs()
-        }
-        try {
-          fontWithDraw && (await font2style(fontContent, fontData))
-          // console.log('1. base64 yes')
-          const preload = new Preload(imgsData)
-          await preload.doms()
-          // console.log('2. image yes')
-          const preload2 = new Preload(svgsData)
-          await preload2.svgs()
-          // console.log('3. svg yes')
-        } catch (e) {
-          console.log(e)
-        }
-        try {
-          await Promise.all(fontLoaders)
-          // console.log('4. font yes')
-        } catch (e) {
-          // console.log(e)
-        }
-        loadFlag = true
-        console.log('--> now u can start screenshot!')
-        setTimeout(() => {
-          try {
-            ;(window as any).loadFinishToInject('done')
-          } catch (err) {}
-        }, 100)
-      }
-      // 超时
-      setTimeout(() => {
-        !loadFlag && (window as any).loadFinishToInject('done')
-      }, 60000)
-    },
   },
 })
+const { dPage } = useSetupMapGetters(['dPage'])
+
+onMounted(() => {
+  store.dispatch('initGroupJson', JSON.stringify(wGroup.setting))
+  // initGroupJson(JSON.stringify(wGroup.setting))
+  nextTick(() => {
+    load()
+  })
+})
+
+// ...mapActions(['initGroupJson', 'setTemplate', 'addGroup']),
+async function load() {
+  let loadFlag = false
+  const { id, tempid, tempType: type  } = route.query 
+  if (id || tempid) {
+    const postData = {
+      id: Number(id || tempid),
+      type: Number(type)
+    }
+    const { data, width, height } = await api.home[id ? 'getWorks' : 'getTempDetail'](postData)
+    const content = JSON.parse(data)
+    const widgets = Number(type) == 1 ? content : content.widgets
+
+    if (Number(type) == 1) {
+      dPage.value.width = width
+      dPage.value.height = height
+      dPage.value.backgroundColor = '#ffffff00'
+      store.dispatch('addGroup', content)
+      // addGroup(content)
+    } else {
+      store.commit('setDPage', content.page)
+      if (id) {
+        store.commit('setDWidgets', widgets)
+      } else {
+        store.dispatch('setTemplate', widgets)
+      }
+    }
+
+    await nextTick()
+
+    const imgsData: HTMLImageElement[] = []
+    const svgsData: HTMLImageElement[] = []
+    const fontLoaders: Promise<void>[] = []
+    const fontContent: Record<string, string> = {}
+    let fontData: string[] = []
+    widgets.forEach((item: any) => {
+      if (item.fontClass && item.fontClass.value) {
+        const loader = new FontFaceObserver(item.fontClass.value)
+        fontData.push(item.fontClass)
+        fontLoaders.push(loader.load(null, 30000)) // 延长超时让检测不会丢失字体
+        // 按字体来收集所有文字
+        if (fontContent[item.fontClass.value]) {
+          fontContent[item.fontClass.value] += item.text
+        } else {
+          fontContent[item.fontClass.value] = item.text
+        }
+      }
+      // 收集图片元素、svg元素
+      try {
+        if (item.svgUrl && item.type === 'w-svg') {
+          const cNodes: any = (window as any).document.getElementById(item.uuid).childNodes
+          svgsData.push(cNodes)
+        } else if (item.imgUrl && !item.isNinePatch) {
+          const cNodes: any = (window as any).document.getElementById(item.uuid).childNodes
+          for (const el of cNodes) {
+            if (el.className && el.className.includes('img__box')) {
+              imgsData.push(el.firstChild)
+            }
+          }
+        }
+      } catch (e) {}
+    })
+    // TODO优化: 背景图无法检测是否加载完毕，考虑应该将设置背景作为独立事件
+    if (content.page?.backgroundImage) {
+      const preloadBg = new Preload([content.page.backgroundImage])
+      await preloadBg.imgs()
+    }
+    try {
+      fontWithDraw && (await font2style(fontContent, fontData))
+      // console.log('1. base64 yes')
+      const preload = new Preload(imgsData)
+      await preload.doms()
+      // console.log('2. image yes')
+      const preload2 = new Preload(svgsData)
+      await preload2.svgs()
+      // console.log('3. svg yes')
+    } catch (e) {
+      console.log(e)
+    }
+    try {
+      await Promise.all(fontLoaders)
+      // console.log('4. font yes')
+    } catch (e) {
+      // console.log(e)
+    }
+    loadFlag = true
+    console.log('--> now u can start screenshot!')
+    setTimeout(() => {
+      try {
+        ;(window as any).loadFinishToInject('done')
+      } catch (err) {}
+    }, 100)
+  }
+  // 超时
+  setTimeout(() => {
+    !loadFlag && (window as any).loadFinishToInject('done')
+  }, 60000)
+}
 </script>
 
 <style lang="less" scoped>