From 71bfa140adfc380b2c02e4c120379eb68fc071fc Mon Sep 17 00:00:00 2001
From: envys <qingxin1114@163.com>
Date: Fri, 4 Oct 2024 13:33:04 +0800
Subject: [PATCH] feat:feat: Optimize edge center calculation and improve node
 addition UI This commit includes the following improvements: 1. Moved edge
 center calculation logic to a separate utility function Enhanced edge
 selection and node addition functionality Improved UI for adding nodes to
 edges Refined edge and node selection behavior Updated React Flow
 configuration for better performance and appearance

---
 .../components/WorkFlow/FlowVisualizer.tsx    | 24 +++++++----------
 web/src/components/WorkFlow/utils.ts          | 26 +++++--------------
 2 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/web/src/components/WorkFlow/FlowVisualizer.tsx b/web/src/components/WorkFlow/FlowVisualizer.tsx
index f9b220d5..381b86aa 100644
--- a/web/src/components/WorkFlow/FlowVisualizer.tsx
+++ b/web/src/components/WorkFlow/FlowVisualizer.tsx
@@ -14,11 +14,8 @@ import ReactFlow, {
   Panel,
   useViewport,
   EdgeLabelRenderer,
-  Position,
-  // getEdgeCenter
 } from "reactflow";
 import { FaPlus } from "react-icons/fa";
-import getEdgeCenter from "reactflow";
 import { useContextMenu } from "@/hooks/graphs/useContextMenu";
 import { useFlowState } from "@/hooks/graphs/useFlowState";
 import { useGraphConfig } from "@/hooks/graphs/useUpdateGraphConfig";
@@ -35,7 +32,6 @@ import {
   Text,
   useColorModeValue,
   IconButton,
-  Icon,
   VStack,
 } from "@chakra-ui/react";
 import { MdBuild, MdOutlineHelp } from "react-icons/md";
@@ -46,6 +42,7 @@ import NodePalette from "./NodePalette";
 import BaseProperties from "./nodes/Base/Properties";
 import { type NodeType, nodeConfig } from "./nodes/nodeConfig";
 import type { CustomNode, FlowVisualizerProps } from "./types";
+import { calculateEdgeCenter } from './utils';
 
 const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
   nodeTypes,
@@ -77,6 +74,7 @@ const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
   const onNodeClick = useCallback(
     (event: React.MouseEvent, node: Node) => {
       setSelectedNodeId(node.id);
+      setSelectedEdge(null); // 取消选中的边
     },
     [setSelectedNodeId]
   );
@@ -324,18 +322,12 @@ const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
     (event: React.MouseEvent, edge: Edge) => {
       event.stopPropagation();
       setSelectedEdge(edge);
-      setShowNodeMenu(false);
 
       const sourceNode = nodes.find((node) => node.id === edge.source);
       const targetNode = nodes.find((node) => node.id === edge.target);
       if (sourceNode && targetNode) {
-        const edgeCenter = getEdgeCenter({
-          sourceX: sourceNode.position.x,
-          sourceY: sourceNode.position.y,
-          targetX: targetNode.position.x,
-          targetY: targetNode.position.y,
-        });
-        setMenuPosition({ x: edgeCenter[0], y: edgeCenter[1] });
+        const centerPoint = calculateEdgeCenter(sourceNode, targetNode);
+        setMenuPosition(centerPoint);
       }
     },
     [nodes]
@@ -409,7 +401,8 @@ const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
   const onPaneClick = useCallback(() => {
     setSelectedEdge(null);
     setShowNodeMenu(false);
-  }, []);
+    setSelectedNodeId(null); // 取消选中的节点
+  }, [setSelectedNodeId]);
 
   return (
     <Box
@@ -509,6 +502,9 @@ const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
                   size="xs"
                   colorScheme="blue"
                   onClick={handleAddNodeClick}
+                  isRound={true} // 使按钮变成圆形
+                  _hover={{ bg: "blue.500" }} // 悬停时的样式
+                  _active={{ bg: "blue.600" }} // 点击时的样式
                 />
               </div>
             )}
@@ -651,4 +647,4 @@ const FlowVisualizer: React.FC<FlowVisualizerProps> = ({
   );
 };
 
-export default FlowVisualizer;
+export default FlowVisualizer;
\ No newline at end of file
diff --git a/web/src/components/WorkFlow/utils.ts b/web/src/components/WorkFlow/utils.ts
index d5d23b40..58315c77 100644
--- a/web/src/components/WorkFlow/utils.ts
+++ b/web/src/components/WorkFlow/utils.ts
@@ -1,25 +1,13 @@
 import { Node } from 'reactflow';
 
-export const getEdgeParams = (source: Node, target: Node) => {
-  const sourceCenter = {
-    x: source.position.x + (source.width || 0) / 2,
-    y: source.position.y + (source.height || 0) / 2,
-  };
-
-  const targetCenter = {
-    x: target.position.x + (target.width || 0) / 2,
-    y: target.position.y + (target.height || 0) / 2,
-  };
-
-  const sx = sourceCenter.x;
-  const sy = sourceCenter.y;
-  const tx = targetCenter.x;
-  const ty = targetCenter.y;
+export const calculateEdgeCenter = (sourceNode: Node, targetNode: Node): { x: number, y: number } => {
+  const sourceX = sourceNode.position.x + (sourceNode.width ?? 0) / 2;
+  const sourceY = sourceNode.position.y + (sourceNode.height ?? 0) / 2;
+  const targetX = targetNode.position.x + (targetNode.width ?? 0) / 2;
+  const targetY = targetNode.position.y + (targetNode.height ?? 0) / 2;
 
   return {
-    sx,
-    sy,
-    tx,
-    ty,
+    x: (sourceX + targetX) / 2,
+    y: (sourceY + targetY) / 2
   };
 };
\ No newline at end of file