Bladeren bron

fix: 修改思维导图撤销重做功能

liaojiaxing 5 maanden geleden
bovenliggende
commit
5d877a5ce3
2 gewijzigde bestanden met toevoegingen van 35 en 20 verwijderingen
  1. 1 1
      apps/designer/src/components/mindMap/Topic.tsx
  2. 34 19
      apps/designer/src/models/mindMapModel.ts

+ 1 - 1
apps/designer/src/components/mindMap/Topic.tsx

@@ -199,7 +199,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
       deep: false
     });
   }
-console.log(borderSize)
+
   return (
     <div>
       {selected && (

+ 34 - 19
apps/designer/src/models/mindMapModel.ts

@@ -1,7 +1,7 @@
 import { cellStyle } from "@/types";
 import { Cell, Edge, EventArgs, Graph, Node } from "@antv/x6";
 import { message } from "antd";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Selection } from "@repo/x6-plugin-selection";
 import { Keyboard } from "@antv/x6-plugin-keyboard";
 import { History } from "@antv/x6-plugin-history";
@@ -28,10 +28,10 @@ export default function mindMapModel() {
   const graphRef = useRef<Graph>();
   const dndRef = useRef<Dnd>();
   const [graph, setGraph] = useState<Graph>();
-  const [canRedo, setCanRedo] = useState(false);
-  const [canUndo, setCanUndo] = useState(false);
   const [selectedCell, setSelectedCell] = useState<Cell[]>([]);
   const correlationEdgeRef = useRef<Edge>();
+  const historyRef = useRef<MindMapProjectInfo[]>([]);
+  const activeIndex = useRef(0);
 
   const [mindProjectInfo, setProjectInfo] = useState<MindMapProjectInfo>();
   const projectInfoRef = useRef<MindMapProjectInfo>();
@@ -41,7 +41,8 @@ export default function mindMapModel() {
     info: MindMapProjectInfo,
     init?: boolean,
     isSetting?: boolean,
-    ignoreRender?: boolean
+    ignoreRender?: boolean,
+    ignoreHistory?: boolean
   ) => {
     setProjectInfo(cloneDeep(info));
     projectInfoRef.current = info;
@@ -97,6 +98,17 @@ export default function mindMapModel() {
 
     if(init) {
       graph?.centerContent();
+      historyRef.current = [];
+    }
+
+    // 添加记录
+    if(!ignoreHistory && !ignoreRender) {
+      historyRef.current?.push(info);
+      activeIndex.current = historyRef.current?.length - 1;
+      if(historyRef.current?.length > 20) {
+        historyRef.current?.shift();
+        activeIndex.current -= 1;
+      }
     }
   };
 
@@ -199,19 +211,7 @@ export default function mindMapModel() {
         },
       })
     );
-    instance.use(
-      new History({
-        enabled: true,
-        // beforeAddCommand: (e, args) => {
-        //   // @ts-ignore
-        //   return !args.cell.isEdge()
-        // },
-      })
-    );
-    instance.on("history:change", () => {
-      setCanRedo(instance.canRedo());
-      setCanUndo(instance.canUndo());
-    });
+    
     graphRef.current = instance;
 
     dndRef.current = new Dnd({
@@ -277,14 +277,29 @@ export default function mindMapModel() {
     });
   };
 
+  // 能否重做
+  const canRedo = useMemo(() => {
+    return historyRef.current?.length > 1 &&
+      activeIndex.current < historyRef.current?.length - 1;
+  }, [historyRef.current, activeIndex.current]);
+
+  // 能否撤销
+  const canUndo = useMemo(() => {
+    return activeIndex.current > 0 && historyRef.current?.length > 1;
+  }, [historyRef.current, activeIndex.current]);
+
   // 撤销
   const onUndo = () => {
-    graphRef.current?.undo();
+    const info = historyRef.current?.[activeIndex.current - 1];
+    activeIndex.current -= 1;
+    setMindProjectInfo(info, false, false, false, true);
   };
 
   // 重做
   const onRedo = () => {
-    graphRef.current?.redo();
+    const info = historyRef.current?.[activeIndex.current + 1];
+    activeIndex.current += 1;
+    setMindProjectInfo(info, false, false, false, true);
   };
 
   // 设置右侧工具激活项