@flowgram.ai/free-auto-layout-plugin 0.2.10 → 0.2.11

package/dist/index.d.mts

@@ -140,15 +140,15 @@ declare namespace dagreLib {
     export { reversePointsForReversedEdges };
 }
 
-declare const createFreeAutoLayoutPlugin: _flowgram_ai_core.PluginCreator<unknown>;
-
 declare class LayoutStore {
+    readonly config: LayoutConfig;
     private indexMap;
     private init;
     private store;
     private container;
+    constructor(config: LayoutConfig);
     get initialized(): boolean;
-    getNode(id: string): LayoutNode | undefined;
+    getNode(id?: string): LayoutNode | undefined;
     getNodeByIndex(index: string): LayoutNode | undefined;
     getEdge(id: string): LayoutEdge | undefined;
     get nodes(): LayoutNode[];
@@ -223,6 +223,26 @@ interface LayoutParams {
 interface LayoutOptions {
     getFollowNode?: GetFollowNode;
 }
+interface LayoutConfig {
+    /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
+    rankdir: 'TB' | 'BT' | 'LR' | 'RL';
+    /** Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right. */
+    align: 'UL' | 'UR' | 'DL' | 'DR' | undefined;
+    /** Number of pixels that separate nodes horizontally in the layout. */
+    nodesep: number;
+    /** Number of pixels that separate edges horizontally in the layout. */
+    edgesep: number;
+    /** Number of pixels that separate edges horizontally in the layout. */
+    ranksep: number;
+    /** Number of pixels to use as a margin around the left and right of the graph. */
+    marginx: number;
+    /** Number of pixels to use as a margin around the top and bottom of the graph. */
+    marginy: number;
+    /** If set to greedy, uses a greedy heuristic for finding a feedback arc set for a graph. A feedback arc set is a set of edges that can be removed to make a graph acyclic. */
+    acyclicer: 'greedy' | undefined;
+    /** Type of algorithm to assigns a rank to each node in the input graph. Possible values: network-simplex, tight-tree or longest-path */
+    ranker: 'network-simplex' | 'tight-tree' | 'longest-path';
+}
 type GetFollowNode = (node: LayoutNode, context: {
     store: LayoutStore;
     /** 业务自定义参数 */
@@ -231,22 +251,32 @@ type GetFollowNode = (node: LayoutNode, context: {
     followTo?: string;
 } | undefined;
 
+interface AutoLayoutOptions {
+    layoutConfig?: Partial<LayoutConfig>;
+}
+
+declare const createFreeAutoLayoutPlugin: _flowgram_ai_core.PluginCreator<AutoLayoutOptions>;
+
 declare class Layout {
     private readonly _store;
     private readonly _layout;
     private readonly _position;
-    constructor();
+    constructor(config: LayoutConfig);
     init(params: LayoutParams, options?: LayoutOptions): void;
     layout(): void;
     position(): Promise<void>;
     setFollowNode(getFollowNode?: GetFollowNode): void;
 }
 
+declare const DefaultLayoutConfig: LayoutConfig;
+
 declare class AutoLayoutService {
     private readonly document;
+    private layoutConfig;
+    init(options: AutoLayoutOptions): void;
     layout(options?: LayoutOptions): Promise<void>;
     private layoutNode;
     private getNodesAllLines;
 }
 
-export { AutoLayoutService, type GetFollowNode, Layout, type LayoutEdge, type LayoutNode, type LayoutOptions, LayoutStore, createFreeAutoLayoutPlugin, dagreLib };
+export { AutoLayoutService, DefaultLayoutConfig, type GetFollowNode, Layout, type LayoutEdge, type LayoutNode, type LayoutOptions, LayoutStore, createFreeAutoLayoutPlugin, dagreLib };

package/dist/index.d.ts

@@ -140,15 +140,15 @@ declare namespace dagreLib {
     export { reversePointsForReversedEdges };
 }
 
-declare const createFreeAutoLayoutPlugin: _flowgram_ai_core.PluginCreator<unknown>;
-
 declare class LayoutStore {
+    readonly config: LayoutConfig;
     private indexMap;
     private init;
     private store;
     private container;
+    constructor(config: LayoutConfig);
     get initialized(): boolean;
-    getNode(id: string): LayoutNode | undefined;
+    getNode(id?: string): LayoutNode | undefined;
     getNodeByIndex(index: string): LayoutNode | undefined;
     getEdge(id: string): LayoutEdge | undefined;
     get nodes(): LayoutNode[];
@@ -223,6 +223,26 @@ interface LayoutParams {
 interface LayoutOptions {
     getFollowNode?: GetFollowNode;
 }
+interface LayoutConfig {
+    /** Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right. */
+    rankdir: 'TB' | 'BT' | 'LR' | 'RL';
+    /** Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right. */
+    align: 'UL' | 'UR' | 'DL' | 'DR' | undefined;
+    /** Number of pixels that separate nodes horizontally in the layout. */
+    nodesep: number;
+    /** Number of pixels that separate edges horizontally in the layout. */
+    edgesep: number;
+    /** Number of pixels that separate edges horizontally in the layout. */
+    ranksep: number;
+    /** Number of pixels to use as a margin around the left and right of the graph. */
+    marginx: number;
+    /** Number of pixels to use as a margin around the top and bottom of the graph. */
+    marginy: number;
+    /** If set to greedy, uses a greedy heuristic for finding a feedback arc set for a graph. A feedback arc set is a set of edges that can be removed to make a graph acyclic. */
+    acyclicer: 'greedy' | undefined;
+    /** Type of algorithm to assigns a rank to each node in the input graph. Possible values: network-simplex, tight-tree or longest-path */
+    ranker: 'network-simplex' | 'tight-tree' | 'longest-path';
+}
 type GetFollowNode = (node: LayoutNode, context: {
     store: LayoutStore;
     /** 业务自定义参数 */
@@ -231,22 +251,32 @@ type GetFollowNode = (node: LayoutNode, context: {
     followTo?: string;
 } | undefined;
 
+interface AutoLayoutOptions {
+    layoutConfig?: Partial<LayoutConfig>;
+}
+
+declare const createFreeAutoLayoutPlugin: _flowgram_ai_core.PluginCreator<AutoLayoutOptions>;
+
 declare class Layout {
     private readonly _store;
     private readonly _layout;
     private readonly _position;
-    constructor();
+    constructor(config: LayoutConfig);
     init(params: LayoutParams, options?: LayoutOptions): void;
     layout(): void;
     position(): Promise<void>;
     setFollowNode(getFollowNode?: GetFollowNode): void;
 }
 
+declare const DefaultLayoutConfig: LayoutConfig;
+
 declare class AutoLayoutService {
     private readonly document;
+    private layoutConfig;
+    init(options: AutoLayoutOptions): void;
     layout(options?: LayoutOptions): Promise<void>;
     private layoutNode;
     private getNodesAllLines;
 }
 
-export { AutoLayoutService, type GetFollowNode, Layout, type LayoutEdge, type LayoutNode, type LayoutOptions, LayoutStore, createFreeAutoLayoutPlugin, dagreLib };
+export { AutoLayoutService, DefaultLayoutConfig, type GetFollowNode, Layout, type LayoutEdge, type LayoutNode, type LayoutOptions, LayoutStore, createFreeAutoLayoutPlugin, dagreLib };

package/dist/index.js

@@ -30,6 +30,7 @@ var src_exports = {};
 __export(src_exports, {
   AutoLayoutService: () => AutoLayoutService,
   DagreGraph: () => import_graphlib10.Graph,
+  DefaultLayoutConfig: () => DefaultLayoutConfig,
   Layout: () => Layout,
   createFreeAutoLayoutPlugin: () => createFreeAutoLayoutPlugin,
   dagreLib: () => dagreLib
@@ -2114,13 +2115,17 @@ var import_free_layout_core2 = require("@flowgram.ai/free-layout-core");
 var import_free_layout_core = require("@flowgram.ai/free-layout-core");
 var import_document = require("@flowgram.ai/document");
 var LayoutStore = class {
-  constructor() {
+  constructor(config) {
+    this.config = config;
     this.init = false;
   }
   get initialized() {
     return this.init;
   }
   getNode(id) {
+    if (!id) {
+      return void 0;
+    }
     return this.store.nodes.get(id);
   }
   getNodeByIndex(index) {
@@ -2299,8 +2304,13 @@ var LayoutStore = class {
       });
       const { outputLines } = node.getData(import_free_layout_core.WorkflowNodeLinesData);
       const sortedLines = outputLines.sort((a, b) => {
+        const aNode = this.getNode(a.to?.id);
+        const bNode = this.getNode(b.to?.id);
         const aPort = a.fromPort;
         const bPort = b.fromPort;
+        if (aPort === bPort && aNode && bNode) {
+          return aNode.position.y - bNode.position.y;
+        }
         if (aPort && bPort) {
           return aPort.point.y - bPort.point.y;
         }
@@ -2371,16 +2381,6 @@ var LayoutPosition = class {
 // src/layout/dagre.ts
 var import_document2 = require("@flowgram.ai/document");
 var import_graphlib9 = require("@dagrejs/graphlib");
-
-// src/layout/constant.ts
-var DagreLayoutOptions = {
-  rankdir: "LR",
-  nodesep: 100,
-  ranksep: 100,
-  ranker: "network-simplex"
-};
-
-// src/layout/dagre.ts
 var DagreLayout = class {
   constructor(store) {
     this.store = store;
@@ -2429,7 +2429,7 @@ var DagreLayout = class {
   createGraph() {
     const graph = new import_graphlib9.Graph({ multigraph: true });
     graph.setDefaultEdgeLabel(() => ({}));
-    graph.setGraph(DagreLayoutOptions);
+    graph.setGraph(this.store.config);
     return graph;
   }
   graphSetData() {
@@ -2551,8 +2551,8 @@ var DagreLayout = class {
 
 // src/layout/layout.ts
 var Layout = class {
-  constructor() {
-    this._store = new LayoutStore();
+  constructor(config) {
+    this._store = new LayoutStore(config);
     this._layout = new DagreLayout(this._store);
     this._position = new LayoutPosition(this._store);
   }
@@ -2589,8 +2589,30 @@ var Layout = class {
   }
 };
 
+// src/layout/constant.ts
+var DefaultLayoutConfig = {
+  rankdir: "LR",
+  align: void 0,
+  nodesep: 100,
+  edgesep: 10,
+  ranksep: 100,
+  marginx: 0,
+  marginy: 0,
+  acyclicer: void 0,
+  ranker: "network-simplex"
+};
+
 // src/services.ts
 var AutoLayoutService = class {
+  constructor() {
+    this.layoutConfig = DefaultLayoutConfig;
+  }
+  init(options) {
+    this.layoutConfig = {
+      ...this.layoutConfig,
+      ...options.layoutConfig
+    };
+  }
   async layout(options = {}) {
     await this.layoutNode(this.document.root, options);
   }
@@ -2601,7 +2623,7 @@ var AutoLayoutService = class {
     }
     const edges = this.getNodesAllLines(nodes);
     await Promise.all(nodes.map(async (child) => this.layoutNode(child, options)));
-    const layout2 = new Layout();
+    const layout2 = new Layout(this.layoutConfig);
     layout2.init({ nodes, edges, container: node }, options);
     layout2.layout();
     await layout2.position();
@@ -2627,7 +2649,11 @@ AutoLayoutService = __decorateClass([
 var createFreeAutoLayoutPlugin = (0, import_core2.definePluginCreator)({
   onBind: ({ bind }) => {
     bind(AutoLayoutService).toSelf().inSingletonScope();
-  }
+  },
+  onInit: (ctx, opts) => {
+    ctx.get(AutoLayoutService).init(opts);
+  },
+  singleton: true
 });
 
 // src/index.ts
@@ -2636,6 +2662,7 @@ var import_graphlib10 = require("@dagrejs/graphlib");
 0 && (module.exports = {
   AutoLayoutService,
   DagreGraph,
+  DefaultLayoutConfig,
   Layout,
   createFreeAutoLayoutPlugin,
   dagreLib