Bezier Control points

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 
ej.diagrams.Diagram.Inject(ej.diagrams.ConnectorEditing);
var nodes = [
  {
    id: 'Start',
    offsetX: 250,
    offsetY: 150,
    annotations: [{ content: 'Start' }],
    ports: [
      {
        id: 'StartPort',
        visibility: ej.diagrams.PortVisibility.Visible,
        shape: 'Circle',
        offset: { x: 1, y: 0.5 },
        style: { strokeColor: '#366F8C', fill: '#366F8C' },
      },
    ],
  },
  {
    id: 'End',
    offsetX: 250,
    offsetY: 350,
    annotations: [{ content: 'End' }],
    ports: [
      {
        id: 'EndPort',
        visibility: ej.diagrams.PortVisibility.Visible,
        shape: 'Circle',
        offset: { x: 0, y: 0.5 },
        style: { strokeColor: '#366F8C', fill: '#366F8C' },
      },
    ],
  },
];

let connectors = [
  {
    id: 'connector1',
    style: {
      strokeColor: '#6BA5D7',
      fill: '#6BA5D7',
      strokeWidth: 2,
    },
    targetDecorator: { shape: 'None' },
    // ID of the source and target nodes
    sourceID: 'Start',
    sourcePortID: 'StartPort',
    targetID: 'End',
    targetPortID: 'EndPort',
    type: 'Bezier',

    // Configuring settings for bezier interactions
    bezierSettings: {
      smoothness: ej.diagrams.BezierSmoothness.SymmetricAngle,
    },
  },
];

var diagram = new ej.diagrams.Diagram({
  width: '100%',
  height: '600px',
  nodes: nodes,
  connectors: connectors,
  // Defines the default properties for the node
  getNodeDefaults: (node) => {
    node.height = 100;
    node.width = 100;
    node.shape = { type: 'Basic', shape: 'Rectangle' };
    node.style.fill = '#6BA5D7';
    node.style.strokeColor = 'white';
    return node;
  },
  getConnectorDefaults: (connector) => {
    connector.constraints =
      ej.diagrams.ConnectorConstraints.Default |
      ej.diagrams.ConnectorConstraints.DragSegmentThumb;
    return connector;
  },
});
diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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