feat: 增加唤起节点抽屉

packages/x-flow/src/XFlow.tsx

@@ -67,6 +67,12 @@ const XFlow: FC<FlowProps> = memo(props => {
     isAddingNode,
     setMousePosition,
     copyNodes,
+    activeNode,
+    setActiveNode,
+    openPanel,
+    setOpenPanel,
+    openLogPanel,
+    setOpenLogPanel
   } = useStore(
     s => ({
       nodes: s.nodes,
@@ -82,20 +88,25 @@ const XFlow: FC<FlowProps> = memo(props => {
       onEdgesChange: s.onEdgesChange,
       onConnect: s.onConnect,
       copyNodes: s.copyNodes,
+      activeNode:s.activeNode,
+      setActiveNode:s.setActiveNode,
+      openPanel:s.openPanel,
+      openLogPanel:s.openLogPanel,
+      setOpenPanel:s.setOpenPanel,
+      setOpenLogPanel:s.setOpenLogPanel
     }),
     shallow
   );
   const { record } = useTemporalStore();
-  const [activeNode, setActiveNode] = useState<any>(null);
   const { settingMap, globalConfig, readOnly, logPanel } =
     useContext(ConfigContext);
-  const [openPanel, setOpenPanel] = useState<boolean>(true);
-  const [openLogPanel, setOpenLogPanel] = useState<boolean>(true);
   const {
     onNodeClick,
     onEdgeClick,
     onPasteCompleted,
     onCopyCompleted,
+    onMoveStart,
+    onMoveEnd,
     zoomOnScroll = true,
     panOnScroll = false,
     preventScrolling = true,
@@ -308,6 +319,7 @@ const XFlow: FC<FlowProps> = memo(props => {
                 _nodeType,
                 values: { ...restData },
                 _status,
+                _isCandidate:false
               });
               if (!showPanel) {
                 setOpenPanel(false);
@@ -409,6 +421,12 @@ const XFlow: FC<FlowProps> = memo(props => {
         minZoom={0.3}
         zoomOnScroll={zoomOnScroll}
         panOnScroll={panOnScroll} // 禁用滚动平移
+        onMoveStart={(...rest)=>{
+          onMoveStart && onMoveStart(...rest)
+        }}
+        onMoveEnd={(...rest)=>{
+          onMoveEnd && onMoveEnd(...rest)
+        }}
         preventScrolling={preventScrolling} // 允许页面滚动
         connectionLineComponent={connectionLineComponent}
         connectionRadius={100}

packages/x-flow/src/hooks/useFlow.ts

@@ -16,7 +16,6 @@ import { message } from 'antd';
 export const useFlow = () => {
   const storeApi = useStoreApi();
   const instance = storeApi.getState();
-
   const {
     zoomIn,
     zoomOut,
@@ -31,7 +30,7 @@ export const useFlow = () => {
     getNodes: _getNodes,
     getEdges,
     screenToFlowPosition,
-    flowToScreenPosition
+    flowToScreenPosition,
   } = useReactFlow();
 
   const { record } = useTemporalStore();
@@ -255,6 +254,10 @@ export const useFlow = () => {
     setNodes(newNodes);
   });
 
+  const setActiveNodePanel = (activeNode,openPanel:boolean) => {
+    instance.setActiveNodePanel(activeNode,openPanel)
+  }
+
   return useMemo(
     () => ({
       setNodes,
@@ -284,6 +287,7 @@ export const useFlow = () => {
       deleteNode,
       copyFLowNodes,
       pasteFLowNodes,
+      setActiveNodePanel
     }),
     [instance]
   );

packages/x-flow/src/models/store.ts

@@ -13,6 +13,14 @@ import isDeepEqual from 'fast-deep-equal';
 import { temporal } from 'zundo';
 import { createWithEqualityFn } from 'zustand/traditional';
 
+interface activeNode {
+  id: string;
+  _nodeType: string;
+  values: Record<string, any>;
+  _status: string;
+  _isCandidate:boolean
+}
+
 export type FlowProps = {
   nodes?: Node[];
   edges?: Edge[];
@@ -35,18 +43,25 @@ export type FlowState = {
   candidateNode: any;
   mousePosition: any;
   copyTimeoutId: NodeJS.Timeout | null; // 添加超时定时器ID
+  activeNode: activeNode | null;
+  openPanel:boolean
+  openLogPanel:boolean
   onNodesChange: OnNodesChange<FlowNode>;
   onEdgesChange: OnEdgesChange;
   onConnect: OnConnect;
   setNodes: (nodes: FlowNode[], isTransform?: boolean) => void;
   setEdges: (edges: Edge[]) => void;
-  addNodes: (nodes: FlowNode[]| FlowNode, isTransform?: boolean) => void;
+  addNodes: (nodes: FlowNode[] | FlowNode, isTransform?: boolean) => void;
   addEdges: (edges: Edge[] | Edge) => void;
   setLayout: (layout: 'LR' | 'TB') => void;
   setIsAddingNode: (payload: boolean) => void;
   setCandidateNode: (candidateNode: any) => void;
   setMousePosition: (mousePosition: any) => void;
   setCopyTimeoutId: (timeoutId: NodeJS.Timeout | null) => void; // 添加设置超时定时器的方法
+  setActiveNodePanel:(activeNode:activeNode,openPanel:boolean)=>void
+  setActiveNode:(activeNode:activeNode)=>void
+  setOpenPanel:(openPanel:boolean)=>void
+  setOpenLogPanel:(openLogPanel)=>void
 };
 
 const createStore = (initProps?: Partial<FlowProps>) => {
@@ -69,6 +84,9 @@ const createStore = (initProps?: Partial<FlowProps>) => {
         copyTimeoutId: null, // 添加超时定时器ID初始值
         // nodeMenus: [],
         mousePosition: { pageX: 0, pageY: 0, elementX: 0, elementY: 0 },
+        activeNode: null,
+        openPanel:true,
+        openLogPanel:true,
         onNodesChange: changes => {
           set({
             nodes: applyNodeChanges(changes, get().nodes),
@@ -117,6 +135,27 @@ const createStore = (initProps?: Partial<FlowProps>) => {
             return;
           }
           set({ layout });
+        },
+        setActiveNodePanel: (activeNode:activeNode,openPanel:boolean) => {
+          set({
+            activeNode,
+            openPanel
+          })
+        },
+        setActiveNode:(activeNode:activeNode)=>{
+          set({
+            activeNode
+          })
+        },
+        setOpenPanel:(openPanel:boolean)=>{
+          set({
+            openPanel
+          })
+        },
+        setOpenLogPanel:(openLogPanel:boolean)=>{
+          set({
+            openLogPanel
+          })
         }
       }),
       {

packages/x-flow/src/types.ts

@@ -194,6 +194,8 @@ export interface FlowProps {
   onCopyCompleted?:(addNodes:node[])=>void
   onMenuItemClick?: (itemInfo: ItemInfo, defaultAction: () => void) => void;
   clickAddNode?: (type: string, nodeItem: TNodeItem, addNode: (initData?: Record<string, any>) => void) => void;
+  onMoveStart?:ReactFlowProps['onMoveStart']
+  onMoveEnd?:ReactFlowProps['onMoveEnd']
   zoomOnScroll?: boolean;
   panOnScroll?: boolean;
   preventScrolling?: boolean;