Layout
23 Sep 20258 minutes to read
Defines the behavior of the automatic layouts
Properties
arrangement ChildArrangement
connect the node’s without overlapping in automatic layout
Defaults to ‘Nonlinear’
bounds Rect
Aligns the layout within the given bounds
Defaults to undefined
connectionDirection ConnectionDirection
Sets how to define the connection direction (first segment direction & last segment direction).
- Auto - Defines the first segment direction based on the type of the layout
- Orientation - Defines the first segment direction based on the orientation of the layout
- Custom - Defines the first segment direction dynamically by the user
Defaults to ‘Auto’
connectionPointOrigin ConnectionPointOrigin
connect the node’s without overlapping in automatic layout
Defaults to ‘SamePoint’
connectorSegments ConnectorSegments
Sets whether the segments have to be customized based on the layout or not
- Default - Routes the connectors like a default diagram
- Layout - Routes the connectors based on the type of the layout
Defaults to ‘Default’
enableAnimation boolean
Enables/Disables animation option when a node is expanded/collapsed
<div id='diagram'></div>let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
annotations: [{ content: 'Default Shape' }]
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: {
type: 'Basic', shape: 'Ellipse'
},
annotations: [{ content: 'Path Element' }]
}
];
let connectors: ConnectorModel[] = [{
id: 'connector1',
type: 'Straight',
sourcePoint: { x: 100, y: 300 },
targetPoint: { x: 200, y: 400 },
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes,
...
layout: {
enableAnimation: true, orientation: 'TopToBottom',
type: 'OrganizationalChart', margin: { top: 20 },
horizontalSpacing: 30, verticalSpacing: 30,
},
...
});
diagram.appendTo('#diagram');Defaults to true
enableRouting boolean
Enable / Disable connector routing for the layout
Defaults to false
fixedNode string
Sets the name of the node with respect to which all other nodes will be translated
Defaults to ’’
flowchartLayoutSettings FlowchartLayoutSettingsModel
Defines the flow chart settings of the layout
Defaults to {}
getBranch Function|string
Defines whether an object should be at the left/right of the mind map. Applicable only for the direct children of the root node
Defaults to undefined
getLayoutInfo Function|string
getLayoutInfo is used to configure every subtree of the organizational chart
<div id='diagram'></div>let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
annotations: [{ content: 'Default Shape' }]
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: {
type: 'Basic', shape: 'Ellipse'
},
annotations: [{ content: 'Path Element' }]
}
];
let connectors: ConnectorModel[] = [{
id: 'connector1',
type: 'Straight',
sourcePoint: { x: 100, y: 300 },
targetPoint: { x: 200, y: 400 },
}];
let diagram: Diagram = new Diagram({
...
connectors: connectors, nodes: nodes,
layout: {
enableAnimation: true,
type: 'OrganizationalChart', margin: { top: 20 },
getLayoutInfo: (node: Node, tree: TreeInfo) => {
if (!tree.hasSubTree) {
tree.orientation = 'Vertical';
tree.type = 'Alternate';
}
}
},
...
});
diagram.appendTo('#diagram');Defaults to undefined
horizontalAlignment HorizontalAlignment
Defines how the layout has to be horizontally aligned
- Stretch - Stretches the diagram element throughout its immediate parent
- Left - Aligns the diagram element at the left of its immediate parent
- Right - Aligns the diagram element at the right of its immediate parent
- Center - Aligns the diagram element at the center of its immediate parent
- Auto - Aligns the diagram element based on the characteristics of its immediate parent
Defaults to ‘Auto’
horizontalSpacing number
Sets the space that has to be horizontally left between the nodes
Defaults to 30
layoutInfo TreeInfo
getLayoutInfo is used to configure every subtree of the organizational chart
margin MarginModel
- Defines the space between the viewport and the layout
Defaults to { left: 50, top: 50, right: 0, bottom: 0 }
maxIteration number
Sets the Maximum no of iteration of the symmetrical layout
Defaults to 30
orientation LayoutOrientation
Defines the orientation of layout
- TopToBottom - Renders the layout from top to bottom
- BottomToTop - Renders the layout from bottom to top
- LeftToRight - Renders the layout from left to right
- RightToLeft - Renders the layout from right to left
- Horizontal - Renders only the MindMap from left to right
- Vertical - Renders only the MindMap from top to bottom
Defaults to ‘TopToBottom’
root string
Defines the root of the hierarchical tree layout
Defaults to ’’
springFactor number
Defines the Edge attraction and vertex repulsion forces, i.e., the more sibling nodes repel each other
<div id='diagram'></div>let diagram: Diagram = new Diagram({
...
layout: { type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500, margin: { left: 20, top: 20 } },
...
});
diagram.appendTo('#diagram');Defaults to 40
springLength number
Sets how long edges should be, ideally of the symmetrical layout
Defaults to 50
type LayoutType
Defines the type of the layout
- None - None of the layouts is applied
- HierarchicalTree - Defines the type of the layout as Hierarchical Tree
- OrganizationalChart - Defines the type of the layout as Organizational Chart
- ComplexHierarchicalTree - Defines the type of the layout as complex HierarchicalTree
- RadialTree - Defines the type of the layout as Radial tree
- MindMap - Defines the type of the layout as MindMap
- SymmetricalLayout - Defines the type of the layout as SymmetricalLayout
- Flowchart - Defines the type of the layout as Flowchart
Defaults to ‘None’
verticalAlignment VerticalAlignment
Defines how the layout has to be vertically aligned
- Stretch - Stretches the diagram element throughout its immediate parent
- Top - Aligns the diagram element at the top of its immediate parent
- Bottom - Aligns the diagram element at the bottom of its immediate parent
- Center - Aligns the diagram element at the center of its immediate parent
- Auto - Aligns the diagram element based on the characteristics of its immediate parent
Defaults to ‘Auto’
verticalSpacing number
Sets the space that has to be Vertically left between the nodes
Defaults to 30