From 0aa242e004ae662e75453dfe63921975040e7b07 Mon Sep 17 00:00:00 2001
From: wuchenguang1998 <63847336+wuchenguang1998@users.noreply.github.com>
Date: Tue, 7 May 2024 16:45:54 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AChook=20(#365)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/select.ts          | 52 +++--------------------------
 src/hooks/useSelectListen.ts | 65 ++++++++++++++++++++++++++++++++++++
 src/views/home/index.vue     |  6 ++++
 3 files changed, 76 insertions(+), 47 deletions(-)
 create mode 100644 src/hooks/useSelectListen.ts

diff --git a/src/hooks/select.ts b/src/hooks/select.ts
index b6c4f96a..c16eb324 100644
--- a/src/hooks/select.ts
+++ b/src/hooks/select.ts
@@ -3,11 +3,10 @@
  * @version:
  * @Author: June
  * @Date: 2023-04-23 21:10:05
- * @LastEditors: 秦少卫
- * @LastEditTime: 2024-04-10 14:42:34
+ * @LastEditors: wuchenguang1998
+ * @LastEditTime: 2024-05-04 15:37:06
  */
-import Editor, { EventType } from '@kuaitu/core';
-const { SelectEvent, SelectMode } = EventType;
+import Editor from '@kuaitu/core';
 interface Selector {
   mSelectMode: SelectMode;
   mSelectOneType: string | undefined;
@@ -17,54 +16,13 @@ interface Selector {
 }
 
 export default function useSelect() {
-  const state = reactive<Selector>({
-    mSelectMode: SelectMode.EMPTY,
-    mSelectOneType: '',
-    mSelectId: '', // 选择id
-    mSelectIds: [], // 选择id
-    mSelectActive: [],
-  });
-
   const fabric = inject('fabric');
   const canvasEditor = inject('canvasEditor') as Editor;
-
-  const selectOne = (e: [fabric.Object]) => {
-    state.mSelectMode = SelectMode.ONE;
-    if (e[0]) {
-      state.mSelectId = e[0].id;
-      state.mSelectOneType = e[0].type;
-      state.mSelectIds = e.map((item) => item.id);
-    }
-  };
-
-  const selectMulti = (e: fabric.Object[]) => {
-    state.mSelectMode = SelectMode.MULTI;
-    state.mSelectId = '';
-    state.mSelectIds = e.map((item) => item.id);
-  };
-
-  const selectCancel = () => {
-    state.mSelectId = '';
-    state.mSelectIds = [];
-    state.mSelectMode = SelectMode.EMPTY;
-    state.mSelectOneType = '';
-  };
-
-  onMounted(() => {
-    canvasEditor.on(SelectEvent.ONE, selectOne);
-    canvasEditor.on(SelectEvent.MULTI, selectMulti);
-    canvasEditor.on(SelectEvent.CANCEL, selectCancel);
-  });
-
-  onBeforeMount(() => {
-    canvasEditor.off(SelectEvent.ONE, selectOne);
-    canvasEditor.off(SelectEvent.MULTI, selectMulti);
-    canvasEditor.off(SelectEvent.CANCEL, selectCancel);
-  });
+  const mixinState = inject('mixinState') as Selector;
 
   return {
     fabric,
     canvasEditor,
-    mixinState: state,
+    mixinState,
   };
 }
diff --git a/src/hooks/useSelectListen.ts b/src/hooks/useSelectListen.ts
new file mode 100644
index 00000000..b185e902
--- /dev/null
+++ b/src/hooks/useSelectListen.ts
@@ -0,0 +1,65 @@
+/*
+ * @Descripttion: useSelectListen
+ * @version:
+ * @Author: wuchenguang1998
+ * @Date: 2024-05-04 14:36:49
+ * @LastEditors: wuchenguang1998
+ * @LastEditTime: 2024-05-04 15:27:11
+ */
+import Editor, { EventType } from '@kuaitu/core';
+const { SelectEvent, SelectMode } = EventType;
+interface Selector {
+  mSelectMode: SelectMode;
+  mSelectOneType: string | undefined;
+  mSelectId: string | undefined;
+  mSelectIds: (string | undefined)[];
+  mSelectActive: unknown[];
+}
+
+export default function useSelectListen(canvasEditor: Editor) {
+  const state = reactive<Selector>({
+    mSelectMode: SelectMode.EMPTY,
+    mSelectOneType: '',
+    mSelectId: '', // 选择id
+    mSelectIds: [], // 选择id
+    mSelectActive: [],
+  });
+
+  const selectOne = (e: [fabric.Object]) => {
+    state.mSelectMode = SelectMode.ONE;
+    if (e[0]) {
+      state.mSelectId = e[0].id;
+      state.mSelectOneType = e[0].type;
+      state.mSelectIds = e.map((item) => item.id);
+    }
+  };
+
+  const selectMulti = (e: fabric.Object[]) => {
+    state.mSelectMode = SelectMode.MULTI;
+    state.mSelectId = '';
+    state.mSelectIds = e.map((item) => item.id);
+  };
+
+  const selectCancel = () => {
+    state.mSelectId = '';
+    state.mSelectIds = [];
+    state.mSelectMode = SelectMode.EMPTY;
+    state.mSelectOneType = '';
+  };
+
+  onMounted(() => {
+    canvasEditor.on(SelectEvent.ONE, selectOne);
+    canvasEditor.on(SelectEvent.MULTI, selectMulti);
+    canvasEditor.on(SelectEvent.CANCEL, selectCancel);
+  });
+
+  onBeforeMount(() => {
+    canvasEditor.off(SelectEvent.ONE, selectOne);
+    canvasEditor.off(SelectEvent.MULTI, selectMulti);
+    canvasEditor.off(SelectEvent.CANCEL, selectCancel);
+  });
+
+  return {
+    mixinState: state,
+  };
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 7d75bdc6..625320bb 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -178,6 +178,9 @@ import attribute from '@/components/attribute.vue';
 // 功能组件
 import { fabric } from 'fabric';
 
+// hooks
+import useSelectListen from '@/hooks/useSelectListen';
+
 const APIHOST = import.meta.env.APP_APIHOST;
 
 import Editor, {
@@ -282,8 +285,11 @@ const switchAttrBar = () => {
   state.attrBarShow = !state.attrBarShow;
 };
 
+const { mixinState } = useSelectListen(canvasEditor);
+
 provide('fabric', fabric);
 provide('canvasEditor', canvasEditor);
+provide('mixinState', mixinState);
 </script>
 <style lang="less" scoped>
 .logo {