Connector customization

28 Mar 202524 minutes to read

Diagram allows you to customize the connector appearances. The following topics shows how to customize several properties of the connectors.

Decorator

  • Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the sourceDecorator and targetDecorator properties of the connector.

  • The shape property of sourceDecorator allows to define the shape of the decorators. Similarly, the shape property of targetDecorator allows to define the shape of the decorators.

  • To create custom shape for source decorator, use pathData property. Similarly, to create custom shape for target decorator, use pathData property.

The following code example illustrates how to create decorators of various shapes.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, ConnectorModel } from '@syncfusion/ej2-angular-diagrams';

@Component({
    imports: [DiagramModule],
    providers: [],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [connectors]="connectors" >
        </ejs-diagram>`,
        encapsulation: ViewEncapsulation.None,
    })

export class AppComponent {
    @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public connectors: ConnectorModel[] = [
    {
      id: 'connector1',
      type: 'Straight',
      sourceDecorator: { shape: 'Circle' },
      // Decorator shape - Diamond
      targetDecorator: {
           // Defines the custom shape for the connector's target decorator
        shape: 'Custom',
        //Defines the  path for the connector's target decorator
            pathData: 
            'M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5' +
                'C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z',
            },
            sourcePoint: { x: 100, y: 100 },
            targetPoint: { x: 200, y: 200 }
          },
          {
            id: 'connectors2',
            type: 'Straight',
            sourceDecorator: { shape: 'IndentedArrow' },
            targetDecorator: { shape: 'OutdentedArrow' },
            sourcePoint: { x: 400, y: 100 },
            targetPoint: { x: 300, y: 200 }
          }
        ];
    };
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize the decorator appearance

  • The source decorator’s strokeColor, strokeWidth, and strokeDashArray properties are used to customize the color, width, and appearance of the decorator.

  • To set the border stroke color, stroke width, and stroke dash array for the target decorator, use strokeColor, strokeWidth, and strokeDashArray.

  • To set the size for source and target decorator, use width and height property.

The following code example illustrates how to customize the appearance of the decorator.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, ConnectorModel } from '@syncfusion/ej2-angular-diagrams';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [connectors]="connectors" >
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})

export class AppComponent {

  @ViewChild('diagram')
  public diagram?: DiagramComponent;
  public connectors: ConnectorModel[] = [
    {
      id: 'connector1',
      type: 'Straight',
      // Decorator shape- circle
      sourceDecorator: {
        shape: 'Circle',
        // Defines the style for the sourceDecorator
        style: {
          // Defines the strokeWidth for the sourceDecorator
          strokeWidth: 3,
          // Defines the strokeColor for the sourceDecorator
          strokeColor: 'red',
        },
      },
      // Decorator shape - Diamond
      targetDecorator: {
        // Defines the custom shape for the connector's target decorator
        shape: 'Custom',
        //Defines the  path for the connector's target decorator
        pathData:
          'M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5' +
          'C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z',
        //defines the style for the target decorator
        style: {
          // Defines the strokeWidth for the targetDecorator
          strokeWidth: 3,
          // Defines the strokeColor for the sourceDecorator
          strokeColor: 'green',
          // Defines the opacity for the sourceDecorator
          opacity: 0.8,
        },
      },
      sourcePoint: {
        x: 100,
        y: 100,
      },
      targetPoint: {
        x: 200,
        y: 200,
      }
    },
    {
      id: 'connectors2',
      type: 'Straight',
      // Decorator shape - IndentedArrow
      sourceDecorator: {
        shape: 'IndentedArrow',
        style: {
          strokeWidth: 3,
          strokeColor: 'blue',
        },
      },
      // Decorator shape - OutdentedArrow
      targetDecorator: {
        shape: 'OutdentedArrow',
        style: { 
          strokeWidth: 3,
          strokeColor: 'yellow',
        },
      },
      sourcePoint: { x: 400, y: 100 },
      targetPoint: { x: 300, y: 200 }
    }
  ];
};
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Gradient style for decorator.

The gradient property is used to set the gradient color for the decorator. There are two types of gradient.

  • Linear
  • Radial

The following code example illustrates how to apply gradient for the decorator.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, ConnectorModel, GradientModel } from '@syncfusion/ej2-angular-diagrams';

@Component({
  imports: [DiagramModule],

  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="900px" [connectors]="connectors" (created)='created($event)' >
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None,
})



export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;

  public created(args: Object): void {
    (this.diagram as DiagramComponent).zoomTo({
        type: 'ZoomIn',
        zoomFactor: 2,
        focusPoint: { x: 0, y: 0.5 },
      });
      (this.diagram as DiagramComponent).fitToPage();
}

  public connectors: ConnectorModel[] = [
    {
        id: 'connector1',
        type: 'Straight',
        style: {
          strokeColor: '#6BA5D7',
          fill: '#6BA5D7',
          strokeWidth: 2,
        },
        bridgeSpace: 20,
        // Cutomize the target decorator
        targetDecorator: {
          style: {
            strokeWidth: 1,
            opacity: 0.5,
            gradient: {
              x1: 20,
              y1: 20,
              x2: 70,
              y2: 70,
              stops: [
                {
                  color: 'green',
                  offset: 50,
                  opacity: 1,
                },
                {
                  color: 'yellow',
                  offset: 100,
                  opacity: 1,
                },
              ],
              type: 'Linear',
            } as GradientModel,
          }
        },
        sourcePoint: { x: 100, y: 100 },
        targetPoint: { x: 200, y: 200 }
      },
      {
        id: 'connector2',
        type: 'Straight',
        style: {
          strokeColor: '#6BA5D7',
          fill: '#6BA5D7',
          strokeWidth: 2,
        },
        bridgeSpace: 20,
        // Cutomize the target decorator
        targetDecorator: {
          style: {
            gradient: {
              cx: 50,
              cy: 50,
              fx: 50,
              fy: 50,
              stops: [
                { color: '#00555b', offset: 0 },
                { color: 'yellow', offset: 90 },
              ],
              type: 'Radial',
            },
          },
        },
        sourcePoint: { x: 300, y: 100 },
        targetPoint: { x: 400, y: 200 }
    }];
};
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Padding

Padding is used to leave the space between the Connector’s end point and the object to where it is connected.

  • The sourcePadding property of connector defines space between the source point and the source node of the connector.

  • The targetPadding property of connector defines space between the end point and the target node of the connector.

  • The following code example illustrates how to leave space between the connection end points and source and target nodes.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, NodeModel, ConnectorModel, ShapeStyleModel } from '@syncfusion/ej2-angular-diagrams';

@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' [getConnectorDefaults] ='getConnectorDefaults'>
        <e-nodes>
            <e-node id='node1' [offsetX]=150 [offsetY]=150>
                <e-node-annotations>
                    <e-node-annotation content="Node1">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node>
            <e-node id='node2' [offsetX]=350 [offsetY]=150>
                <e-node-annotations>
                    <e-node-annotation content="Custom Template">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node>
        </e-nodes>
        <e-connectors>
            <e-connector id='connector' type='Straight' sourceID='node1' targetID='node2'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public getNodeDefaults(node: NodeModel | any): NodeModel {
        node.height = 100;
        node.width = 100;
        ((node as NodeModel).style as ShapeStyleModel).fill = "#6BA5D7";
        ((node as NodeModel).style as ShapeStyleModel).strokeColor = "White";
        return node;
    }
    public getConnectorDefaults(connector: ConnectorModel): void {
        // Set Source Padding value
        connector.sourcePadding = 20
        // Set Target Padding value
        connector.targetPadding = 20
        
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Bridging

Line bridging creates a bridge for lines to smartly cross over the other lines, at points of intersection. By default, bridgeDirection is set to top. Depending upon the direction given bridging direction appears.
Bridging can be enabled/disabled either with the connector.constraints or diagram.constraints. The following code example illustrates how to enable line bridging.

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, ConnectorModel , ConnectorBridgingService, NodeModel, ShapeStyleModel, DiagramConstraints } from '@syncfusion/ej2-angular-diagrams';

@Component({
imports: [
         DiagramModule
    ],

providers: [ConnectorBridgingService],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram id="diagram" width="100%" height="580px"  [nodes] = 'nodes' [connectors] = 'connectors' [getNodeDefaults] ='getNodeDefaults' [constraints]='diagramConstraints'></ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public diagramConstraints?: DiagramConstraints;
    ngOnInit(): void {
        this.diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging;
    }
    public nodes: NodeModel[] = [{
        id: 'Transaction',
        width: 150,
        height: 60,
        offsetX: 300,
        offsetY: 60,
        shape: {
            type: 'Flow',
            shape: 'Terminator'
        },
        annotations: [{
            id: 'label1',
            content: 'Start Transaction',
            offset: { x: 0.5, y: 0.5 }
        }]
    },
    {
        id: 'Verification',
        width: 150,
        height: 60,
        offsetX: 300,
        offsetY: 250,
        shape: {
            type: 'Flow',
            shape: 'Process'
        },
        annotations: [{
            id: 'label2',
            content: 'Verification',
            offset: { x: 0.5, y: 0.5 }
        }]
    }];

    public connectors: ConnectorModel[] = [{
        id: 'connector1',
        type: 'Straight',
        sourceID: 'Transaction',
        targetID: 'Verification'
    },
    {
        id: 'connector2',
        type: 'Straight',
        sourcePoint: { x: 200, y: 130 },
        targetPoint: { x: 400, y: 130 }
    },
    {
        id: 'connector3',
        type: 'Straight',
        sourcePoint: { x: 200, y: 170 },
        targetPoint: { x: 400, y: 170 }
    }];

    public getNodeDefaults(node: NodeModel): void {
        node.height = 100;
        node.width = 100;
        ((node as NodeModel).style as ShapeStyleModel).fill = "#6BA5D7";
        ((node as NodeModel).style as ShapeStyleModel).strokeColor = "White";
    };
    
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

NOTE

You need to inject connector bridging module into the diagram.

The bridgeSpace property of connectors can be used to define the width for line bridging.

Limitation: Bezier segments do not support bridging.

Hit padding

  • The hitPadding property enables you to define the clickable area around the connector path.The default value for hitPadding is 10.

  • The following code example illustrates how to specify hit padding for connector.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, DiagramModule,PointModel,ConnectorConstraints,ConnectorEditing } 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="580px" >
        <e-connectors>
            <e-connector id='connector' type='Orthogonal' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [constraints]="constraints" [hitPadding]="hitPadding">
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public constraints?: ConnectorConstraints;
    public sourcePoint?: PointModel;
    public targetPoint?: PointModel;
    public hitPadding?:number;
    ngOnInit(): void {
        this.sourcePoint = { x: 100, y: 100 };
        this.targetPoint = { x: 200, y: 200 };
        this.hitPadding = 50;
        this.constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Corner radius

Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the cornerRadius property.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, NodeModel, ConnectorModel, ShapeStyleModel } from '@syncfusion/ej2-angular-diagrams';

@Component({
    imports: [
        DiagramModule
    ],

    providers: [],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' >
          <e-nodes>
            <e-node id='node1' [offsetX]=150 [offsetY]=150>
            </e-node>
            <e-node id='node2' [offsetX]=350 [offsetY]=350>
            </e-node>
        </e-nodes>
        <e-connectors>
        <e-connector id='connector' type='Orthogonal' sourceID='node1' sourcrPortID='port1' targetID='node2' targetPortID='port2' [cornerRadius]='cornerRadius'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public cornerRadius?: number;
    ngOnInit(): void {
        this.cornerRadius = 10;
    }
    public getNodeDefaults(node: NodeModel): void {
        node.height = 100;
        node.width = 100;
        ((node as NodeModel).style as ShapeStyleModel).fill = "#6BA5D7";
        ((node as NodeModel).style as ShapeStyleModel).strokeColor = "White";
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Connector Appearance

  • The connector’s strokeWidth, strokeColor, strokeDashArray, and opacity properties are used to customize the appearance of the connector segments.

  • The visible property of the connector enables or disables the visibility of connector.

  • Default values for all the connectors can be set using the getConnectorDefaults properties. For example, if all connectors have the same type or having the same property then such properties can be moved into getConnectorDefaults.

Segment appearance

The following code example illustrates how to customize the segment appearance.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, ConnectorModel } from '@syncfusion/ej2-angular-diagrams';

@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [connectors] ='connectors' [getConnectorDefaults] ='getConnectorDefaults'>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public connectors: ConnectorModel[] = [
        {
          id: 'connector1',
          sourcePoint: { x: 100, y: 100 },
          targetPoint: { x: 200, y: 200 },
        },
        {
          id: 'connector2',
          // Set the visibility of the connector to false
          visible: true,
          type: 'Orthogonal',
          sourcePoint: { x: 300, y: 300 },
          targetPoint: { x: 400, y: 400 },
          segments: [{
            type: 'Orthogonal',
            direction: 'Right',
            length: 50,
          }]
        },
        {
          id: 'connector3',
          // Set the visibility of the connector to false
          visible: true,
          type: 'Bezier',
          sourcePoint: { x: 500, y: 100 },
          targetPoint: { x: 600, y: 300 },
          segments: [{ type: 'Bezier' }]
        }
      ];

    public getConnectorDefaults(connector: ConnectorModel): void {
        connector.targetDecorator = {
            style: {
              strokeColor: '#6BA5D7',
              fill: '#6BA5D7',
              strokeWidth: 2,
            }
          };
          connector.style = {
            // Stroke color
            strokeColor: '#6BA5D7',
            fill: '#6BA5D7',
            // Stroke width of the line
            strokeWidth: 5,
            // Line style
            strokeDashArray: '2,2'
          }
        }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Connector constraints

  • The constraints property of connector allows to enable/disable certain features of connectors.

  • To enable or disable the constraints, refer constraints.

The following code illustrates how to disable selection.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, PointModel, ConnectorConstraints } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" >
        <e-connectors>
          <e-connector id='connector1' type='Straight' [sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1' [constraints]='constraints1'>
            <e-connector-annotations>
                    <e-connector-annotation content="Connector Selection disabled">
                    </e-connector-annotation>
                </e-connector-annotations>
            </e-connector>
        
            <e-connector id='connector2' type='Straight' [sourcePoint]='sourcePoint2' [targetPoint]='targetPoint2' [constraints]='constraints2'>
            <e-connector-annotations>
                    <e-connector-annotation content="Connector Drag disabled">
                    </e-connector-annotation>
                </e-connector-annotations>
            </e-connector>
       
            <e-connector id='connector3' type='Straight' [sourcePoint]='sourcePoint3' [targetPoint]='targetPoint3' [constraints]='constraints3'>
            <e-connector-annotations>
                    <e-connector-annotation content="Connector Source end disabled">
                    </e-connector-annotation>
                </e-connector-annotations>
            </e-connector>
        
            <e-connector id='connector4' type='Straight' [sourcePoint]='sourcePoint4' [targetPoint]='targetPoint4' [constraints]='constraints4'>
            <e-connector-annotations>
                    <e-connector-annotation content="Connector Target end disabled">
                    </e-connector-annotation>
                </e-connector-annotations>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public sourcePoint1?: PointModel;
    public targetPoint1?: PointModel;
    public sourcePoint2?: PointModel;
    public targetPoint2?: PointModel;
    public sourcePoint3?: PointModel;
    public targetPoint3?: PointModel;
    public sourcePoint4?: PointModel;
    public targetPoint4?: PointModel;
    public constraints1?: ConnectorConstraints;
    public constraints2?: ConnectorConstraints;
    public constraints3?: ConnectorConstraints;
    public constraints4?: ConnectorConstraints;
    ngOnInit(): void {
        this.sourcePoint1 = { x: 100, y: 100 };
        this.targetPoint1 = { x: 200, y: 200 };
        this.sourcePoint2 = { x: 300, y: 100 };
        this.targetPoint2 = { x: 400, y: 200 };
        this.sourcePoint3 = { x: 500, y: 100 };
        this.targetPoint3 = { x: 600, y: 200 };
        this.sourcePoint4 = { x: 700, y: 100 };
        this.targetPoint4 = { x: 800, y: 200 };
        this.constraints1 = ConnectorConstraints.Default & ~ConnectorConstraints.Select;
        this.constraints2 = ConnectorConstraints.Default & ~ConnectorConstraints.Drag;
        this.constraints3 = ConnectorConstraints.Default & ~ConnectorConstraints.DragSourceEnd;
        this.constraints4 = ConnectorConstraints.Default & ~ConnectorConstraints.DragTargetEnd;
    }
    
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Add info for connector

The addInfo property of connectors allow you to maintain additional information to the connectors.

<e-connectors>
    <e-connector id='connector1' type='Straight' addInfo='centralconnector' [sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1' [constraints]='constraints'></e-connector>
</e-connectors>

ZIndex for connector

The connectors zIndex property specifies the stack order of the connector. A connector with greater stack order is always in front of a connector with a lower stack order.

The following code illustrates how to render connector based on the stack order.

The following code illustrates how to render connector based on the stack order.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, PointModel } from '@syncfusion/ej2-angular-diagrams';

@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" >
        <e-connectors>
            <e-connector id='connector1' type='Straight' zIndex=2 [sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1'></e-connector>
            <e-connector id='connector2' type='Straight' zIndex=1 [sourcePoint]='sourcePoint2' [targetPoint]='targetPoint2'></e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public sourcePoint1?: PointModel;
    public targetPoint1?: PointModel;
    public sourcePoint2?: PointModel;
    public targetPoint2?: PointModel;
    ngOnInit(): void {
        this.sourcePoint1 = { x: 300, y: 100 };
        this.targetPoint1 = { x: 300, y: 200 };
        this.sourcePoint2 = { x: 100, y: 100 };
        this.targetPoint2 = { x: 200, y: 200 };
    }
   
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Connector spacing

  • The connectorSpacing property allows you to define the distance between the source node and the connector. It is the minimum distance the connector will re-rout or the new segment will create.

The following code example illustrates how to connect two nodes.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, NodeModel, FlowShapeModel, ConnectorModel, ShapeStyleModel } from '@syncfusion/ej2-angular-diagrams';

@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
        <e-nodes>
            <e-node id='Start' [offsetX]=300 [offsetY]=100 [shape] = "shape1">
                <e-node-annotations>
                    <e-node-annotation 
                    id='label1' content="Start">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node>
            <e-node id='Init' [offsetX]=300 [offsetY]=300 [shape] = "shape2">
                <e-node-annotations>
                    <e-node-annotation content="var i = 0;">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node> 
        </e-nodes>
        <e-connectors>
            <e-connector id='connector1' type='Orthogonal' sourceID='Start' targetID='Init' connectorSpacing='connectorSpacing'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {

    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public connectorSpacing?: number;

    public shape1: FlowShapeModel = {
        type: 'Flow',
        shape: 'Terminator'
    };
    public shape2: FlowShapeModel = {
        type: 'Flow',
        shape: 'Process'
    };

    ngOnInit(): void {
        this.connectorSpacing = 7;
    };

    public getNodeDefaults(node: NodeModel): void {
        node.height = 100;
        node.width = 100;
        (node.style as ShapeStyleModel).fill = "#6BA5D7";
    };


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

MaxSegment thumb

The property maxSegmentThumb is used to limit the number of segment thumb in the connector.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, Diagram, OrthogonalSegmentModel,  ConnectorEditing, PointModel,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="580px" >
        <e-connectors>
            <e-connector id='connector' type='Orthogonal' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [segments]='segments' [constraints]= "constraints" [maxSegmentThumb]='maxSegmentThumb'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public sourcePoint?: PointModel;
    public targetPoint?: PointModel;
    public segments?: OrthogonalSegmentModel;
    public maxSegmentThumb?: number;
    public constraints ?: ConnectorConstraints ;

    ngOnInit(): void {
        this.maxSegmentThumb = 4;
        this.constraints =ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
        this.sourcePoint = { x: 300, y: 100 };
        this.targetPoint = { x: 350, y: 150 };
        this.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 }
        ];
    };

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

maxSegmentThumb

Reset segments

The resetSegments method resets the segments of connectors to their default state based on their connection points. This operation removes any custom segments and restores the connectors to their original configuration. The following example demonstrates how to reset connector segments at runtime.

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

@Component({
imports: [ 
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `
     <button (click)="resetSegments()">resetSegments</button>
    <ejs-diagram #diagram id="diagram" width="100%" height="580px"   [getNodeDefaults] ='getNodeDefaults' 
>
        <e-nodes>
            <e-node id='node1' [offsetX]=150 [offsetY]=150
            >
            <e-node-annotations>
                    <e-node-annotation content="node 1">
                    </e-node-annotation>
                </e-node-annotations>
            </e-node>
            <e-node id='node2' [offsetX]=350 [offsetY]=350>
            <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='node1' sourcrPortID='port1' targetID='node2' targetPortID='port2' [constraints]='constraints'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public sourcePoint?: PointModel;
    public targetPoint?: PointModel;
    public segments?: OrthogonalSegmentModel;
    public maxSegmentThumb?: number;
   

    ngOnInit(): void {
        this.sourcePoint = { x: 300, y: 100 };
        this.targetPoint = { x: 350, y: 150 };
        this.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 }
        ];
    };
    public getNodeDefaults(node: NodeModel| any): void {
        node.height = 100;
        node.width = 100;
        ((node as NodeModel).style as ShapeStyleModel).fill = "#6BA5D7";
        ((node as NodeModel).style as ShapeStyleModel).strokeColor = "White";
        node.expandIcon = {
            height: 15,
            width: 15,
            shape: "Plus",
            fill: 'lightgray',
            offset: {
                x: .5,
                y: .85
            }
        };
        node.collapseIcon.offset = {
            x: .5,
            y: .85
        };
        node.collapseIcon.height = 15;
        node.collapseIcon.width = 15;
        node.collapseIcon.shape = "Minus";

    }
        constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
    resetSegments() {
        (this.diagram as any).resetSegments();
    }
};
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable Connector Splitting

The connectors are used to create a link between two points, ports, or nodes to represent the relationship between them. Split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting the enableConnectorSplit as true. The default value of the enableConnectorSplit is false

The following code illustrates how to split the connector and create a connection with new node.

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, NodeModel, ConnectorModel,ConnectorConstraints  } from '@syncfusion/ej2-angular-diagrams';

@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [enableConnectorSplit]="enableConnectorSplit" [nodes]='nodes' [connectors]='connectors'>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public enableConnectorSplit: boolean = true;
    public constraints?: ConnectorConstraints;
    public nodes: NodeModel[] = [
    { id: 'node1', offsetX: 150, offsetY: 150, width: 100, height: 100, annotations: [{ content: 'node1' }] },
    { id: 'node2', offsetX: 650, offsetY: 150, width: 100, height: 100, annotations: [{ content: 'node2' }] },
    { id: 'node3', offsetX: 490, offsetY: 290, width: 100, height: 100, annotations: [{ content: 'node3' }] }
  ];
    public connectors: ConnectorModel[] = [{
        id: 'connector1',sourceID:"node1",targetID:"node2",
        constraints: ConnectorConstraints.Default | ConnectorConstraints.AllowDrop
    }
  ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable Connector Split

Preserve connector style while connector splitting

When splitting a connector using enableConnectorSplit, the new connector created will be a normal connector without any specific styles. To ensure the new connector has the same style as the original connector, you can use the collectionChange event to apply the styles.

The following example demonstrates how to apply the same style of the original connector to the newly added connector:

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Connector, DiagramModule, DiagramComponent, NodeModel, ConnectorModel,ConnectorConstraints,ICollectionChangeEventArgs,Node  } from '@syncfusion/ej2-angular-diagrams';

@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [enableConnectorSplit]="enableConnectorSplit" [nodes]='nodes' [connectors]='connectors' [getConnectorDefaults] ='getConnectorDefaults' (collectionChange)="collectionChange($event)">
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public enableConnectorSplit: boolean = true;

    public nodes: NodeModel[] = [
    { id: 'node1', offsetX: 150, offsetY: 150, width: 100, height: 100, annotations: [{ content: 'node1' }] },
    { id: 'node2', offsetX: 650, offsetY: 150, width: 100, height: 100, annotations: [{ content: 'node2' }] },
    { id: 'node3', offsetX: 490, offsetY: 290, width: 100, height: 100, annotations: [{ content: 'node3' }] }
  ];
    public connectors: ConnectorModel[] = [{
        id: 'connector1',sourceID:"node1",targetID:"node2", style:{strokeColor: 'red', strokeWidth: 2, strokeDashArray: '3,3' },
       
    }
  ];
  public getConnectorDefaults(obj: ConnectorModel): void {
    obj.constraints =  ConnectorConstraints.Default | ConnectorConstraints.AllowDrop
  
  }
  public collectionChange(args: ICollectionChangeEventArgs): void {
    if (args.state === 'Changed' && args.element instanceof Connector) {
      let sourceNode: Node | null = this.diagram?.getObject(args.element.sourceID) as Node;
      if (sourceNode) {
        sourceNode.inEdges.forEach((edgeId) => {
          let initialConnector = this.diagram?.getObject(edgeId) as ConnectorModel;
          if (initialConnector) {
            args.element.style = initialConnector.style  
          }
        });
      }
    }
    this.diagram?.dataBind();
  }

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