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

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;

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
   };
 };