LayoutModel

23 Sep 20258 minutes to read

Interface for a class Layout

Properties

arrangement ChildArrangement

connect the node’s without overlapping in automatic layout

bounds Rect

Aligns the layout within the given bounds

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

connectionPointOrigin ConnectionPointOrigin

connect the node’s without overlapping in automatic layout

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

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');

enableRouting boolean

Enable / Disable connector routing for the layout

fixedNode string

Sets the name of the node with respect to which all other nodes will be translated

flowchartLayoutSettings FlowchartLayoutSettingsModel

Defines the flow chart settings of the layout

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

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');

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

horizontalSpacing number

Sets the space that has to be horizontally left between the nodes

layoutInfo TreeInfo

getLayoutInfo is used to configure every subtree of the organizational chart

margin MarginModel

Defines the space between the viewport and the layout

maxIteration number

Sets the Maximum no of iteration of the symmetrical layout

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

root string

Defines the root of the hierarchical tree layout

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');

springLength number

Sets how long edges should be, ideally of the symmetrical layout

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

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

verticalSpacing number

Sets the space that has to be Vertically left between the nodes

Search docs

Ask HelpBot