Connector Interaction in Angular Diagram Component
26 Aug 202515 minutes to read
Connectors in the Angular Diagram component support various interaction capabilities including selection, dragging, endpoint manipulation, segment editing, and flipping operations. These interactions enable users to dynamically modify connector behavior and appearance within the diagram.
Select and unselect connector
A connector can be selected by clicking on it. This selection enables further operations such as dragging, editing, or applying transformations.
Connectors can be selected programmatically at runtime using the select method and selection can be cleared using the clearSelection method. The following code demonstrates 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
Connectors can be repositioned by clicking and dragging them to a new location within the diagram canvas.
A connector can be dragged programmatically at runtime using the drag method. The following code demonstrates how to drag a connector 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));Endpoint dragging
When a connector is selected, circular handles (thumbs) appear at the source and target endpoints. These handles allow users to adjust the connector’s start and end positions by clicking and dragging them.
The end points of connectors can also be updated programmatically using the dragSourceEnd and dragTargetEnd methods of the diagram component.
The following code example demonstrates how to drag connector end points 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
The diagram allows editing of individual connector segments at runtime. To enable this feature, activate the DragSegmentThumb constraint for the connector.
connector.constraints =
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;NOTE
To edit connector segments, you must inject the
ConnectorEditingmodule into the diagram’s providers.
Flip
The diagram provides support for flipping connectors to create mirrored versions of the original element. The flip operation transforms the connector based on the specified flip direction.
The available flip types are:
-
Horizontal Flip - Flips the connector horizontally across a central vertical axis, creating a mirror image.
-
Vertical Flip - Flips the connector vertically across a central horizontal axis.
-
Both - Reverses the connector’s direction by swapping its source and target points.
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 operation is not applicable when connectors are connected to nodes.