feat: 解决activeObj无法被监听的问题

mjhcc365 · Jul 19, 2024 · ac60bc1 · ac60bc1
1 parent 91e6c3f
commit ac60bc1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/pages/EditPage/components/Tools/Tools.tsx b/src/pages/EditPage/components/Tools/Tools.tsx
@@ -186,8 +186,6 @@ export const TextTools = observer(() => {
         onChange={handleFontChange}
         size="small"
       />
-
-      <div>{(store.activeObj as any)?.fontFamily}</div>
       <Select
         style={{ width: 75 }}
         value={(store.activeObj as any)?.fontSize}
@@ -537,7 +535,7 @@ export enum ToolType {
   delete = "delete",
   layer = "layer",
   fillcolor = "fillcolor",
-  text = "text",
+  text = "textbox",
   stokeStyle = "stokeStyle",
   setGroup = "setGroup",
 }

diff --git a/src/store/canvas.ts b/src/store/canvas.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { createContext } from "react";
 import { makeObservable } from "mobx";
 
@@ -84,7 +85,7 @@ export class CanvasStore {
   elementHover: string = "";
 
   canvas!: Canvas;
-  activeObj: FabricObject | null = null;
+  activeObj: { [key: string]: any } | null = null;
 
   showSafeLine: boolean = true;
   showClipLine: boolean = true;
@@ -106,12 +107,25 @@ export class CanvasStore {
   }
 
   setActiveObj = (activeObj: FabricObject | FabricObject[] | null) => {
-    this.activeObj = Array.isArray(activeObj) ? activeObj[0] : activeObj;
+    if (!activeObj) {
+      this.activeObj = null;
+    } else {
+      const obj = Array.isArray(activeObj) ? activeObj[0] : activeObj;
+      const nextObj = {};
+      Object.keys(obj).map((key) => {
+        if (typeof obj[key] !== "function" && typeof obj[key] !== "object") {
+          nextObj[key] = obj[key];
+        }
+      });
+      nextObj.type = obj?.type;
+
+      this.activeObj = nextObj;
+    }
   };
 
-  setActiveObjParam = (key: string | Record<string, any>, value?: any) => {
+  setActiveObjParam = (key: string, value?: any) => {
     this.canvas?.getActiveObject()?.set({ [key as any]: value });
-    this.activeObj?.set({ [key as any]: value });
+    this.activeObj[key] = value;
     this.canvas?.renderAll();
   };