fix: 修改bug

apps/designer/src/events/flowEvent.ts

@@ -1,6 +1,7 @@
 import { Graph, Node, EventArgs } from "@antv/x6";
 import { AddFlowchartElement, BatchEditFlowchartElement, BatchDeleteFlowchartElement } from "@/api/systemDesigner";
 export const handleGraphEvent = (graph: Graph) => {
+  // 边开始拖拽点
   const sourceArrowhead = {
     name: "source-arrowhead",
     args: {
@@ -12,6 +13,7 @@ export const handleGraphEvent = (graph: Graph) => {
       },
     }
   }
+  // 边结束拖拽点
   const targetArrowhead = {
     name: "target-arrowhead",
     args: {
@@ -29,7 +31,9 @@ export const handleGraphEvent = (graph: Graph) => {
   });
   // 边取消选中
   graph.on("edge:unselected", (args) => {
-    args.edge.removeTools(['edge-editor', sourceArrowhead, targetArrowhead]);
+    setTimeout(() => {
+      args.edge.removeTools(['edge-editor', sourceArrowhead, targetArrowhead]);
+    }, 100);
   });
 
   // 控制连接桩显示/隐藏
@@ -104,7 +108,7 @@ export const handleGraphApiEvent = (graph: Graph) => {
   let timer1: any;
   let map: Record<string, any> = {};
   graph.on("cell:change:*", (args: EventArgs["cell:change:*"]) => {
-    if(args.cell?.data?.isPage) return;
+    if(args.cell?.data?.isPage || args.key === 'tools') return;
     const setData = () => {
       const id = args.cell.id;
       const data = args.cell.toJSON();

apps/designer/src/events/mindMapEvent.ts

@@ -1,9 +1,6 @@
 import { Graph, Cell, Node, Edge, EventArgs } from "@antv/x6";
 import { BorderSize, StructureType, TopicType } from "@/enum";
-import {
-  addTopic,
-  updateTopic,
-} from "@/pages/mindmap/mindMap";
+import { addTopic, updateTopic } from "@/pages/mindmap/mindMap";
 import { cellStyle, MindMapProjectInfo, TopicItem } from "@/types";
 import { Dnd } from "@antv/x6-plugin-dnd";
 import { selectTopic } from "@/utils/mindmapHander";
@@ -11,7 +8,7 @@ import { uuid } from "@/utils";
 import { getTheme } from "@/pages/mindmap/theme";
 import { traverseNode } from "@/utils/mindmapHander";
 import { EditMindMapElement, AddMindMapElement } from "@/api/systemDesigner";
-import { debounce, isEqual } from "lodash-es"
+import { debounce, isEqual } from "lodash-es";
 
 enum positionType {
   left = "left",
@@ -29,7 +26,12 @@ let currentShadowNode: Node | undefined;
 
 export const bindMindMapEvents = (
   graph: Graph,
-  setMindProjectInfo?: (info: MindMapProjectInfo) => void,
+  setMindProjectInfo?: (
+    info: MindMapProjectInfo,
+    init?: boolean,
+    isSetting?: boolean,
+    ignoreRender?: boolean
+  ) => void,
   setSelectedCell?: (cell: Cell[]) => void,
   dndRef?: React.MutableRefObject<Dnd | undefined>
 ) => {
@@ -172,14 +174,20 @@ export const bindMindMapEvents = (
   // 双击画布空白-新增自由主题
   graph.on("blank:dblclick", (args) => {
     if (setMindProjectInfo) {
-      const topic = addTopic(TopicType.branch, setMindProjectInfo, graph, undefined, {
-        x: args.x,
-        y: args.y,
+      const topic = addTopic(
+        TopicType.branch,
         setMindProjectInfo,
-        type: TopicType.branch,
-        label: "自由主题",
-        borderSize: BorderSize.medium,
-      });
+        graph,
+        undefined,
+        {
+          x: args.x,
+          y: args.y,
+          setMindProjectInfo,
+          type: TopicType.branch,
+          label: "自由主题",
+          borderSize: BorderSize.medium,
+        }
+      );
 
       selectTopic(graph, topic);
     }
@@ -190,7 +198,7 @@ export const bindMindMapEvents = (
    */
   graph.on("node:change:data", (args) => {
     const { current, previous } = args;
-    console.log('数据变更：', current, previous)
+    console.log("数据变更：", current, previous);
     // 收折子项 setMindProjectInfo更新会重新渲染
     if (current.collapsed !== previous.collapsed) {
       setMindProjectInfo &&
@@ -204,7 +212,12 @@ export const bindMindMapEvents = (
     }
     if (current?.links && current.links.length !== previous?.links?.length) {
       setMindProjectInfo &&
-        updateTopic(args.cell.id, { links: current.links }, setMindProjectInfo, graph);
+        updateTopic(
+          args.cell.id,
+          { links: current.links },
+          setMindProjectInfo,
+          graph
+        );
     }
     if (current?.border !== previous?.border) {
       setMindProjectInfo &&
@@ -243,16 +256,26 @@ export const bindMindMapEvents = (
           graph
         );
     }
-    
+
     // 本地缓存更新不会重新渲染
     if (args.cell.id.includes("-border")) {
-      updateTopic(args.current.origin, { border: current }, (info) => {
-        sessionStorage.setItem("mindMapProjectInfo", JSON.stringify(info));
-      }, graph);
+      updateTopic(
+        args.current.origin,
+        { border: current },
+        (info) => {
+          setMindProjectInfo?.(info, false, false, true);
+        },
+        graph
+      );
     } else {
-      updateTopic(args.cell.id, current, (info) => {
-        sessionStorage.setItem("mindMapProjectInfo", JSON.stringify(info));
-      }, graph);
+      updateTopic(
+        args.cell.id,
+        current,
+        (info) => {
+          setMindProjectInfo?.(info, false, false, true);
+        },
+        graph
+      );
     }
   });
 
@@ -261,29 +284,36 @@ export const bindMindMapEvents = (
       fixedWidth: true,
       width: args.node.size().width,
       height: args.node.size().height,
-    })
+    });
   });
 
-  graph.on("node:change:position", debounce((args) => {
-    const { current } = args;
-    if (args.cell.isNode() && !args.cell.data?.parentId && args.cell.data.type !== TopicType.main) {
-      updateTopic(
-        args.cell.id,
-        { ...args.cell.data, x: current?.x, y: current?.y },
-        (info) => {
-          // localStorage.setItem("minMapProjectInfo", JSON.stringify(info));
-          setMindProjectInfo && setMindProjectInfo(info);
-        },
-        graph
-      );
-      EditMindMapElement({
-        ...args.cell.data,
-        ...args.current,
-        graphId: sessionStorage.getItem("projectId"),
-        tools: ''
-      });
-    }
-  }, 500));
+  graph.on(
+    "node:change:position",
+    debounce((args) => {
+      const { current } = args;
+      if (
+        args.cell.isNode() &&
+        !args.cell.data?.parentId &&
+        args.cell.data.type !== TopicType.main
+      ) {
+        updateTopic(
+          args.cell.id,
+          { ...args.cell.data, x: current?.x, y: current?.y },
+          (info) => {
+            // localStorage.setItem("minMapProjectInfo", JSON.stringify(info));
+            setMindProjectInfo && setMindProjectInfo(info);
+          },
+          graph
+        );
+        EditMindMapElement({
+          ...args.cell.data,
+          ...args.current,
+          graphId: sessionStorage.getItem("projectId"),
+          tools: "",
+        });
+      }
+    }, 500)
+  );
 
   /**
    * 连接线更改
@@ -320,7 +350,6 @@ export const bindMindMapEvents = (
       );
     }
   });
-
 };
 
 const canBeFreeNode = (x: number, y: number, node: Node): boolean => {

apps/designer/src/models/graphModel.ts

@@ -97,6 +97,9 @@ export default function GraphModel() {
             attrs: JSON.parse(item?.attrs as unknown as string || "{}"),
             source: JSON.parse(item?.source),
             target: JSON.parse(item?.target),
+            connector: item?.connector ? JSON.parse(item.connector) : undefined,
+            labels: item?.labels ? JSON.parse(item.labels) : undefined,
+            router: 'manhattan',
             // router: JSON.parse(item?.router || "{}"),
             tools: [
               {

apps/designer/src/models/mindMapModel.ts

@@ -34,34 +34,40 @@ export default function mindMapModel() {
 
   const [mindProjectInfo, setProjectInfo] = useState<MindMapProjectInfo>();
   const projectInfoRef = useRef<MindMapProjectInfo>();
+  const timer = useRef<any>();
 
-  const setMindProjectInfo = (info: MindMapProjectInfo, init?: boolean, isSetting?: boolean) => {
+  const setMindProjectInfo = (
+    info: MindMapProjectInfo,
+    init?: boolean,
+    isSetting?: boolean,
+    ignoreRender?: boolean
+  ) => {
     setProjectInfo(cloneDeep(info));
     projectInfoRef.current = info;
     sessionStorage.setItem("mindMapProjectInfo", JSON.stringify(info));
 
-    if(!init && !isSetting) {
+    if (!init && !isSetting) {
       const graphId = sessionStorage.getItem("projectId");
-      if(graphId && info?.topics) {
-        BatchEditMindMapElement(info.topics.map(topic => {
-          return {
-            ...topic,
-            graphId
-          }
-        }));
-        // info.topics.forEach((topic) => {
-        //   EditMindMapElement({
-        //     ...topic,
-        //     graphId,
-        //   });
-        // });
+      if (graphId && info?.topics) {
+        // 清除定时器
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+          BatchEditMindMapElement(
+          info.topics.map((topic) => {
+            return {
+              ...topic,
+              graphId,
+            };
+          })
+        );
+        }, 500);
       }
     }
 
     // 配置更新
-    if(isSetting) {
+    if (isSetting) {
       const pageSetting = info?.pageSetting;
-      if(sessionStorage.getItem("projectId") && pageSetting) {
+      if (sessionStorage.getItem("projectId") && pageSetting) {
         EditGraph({
           id: sessionStorage.getItem("projectId"),
           ...pageSetting,
@@ -70,30 +76,28 @@ export default function mindMapModel() {
           langNameList: [
             {
               name: "zh-CN",
-              value: info.name
-            }
-          ]
+              value: info.name,
+            },
+          ],
         });
       }
     }
-  };
 
-  const flagRef = useRef(false);
-  useEffect(() => {
-    if (!graph || !mindProjectInfo) return;
-    renderMindMap({
-      graph,
-      setMindProjectInfo,
-      pageSetting: mindProjectInfo?.pageSetting,
-      structure: mindProjectInfo?.structure,
-      theme: mindProjectInfo?.theme,
-      topics: mindProjectInfo?.topics,
-    });
-    if (!flagRef.current) {
-      flagRef.current = true;
-      graph.centerContent();
+    if(!ignoreRender && graphRef.current) {
+      renderMindMap({
+        graph: graphRef.current,
+        setMindProjectInfo,
+        pageSetting: info?.pageSetting,
+        structure: info?.structure,
+        theme: info?.theme,
+        topics: info?.topics,
+      });
     }
-  }, [mindProjectInfo, graph]);
+
+    if(init) {
+      graph?.centerContent();
+    }
+  };
 
   const pageSettingRef = useRef<MindMapProjectInfo["pageSetting"]>();
 
@@ -216,12 +220,7 @@ export default function mindMapModel() {
     });
 
     // 绑定事件
-    bindMindMapEvents(
-      instance,
-      setMindProjectInfo,
-      setSelectedCell,
-      dndRef
-    );
+    bindMindMapEvents(instance, setMindProjectInfo, setSelectedCell, dndRef);
     // 绑定键盘
     bindMindmapKeys(instance, mindProjectInfo, setMindProjectInfo);
     // 绑定实例方法
@@ -230,7 +229,7 @@ export default function mindMapModel() {
       setRightToolbarActive,
       correlationEdgeRef,
       setMindProjectInfo,
-      getMindProjectInfo: () => cloneDeep(projectInfoRef.current)
+      getMindProjectInfo: () => cloneDeep(projectInfoRef.current),
     };
 
     setGraph(instance);

apps/designer/src/pages/flow/components/Config/GraphStyle.tsx

@@ -30,7 +30,7 @@ import { ImageFillType, ConnectorType, LineType } from "@/enum";
 import { set, cloneDeep } from "lodash-es";
 import { Cell } from "@antv/x6";
 import { fontFamilyOptions, alignOptionData } from '@/pages/flow/data';
-import { alignCell, matchSize } from '@/utils';
+import { alignCell, matchSize, handleSetEdgeStyle } from '@/utils';
 import { cellStyle } from '@/types'
 
 type FormModel = {
@@ -46,6 +46,7 @@ type FormModel = {
 } & cellStyle;
 export default function GraphStyle() {
   const { selectedCell } = useModel("graphModel");
+  const { pageState } = useModel("appModel");
   const [isMulit, setIsMulit] = useState(false);
   const [hasEdge, setHasEdge] = useState(false);
   const eventNodeList = useRef<Cell[]>([]);
@@ -208,6 +209,7 @@ export default function GraphStyle() {
         const attr = cell.attrs;
         const sourceMarker = attr?.line?.sourceMarker as Record<string, any>;
         const targetMarker = attr?.line?.targetMarker as Record<string, any>;
+        handleSetEdgeStyle(cell, model.connectorType, pageState.jumpOver);
         cell.setAttrs({
           line: {
             ...(attr?.line || {}),

apps/designer/src/pages/flow/components/MenuBar/index.tsx

@@ -292,12 +292,12 @@ export default function MenuBar() {
           key: "1-8",
           type: "divider",
         },
-        {
-          key: "1-9",
-          label: "历史记录",
-          icon: <i className="w-20px iconfont icon-lishijilu" />,
-          onClick: handleHistory,
-        },
+        // {
+        //   key: "1-9",
+        //   label: "历史记录",
+        //   icon: <i className="w-20px iconfont icon-lishijilu" />,
+        //   onClick: handleHistory,
+        // },
         {
           key: "1-0",
           label: (
@@ -992,7 +992,7 @@ export default function MenuBar() {
     <>
       <div className="w-full px-8px flex justify-between items-center">
         <div className="menu-left flex items-center">
-          <Button type="text" icon={<LeftOutlined />}></Button>
+          {/* <Button type="text" icon={<LeftOutlined />}></Button> */}
           <div className="w-40px h-40px mx-8px">
             <img className="w-40px" src={logo} />
           </div>

apps/designer/src/pages/home/All.tsx

@@ -243,16 +243,18 @@ export default function All({
       key: "2",
       label: <span className="ml-4px">流程图</span>,
       icon: <Icon icon="local:flow" width="22px" />,
-      onClick: () => {
-        createNew(GraphType.flowchart, currentFolder.current);
+      onClick: async () => {
+        await createNew(GraphType.flowchart, currentFolder.current);
+        getData(1, pageSize);
       },
     },
     {
       key: "3",
       label: <span className="ml-4px">思维导图</span>,
       icon: <Icon icon="local:mind" width="22px" />,
-      onClick: () => {
-        createNew(GraphType.mindmap, currentFolder.current);
+      onClick: async () => {
+        await createNew(GraphType.mindmap, currentFolder.current);
+        getData(1, pageSize);
       },
     },
   ];
@@ -323,6 +325,7 @@ export default function All({
     }).then(() => {
       message.success("移动成功");
       refresh();
+      setOpen(false);
     });
   };
 

apps/designer/src/pages/mindmap/components/HeaderToolbar/index.tsx

@@ -207,12 +207,12 @@ export default function index() {
         findModalRef.current?.open();
       },
     },
-    {
-      key: "6",
-      label: "历史记录",
-      icon: <i className="w-20px iconfont icon-lishijilu" />,
-      onClick: handleHistory,
-    },
+    // {
+    //   key: "6",
+    //   label: "历史记录",
+    //   icon: <i className="w-20px iconfont icon-lishijilu" />,
+    //   onClick: handleHistory,
+    // },
     // {
     //   key: "1-8",
     //   type: "divider",
@@ -226,7 +226,7 @@ export default function index() {
 
   return (
     <div className="absolute absolute top-8px left-8px bg-white shadow-md flex items-center gap-4px rounded-4px px-8px">
-      <Button type="text" icon={<LeftOutlined />}></Button>
+      {/* <Button type="text" icon={<LeftOutlined />}></Button> */}
 
       <Dropdown
         trigger={["hover"]}

apps/designer/src/pages/mindmap/index.tsx

@@ -41,11 +41,11 @@ export default function MindMap() {
         ? { extraModules: JSON.parse(item.extraModules) }
         : {}),
       ...(item?.icons ? { icons: JSON.parse(item.icons) } : {}),
-      ...(item?.tags ? { icons: JSON.parse(item.tags) } : {}),
-      ...(item?.href ? { icons: JSON.parse(item.href) } : {}),
-      ...(item?.links ? { icons: JSON.parse(item.links) } : {}),
-      ...(item?.summary ? { icons: JSON.parse(item.summary) } : {}),
-      ...(item?.summary ? { icons: JSON.parse(item.summary) } : {}),
+      ...(item?.tags ? { tags: JSON.parse(item.tags) } : {}),
+      ...(item?.href ? { href: JSON.parse(item.href) } : {}),
+      ...(item?.links ? { links: JSON.parse(item.links) } : {}),
+      ...(item?.summary ? { summary: JSON.parse(item.summary) } : {}),
+      ...(item?.border ? { border: JSON.parse(item.border) } : {}),
     };
   };
 
@@ -55,6 +55,7 @@ export default function MindMap() {
     const topics = (data?.result?.elements || []).map((item: any) =>
       transData(item)
     );
+
     if (!topics.length) {
       const mainTopic = buildTopic(TopicType.main, {
         label: "中心主题",

apps/designer/src/pages/mindmap/mindMap.tsx

@@ -322,12 +322,12 @@ export const addTopic = (
     projectInfo.topics.push(topic);
   }
 
-  if(sessionStorage.getItem("projectId") && !topic.parentId) {
-    AddMindMapElement({
-      ...topic,
-      graphId: sessionStorage.getItem("projectId"),
-    });
-  }
+  // if(sessionStorage.getItem("projectId") && !topic.parentId) {
+  //   AddMindMapElement({
+  //     ...topic,
+  //     graphId: sessionStorage.getItem("projectId"),
+  //   });
+  // }
 
   setMindProjectInfo(projectInfo);
   

apps/designer/src/utils/mindmapHander.tsx

@@ -123,7 +123,7 @@ export const deleteTopics = (
   const deleteIds: string[] = [];
   const filterTopics = (list: TopicItem[]): TopicItem[] => {
     const result: TopicItem[] = [];
-    for (const item of list) {
+    for (const item of list) { 
       if(ids.includes(item.id) && item.type === TopicType.main) {
         item.children = [];
       }
@@ -143,7 +143,9 @@ export const deleteTopics = (
   };
 
   mindProjectInfo.topics = filterTopics(topics);
-  BatchDeleteMindMapElement({ids: deleteIds});
+  if(deleteIds.length) {
+    BatchDeleteMindMapElement({ids: deleteIds});
+  }
 
   setMindProjectInfo(mindProjectInfo);
   localStorage.setItem("minMapProjectInfo", JSON.stringify(mindProjectInfo));