Symmetric layout in Angular Diagram control

28 Mar 20255 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.

app.component.ts
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, ConnectorModel, LayoutModel, DiagramModule,
  SymmetricLayout, SymmetricLayoutService, BasicShapeModel } from '@syncfusion/ej2-angular-diagrams';

Diagram.Inject(SymmetricLayout);

@Component({
  imports: [DiagramModule],

  providers: [SymmetricLayoutService],
  standalone: true,
  selector: "app-container",
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="590px" [nodes]="nodes"
  [connectors]="connectors" [layout]="layout"> </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {

  @ViewChild("diagram")
  public diagram!: DiagramComponent;
  public nodes: NodeModel[] = [];
  public connectors: ConnectorModel[] = [];
  public layout: LayoutModel = {};

  ngOnInit() {
    this.populateNodes();
    this.layout = {
      type: 'SymmetricalLayout',
      springLength: 80,
      springFactor: 0.8,
      maxIteration: 500,
      margin: { left: 20, top: 20 },
    }

  }

  private connectNodes(parentNode: NodeModel | any, childNode: NodeModel): ConnectorModel {
    const connector: ConnectorModel = {
      id: parentNode.id + childNode.id,
      sourceID: parentNode.id,
      targetID: childNode.id,
      targetDecorator: { shape: 'None' },
    };
    return connector;
  }

  private getRectangle(name: string): NodeModel {
    const shape: BasicShapeModel = {
      type: 'Basic',
      shape: 'Ellipse',
    };
    const node: NodeModel = {
      id: name,
      height: 25,
      width: 25,
      style: { fill: '#ff6329' },
      shape: shape,
    };
    return node;
  }

  private populateNodes() {
    const parentRect: NodeModel = this.getRectangle('p');
    this.nodes.push(parentRect);
    for (let i = 0; i < 2; i++) {
      const childRect_i: NodeModel = this.getRectangle('c' + i);
      this.nodes.push(childRect_i);
      for (let j = 0; j < 2; j++) {
        const childRect_j: NodeModel = this.getRectangle('c' + i + j);
        this.nodes.push(childRect_j);
        for (let k = 0; k < 6; k++) {
          const childRect_k: NodeModel = this.getRectangle('c' + i + j + k);
          this.nodes.push(childRect_k);
          this.connectors.push(this.connectNodes(childRect_j, childRect_k));
        }
        this.connectors.push(this.connectNodes(childRect_i, childRect_j));
      }
      this.connectors.push(this.connectNodes(parentRect, childRect_i));
    }
    return this.nodes;
  }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

NOTE

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

Symmetric layout