Multiple Segments for Connectors

Connectors in the Angular Diagram component can be composed of multiple segments to create complex routing paths between nodes. Multiple segments allow you to define precise connection routes that navigate around obstacles or follow specific pathways in your diagram layout.

Understanding Connector Segments

A connector segment represents a portion of the connector’s path. By combining multiple segments, you can create connectors that change direction multiple times, forming L-shapes, Z-shapes, or more complex routing patterns. Each segment can have different properties and behaviors depending on the segment type used.

Create Multiple Segments

Multiple segments can be defined sequentially to form a complete connector path. To create a connector with multiple segments, define and add the segments to the segments collection.

The following example demonstrates how to create a connector with multiple segments that forms a custom routing path:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, Diagram, ConnectorModel, ConnectorEditing, ConnectorConstraints } from '@syncfusion/ej2-angular-diagrams';
Diagram.Inject(ConnectorEditing);

@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="600px" [connectors]='connectors'>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
    @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public connectors: ConnectorModel[] = [
        {
            id: 'connector1',
            type: 'Orthogonal',
            segments: [{
                type: 'Orthogonal',
                direction: 'Bottom',
                length: 150,
            },
            {
                type: 'Orthogonal',
                direction: 'Right',
                length: 150,
            },
            {
                type: 'Orthogonal',
                direction: 'Top',
                length: 100,
            },
            {
                type: 'Orthogonal',
                direction: 'Left',
                length: 100,
            }],
            sourcePoint: { x: 300, y: 100 },
            targetPoint: { x: 350, y: 150 },
            constraints: ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
        },
        {
            id: 'connector2',
            type: 'Bezier',
            constraints: ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
            segments: [
                { point: { x: 150, y: 150 }, type: 'Bezier' },
                { point: { x: 250, y: 250 }, type: 'Bezier' },
            ],
            sourcePoint: { x: 100, y: 100 },
            targetPoint: { x: 300, y: 300 },
        },
        {
            id: 'connector3',
            type: 'Straight',
            constraints: ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
            segments: [
                { point: { x: 500, y: 200 }, type: 'Straight' },
                { point: { x: 600, y: 300 }, type: 'Straight' },
            ],
            sourcePoint: { x: 600, y: 100 },
            targetPoint: { x: 800, y: 300 },
        }
    ];

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

Use cases

Multiple segments are particularly useful for:

  • Creating connectors that route around obstacles or other nodes
  • Designing flowcharts with specific directional requirements
  • Building network diagrams with custom connection paths
  • Implementing organizational charts with complex hierarchical connections

Undo/Redo support for connector segments

The Diagram control provides comprehensive undo and redo functionality for all connector segment operations. This includes reversible actions such as dragging, resizing, and rotating source or target nodes, as well as modifying segment points and endpoints.

Key undo/redo capabilities include:

  • Modifying and adjusting segment points.
  • Changing connector endpoints between nodes or ports.
  • Performing node operations that affect connected segments.
  • Adding, removing, or reordering segments.

This functionality ensures consistent editing behavior across all connector types and interactions, enabling users to experiment with complex routing configurations while retaining the ability to revert changes.

The following example demonstrates undo and redo functionality for connector segments:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
  DiagramComponent,
  Diagram,
  OrthogonalSegmentModel,
  ConnectorEditing,
  ConnectorConstraints,
  DiagramModule,
  ShapeStyleModel,
  UndoRedo,
} from '@syncfusion/ej2-angular-diagrams';
Diagram.Inject(ConnectorEditing, UndoRedo);

@Component({
  imports: [DiagramModule],
  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `
    <button (click)="undo()">Undo</button>
    <button (click)="redo()">Redo</button>
    <ejs-diagram #diagram id="diagram" width="100%" height="600px">
          <e-nodes>
              <e-node id='sourcenode' [offsetX]=350 [offsetY]=50 [width]=150 [height]=50  [style]='style'>
                  <e-node-annotations>
                          <e-node-annotation content="node 1">
                          </e-node-annotation>
                  </e-node-annotations>
              </e-node>
              <e-node id='targetnode' [offsetX]=200 [offsetY]=250 [width]=150 [height]=50 [style]='style'>
                  <e-node-annotations>
                          <e-node-annotation content="node 2">
                          </e-node-annotation>
                  </e-node-annotations>
              </e-node>
          </e-nodes>
          <e-connectors>
              <e-connector id='connector' type='Orthogonal' sourceID='sourcenode' targetID='targetnode' [constraints]='constraints' [segments]='segments'>
              </e-connector>
          </e-connectors>
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public segments?: OrthogonalSegmentModel;
  public style?: ShapeStyleModel;

  ngOnInit(): void {
    this.segments = [
      {
        type: 'Orthogonal',
        direction: 'Left',
        length: 100,
      },
      {
        type: 'Orthogonal',
        direction: 'Bottom',
        length: 100,
      },
      {
        type: 'Orthogonal',
        direction: 'Right',
        length: 100,
      },
      {
        type: 'Orthogonal',
        direction: 'Bottom',
        length: 50,
      },
    ];
    this.style = {
      fill: '#6BA5D7',
      strokeColor: 'white',
    };
  }
  constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
  undo() {
    (this.diagram as any).undo();
  }
  redo() {
    (this.diagram as any).redo();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));