Symmetric layout in EJ2 TypeScript Diagram control

16 Dec 20247 minutes to read

The symmetric layout has been formed using nodes position by closer together or pushing them further apart. This is repeated iteratively until the system comes to an equilibrium state.

Symmetric layout

The layout’s springLength defined as how long edges should be, ideally. This will be the resting length for the springs. Edge attraction and vertex repulsion forces to be defined by using layout’s springFactor, the more sibling nodes repel each other. The relative positions do not change any more from one iteration to the next. The number of iterations can be specified by using layout’s maxIteration.

The following code illustrates how to arrange the nodes in a radial tree structure.

index.ts
index.html
import {
    Diagram,
    ConnectorModel,
    IConnector,
    DataBinding,
    HierarchicalTree,
    LayoutOrientation,
    LayoutType,
    Rect,
    HorizontalAlignment,
    VerticalAlignment,
    NodeModel,
    BasicShapeModel,
    SymmetricLayout,
  } from '@syncfusion/ej2-diagrams';
  Diagram.Inject(SymmetricLayout);
  let nodes: NodeModel[] = [];
  let connectors: ConnectorModel[] = [];
  // creating the connection between the layout nodes and connectors.
  function ConnectNodes(
    parentNode: NodeModel,
    childNode: NodeModel
  ): ConnectorModel {
    let connector: ConnectorModel = {
      id: parentNode.id + childNode.id,
      sourceID: parentNode.id,
      targetID: childNode.id,
      targetDecorator: {
        shape: 'None',
      },
    };
    return connector;
  }
  // creating the layout nodes as rectangle in shape.
  function GetRectangle(name: string): NodeModel {
    let shape: BasicShapeModel = {
      type: 'Basic',
      shape: 'Ellipse',
    };
    let node: NodeModel = {
      id: name,
      height: 25,
      width: 25,
      style: {
        fill: '#ff6329',
      },
      shape: shape,
    };
    return node;
  }
  // creating the symmetrical layout child elements hierarchy.
  function populateNodes() {
    let parentRect: NodeModel = GetRectangle('p');
    nodes.push(parentRect);
    for (let i: number = 0; i < 2; i++) {
      let childRect_i: NodeModel = GetRectangle('c' + i);
      nodes.push(childRect_i);
      for (let j: number = 0; j < 2; j++) {
        let childRect_j: NodeModel = GetRectangle('c' + i + j);
        nodes.push(childRect_j);
        for (let k: number = 0; k < 6; k++) {
          let childRect_k: NodeModel = GetRectangle('c' + i + j + k);
          nodes.push(childRect_k);
          connectors.push(ConnectNodes(childRect_j, childRect_k));
        }
        connectors.push(ConnectNodes(childRect_i, childRect_j));
      }
      connectors.push(ConnectNodes(parentRect, childRect_i));
    }
    return nodes;
  }
  //sets the layout child elements
  populateNodes();
  let diagram: Diagram = new Diagram({
    width: '100%',
    height: '550px',
    layout: {
      //sets the layout as symmetric layout
      type: 'SymmetricalLayout',
      springLength: 80,
      springFactor: 0.8,
      maxIteration: 500,
      margin: {
        left: 20,
        top: 20,
      },
    },
    nodes: nodes,
    connectors: connectors,
    getNodeDefaults: (obj: Node, diagram: Diagram) => {
      return obj;
    },
    getConnectorDefaults: (connector: ConnectorModel, diagram: Diagram) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      return connector;
    },
  });
  diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

NOTE

If you want to use symmetric layout in diagram, you need to inject SymmetricLayout in the diagram.

Symmetric layout