Bezier Control points

10 Dec 20247 minutes to read

How to interact with the bezier segments efficiently

While interacting with multiple bezier segments, maintain their control points at the same distance and angle by using the bezierSettings smoothness property of the connector class.

BezierSmoothness value Description Output
SymmetricDistance Both control points of adjacent segments will be at the same distance when any one of them is editing. Symmetric distance
SymmetricAngle Both control points of adjacent segments will be at the same angle when any one of them is editing. Symmetric Angle
Default Both control points of adjacent segments will be at the same angle and same distance when any one of them is editing. Default
None Segment’s control points are interacted independently from each other. None 
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 };
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

How to show or hide the bezier segment’s control points

By using the controlPointsVisibility property of bezierSettings, you can enable or disable the visibility of the bezier segment’s control points.

ControlPointsVisibility value Description Output
None It allows you to hide all control points of the bezier connector. ControlPointsVisibility None
Source It allows you to show control points of the source segment and hides all other control points in a bezier connector. ControlPointsVisibility Source
Target It allows you to show control points of the target segment and hides all other control points in a bezier connector. ControlPointsVisibility Target
Intermediate It allows you to show control points of the intermediate segments and hides all other control points in a bezier connector. ControlPointsVisibility Intermediate
All It allows you to show all the control points of the bezier connector, including the source, target, and intermediate segments’ control points. ControlPointsVisibility All