From 50cfa93d190bc97d7011769debf514471e3ee008 Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Wed, 23 Aug 2023 17:49:36 +0800
Subject: [PATCH] code: add load font rule

---
 .../modules/widgets/wText/wText.vue           |  4 +-
 src/utils/widgets/loadFontRule.ts             | 39 +++++++++++++++++++
 src/views/Draw.vue                            | 33 ++--------------
 src/views/components/HeaderOptions.vue        |  2 +-
 4 files changed, 45 insertions(+), 33 deletions(-)
 create mode 100644 src/utils/widgets/loadFontRule.ts

diff --git a/src/components/modules/widgets/wText/wText.vue b/src/components/modules/widgets/wText/wText.vue
index 6266888..e3444e4 100644
--- a/src/components/modules/widgets/wText/wText.vue
+++ b/src/components/modules/widgets/wText/wText.vue
@@ -53,7 +53,7 @@
 const NAME = 'w-text'
 
 import { mapGetters, mapActions } from 'vuex'
-// import api from '@/api'
+import { fontWithDraw } from '@/utils/widgets/loadFontRule'
 
 export default {
   name: NAME,
@@ -105,7 +105,7 @@ export default {
   computed: {
     ...mapGetters(['dActiveElement']),
     isDraw() {
-      return this.$route.name === 'Draw'
+      return this.$route.name === 'Draw' && fontWithDraw
     },
   },
   watch: {
diff --git a/src/utils/widgets/loadFontRule.ts b/src/utils/widgets/loadFontRule.ts
new file mode 100644
index 0000000..5d1a665
--- /dev/null
+++ b/src/utils/widgets/loadFontRule.ts
@@ -0,0 +1,39 @@
+/*
+ * @Author: ShawnPhang
+ * @Date: 2023-08-23 17:37:16
+ * @Description: 提取字体子集，如服务端不支持请关闭该功能，以保证页面能加载字体
+ * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditTime: 2023-08-23 17:48:34
+ */
+import api from '@/api'
+import { blob2Base64, generateFontStyle } from '@/common/methods/fonts/utils'
+
+export const fontWithDraw = true // true开启，false关闭
+
+export const font2style = async (fontContent: any, fontData: any = []) => {
+  return new Promise((resolve: Function) => {
+    Promise.all(
+      // 提取字体子集。只有ttf/otf这种原始字体支持提取，如果服务端不支持则关闭该功能，以保证页面能加载字体。
+      Object.keys(fontContent).map(async (key) => {
+        const font = fontData.find((font: any) => font.value === key) as any
+        if (font.id) {
+          try {
+            const base64 = await api.material.getFontSub({
+              font_id: font.id,
+              url: font.url,
+              content: 'Aa' + fontContent[key],
+            })
+            fontContent[key] = base64
+          } catch (e) {
+            console.log('字体获取失败', e)
+          }
+        }
+      }),
+    ).then(() => {
+      const fontStyles = Object.keys(fontContent).reduce((pre, cur) => pre + generateFontStyle(cur, fontContent[cur]).outerHTML, '')
+      document.head.innerHTML += fontStyles
+      // document.head.appendChild(fontStyles)
+      resolve()
+    })
+  })
+}
diff --git a/src/views/Draw.vue b/src/views/Draw.vue
index 2ab9c7b..157c034 100644
--- a/src/views/Draw.vue
+++ b/src/views/Draw.vue
@@ -15,7 +15,7 @@ import api from '@/api'
 import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import Preload from '@/utils/plugins/preload'
 import FontFaceObserver from 'fontfaceobserver'
-import { blob2Base64, generateFontStyle } from '@/common/methods/fonts/utils'
+import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
 import designBoard from '@/components/modules/layout/designBoard.vue'
 import zoomControl from '@/components/modules/layout/zoomControl.vue'
 
@@ -94,7 +94,7 @@ export default defineComponent({
           fontData.forEach((item: any) => {
             item.url = list.find((x: any) => x.oid == item.id)?.ttf
           })
-          await this.font2style(fontContent, fontData)
+          fontWithDraw && (await font2style(fontContent, fontData))
           // console.log('1. base64 yes')
           const preload = new Preload(imgsData)
           await preload.doms()
@@ -112,7 +112,7 @@ export default defineComponent({
           // console.log(e)
         }
         loadFlag = true
-        // console.log('--> now u can start screenshot!')
+        console.log('--> now u can start screenshot!')
         setTimeout(() => {
           try {
             ;(window as any).loadFinishToInject('done')
@@ -124,33 +124,6 @@ export default defineComponent({
         !loadFlag && (window as any).loadFinishToInject('done')
       }, 60000)
     },
-    async font2style(fontContent: any, fontData: any = []) {
-      return new Promise((resolve: Function) => {
-        Promise.all(
-          // 拿到字体子集。只有ttf/otf这种原始字体支持提取，如服务端不具备该功能则没有此步骤，在页面加载整个字体。
-          Object.keys(fontContent).map(async (key) => {
-            const font = fontData.find((font: any) => font.value === key) as any
-            if (font.id) {
-              try {
-                const base64 = await api.material.getFontSub({
-                  font_id: font.id,
-                  url: font.url,
-                  content: 'Aa' + fontContent[key],
-                })
-                fontContent[key] = base64
-              } catch (e) {
-                console.log('字体获取失败', e)
-              }
-            }
-          }),
-        ).then(() => {
-          const fontStyles = Object.keys(fontContent).reduce((pre, cur) => pre + generateFontStyle(cur, fontContent[cur]).outerHTML, '')
-          document.head.innerHTML += fontStyles
-          // document.head.appendChild(fontStyles)
-          resolve()
-        })
-      })
-    },
   },
 })
 </script>
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index 0030f68..88626eb 100644
--- a/src/views/components/HeaderOptions.vue
+++ b/src/views/components/HeaderOptions.vue
@@ -3,7 +3,7 @@
  * @Date: 2022-01-12 11:26:53
  * @Description: 顶部操作按钮组
  * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-25 16:02:13
+ * @LastEditTime: 2023-08-23 17:33:12
 -->
 <template>
   <div class="top-title"><el-input v-model="title" placeholder="未命名的设计" class="input-wrap" /></div>