fix: 修改流程设计拖拽异常等

apps/flowchart-designer/src/components/NodeMenu.tsx

@@ -27,6 +27,7 @@ export default function NodeMenu(props: {
   position?: { x: number; y: number };
 }) {
   const { graph } = props;
+  // 添加节点
   const handleAddNode = (type: NodeType) => {
     const node = nodes.find((item) => item.type === type);
     const { width = 100, height = 100 } = graph?.getGraphArea() || {};
@@ -72,7 +73,7 @@ export default function NodeMenu(props: {
 
   return (
     <div className="w-280px flex flex-wrap gap-[8px 12px]">
-      {/* {items.map((item) => {
+      {items.map((item) => {
         return (
           <div
             className="w-[38%] border-box h-40px px-12px rounded-8px flex items-center cursor-pointer hover:bg-#eff0f8"
@@ -83,19 +84,6 @@ export default function NodeMenu(props: {
             <span>{item.text}</span>
           </div>
         );
-      })} */}
-      {aiNode.map((item) => {
-        return (
-          <div
-            className="w-[38%] border-box h-40px px-12px rounded-8px flex items-center cursor-pointer hover:bg-#eff0f8"
-            key={item.icon}
-            onClick={(e) => {handleAddAiNode(item)}}
-          >
-            {/* <img src={item.icon} className="w-24px" /> */}
-            <i className={"w-24px iconfont " + item.icon}/>
-            <span>{item.data.name}</span>
-          </div>
-        );
       })}
     </div>
   );

apps/flowchart-designer/src/components/nodes/And.tsx

@@ -11,7 +11,7 @@ export default ({ node, graph }: { node: Node; graph: Graph }) => {
 
   const items: MenuProps["items"] = [
     { key: "copy", label: "复制" },
-    { key: "delete", label: "删除" },
+    { key: "delete", label: "删除", onClick: () => node.remove() },
   ];
 
   graph?.on("selection:changed", (args) => {

apps/flowchart-designer/src/components/nodes/Content.tsx

@@ -24,6 +24,7 @@ export default ({
 }) => {
   const { name, type } = node.getData();
 
+  // 删除节点
   const handleDelete = () => {
     graph.removeNode(node);
   };
@@ -34,12 +35,6 @@ export default ({
         className="w-full flex justify-end absolute top--34px left-0"
         style={{ display: hovered || selected ? "flex" : "none" }}
       >
-        <Button
-          type="text"
-          className="text-primary-dark"
-          icon={<CaretRightOutlined />}
-          onClick={handleDelete}
-        />
         <Button
           type="text"
           className="text-primary-dark"

apps/flowchart-designer/src/components/nodes/Port.tsx

@@ -113,7 +113,7 @@ export default function Port(props: {
 
     // step3: 鼠标抬起，展示节点菜单或者连线连接到目标节点
     graph?.on("node:mouseup", (args) => {
-      console.log("node:mouseup");
+      console.log("node:mouseup", newEdge.current);
       node?.setData({ lock: false });
       isDown.current = false;
       isMove.current = false;
@@ -172,9 +172,9 @@ export default function Port(props: {
           graph?.removeCells([newEdge.current!]);
           newEdge.current = undefined;
         }
-      }, 100);
+      }, 300);
     });
-  }, [graph]);
+  }, []);
 
   const { x, y } = node?.position() || { x: 0, y: 0 };
   const x1 = (node?.getBBox()?.width || 0) + x + 50;

apps/flowchart-designer/src/pages/designer/components/Header/index.tsx

@@ -5,8 +5,8 @@ import React from 'react'
 export default function index() {
   return (
     <div className='flex justify-between items-center px-24px leading-[60px]'>
-      <div className="left w-200px text-#666"><span className='inline-block mr-4px w-2px h-14px bg-#1dd328'></span>发票助手</div>
-      <div className="middle text-24px">智能流设计</div>
+      <div className="left w-200px text-#666"><span className='inline-block mr-4px w-2px h-14px bg-#1dd328'></span>审批流程</div>
+      <div className="middle text-24px">流程设计器</div>
       <div className="right w-200px text-right">
         <span className='text-10px text-#999 mr-12px'>自动保存 17:25:43</span>
         <Avatar size={32} icon={<UserOutlined />} />

apps/flowchart-designer/src/pages/designer/components/Toolbar/index.tsx

@@ -10,13 +10,14 @@ import {
 import { Button, Divider, Dropdown, Tooltip, Popover } from "antd";
 import NodeMenu from "@/components/NodeMenu";
 import type { MenuProps } from "antd/lib";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useState } from "react";
 import { MiniMap } from "@antv/x6-plugin-minimap";
 import { useModel } from "umi";
 
 export default function index() {
   const minimapRef = useRef<HTMLDivElement>(null);
   const { graph } = useModel("flowModel");
+  const [scale, setScale] = useState(100);
 
   const zoomItems: MenuProps["items"] = [
     { key: "1", label: "25%" },
@@ -47,35 +48,65 @@ export default function index() {
     }
   }, [graph, minimapRef.current]);
 
+  // 添加备注
   const handleAddNotice = () => {
     const { width = 100, height = 100 } = graph?.getGraphArea() || {};
-    graph?.addNode({ 
-      shape: 'notice-node',
+    graph?.addNode({
+      shape: "notice-node",
       zIndex: -1,
       position: {
         x: width / 2 - 150,
         y: height / 2 - 100,
       },
       data: {
-        name: '',
-        text: ''
-      }
+        name: "",
+        text: "",
+      },
     });
-  }
+  };
+
+  useEffect(() => {
+    graph?.on("scale", (scaleInfo) => {
+      setScale(parseInt(scaleInfo.sx * 100 + ""));
+    });
+  }, [graph]);
+
+  const handleZoom = (value: number) => {
+    graph?.zoomTo(value / 100);
+  };
+
+  const handleZoomFit = () => {
+    graph?.zoomToFit({});
+  };
+
+  const handleOnChange = (value: number) => {
+    setScale(Math.round(value));
+    handleZoom(value);
+  };
 
   return (
     <div className="absolute left-32px bottom-32px z-2 flex gap-12px">
       <div className="w-120px h-40px rounded-12px bg-#fff box-shadow-sm flex items-center justify-between px-12px">
-        <Button type="text" icon={<ZoomInOutlined />} />
+        <Button
+          type="text"
+          icon={<ZoomOutOutlined />}
+          disabled={scale <= 50}
+          onClick={() => handleOnChange(scale - 10)}
+        />
         <Dropdown
           menu={{
             items: zoomItems,
             style: { width: "160px", transform: "translate(-65px, -10px)" },
           }}
         >
-          <span>100%</span>
+          <span>{scale}%</span>
         </Dropdown>
-        <Button type="text" icon={<ZoomOutOutlined />} />
+        <Button
+          type="text"
+          icon={<ZoomInOutlined />}
+          disabled={scale >= 200}
+          onClick={() => handleOnChange(scale + 10)}
+        />
       </div>
 
       <div
@@ -84,7 +115,11 @@ export default function index() {
       ></div>
 
       <div className="w-60px h-40px rounded-12px bg-#fff box-shadow-sm flex items-center justify-between px-12px">
-        <Button type="text" icon={<i className="iconfont icon-undo" />} disabled={true} />
+        <Button
+          type="text"
+          icon={<i className="iconfont icon-undo" />}
+          disabled={true}
+        />
         <Button type="text" icon={<i className="iconfont icon-redo" />} />
       </div>
 
@@ -100,7 +135,11 @@ export default function index() {
           </Button>
         </Popover>
         <Tooltip title="添加文本">
-          <Button type="text" icon={<FileAddOutlined />} onClick={handleAddNotice} />
+          <Button
+            type="text"
+            icon={<FileAddOutlined />}
+            onClick={handleAddNotice}
+          />
         </Tooltip>
         <Divider type="vertical" />
         <Tooltip title="指针模式">