From f13eb11ccbd774771648bec90a329c5caec337ba Mon Sep 17 00:00:00 2001
From: June <1601745371@qq.com>
Date: Sun, 24 Mar 2024 11:02:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8A=BD=E7=A6=BB=E5=AD=97=E4=BD=93hoo?=
 =?UTF-8?q?ks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/attribute.vue | 39 ++++++--------------------
 src/components/waterMark.vue | 38 ++++----------------------
 src/hooks/index.ts           |  8 ++++++
 src/hooks/useFont/index.ts   | 53 ++++++++++++++++++++++++++++++++++++
 4 files changed, 76 insertions(+), 62 deletions(-)
 create mode 100644 src/hooks/index.ts
 create mode 100644 src/hooks/useFont/index.ts

diff --git a/src/components/attribute.vue b/src/components/attribute.vue
index c4ac5a78..70315978 100644
--- a/src/components/attribute.vue
+++ b/src/components/attribute.vue
@@ -7,7 +7,7 @@
         <div class="flex-item">
           <div class="left font-selector">
             <Select v-model="fontAttr.fontFamily" @on-change="changeFontFamily">
-              <Option v-for="item in fontFamilyList" :value="item.name" :key="`font-${item.name}`">
+              <Option v-for="item in fontsList" :value="item.name" :key="`font-${item.name}`">
                 <div class="font-item" v-if="!item.preview">{{ item.name }}</div>
                 <div class="font-item" v-else :style="`background-image:url('${item.preview}');`">
                   {{ !item.preview ? item : '' }}
@@ -299,18 +299,16 @@
 </template>
 
 <script setup name="AttrBute">
-import fontList from '@/assets/fonts/font';
 import useSelect from '@/hooks/select';
-import FontFaceObserver from 'fontfaceobserver';
 import colorSelector from '@/components/colorSelector.vue';
-import axios from 'axios';
 import { getPolygonVertices } from '@/utils/math';
 import InputNumber from '@/components/inputNumber';
 import { Spin } from 'view-ui-plus';
+import { useFont } from '@/hooks';
 
+const { fontsList, loadFont } = useFont();
 const event = inject('event');
 const update = getCurrentInstance();
-const repoSrc = import.meta.env.APP_REPO;
 const { fabric, mixinState, canvasEditor } = useSelect();
 // 通用元素
 const baseType = [
@@ -362,8 +360,6 @@ const fontAttr = reactive({
   linethrough: false,
   overline: false,
 });
-// 字体下拉列表
-const fontFamilyList = ref([...fontList]);
 const strokeDashList = [
   {
     value: {
@@ -447,15 +443,6 @@ const textAlignListSvg = [
   '<svg t="1650441519862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3854" width="18" height="18"><path d="M454.4 283.733333v-57.6c0-8.533333 2.133333-14.933333 8.533333-19.2 6.4-6.4 12.8-8.533333 19.2-8.533333h341.333334c8.533333 0 14.933333 2.133333 19.2 8.533333 6.4 6.4 8.533333 12.8 8.533333 19.2v57.6c0 8.533333-2.133333 14.933333-8.533333 19.2-6.4 6.4-12.8 8.533333-19.2 8.533334h-341.333334c-8.533333 0-14.933333-2.133333-19.2-8.533334-4.266667-4.266667-8.533333-10.666667-8.533333-19.2z m-226.133333 170.666667v-57.6c0-8.533333 2.133333-14.933333 8.533333-19.2 6.4-6.4 12.8-8.533333 19.2-8.533333h569.6c8.533333 0 14.933333 2.133333 19.2 8.533333 6.4 6.4 8.533333 12.8 8.533333 19.2v57.6c0 8.533333-2.133333 14.933333-8.533333 19.2-6.4 6.4-12.8 8.533333-19.2 8.533333H256c-8.533333 0-14.933333-2.133333-19.2-8.533333-6.4-4.266667-8.533333-10.666667-8.533333-19.2z m113.066666 170.666667v-57.6c0-8.533333 2.133333-14.933333 8.533334-19.2 6.4-6.4 12.8-8.533333 19.2-8.533334h454.4c8.533333 0 14.933333 2.133333 19.2 8.533334 6.4 6.4 8.533333 12.8 8.533333 19.2v57.6c0 8.533333-2.133333 14.933333-8.533333 19.2-6.4 6.4-12.8 8.533333-19.2 8.533333h-454.4c-8.533333 0-14.933333-2.133333-19.2-8.533333-6.4-4.266667-8.533333-10.666667-8.533334-19.2z m-170.666666 170.666666v-57.6c0-8.533333 2.133333-14.933333 8.533333-19.2 6.4-6.4 12.8-8.533333 19.2-8.533333h625.066667c8.533333 0 14.933333 2.133333 19.2 8.533333 6.4 6.4 8.533333 12.8 8.533333 19.2v57.6c0 8.533333-2.133333 14.933333-8.533333 19.2-6.4 6.4-12.8 8.533333-19.2 8.533334h-625.066667c-8.533333 0-14.933333-2.133333-19.2-8.533334-6.4-4.266667-8.533333-10.666667-8.533333-19.2z" p-id="3855"></path></svg>',
 ];
 
-const getFreeFontList = () => {
-  axios.get(`${repoSrc}/font/free-font.json`).then((res) => {
-    fontFamilyList.value = [
-      ...fontFamilyList.value,
-      ...Object.entries(res.data).map(([, value]) => value),
-    ];
-  });
-};
-
 const getObjectAttr = (e) => {
   const activeObject = canvasEditor.canvas.getActiveObject();
   // 不是当前obj，跳过
@@ -498,7 +485,6 @@ const selectCancel = () => {
 
 const init = () => {
   // 获取字体数据
-  getFreeFontList();
 
   event.on('selectCancel', selectCancel);
   event.on('selectOne', getObjectAttr);
@@ -506,7 +492,7 @@ const init = () => {
 };
 
 // 修改字体
-const changeFontFamily = (fontName) => {
+const changeFontFamily = async (fontName) => {
   if (!fontName) return;
   // 跳过加载的属性;
   const skipFonts = ['arial', 'Microsoft YaHei'];
@@ -518,18 +504,11 @@ const changeFontFamily = (fontName) => {
   }
   Spin.show();
   // 字体加载
-  const font = new FontFaceObserver(fontName);
-  font
-    .load(null, 150000)
-    .then(() => {
-      const activeObject = canvasEditor.canvas.getActiveObjects()[0];
-      activeObject && activeObject.set('fontFamily', fontName);
-      canvasEditor.canvas.renderAll();
-      Spin.hide();
-    })
-    .catch(() => {
-      Spin.hide();
-    });
+  if (await loadFont(fontName)) {
+    const activeObject = canvasEditor.canvas.getActiveObjects()[0];
+    activeObject && activeObject.set('fontFamily', fontName);
+    canvasEditor.canvas.renderAll();
+  }
 };
 
 // 通用属性改变
diff --git a/src/components/waterMark.vue b/src/components/waterMark.vue
index 61c9e382..dc4417cf 100644
--- a/src/components/waterMark.vue
+++ b/src/components/waterMark.vue
@@ -3,7 +3,7 @@
  * @Description:
  * @Date: 2023-11-01 11:54:10
  * @LastEditors: June
- * @LastEditTime: 2024-03-17 12:41:08
+ * @LastEditTime: 2024-03-24 11:01:30
 -->
 <template>
   <Button type="text" @click="addWaterMark">
@@ -29,7 +29,7 @@
     <div class="setting-item font-selector">
       <span class="mr-10px">选择字体</span>
       <Select class="w-320" v-model="waterMarkState.fontFamily" @on-change="changeFontFamily">
-        <Option v-for="item in fontFamilyList" :value="item.name" :key="`font-${item.name}`">
+        <Option v-for="item in fontsList" :value="item.name" :key="`font-${item.name}`">
           <div class="font-item" v-if="!item.preview">{{ item.name }}</div>
           <div class="font-item" v-else :style="`background-image:url('${item.preview}');`">
             {{ !item.preview ? item : '' }}
@@ -70,15 +70,12 @@
 
 <script name="WaterMark" lang="ts" setup>
 import { debounce } from 'lodash-es';
-import FontFaceObserver from 'fontfaceobserver';
 import useSelect from '@/hooks/select';
-import fontList from '@/assets/fonts/font';
-import axios from 'axios';
-import { Spin, Message } from 'view-ui-plus';
+import { useFont } from '@/hooks';
+import { Message } from 'view-ui-plus';
 
-const repoSrc = import.meta.env.APP_REPO;
+const { fontsList, loadFont } = useFont();
 const { canvasEditor }: any = useSelect();
-const fontFamilyList = ref([...fontList]);
 const waterMarkState = reactive({
   text: '',
   size: 24,
@@ -215,37 +212,14 @@ const onModalOk = () => {
   onMadalCancel();
 };
 
-// 修改字体
-const getFreeFontList = () => {
-  axios.get(`${repoSrc}/font/free-font.json`).then((res) => {
-    fontFamilyList.value = [
-      ...fontFamilyList.value,
-      ...Object.entries(res.data).map(([, value]) => value),
-    ];
-  });
-};
 const changeFontFamily = (fontName: string) => {
   if (!fontName) return;
-  Spin.show();
-  const font = new FontFaceObserver(fontName);
-  font
-    .load(null, 150000)
-    .then(() => {
-      Message.success('字体加载成功');
-      Spin.hide();
-      console.log('字体加载成功');
-    })
-    .catch(() => {
-      Message.error('字体加载失败');
-      Spin.hide();
-    });
+  loadFont(fontName);
 };
 
 const addWaterMark = debounce(function () {
   showWaterMadal.value = true;
 }, 250);
-
-onMounted(getFreeFontList);
 </script>
 
 <style lang="less" scoped>
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 00000000..3c590717
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1,8 @@
+/*
+ * @Author: June
+ * @Description: hooks manage
+ * @Date: 2024-03-24 10:42:31
+ * @LastEditors: June
+ * @LastEditTime: 2024-03-24 10:53:24
+ */
+export * from './useFont/index';
diff --git a/src/hooks/useFont/index.ts b/src/hooks/useFont/index.ts
new file mode 100644
index 00000000..8b27ca78
--- /dev/null
+++ b/src/hooks/useFont/index.ts
@@ -0,0 +1,53 @@
+/*
+ * @Author: June
+ * @Description: 获取免费字体
+ * @Date: 2024-03-24 10:19:05
+ * @LastEditors: June
+ * @LastEditTime: 2024-03-24 11:00:31
+ */
+import FontFaceObserver from 'fontfaceobserver';
+import fontList from '@/assets/fonts/font';
+import axios from 'axios';
+import { Spin, Message } from 'view-ui-plus';
+
+const repoSrc = import.meta.env.APP_REPO;
+
+const _fontList = ref<any[]>([]);
+
+export function useFont() {
+  const initFont = () => {
+    if (unref(_fontList).length > 0) return;
+    axios.get(`${repoSrc}/font/free-font.json`).then((res) => {
+      _fontList.value = [...Object.entries(res.data).map(([, value]) => value)];
+    });
+  };
+
+  const fontsList = computed(() => [...fontList, ...unref(_fontList)]);
+
+  const loadFont = (fontName: string) => {
+    if (!fontName) return false;
+    return new Promise((resolve: any) => {
+      Spin.show();
+      const font = new FontFaceObserver(fontName);
+      font
+        .load(null, 150000)
+        .then(() => {
+          Message.success('字体加载成功');
+          Spin.hide();
+          resolve(true);
+        })
+        .catch(() => {
+          Message.error('字体加载失败');
+          Spin.hide();
+          resolve(false);
+        });
+    });
+  };
+
+  onMounted(initFont);
+  return {
+    initFont,
+    fontsList,
+    loadFont,
+  };
+}