Layout API in JavaScript Diagram API control

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

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