feat(auto-layout): support set layout-config inside tool params (#922)

apps/demo-free-layout/src/components/tools/auto-layout.tsx

@@ -17,6 +17,12 @@ export const AutoLayout = () => {
     await tools.autoLayout({
       enableAnimation: true,
       animationDuration: 1000,
+      layoutConfig: {
+        rankdir: 'LR',
+        align: undefined,
+        nodesep: 100,
+        ranksep: 100,
+      },
     });
   }, [tools]);
 

apps/docs/src/en/guide/plugin/free-auto-layout-plugin.mdx

@@ -207,9 +207,9 @@ const layoutOptions: LayoutOptions = {
 await tools.autoLayout(layoutOptions);
 ```
 
-### Nested Container Layout
+### Layout Only for the Specified Container
 
-The plugin supports recursive layout for nested containers and automatically handles node arrangement within containers:
+The plugin supports recursive layout for a specified container and automatically handles node arrangement within the container:
 
 ```typescript
 // Execute layout for specific container
@@ -278,7 +278,7 @@ const handleAutoLayout = async () => {
 
 ### Q: How to optimize layout animation stuttering?
 
-A: For complex graphics, it's recommended to disable animation or reduce animation duration:
+A: For complex workflows, it's recommended to disable animation or reduce animation duration:
 
 ```typescript
 layoutOptions: {

apps/docs/src/zh/guide/plugin/free-auto-layout-plugin.mdx

@@ -208,9 +208,9 @@ const layoutOptions: LayoutOptions = {
 await tools.autoLayout(layoutOptions);
 ```
 
-### 嵌套容器布局
+### 仅对指定容器布局
 
-插件支持嵌套容器的递归布局，会自动处理容器内部的节点排列：
+插件支持对指定容器进行递归布局，会自动处理容器内部的节点排列：
 
 ```typescript
 // 对特定容器执行布局
@@ -278,7 +278,7 @@ const handleAutoLayout = async () => {
 
 ### Q: 布局动画卡顿怎么优化？
 
-A: 对于复杂图形，建议禁用动画或减少动画时长：
+A: 对于复杂工作流，建议禁用动画或减少动画时长：
 
 ```typescript
 layoutOptions: {

packages/client/free-layout-editor/src/hooks/use-playground-tools.ts

@@ -31,6 +31,10 @@ export interface PlaygroundTools {
   zoomin: (easing?: boolean) => void;
   zoomout: (easing?: boolean) => void;
   fitView: (easing?: boolean) => void;
+  /**
+   * Auto layout tool - 自动布局工具
+   * https://flowgram.ai/guide/plugin/free-auto-layout-plugin.html
+   */
   autoLayout: FreeLayoutPluginTools['autoLayout'];
   /**
    * 切换线条

packages/client/free-layout-editor/src/tools/auto-layout.ts

@@ -17,6 +17,7 @@ export type AutoLayoutToolOptions = LayoutOptions;
 
 /**
  * Auto layout tool - 自动布局工具
+ * https://flowgram.ai/guide/plugin/free-auto-layout-plugin.html
  */
 @injectable()
 export class WorkflowAutoLayoutTool {

packages/plugins/free-auto-layout-plugin/src/create-auto-layout-plugin.tsx

@@ -8,6 +8,10 @@ import { definePluginCreator } from '@flowgram.ai/core';
 import { AutoLayoutOptions } from './type';
 import { AutoLayoutService } from './services';
 
+/**
+ * Auto layout plugin - 自动布局插件
+ * https://flowgram.ai/guide/plugin/free-auto-layout-plugin.html
+ */
 export const createFreeAutoLayoutPlugin = definePluginCreator<AutoLayoutOptions>({
   onBind: ({ bind }) => {
     bind(AutoLayoutService).toSelf().inSingletonScope();

packages/plugins/free-auto-layout-plugin/src/layout/type.ts

@@ -102,6 +102,7 @@ export interface LayoutParams {
 }
 
 export interface LayoutOptions {
+  layoutConfig?: Partial<LayoutConfig>;
   containerNode?: WorkflowNodeEntity;
   getFollowNode?: GetFollowNode;
   enableAnimation?: boolean;

packages/plugins/free-auto-layout-plugin/src/services.ts

@@ -65,7 +65,11 @@ export class AutoLayoutService {
     const childrenLayouts = (
       await Promise.all(layoutNodes.map((n) => this.layoutNode(n, options)))
     ).flat();
-    const layout = new Layout(this.layoutConfig);
+    const layoutConfig: LayoutConfig = {
+      ...this.layoutConfig,
+      ...options.layoutConfig,
+    };
+    const layout = new Layout(layoutConfig);
     layout.init({ container, layoutNodes, layoutEdges }, options);
     layout.layout();
     const rect = this.getLayoutNodeRect(container);