Flow Layout - IRobot1/three-flow-ts GitHub Wiki

Implement FlowLayout interface to create a custom layout for registering with flow diagram. Layout uses the width and height of each node and organizes the edges to minimize the number of edge intersections.

See Dagre Layout for example implementation.

export interface FlowLayout {
  layout(nodes:Array<FlowNodeParameters>, edges:Array<FlowEdgeParameters>, options: any, filter?: (nodeId: string) => boolean): LayoutResult;
  dispose(): void;
}

Parameter	Description	Default
layout	Implement to layout nodes and edges, given implementation specific options and optional node filter	No Op
dispose	Implement to dispose of any cached data

Layout Result

Provides node positions, edge point positions and, if known, width and height of estimated layout.

export interface LayoutResult {
  width: number
  height: number
  nodes: Array<{ id: string, x: number, y: number }>
  edges: Array<{ id: string, points: Array<{ x: number, y: number }> }>
}

Example Usage

const options: FlowDiagramOptions = {
  gridsize: 0.3,
  layout: new CustomLayout()
}
const flow = new FlowDiagram(options)
flow.layout({/* layout specific options */});