chore: 优化 FlowProvider 组件和文档

Author: youngjuning

docs/xflow/FlowProvider.md

@@ -9,4 +9,11 @@ group:
 
 # 基础交互
 
+`<FlowProvider/>` 组件是一个 Context Provider，使得在 `<XFlow/>` 组件之外访问流的内部状态成为可能。我们提供的 `useFlow()`、`useNodes()` 钩子依赖于这个组件才能工作。
+
 <code src="./demo/flow-provider/index.tsx"></code>
+
+## 注意
+
+- 如果你正在使用路由器并且希望流程的状态在不同路由之间保持持久，那么将 `<FlowProvider/>` 组件放置在路由器外部是至关重要的。
+- 如果在同一页面上有多个 `<XFlow/>`，则需要为每个 `<XFlow/>` 使用单独的 `<FlowProvider/>`

docs/xflow/demo/flow-provider/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 import XFlow, { FlowProvider, useNodes } from '@xrenders/xflow';
 import { edges as initialEdges } from './edges';
@@ -7,18 +7,18 @@ import settings from './setting';
 
 const App = () => {
   return (
-      <FlowProvider>
-        <div style={{ height: '600px' }}>
-          <XFlow
-            initialValues={{ nodes: initialNodes, edges: initialEdges }}
-            settings={settings}
-            nodeSelector={{
-              showSearch: true,
-            }}
-          />
-        </div>
-        <Sidebar />
-      </FlowProvider>
+    <FlowProvider>
+      <div style={{ height: '600px' }}>
+        <XFlow
+          initialValues={{ nodes: initialNodes, edges: initialEdges }}
+          settings={settings as any[]}
+          nodeSelector={{
+            showSearch: true,
+          }}
+        />
+      </div>
+      <Sidebar />
+    </FlowProvider>
   );
 };
 
@@ -30,9 +30,9 @@ function Sidebar() {
   return (
     <aside>
       {nodes?.map(node => (
-        <div key={node.id}>
-          Node {node.id} - x: {node.position.x.toFixed(2)}, y:{' '}
-          {node.position.y.toFixed(2)}
+        <div key={node?.id}>
+          Node {node?.id} - x: {node?.position?.x?.toFixed(2)}, y:{' '}
+          {node?.position?.y?.toFixed(2)}
         </div>
       ))}
     </aside>

docs/xflow/demo/layout/TB/index.tsx

@@ -62,11 +62,11 @@ export default () => {
     <div style={{ height: '600px' }}>
       <XFlow
         initialValues={{ nodes, edges }}
-        settings={settings}
+        settings={settings as any}
         nodeSelector={{
           showSearch: true,
         }}
-        layout="TB"
+        layout="LR"
       />
     </div>
   );

packages/x-flow/src/XFlow.tsx

@@ -18,17 +18,16 @@ import { useEventEmitterContextContext } from './models/event-emitter';
 
 import CustomNodeComponent from './components/CustomNode';
 import { useStore, useStoreApi } from './hooks/useStore';
-import { useTemporalStore } from './hooks/useTemporalStore';
 
 import Operator from './operator';
 import FlowProps from './types';
-import { transformNodes, uuid } from './utils';
+import { uuid } from './utils';
 import autoLayoutNodes from './utils/autoLayoutNodes';
 
 import { shallow } from 'zustand/shallow';
 import NodeEditor from './components/NodeEditor';
-import { useFlow } from './hooks/useFlow';
 import './index.less';
+import { useTemporalStore } from './hooks/useTemporalStore';
 
 const CustomNode = memo(CustomNodeComponent);
 const edgeTypes = { buttonedge: memo(CustomEdge) };
@@ -38,40 +37,40 @@ const edgeTypes = { buttonedge: memo(CustomEdge) };
  * XFlow 入口
  *
  */
-const XFlow: FC<FlowProps> = memo(props => {
-  const { initialValues, settings } = props;
+const XFlow: FC<FlowProps> = memo(() => {
   const workflowContainerRef = useRef<HTMLDivElement>(null);
   const store = useStoreApi();
   const { zoomTo } = useReactFlow();
   const {
     layout,
     nodes,
     edges,
+    setNodes,
+    setEdges,
     panOnDrag,
     onNodesChange,
     onEdgesChange,
     onConnect,
-    setLayout,
     setCandidateNode,
     setMousePosition,
   } = useStore(
-    state => ({
-      nodes: state.nodes,
-      edges: state.edges,
-      layout: state.layout,
-      panOnDrag: state.panOnDrag,
-      setLayout: state.setLayout,
-      setMousePosition: state.setMousePosition,
-      setCandidateNode: state.setCandidateNode,
-      onNodesChange: state.onNodesChange,
-      onEdgesChange: state.onEdgesChange,
-      onConnect: state.onConnect,
+    s => ({
+      nodes: s.nodes,
+      edges: s.edges,
+      setNodes: s.setNodes,
+      setEdges: s.setEdges,
+      layout: s.layout,
+      panOnDrag: s.panOnDrag,
+      setMousePosition: s.setMousePosition,
+      setCandidateNode: s.setCandidateNode,
+      onNodesChange: s.onNodesChange,
+      onEdgesChange: s.onEdgesChange,
+      onConnect: s.onConnect,
     }),
     shallow
   );
-  const { setNodes, setEdges } = useFlow();
+  const { record } = useTemporalStore();
   const [activeNode, setActiveNode] = useState<any>(null);
-  const temporalStore = useTemporalStore();
   useEffect(() => {
     zoomTo(0.8);
     setAutoFreeze(false);
@@ -80,14 +79,6 @@ const XFlow: FC<FlowProps> = memo(props => {
     };
   }, []);
 
-  useEffect(() => {
-    setLayout(props.layout);
-    // TODO: 默认关闭时间机器，可以向 zundo 贡献一个配置
-    temporalStore.pause();
-    setNodes(transformNodes(initialValues?.nodes));
-    setEdges(initialValues?.edges);
-  }, []);
-
   useEventListener('keydown', e => {
     if ((e.key === 'd' || e.key === 'D') && (e.ctrlKey || e.metaKey))
       e.preventDefault();
@@ -149,7 +140,6 @@ const XFlow: FC<FlowProps> = memo(props => {
   //       y: 0,
   //     },
   //   };
-  //   // record(() => {
   //   addNodes(newNode);
   //   addEdges({
   //     id: uuid(),
@@ -160,7 +150,6 @@ const XFlow: FC<FlowProps> = memo(props => {
   //   updateEdge(targetEdge?.id as string, {
   //     source: newNode.id,
   //   });
-  //   // });
   // };
 
   // edge 移入/移出效果
@@ -213,12 +202,6 @@ const XFlow: FC<FlowProps> = memo(props => {
     };
   }, [layout]);
 
-  // const edgeTypes = { buttonedge: (edgeProps: any) => <CustomEdge layout={layout} {...edgeProps} /> };
-  // const { icon, description } =
-  //   settings.find(
-  //     item => item.type?.toLowerCase() === activeNode?.node?.toLowerCase()
-  //   ) || {};
-
   const NodeEditorWrap = useMemo(() => {
     return (
       <NodeEditor
@@ -250,7 +233,15 @@ const XFlow: FC<FlowProps> = memo(props => {
         }}
         onConnect={onConnect}
         onNodesChange={changes => {
-          onNodesChange(changes);
+          changes.forEach(change => {
+            if (change.type === 'remove' || change.type === 'add') {
+              record(() => {
+                onNodesChange(changes);
+              })
+            } else {
+              onNodesChange(changes);
+            }
+          })
         }}
         onEdgesChange={changes => {
           onEdgesChange(changes);
@@ -261,6 +252,9 @@ const XFlow: FC<FlowProps> = memo(props => {
         onEdgeMouseLeave={(_, edge) => {
           getUpdateEdgeConfig(edge, '#c9c9c9');
         }}
+        onNodesDelete={() => {
+          // setActiveNode(null);
+        }}
       >
         <CandidateNode />
         <Operator addNode={handleAddNode} />

packages/x-flow/src/components/CandidateNode/index.tsx

@@ -41,7 +41,6 @@ const CandidateNode = () => {
       },
       position: { x, y },
     };
-    // @ts-ignore
     addNodes(newNodes);
     setCandidateNode(null);
   });

packages/x-flow/src/components/FlowProvider/index.tsx

@@ -1,12 +1,14 @@
+import { useStore } from '../../hooks/useStore';
 import StoreContext, { Provider } from '../../models/context';
 import { createStore } from '../../models/store';
+import { transformNodes } from '../../utils';
 
 import type { ReactNode } from 'react';
-import React, { memo, useContext, useState } from 'react';
+import React, { memo, useContext, useEffect, useState } from 'react';
 
 export const FlowProvider = memo<{
-  initialNodes: any[];
-  initialEdges: any[];
+  initialNodes?: any[];
+  initialEdges?: any[];
   children: ReactNode;
 }>(({ initialNodes: nodes = [], initialEdges: edges = [], children }) => {
   const [store] = useState(() =>
@@ -19,25 +21,46 @@ export const FlowProvider = memo<{
   return <Provider value={store}>{children}</Provider>;
 });
 
+const InitialProvider = ({ nodes, edges, layout, children }) => {
+  const { setNodes, setEdges, setLayout } = useStore(s => ({
+    setNodes: s.setNodes,
+    setEdges: s.setEdges,
+    setLayout: s.setLayout,
+  }));
+  useEffect(() => {
+    setNodes(transformNodes(nodes));
+    setLayout(layout);
+    setEdges(edges);
+  }, []);
+
+  // we need to wrap it with a fragment because it's not allowed for children to be a ReactNode
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
+  return <>{children}</>;
+};
+
 export const FlowProviderWrapper = ({
   children,
   nodes,
   edges,
+  layout,
 }: {
   children: React.ReactNode;
   nodes: any[];
   edges: any[];
+  layout?: 'LR' | 'TB';
 }) => {
   const isWrapped = useContext(StoreContext);
 
   if (isWrapped) {
-    // we need to wrap it with a fragment because it's not allowed for children to be a ReactNode
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
-    return <>{children}</>;
+    return (
+      <InitialProvider nodes={nodes} edges={edges} layout={layout}>
+        {children}
+      </InitialProvider>
+    );
   }
 
   return (
-    <FlowProvider initialNodes={nodes} initialEdges={edges}>
+    <FlowProvider initialNodes={transformNodes(nodes)} initialEdges={edges}>
       {children}
     </FlowProvider>
   );

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

@@ -1,40 +1,37 @@
-import { useMemo } from 'react';
+import { Edge } from '@xyflow/react';
 import { useMemoizedFn } from 'ahooks';
-import { useStoreApi } from './useStore';
-import { useTemporalStore } from './useTemporalStore';
+import { useMemo } from 'react';
 import { FlowNode } from '../models/store';
-import { Edge } from '@xyflow/react';
+import { useStoreApi } from './useStore';
 
 export const useFlow = () => {
   const storeApi = useStoreApi();
   const instance = storeApi.getState();
-  const temporalStore = useTemporalStore();
 
   const getNodes = useMemoizedFn(() => storeApi.getState().nodes);
   const getEdges = useMemoizedFn(() => storeApi.getState().edges);
   const setNodes = useMemoizedFn((nodes: FlowNode[]) => {
-    temporalStore.record(() => {
-      storeApi.getState().setNodes(nodes);
-    })
-  })
+    storeApi.getState().setNodes(nodes);
+  });
   const addNodes = useMemoizedFn((nodes: FlowNode[]) => {
-    temporalStore.record(() => {
-      storeApi.getState().addNodes(nodes);
-    })
-  })
+    storeApi.getState().addNodes(nodes);
+  });
   const setEdges = useMemoizedFn((edges: Edge[]) => {
     storeApi.getState().setEdges(edges);
-  })
+  });
   const addEdges = useMemoizedFn((edges: Edge[]) => {
     storeApi.getState().addEdges(edges);
-  })
+  });
 
-  return useMemo(() => ({
-    setNodes,
-    addNodes,
-    setEdges,
-    addEdges,
-    getNodes,
-    getEdges,
-  }), [instance]);
+  return useMemo(
+    () => ({
+      setNodes,
+      addNodes,
+      setEdges,
+      addEdges,
+      getNodes,
+      getEdges,
+    }),
+    [instance]
+  );
 };

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

@@ -9,11 +9,13 @@ export const useTemporalStore = () => {
       '[XFlow]: Seems like you have not used zustand provider as an ancestor.'
     );
   }
+  const temporalStore = store.temporal.getState();
+  // 默认关闭时间机器
+  temporalStore.pause();
 
   return {
     ...store.temporal.getState(),
     record: (callback: () => void) => {
-      const temporalStore = store.temporal.getState();
       temporalStore.resume();
       callback();
       temporalStore.pause();

packages/x-flow/src/index.ts

@@ -2,6 +2,7 @@ import XFlow from './XFlow';
 import withProvider from './withProvider';
 
 import * as nodes from './nodes';
+import FlowProps from './types';
 
 export type {
 default as FR,
@@ -12,4 +13,4 @@ export { useFlow } from './hooks/useFlow';
 export { useNodes } from './hooks/useNodes';
 export { useEdges } from './hooks/useEdges';
 
-export default withProvider(XFlow, nodes);
+export default withProvider<FlowProps>(XFlow, nodes);