Connector interaction in EJ2 Angular Diagram

10 Dec 202415 minutes to read

Connectors can be selected, dragged, and routed over the diagram page.

Select and unSelect connector.

A connector can be selected, simply just by clicking on it.

A connector can be selected at runtime by using the Select method and clear the selection in the diagram using the ClearSelection. The following code explains how to select and clear selection in the diagram.

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

@Component({
    imports: [
        DiagramModule
    ],

    providers: [],
    standalone: true,
    selector: "app-container",
    template: `
    <input type="button" id="select" value="select" (click)="select()" />
  <input type="button" id="unSelect" value="unSelect" (click)='unSelect()'/>
    <ejs-diagram #diagram id="diagram" width="100%" height="580px" >
            <e-connectors>
                <e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [targetDecorator]='targetDecorator'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public sourcePoint?: PointModel;
    public targetPoint?: PointModel;
    public targetDecorator?: DecoratorModel;

    ngOnInit(): void {
        this.sourcePoint = { x: 100, y: 100 };
        this.targetPoint = { x: 200, y: 200 };
    };

    public select(): void {
        if (this.diagram) {
            this.diagram.select([this.diagram.connectors[0]]);
        }
    };

    public unSelect(): void {
        if (this.diagram) {
            this.diagram.clearSelection();
        };
    };
};
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Drag Connector

Connector can be dragged by just clicking on the connector and dragging.

Connector Drag Gif

A connector can be dragged at runtime by using the Drag method. The following code explains how to drag the connector by using the drag method.

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

@Component({
imports: [
         DiagramModule
    ],

providers: [ ],
standalone: true,
    selector: "app-container",
    template: `
    <input type="button" id="drag" value="Drag" (click)="drag()" />
    <ejs-diagram #diagram id="diagram" width="100%" height="580px" >
            <e-connectors>
                <e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [targetDecorator]='targetDecorator'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public sourcePoint?: PointModel;
    public targetPoint?: PointModel;
    public targetDecorator?: DecoratorModel;

    ngOnInit(): void {
        this.sourcePoint = { x: 100, y: 100 };
        this.targetPoint = { x: 200, y: 200 };

    };
    public drag(): void {
        if (this.diagram) {
            let connector = this.diagram.connectors[0];
            this.diagram.drag(connector, 20, 20);
        };
    };
};
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

End point dragging

The connector can be selected by clicking it. When the connector is selected, circles will be added on the starting and ending of the connector that is represented by Thumbs. Clicking and dragging those handles helps you to adjust the source and target points.

End Point drag GIF

You can also update the endPoints of diagram by using dragSourceEnd and dragTargetEnd methods of diagram.

The following code example shows how to drag connector end point at runtime.

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

@Component({
    imports: [DiagramModule],

    providers: [],
    standalone: true,
    selector: 'app-container',
    template: `
    <input type="button" id="sourcepoint" value="SourcePoint" (click)="sourcePointDrag()" />
    <input type="button" id="targetpoint" value="TargetPoint" (click)="targetPointDrag()" />
    <input type="button" id="dragTargetEnd" value="dragTargetEnd" (click)="dragTargetEnd()" />
    <input type="button" id="dragSourceEnd" value="dragSourceEnd" (click)="dragSourceEnd()" />
 
    <ejs-diagram #diagram id="diagram" width="100%" height="580px" >
            <e-connectors>
                <e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [targetDecorator]='targetDecorator'>
            </e-connector>
        </e-connectors>
    </ejs-diagram>

    `,
    encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
    @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public sourcePoint?: PointModel;
    public targetPoint?: PointModel;
    public targetDecorator?: DecoratorModel;

    ngOnInit(): void {
        this.sourcePoint = { x: 100, y: 100 };
        this.targetPoint = { x: 200, y: 200 };
    };

    public sourcePointDrag(): void {
        if (this.diagram) {
            let connector = this.diagram.connectors[0];
            connector.sourcePoint = { x: 300, y: 100 };
        };
    };

    public targetPointDrag(): void {
        if (this.diagram) {
            let connector = this.diagram.connectors[0];
            connector.targetPoint = { x: 300, y: 200 };
        };
    };
    public dragSourceEnd():void{
            /**
     * parameter 1 - connector whose source point needs to be moved.
     * parameter 2 - A number representing the horizontal distance by which the source point should be moved.
     * parameter 3 - A number representing the vertical distance by which the source point should be moved.
     */
      (this.diagram as any).dragSourceEnd((this.diagram as any).connectors[0], 50, 50);
    }
    public dragTargetEnd():void{
          /**
     * parameter 1 - connector whose target point needs to be moved.
     * parameter 2 - A number representing the horizontal distance by which the target point should be moved.
     * parameter 3 - A number representing the vertical distance by which the target point should be moved.
     */
           (this.diagram as any).dragTargetEnd( (this.diagram as any).connectors[0], 50, 50);
    }
};
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Segment editing

Diagram allows you to edit connector segments at runtime. To enable this feature, you need to activate the DragSegmentThumb constraint for the connector.

{
connector.constraints =
      ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
}

Note: To edit a connector segment, you need to inject the ConnectorEditing module into the diagram.

Connector segmnet edit

Flip

The diagram Provides support to flip the connector. The flip is performed to give the mirrored image of the original element.

The flip types are as follows:

  • HorizontalFlip - Horizontal is used to interchange the connector source and target x points.

  • VerticalFlip - Vertical is used to interchange the connector source and target y points.

  • Both - Both is used to interchange the source point as target point and target point as source point

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DiagramModule } from '@syncfusion/ej2-angular-diagrams';



import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, ConnectorModel, 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' flip='Horizontal'[sourcePoint]='sourcePoint1' [targetPoint]='targetPoint1' >
            <e-connector-annotations>
                    <e-connector-annotation content="Horizontal Flip">
                    </e-connector-annotation>
                </e-connector-annotations>
            </e-connector>
        
            <e-connector id='connector2' type='Straight' flip='Vertical' [sourcePoint]='sourcePoint2' [targetPoint]='targetPoint2' >
            <e-connector-annotations>
                    <e-connector-annotation content="Vertical Flip">
                    </e-connector-annotation>
                </e-connector-annotations>
            </e-connector>
       
            <e-connector id='connector3' type='Straight' flip='Both' [sourcePoint]='sourcePoint3' [targetPoint]='targetPoint3'>
            <e-connector-annotations>
                    <e-connector-annotation content="Both Flip">
                    </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;
    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 };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: The flip is not applicable when the connectors connect in nodes.