refactor: 重构选择事件监听hook (#365)

ikuaitu · May 7, 2024 · 0aa242e · 0aa242e
1 parent 4d1d18b
commit 0aa242e
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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 {