🐛 fix: demo fix, add onNodeInit (#99)

* 🐛 fix: demo fix, add onNodeInit * 🐛 feat: add layout options params --------- Co-authored-by: jiangchu <[email protected]>
ant-design · Apr 7, 2024 · d1f081d · d1f081d
1 parent 0f33eac
commit d1f081d
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 8 deletions.
diff --git a/...caseShow/demos/pipeline/multiPipe/data.ts → ...aseShow/demos/pipeline/multiPipe/data.tsx b/...caseShow/demos/pipeline/multiPipe/data.ts → ...aseShow/demos/pipeline/multiPipe/data.tsx
@@ -148,6 +148,18 @@ export const edges = [
     animated: true,
     sourceHandle: 'a1',
     targetHandle: 'a2',
+    markerEnd: {
+      type: 'arrow',
+    },
+    label: (
+      <div style={{ color: 'red', width: '200px', height: '100px', backgroundColor: 'red' }}>
+        123
+      </div>
+    ),
+    markerStart: {
+      type: 'arrow',
+      // orient: 'auto-start-reverse'
+    },
   },
   {
     id: 'e2',

diff --git a/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx b/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx
@@ -11,7 +11,7 @@ import {
 } from '@ant-design/pro-flow';
 import { useCallback } from 'react';
 import useStyles from '../../index.style';
-import { edges, nodes } from './data.ts';
+import { edges, nodes } from './data';
 import { PipeNode } from './pipeNode';
 
 const nodeTypes = { pipeNode: PipeNode };

diff --git a/docs/guide/demos/customEdge/data.ts b/docs/guide/demos/customEdge/data.ts
@@ -17,6 +17,15 @@ export const nodes = [
       description: 'XXX_XXX_XXX_API',
     },
   },
+  {
+    id: 'a3',
+    label: 'a3',
+    data: {
+      title: 'XXX_API_ddddddddddddddddddddddddddddddddddddddddddddddddddddddb1',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
 ];
 
 export const getEdges = (className) => [
@@ -27,4 +36,11 @@ export const getEdges = (className) => [
     type: 'buttonEdge',
     className,
   },
+  {
+    id: 'e2',
+    source: 'a1',
+    target: 'a3',
+    type: 'buttonEdge',
+    className,
+  },
 ];
diff --git a/docs/guide/flowEditor.zh-CN.md b/docs/guide/flowEditor.zh-CN.md
@@ -10,11 +10,11 @@ order: 2
 description:
 ---
 
-# FlowView - 图展示组件
+# FlowEditor - 图编辑组件
 
 ## 基本用法
 
-引入 FlowView 组件，即可在页面上获得一块带有小地图能力的的画布。
+引入 FlowEditor 组件，即可在页面上获得一块带有小地图能力的的画布。
 
 ```js
 import { FlowEditor } from '@ant-design/pro-flow';

diff --git a/src/FlowEditor/container/FlowEditor.tsx b/src/FlowEditor/container/FlowEditor.tsx
@@ -166,8 +166,9 @@ const FlowEditor = forwardRef<any, FlowEditorAppProps>(
       } else {
         instance.setViewport(defaultViewport);
       }
+    }, [nodesInitialized]);
 
-      // 然后设定初始化节点的相关状态
+    useEffect(() => {
       if (nodesInitialized) {
         onNodesInit?.(editor);
       }

diff --git a/src/FlowView/constants.tsx b/src/FlowView/constants.tsx
@@ -48,10 +48,18 @@ export interface NodeMapItem<T = any, U extends string | undefined = string | un
 }
 
 export interface LayoutOptions {
-  rankdir?: 'TB' | 'BT' | 'LR' | 'RL';
-  align?: 'UL' | 'DL' | 'UR' | 'DR';
-  nodesep?: number;
-  ranksep?: number;
+  width?: number | undefined;
+  height?: number | undefined;
+  compound?: boolean | undefined;
+  rankdir?: string | undefined;
+  align?: string | undefined;
+  nodesep?: number | undefined;
+  edgesep?: number | undefined;
+  ranksep?: number | undefined;
+  marginx?: number | undefined;
+  marginy?: number | undefined;
+  acyclicer?: string | undefined;
+  ranker?: string | undefined;
 }
 
 export type NodeMapping = Record<string, NodeMapItem>;

diff --git a/src/index.ts b/src/index.ts
@@ -3,10 +3,12 @@ export {
   EdgeLabelRenderer,
   Handle,
   Position,
+  SmoothStepEdge,
   applyEdgeChanges,
   applyNodeChanges,
   getBezierPath,
   getSmoothStepPath,
+  getStraightPath,
 } from 'reactflow';
 export { default as Background } from './Background';
 export { default as BasicGroupNode } from './BasicGroupNode';