Bezier Connector Settings

10 Dec 20245 minutes to read

How to edit bezier segments based on bezier connector settings

The intermediate point of two adjacent bezier segments can be edited interactively based on the segmentEditOrientation property of bezierSettings.

SegmentEditOrientation value	Description	Output
Bidirectional	It allows the intermediate points to be dragged in either vertical or horizontal directions.
Freeform	It allows the intermediate points to be dragged in any direction.

The following code illustrates how to interact with Bezier efficiently by using the smoothness and segmentEditOrientation properties of the bezierSettings.

app.component.ts

import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, Diagram, NodeModel, ConnectorModel, ConnectorEditing, ConnectorConstraints,
    PointPortModel, BezierSmoothness, PortVisibility, ShapeStyleModel } 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="600px" [getNodeDefaults]='getNodeDefaults' [getConnectorDefaults] ='getConnectorDefaults'>
    <e-nodes>
        <e-node id='Start' [offsetX]=250 [offsetY]=150 [ports]='StartPort'>
            <e-node-annotations>
                <e-node-annotation content="Start">
                </e-node-annotation>
            </e-node-annotations>
        </e-node>
        <e-node id='End' [offsetX]=250 [offsetY]=350 [ports]='EndPort'>
            <e-node-annotations>
                <e-node-annotation content="End">
                </e-node-annotation>
            </e-node-annotations>
        </e-node>
    </e-nodes>
    <e-connectors>
        <e-connector id='connector1' type='Bezier' sourceID='Start' targetID='End'  sourcePortID='StartPort' targetPortID='EndPort'>
        </e-connector>
    </e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
    @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public StartPort?: PointPortModel[];
    public EndPort?: PointPortModel[];

    ngOnInit(): void {
        this.StartPort = [{
            id: 'StartPort',
            visibility: PortVisibility.Visible,
            shape: 'Circle',
            offset: { x: 1, y: 0.5 },
            style: { strokeColor: '#366F8C', fill: '#366F8C' },
        }];
        this.EndPort = [{
            id: 'EndPort',
            visibility: PortVisibility.Visible,
            shape: 'Circle',
            offset: { x: 0, y: 0.5 },
            style: { strokeColor: '#366F8C', fill: '#366F8C' },
        }];
    };

    public getNodeDefaults(node: NodeModel): void {
        node.height = 100;
        node.width = 100;
        node.shape = { type: 'Basic', shape: 'Rectangle' };
        ((node as NodeModel).style as ShapeStyleModel).fill = '#6BA5D7';
        ((node as NodeModel).style as ShapeStyleModel).strokeColor = 'White';
    };

    public getConnectorDefaults(connector: ConnectorModel): void {
        connector.targetDecorator = { shape: 'None' };
        connector.constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
        connector.bezierSettings = {
            smoothness: BezierSmoothness.SymmetricAngle,
            segmentEditOrientation: 'BiDirectional',
        };
    };
}

main.ts

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