Search results

LayoutModel

Interface for a class Layout

Properties

bounds

Rect

Aligns the layout within the given bounds

connectionDirection

string

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

connectorSegments

string

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

fixedNode

string

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

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

string

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

margin

MarginModel

  • Defines the space between the viewport and the layout

maxIteration

number

Sets the Maximum no of iteration of the symmetrical layout

orientation

string

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

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

string

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

verticalAlignment

string

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