chore: 解决添加节点跟手性能问题

alibaba · Dec 16, 2024 · 6a2537b · 6a2537b
1 parent 13e3334
commit 6a2537b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 11 deletions.
diff --git a/packages/x-flow/src/XFlow.tsx b/packages/x-flow/src/XFlow.tsx
@@ -52,6 +52,7 @@ const XFlow: FC<FlowProps> = memo(() => {
     onEdgesChange,
     onConnect,
     setCandidateNode,
+    isAddingNode,
     setMousePosition,
   } = useStore(
     s => ({
@@ -62,6 +63,7 @@ const XFlow: FC<FlowProps> = memo(() => {
       layout: s.layout,
       panOnDrag: s.panOnDrag,
       setMousePosition: s.setMousePosition,
+      isAddingNode: s.isAddingNode,
       setCandidateNode: s.setCandidateNode,
       onNodesChange: s.onNodesChange,
       onEdgesChange: s.onEdgesChange,
@@ -101,6 +103,9 @@ const XFlow: FC<FlowProps> = memo(() => {
         elementY: e.clientY - containerClientRect.top,
       });
     }
+  }, {
+    target: workflowContainerRef.current,
+    enable: isAddingNode
   });
 
   const { eventEmitter } = useEventEmitterContextContext();

diff --git a/packages/x-flow/src/components/CandidateNode/index.tsx b/packages/x-flow/src/components/CandidateNode/index.tsx
@@ -8,16 +8,17 @@ import CustomNode from '../CustomNode';
 const CandidateNode = () => {
   const { zoom } = useViewport();
   const reactflow = useReactFlow();
-  const { candidateNode, mousePosition, setCandidateNode, addNodes } = useStore(
-    (state: any) => ({
-      nodes: state.nodes,
-      edges: state.edges,
-      addNodes: state.addNodes,
-      candidateNode: state.candidateNode,
-      mousePosition: state.mousePosition,
-      setCandidateNode: state.setCandidateNode,
-      onNodesChange: state.onNodesChange,
-      onEdgesChange: state.onEdgesChange,
+  const { candidateNode, mousePosition, setIsAddingNode, setCandidateNode, addNodes } = useStore(
+    (s: any) => ({
+      nodes: s.nodes,
+      edges: s.edges,
+      addNodes: s.addNodes,
+      candidateNode: s.candidateNode,
+      setIsAddingNode: s.setIsAddingNode,
+      mousePosition: s.mousePosition,
+      setCandidateNode: s.setCandidateNode,
+      onNodesChange: s.onNodesChange,
+      onEdgesChange: s.onEdgesChange,
     }),
     shallow
   );
@@ -42,6 +43,7 @@ const CandidateNode = () => {
       position: { x, y },
     };
     addNodes(newNodes);
+    setIsAddingNode(false)
     setCandidateNode(null);
   });
 

diff --git a/packages/x-flow/src/components/NodesPopover/index.tsx b/packages/x-flow/src/components/NodesPopover/index.tsx
@@ -8,12 +8,15 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { useStore } from '../../hooks/useStore';
 import { ConfigContext } from '../../models/context';
 import NodesMenu from '../NodesMenu';
 
 export default forwardRef((props: any, popoverRef) => {
   const { addNode, children, onNodeSelectPopoverChange } = props;
-
+  const { setIsAddingNode } = useStore(s => ({
+    setIsAddingNode: s.setIsAddingNode,
+  }));
   const ref = useRef<any>(null);
   const closeRef: any = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
@@ -53,6 +56,7 @@ export default forwardRef((props: any, popoverRef) => {
       open={open}
       onOpenChange={() => {
         setTimeout(() => {
+          setIsAddingNode(true);
           closeRef.current = true;
           setOpen(true);
         }, 50);

diff --git a/packages/x-flow/src/models/store.ts b/packages/x-flow/src/models/store.ts
@@ -28,6 +28,7 @@ export type FlowState = {
   nodes?: FlowNode[];
   edges?: Edge[];
   panOnDrag?: boolean;
+  isAddingNode?: boolean;
   candidateNode: any;
   mousePosition: any;
   onNodesChange: OnNodesChange<FlowNode>;
@@ -38,6 +39,7 @@ export type FlowState = {
   addNodes: (nodes: FlowNode[]) => void;
   addEdges: (edges: Edge[]) => void;
   setLayout: (layout: 'LR' | 'TB') => void;
+  setIsAddingNode: (payload: boolean) => void;
   setCandidateNode: (candidateNode: any) => void;
   setMousePosition: (mousePosition: any) => void;
 };
@@ -55,6 +57,7 @@ const createStore = (initProps?: Partial<FlowProps>) => {
       (set, get) => ({
         ...DEFAULT_PROPS,
         ...initProps,
+        isAddingNode: false,
         candidateNode: null,
         // nodeMenus: [],
         mousePosition: { pageX: 0, pageY: 0, elementX: 0, elementY: 0 },
@@ -95,6 +98,9 @@ const createStore = (initProps?: Partial<FlowProps>) => {
         // setNodeMenus: (nodeMenus: any) => {
         //   set({ nodeMenus });
         // },
+        setIsAddingNode: payload => {
+          set({ isAddingNode: payload });
+        },
         setCandidateNode: candidateNode => {
           set({ candidateNode });
         },