Straight
To create a straight line, specify the type of the segment as straight and add a straight segment to segments collection and need to specify type for the connector. The following code example illustrates how to create a default straight segment.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, StraightSegmentModel, 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='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [segments]='segments'>
</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?: StraightSegmentModel;
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 100 };
this.targetPoint = { x: 200, y: 200 };
this.segments = [{
// Defines the segment type of the connector
type: 'Straight'
}] as StraightSegmentModel;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The point property of straight segment allows you to define the end point of it. The following code example illustrates how to define the end point of a straight segment.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, StraightSegmentModel, 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='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [segments]='segments'>
</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?: StraightSegmentModel;
ngOnInit(): void {
this.sourcePoint = { x: 100, y: 100 };
this.targetPoint = { x: 200, y: 200 };
this.segments = [{
// Defines the segment type of the connector
type: 'Straight',
point: { x: 100, y: 150 }
}] as StraightSegmentModel;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Straight segment editing
End point of each straight segment is represented by a thumb that enables to edit the segment.
Any number of new segments can be inserted into a straight line by clicking when Shift and Ctrl keys are pressed (Ctrl+Shift+Click).
Straight segments can be removed by clicking the segment end point when Ctrl and Shift keys are pressed (Ctrl+Shift+Click). You can also add/remove segments by using the editSegment method of diagram.
The following example shows how to add segments for the straight connector.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, IEditSegmentOptions,DiagramComponent, Diagram, ConnectorModel, StraightSegmentModel, PointModel, ConnectorConstraints, ConnectorEditing } from '@syncfusion/ej2-angular-diagrams';
Diagram.Inject(ConnectorEditing);
@Component({
imports: [ DiagramModule ],
providers: [],
standalone: true,
selector: 'app-container',
template: `
<button (click)="segmentEdit()"> segmentEdit </button>
<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getConnectorDefaults] ='getConnectorDefaults' (created)="created()">
<e-connectors>
<e-connector id='connector' type='Straight' [sourcePoint]='sourcePoint' [targetPoint]='targetPoint' [segments]='segments' >
</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?: StraightSegmentModel;
ngOnInit(): void {
this.sourcePoint = { x: 150, y: 100 };
this.targetPoint = { x: 340, y: 200 };
this.segments = [{
// Defines the segment type of the connector
type: 'Straight',
point: { x: 100, y: 150 }
}] as StraightSegmentModel;
}
public getConnectorDefaults(connector: ConnectorModel): void {
connector.style = {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
}
connector.targetDecorator = {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
}
connector.constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb
}
public created(): void {
(this.diagram as any).select([(this.diagram as any).connectors[0]]);
}
segmentEdit ()
{
let options: IEditSegmentOptions = {};
options.SegmentEditing = 'Toggle';
options.point = { x: 220, y: 150 };
options.connector = (this.diagram as Diagram).connectors[0];
options.hitPadding = (this.diagram as Diagram).connectors[0].hitPadding;
(this.diagram as Diagram).editSegment(options);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));