소스 검색

fix: 修复部分思维导图问题

liaojiaxing 1 주 전
부모
커밋
77eb6ca105

+ 1 - 1
apps/designer/src/api/systemDesigner.ts

@@ -101,7 +101,7 @@ export const BatchAddFlowchartElement = (data: any[]) => {
 };
 
 /**
- * 批量删除思维导图元素
+ * 批量删除流程图元素
  * @param
  */
 export const BatchDeleteFlowchartElement = (data: { ids: string[] }) => {

+ 1 - 1
apps/designer/src/app.ts

@@ -2,7 +2,7 @@ import { message } from "antd";
 import type { RequestConfig } from "umi";
 
 export const request: RequestConfig = {
-  timeout: 10000,
+  timeout: 20000,
   // other axios options you want
   errorConfig: {
     errorHandler(err) {

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

@@ -3,7 +3,7 @@ import { Cell, Edge, EventArgs, Graph, Node } from "@antv/x6";
 import { message } from "antd";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Selection } from "@repo/x6-plugin-selection";
-import { Keyboard } from "@antv/x6-plugin-keyboard";               
+import { Keyboard } from "@antv/x6-plugin-keyboard";
 import { Transform } from "@antv/x6-plugin-transform";
 import { Scroller } from "@antv/x6-plugin-scroller";
 import { Clipboard } from "@antv/x6-plugin-clipboard";
@@ -14,7 +14,7 @@ import { renderMindMap } from "@/utils/mindmap";
 import { TopicType } from "@/enum";
 import { isEqual, cloneDeep } from "lodash-es";
 import { bindMindmapKeys } from "@/utils/fastKey";
-import { handleCreateCorrelationEdge } from "@/utils/mindmapHander";
+import { handleCreateCorrelationEdge, traverseNode } from "@/utils/mindmapHander";
 import { Dnd } from "@antv/x6-plugin-dnd";
 import { EditGraph, BatchEditMindMapElement } from "@/api/systemDesigner";
 export default function mindMapModel() {
@@ -35,18 +35,46 @@ export default function mindMapModel() {
   const projectInfoRef = useRef<MindMapProjectInfo>();
   const timer = useRef<any>();
 
+  // 处理数据异常
+  const handleDataException = (data: MindMapProjectInfo) => {
+    const topIds = data.topics.map((item) => item.id);
+    // 处理顶层节点的parentId
+    return {
+      ...data,
+      topics: data.topics.map((topic) => {
+        traverseNode(topic.children ||[], (child) => {
+          child.children = child.children?.filter((item) => !topIds.includes(item.id));
+        });
+        return topic;
+      })
+    }
+  }
+
   const setMindProjectInfo = (
-    info: MindMapProjectInfo,
+    data: MindMapProjectInfo,
     init?: boolean,
     isSetting?: boolean,
     ignoreRender?: boolean,
     ignoreHistory?: boolean
   ) => {
-    setProjectInfo(cloneDeep(info));
+    const info = handleDataException(cloneDeep(data));
+    if(isEqual(info, projectInfoRef.current)) {
+      return;
+    }
+    setProjectInfo(info);
     projectInfoRef.current = info;
     sessionStorage.setItem("mindMapProjectInfo", JSON.stringify(info));
+    console.log(
+      "setMindProjectInfo",
+      info,
+      init,
+      isSetting,
+      ignoreRender,
+      ignoreHistory
+    );
+    
     // 初始化加载数据 清空画布
-    if(init) {
+    if (init) {
       graph?.clearCells();
       historyRef.current = [];
       graph?.centerContent();
@@ -62,13 +90,14 @@ export default function mindMapModel() {
         clearTimeout(timer.current);
         timer.current = setTimeout(() => {
           BatchEditMindMapElement(
-          info.topics.map((topic) => {
-            return {
-              ...topic,
-              graphId,
-            };
-          })
-        );
+            info.topics.map((topic) => {
+              return {
+                ...topic,
+                parentId: null,
+                graphId,
+              };
+            })
+          );
         }, 500);
       }
     }
@@ -92,22 +121,22 @@ export default function mindMapModel() {
       }
     }
 
-    if(!ignoreRender && graphRef.current) {
+    if (!ignoreRender && graphRef.current) {
       renderMindMap({
         graph: graphRef.current,
         setMindProjectInfo,
         pageSetting: info?.pageSetting,
         structure: info?.structure,
         theme: info?.theme,
-        topics: info?.topics,
+        topics: info.topics.map((item) => ({ ...item, parentId: null })),
       });
     }
 
     // 添加记录
-    if(!ignoreHistory && !ignoreRender) {
+    if (!ignoreHistory && !ignoreRender) {
       historyRef.current?.push(info);
       activeIndex.current = historyRef.current?.length - 1;
-      if(historyRef.current?.length > 20) {
+      if (historyRef.current?.length > 20) {
         historyRef.current?.shift();
         activeIndex.current -= 1;
       }
@@ -214,7 +243,7 @@ export default function mindMapModel() {
         },
       })
     );
-    
+
     graphRef.current = instance;
 
     dndRef.current = new Dnd({
@@ -282,8 +311,10 @@ export default function mindMapModel() {
 
   // 能否重做
   const canRedo = useMemo(() => {
-    return historyRef.current?.length > 1 &&
-      activeIndex.current < historyRef.current?.length - 1;
+    return (
+      historyRef.current?.length > 1 &&
+      activeIndex.current < historyRef.current?.length - 1
+    );
   }, [historyRef.current, activeIndex.current]);
 
   // 能否撤销

+ 1 - 0
apps/designer/src/pages/mindmap/index.tsx

@@ -34,6 +34,7 @@ export default function MindMap() {
   const transData = (item: any): TopicItem => {
     return {
       ...item,
+      parentId: null,
       edge: JSON.parse(item.edge),
       fill: JSON.parse(item.fill),
       links: JSON.parse(item.links),

+ 3 - 3
apps/designer/src/utils/fastKey.tsx

@@ -373,9 +373,9 @@ export const bindMindmapKeys = (
   });
 
   // Ctrl+x 剪切
-  graph.bindKey("ctrl+x", (e: KeyboardEvent) => {
-    graph.cut(graph.getSelectedCells());
-  });
+  // graph.bindKey("ctrl+x", (e: KeyboardEvent) => {
+  //   graph.cut(graph.getSelectedCells());
+  // });
 
   // Ctrl+v 粘贴
   graph.bindKey("ctrl+v", (e: KeyboardEvent) => {

+ 2 - 1
apps/designer/src/utils/mindmapHander.tsx

@@ -120,6 +120,7 @@ export const deleteTopics = (
   if (!mindProjectInfo || !setMindProjectInfo) return;
   const topics = cloneDeep(mindProjectInfo.topics);
   const deleteIds: string[] = [];
+  console.log(ids, graph, topics)
   const filterTopics = (list: TopicItem[]): TopicItem[] => {
     const result: TopicItem[] = [];
     for (const item of list) { 
@@ -616,7 +617,7 @@ export const mindmapMenuHander = {
     handleMindmapPaste(tool.graph, tool.cell.data.setMindProjectInfo);
   },
   delete(tool: ContextMenuTool) {
-    deleteTopics([tool.cell.id], tool.cell.data.setMindProjectInfo);
+    deleteTopics([tool.cell.id], tool.graph, tool.cell.data.setMindProjectInfo);
   },
   deleteCurrent(tool: ContextMenuTool) {
     tool.cell.isNode() && handleDeleteCurrentTopic(tool.graph, [tool.cell]);