feat: 修改 npm 路径

.dumi/theme/slots/Header/Navigation.tsx

@@ -13,10 +13,10 @@ const Navigation: React.FC = () => {
       label: <Link to="/table-render">TableRender</Link>,
       key: 'table-render',
     },
-    {
-      label: <Link to="/xflow">XFlow</Link>,
-      key: 'xflow',
-    },
+    // {
+    //   label: <Link to="/xflow">XFlow</Link>,
+    //   key: 'xflow',
+    // },
     {
       label: <Link to="/form-render-mobile">FRMobile</Link>,
       key: 'form-render-mobile',

.turbo/daemon/58af6c43ce0c4d29-turbo.log.2024-12-04

@@ -0,0 +1,8 @@
+2024-12-04T00:52:39.144082Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("packages/x-flow/package.json")}
+2024-12-04T00:52:39.144107Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Other("@xrenders/xflow"), path: AnchoredSystemPathBuf("packages/x-flow") }}))
+2024-12-04T00:54:43.043002Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("docs/data-render/index.md")}
+2024-12-04T00:54:43.043046Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Root, path: AnchoredSystemPathBuf("") }}))
+2024-12-04T00:55:35.341519Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("docs/xflow/index.md")}
+2024-12-04T00:55:35.341535Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Root, path: AnchoredSystemPathBuf("") }}))
+2024-12-04T00:56:31.240344Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf(".dumi/theme/slots/Header/Navigation.tsx")}
+2024-12-04T00:56:31.240359Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Root, path: AnchoredSystemPathBuf("") }}))

.turbo/daemon/9af73f40ad414c73-turbo.log.2024-12-04

@@ -2,3 +2,7 @@
 2024-12-04T01:54:40.488758Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Root, path: AnchoredSystemPathBuf("") }}))
 2024-12-04T01:54:40.591989Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf(".turbo/daemon/9af73f40ad414c73-turbo.log.2024-12-04"), AnchoredSystemPathBuf(".turbo/daemon/9af73f40ad414c73-turbo.log.2024-12-03")}
 2024-12-04T01:54:40.591999Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Root, path: AnchoredSystemPathBuf("") }}))
+2024-12-04T01:57:03.387296Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf(".dumi/theme/slots/Header/Navigation.tsx")}
+2024-12-04T01:57:03.387307Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Root, path: AnchoredSystemPathBuf("") }}))
+2024-12-04T01:57:03.489850Z  WARN turborepo_lib::package_changes_watcher: changed_files: {AnchoredSystemPathBuf("packages/x-flow/src/hooks/useXFlow.ts"), AnchoredSystemPathBuf("packages/x-flow/src/components/CustomNode/index.tsx"), AnchoredSystemPathBuf("docs/xflow/XFlowProvider.md"), AnchoredSystemPathBuf("packages/x-flow/src/hooks/useEdges.ts"), AnchoredSystemPathBuf("packages/x-flow/src/components/CandidateNode/index.tsx"), AnchoredSystemPathBuf("docs/xflow/demo/flow-provider/edges.ts"), AnchoredSystemPathBuf("packages/x-flow/src/components/FlowProvider"), AnchoredSystemPathBuf("docs/xflow/demo/xflow-provider"), AnchoredSystemPathBuf("packages/x-flow/src/hooks/useFlow.ts"), AnchoredSystemPathBuf("packages/x-flow/src/hooks/useTemporalStore.ts"), AnchoredSystemPathBuf("packages/x-flow/src/components/CustomEdge/index.tsx"), AnchoredSystemPathBuf("packages/x-flow/src/components/XFlowProvider"), AnchoredSystemPathBuf("packages/x-flow/src/operator/Control/index.tsx"), AnchoredSystemPathBuf("packages/x-flow/src/hooks/useStore.ts"), AnchoredSystemPathBuf("docs/xflow/demo/flow-provider/nodes.ts"), AnchoredSystemPathBuf("packages/x-flow/src/components/XFlowProvider/index.tsx"), AnchoredSystemPathBuf("packages/x-flow/src/types.ts"), AnchoredSystemPathBuf("packages/x-flow/src/withProvider.tsx"), AnchoredSystemPathBuf("packages/x-flow/src/operator/index.tsx"), AnchoredSystemPathBuf("docs/xflow/demo/flow-provider/index.tsx"), AnchoredSystemPathBuf(".turbo/daemon/58af6c43ce0c4d29-turbo.log.2024-12-04"), AnchoredSystemPathBuf("packages/x-flow/src/components/FlowProvider/index.tsx"), AnchoredSystemPathBuf("packages/x-flow/src/XFlow.tsx"), AnchoredSystemPathBuf("docs/xflow/demo/xflow-provider/index.tsx"), AnchoredSystemPathBuf("packages/x-flow/src/components/PanelContainer/index.tsx"), AnchoredSystemPathBuf("packages/x-flow/src/hooks/useNodes.ts"), AnchoredSystemPathBuf("packages/x-flow/src/models/context.ts"), AnchoredSystemPathBuf("packages/x-flow/package.json"), AnchoredSystemPathBuf("docs/xflow/FlowProvider.md"), AnchoredSystemPathBuf("packages/x-flow/src/models/store.ts"), AnchoredSystemPathBuf("docs/xflow/demo/flow-provider"), AnchoredSystemPathBuf("docs/xflow/demo/flow-provider/setting.tsx"), AnchoredSystemPathBuf(".dumi/theme/slots/Header/Navigation.tsx"), AnchoredSystemPathBuf("packages/x-flow/src/Wrapper.tsx"), AnchoredSystemPathBuf("docs/xflow/demo/xflow-provider/setting.tsx"), AnchoredSystemPathBuf("packages/x-flow/src/index.ts"), AnchoredSystemPathBuf("packages/x-flow/src/components/NodeEditor/index.tsx")}
+2024-12-04T01:57:03.489860Z  WARN turborepo_lib::package_changes_watcher: changed_packages: Ok(Some({WorkspacePackage { name: Other("@xrenders/xflow"), path: AnchoredSystemPathBuf("packages/x-flow") }, WorkspacePackage { name: Root, path: AnchoredSystemPathBuf("") }}))

docs/xflow/XFlowProvider.md → 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,
+    },
+  },
+];

packages/x-flow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xrenders/xflow",
-  "version": "0.0.1",
+  "version": "1.0.0-beta.2",
   "description": "一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品",
   "keywords": [
     "xflow"
@@ -70,5 +70,9 @@
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
-  "sideEffect": false
+  "sideEffect": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
 }

packages/x-flow/src/XFlow.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;