Straight Connector Segments

Straight connector segments create direct linear connections between two points in a Angular Diagram. These segments are the simplest form of connector routing, providing the shortest path between nodes or connection points. Straight segments are ideal when you need clean, unobstructed connections without intermediate directional changes.

Creating straight segments

To create a straight line connector, specify the type of the segment as Straight and add it to the segments collection. You must also specify the type property for the connector itself. The following code example demonstrates how to create a basic straight segment connector.

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));

Defining segment end points

The point property of a straight segment allows you to define its end point coordinates. This provides precise control over where each segment terminates, enabling complex connector paths composed of multiple straight segments. 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

The endpoint of each straight segment is represented by a visual thumb control that enables interactive editing of the segment position. This allows users to dynamically modify connector paths by dragging segment endpoints.

Adding segments

New segments can be inserted into a straight line connector by clicking on the connector while pressing Shift and Ctrl keys simultaneously (Ctrl+Shift+Click). This creates additional control points for more complex routing.

Removing segments

Straight segments can be removed by clicking the segment end point while holding Ctrl and Shift keys (Ctrl+Shift+Click). This simplifies the connector path by eliminating unnecessary way points.

Programmatic editing

You can also add or remove segments programmatically using the editSegment method of the diagram component. This provides API-level control over connector segment manipulation.

The following example demonstrates how to add segments to a straight connector programmatically.

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));

Straight Segment editing GIF