feat: 迭代开发

Author: lhbxs

docs/xflow/XFlowProvider.md renamed to docs/xflow/FlowProvider.md

@@ -9,4 +9,4 @@ group:
 
 # 基础交互
 
-<code src="./demo/xflow-provider/index.tsx"></code>
+<code src="./demo/flow-provider/index.tsx"></code>

docs/xflow/demo/flow-provider/edges.ts

@@ -0,0 +1 @@
+export const edges = [{ source: '1', target: '2', id: '234123' }];

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

@@ -0,0 +1,48 @@
+import React from "react";
+
+import XFlow, { FlowProvider, useNodes } from '@xrenders/xflow';
+import { edges as initialEdges } from './edges';
+import { nodes as initialNodes } from './nodes';
+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>
+  );
+};
+
+function Sidebar() {
+  // This hook will only work if the component it's used in is a child of a
+  // <FlowProvider />.
+  const nodes = useNodes();
+
+  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>
+      ))}
+    </aside>
+  );
+}
+
+export default () => {
+  return (
+    <FlowProvider>
+      <App />
+    </FlowProvider>
+  );
+};

docs/xflow/demo/flow-provider/nodes.ts

@@ -0,0 +1,20 @@
+export const nodes = [
+  {
+    id: '1',
+    type: 'Start',
+    data: {},
+    position: {
+      x: 40,
+      y: 240,
+    },
+  },
+  {
+    id: '2',
+    type: 'End',
+    data: {},
+    position: {
+      x: 500,
+      y: 240,
+    },
+  },
+];

docs/xflow/demo/xflow-provider/setting.tsx renamed to docs/xflow/demo/flow-provider/setting.tsx

@@ -11,22 +11,24 @@ import produce, { setAutoFreeze } from 'immer';
 import { debounce } from 'lodash';
 import type { FC } from 'react';
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { useShallow } from 'zustand/react/shallow';
 import CandidateNode from './components/CandidateNode';
 import CustomEdge from './components/CustomEdge';
 import PanelContainer from './components/PanelContainer';
 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 XFlowProps from './types';
+import FlowProps from './types';
 import { transformNodes, 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 { Wrapper } from './Wrapper';
 
 const CustomNode = memo(CustomNodeComponent);
 const edgeTypes = { buttonedge: memo(CustomEdge) };
@@ -36,45 +38,40 @@ const edgeTypes = { buttonedge: memo(CustomEdge) };
  * XFlow 入口
  *
  */
-const App: FC<XFlowProps> = memo(props => {
+const XFlow: FC<FlowProps> = memo(props => {
   const { initialValues, settings } = props;
   const workflowContainerRef = useRef<HTMLDivElement>(null);
   const store = useStoreApi();
-  const { updateEdge, zoomTo } = useReactFlow();
-  // const { undo, redo, record } = useTemporalStore();
+  const { zoomTo } = useReactFlow();
   const {
     layout,
     nodes,
     edges,
+    panOnDrag,
     onNodesChange,
     onEdgesChange,
     onConnect,
-    setNodes,
-    setEdges,
-    addNodes,
-    addEdges,
     setLayout,
     setCandidateNode,
     setMousePosition,
   } = useStore(
-    useShallow(state => ({
+    state => ({
       nodes: state.nodes,
       edges: state.edges,
       layout: state.layout,
+      panOnDrag: state.panOnDrag,
       setLayout: state.setLayout,
-      setNodes: state.setNodes,
-      setEdges: state.setEdges,
-      addNodes: state.addNodes,
-      addEdges: state.addEdges,
       setMousePosition: state.setMousePosition,
       setCandidateNode: state.setCandidateNode,
       onNodesChange: state.onNodesChange,
       onEdgesChange: state.onEdgesChange,
       onConnect: state.onConnect,
-    }))
+    }),
+    shallow
   );
+  const { setNodes, setEdges } = useFlow();
   const [activeNode, setActiveNode] = useState<any>(null);
-
+  const temporalStore = useTemporalStore();
   useEffect(() => {
     zoomTo(0.8);
     setAutoFreeze(false);
@@ -85,9 +82,10 @@ const App: FC<XFlowProps> = memo(props => {
 
   useEffect(() => {
     setLayout(props.layout);
+    // TODO: 默认关闭时间机器，可以向 zundo 贡献一个配置
+    temporalStore.pause();
     setNodes(transformNodes(initialValues?.nodes));
     setEdges(initialValues?.edges);
-    store.temporal.getState().pause();
   }, []);
 
   useEventListener('keydown', e => {
@@ -235,6 +233,7 @@ const App: FC<XFlowProps> = memo(props => {
   return (
     <div id="xflow-container" ref={workflowContainerRef}>
       <ReactFlow
+        panOnDrag={panOnDrag}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         nodes={nodes}
@@ -288,12 +287,4 @@ const App: FC<XFlowProps> = memo(props => {
   );
 });
 
-const XFlow: FC<XFlowProps> = (props) => {
-  const { initialValues } = props;
-  return (
-    <Wrapper nodes={initialValues?.nodes} edges={initialValues.edges}>
-      <App {...props}/>
-    </Wrapper>
-  );
-};
 export default XFlow;

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

@@ -1,63 +1,55 @@
-import React from 'react';
-import { memo } from 'react';
-import produce from 'immer';
-import { useShallow } from 'zustand/react/shallow';
 import { useReactFlow, useViewport } from '@xyflow/react';
 import { useEventListener } from 'ahooks';
-import CustomNode from '../CustomNode';
+import React, { memo } from 'react';
+import { shallow } from 'zustand/shallow';
 import { useStore } from '../../hooks/useStore';
+import CustomNode from '../CustomNode';
 
 const CandidateNode = () => {
   const { zoom } = useViewport();
   const reactflow = useReactFlow();
-
-  const {
-    nodes,
-    candidateNode,
-    mousePosition,
-    addNodes,
-    setCandidateNode
-  } = useStore(
-    useShallow((state: any) => ({
+  const { candidateNode, mousePosition, setCandidateNode, addNodes } = useStore(
+    (state: any) => ({
       nodes: state.nodes,
       edges: state.edges,
+      addNodes: state.addNodes,
       candidateNode: state.candidateNode,
       mousePosition: state.mousePosition,
-      addNodes: state.addNodes,
       setCandidateNode: state.setCandidateNode,
       onNodesChange: state.onNodesChange,
       onEdgesChange: state.onEdgesChange,
-    }))
+    }),
+    shallow
   );
 
-  useEventListener('click', (ev) => {
+  useEventListener('click', ev => {
     if (!candidateNode) {
       return;
     }
     ev.preventDefault();
     const { screenToFlowPosition } = reactflow;
-    const { x, y } = screenToFlowPosition({ x: mousePosition.pageX, y: mousePosition.pageY });
-
-    const newNodes = produce(nodes, (draft: any) => {
-      draft.push({
-        ...candidateNode,
-        data: {
-          ...candidateNode.data,
-          _isCandidate: false,
-        },
-        position: { x, y }
-      });
+    const { x, y } = screenToFlowPosition({
+      x: mousePosition.pageX,
+      y: mousePosition.pageY,
     });
+
+    const newNodes = {
+      ...candidateNode,
+      data: {
+        ...candidateNode.data,
+        _isCandidate: false,
+      },
+      position: { x, y },
+    };
+    // @ts-ignore
     addNodes(newNodes);
     setCandidateNode(null);
   });
 
   if (!candidateNode) {
-    return null
+    return null;
   }
 
-  console.log(mousePosition, '=======000000')
-
   return (
     <div
       style={{
@@ -66,12 +58,15 @@ const CandidateNode = () => {
         transform: `scale(${zoom})`,
         transformOrigin: '0 0',
         position: 'absolute',
-        zIndex: 10000
+        zIndex: 10000,
       }}
     >
-      <CustomNode {...candidateNode as any} type={candidateNode?.data?._nodeType } />
+      <CustomNode
+        {...(candidateNode as any)}
+        type={candidateNode?.data?._nodeType}
+      />
     </div>
   );
-}
+};
 
 export default memo(CandidateNode);