feat:整理画布完成后透出一个函数onAutoLayoutCompleted,让用户可以自定义

Author: 昔梦

docs/xflow/api.md

@@ -80,6 +80,7 @@ group:
 | hideAutoLayout | 是否隐藏整理画布功能 | `boolean` | false  |
 | hideFullscreen | 是否隐藏全屏功能 | `boolean` | false  |
 | hideInteractionMode | 是否隐藏指针和手形工具切换功能 | `boolean` | false  |
+| onAutoLayoutCompleted | 整理画布完成后的回调函数，接收整理后的节点数组作为参数，支持异步函数 | `(nodes: node[]) => void \| Promise<void>` | - |
 
 
 

docs/xflow/demo/nodeSetting/fullDemo/index.tsx

@@ -3,6 +3,7 @@ import XFlow from '@xrenders/xflow';
 import { settings } from './settings';
 import CustomSvg from './CustomSvg';
 import CustomImg from './CustomImg';
+import { message } from 'antd';
 
 
 const initialValues = {
@@ -94,6 +95,15 @@ const Demo = () => {
         nodeSelector={{
           showSearch: true,
         }}
+        globalConfig={{
+          controls: {
+            onAutoLayoutCompleted: async (nodes) => {
+              console.log('整理画布完成，节点数量:', nodes.length);
+              console.log('整理后的节点数据:', nodes);
+              message.success(`画布已整理完成，共 ${nodes.length} 个节点`);
+            }
+          }
+        }}
       />
     </div>
   );

packages/x-flow/src/XFlow.tsx

@@ -210,7 +210,7 @@ const XFlow: FC<FlowProps> = memo(props => {
   );
 
   const { eventEmitter } = useEventEmitterContextContext();
-  eventEmitter?.useSubscription((v: any) => {
+  eventEmitter?.useSubscription(async (v: any) => {
     // 整理画布
     if (v.type === 'auto-layout-nodes') {
       const newNodes: any = autoLayoutNodes(
@@ -219,6 +219,12 @@ const XFlow: FC<FlowProps> = memo(props => {
         layout
       );
       setNodes(newNodes, false);
+
+      // 整理画布完成后执行回调
+      const onAutoLayoutCompleted = globalConfig?.controls?.onAutoLayoutCompleted;
+      if (onAutoLayoutCompleted) {
+        await onAutoLayoutCompleted(newNodes);
+      }
     }
 
     if (v.type === 'deleteNode') {

packages/x-flow/src/types.ts

@@ -138,6 +138,7 @@ export interface TControl{
   hideAutoLayout?: boolean
   hideFullscreen?: boolean
   hideInteractionMode?: boolean
+  onAutoLayoutCompleted?: (nodes: node[]) => void | Promise<void>; // 整理画布完成后的回调函数
 }
 
 export interface THandle{