Bezier Control Points Interaction

23 Aug 20257 minutes to read

Bezier control points determine the curvature and shape of bezier connector segments in Angular Diagram components. These interactive handles allow users to modify connector paths dynamically while maintaining visual consistency across multiple segments.

Configure Bezier Segment Smoothness

When working with multiple bezier segments, maintain visual consistency by configuring the smoothness behavior of control points using the bezierSettings property of the connector. The smoothness property controls how adjacent control points respond when one is modified.

BezierSmoothness Value	Description	Output
SymmetricDistance	Adjacent segment control points maintain equal distance when either control point is modified
SymmetricAngle	Adjacent segment control points maintain equal angles when either control point is modified
Default	Adjacent segment control points maintain both equal distance and equal angles when either control point is modified
None	Control points operate independently without affecting adjacent segments

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, DiagramModule, NodeModel, ConnectorModel, BezierSmoothness, PointPortModel, PortVisibility, ConnectorEditing, ConnectorConstraints } 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.style = { fill: '#6BA5D7', strokeColor: 'white' };
    };

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

main.ts

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

Control Bezier Control Points Visibility

Configure which control points are visible during interaction using the controlPointsVisibility property within bezierSettings. This property provides granular control over control point display for different connector segments.

ControlPointsVisibility Value	Description	Output
None	Hides all control points across the entire bezier connector
Source	Shows control points only for the source segment while hiding all others
Target	Shows control points only for the target segment while hiding all others
Intermediate	Shows control points only for intermediate segments while hiding source and target control points
All	Shows control points for all segments including source, target, and intermediate segments