Bezier Segment Edit Orientation

21 Oct 202510 minutes to read

Bezier connectors in diagrams provide smooth, curved connections between nodes with customizable control points. The segment edit orientation feature allows interactive modification of bezier connector segments to achieve the desired visual flow and connection paths.

Interactive Editing of Bezier Segments

The intermediate control points between adjacent bezier segments can be edited interactively during runtime based on the segmentEditOrientation property within the bezierSettingsconfiguration. This property determines the directional constraints applied when users drag the intermediate points to reshape the connector.

Segment Edit Orientation Options

The following table describes the available orientation modes and their interactive behavior:

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 demonstrates how to configure bezier connectors with interactive segment editing using both the smoothness property for curve refinement and the segmentEditOrientation property for interaction control:

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram, DiagramComponent, ConnectorConstraints, ConnectorEditing,PortVisibility ,BezierSmoothness} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let nodes = [
    {
        id: 'Start',
        offsetX: 250,
        offsetY: 150,
        annotations: [{ content: 'Start' }],
        ports: [
          {
            id: 'StartPort',
            visibility: 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: PortVisibility.Visible,
            shape: 'Circle',
            offset: { x: 0, y: 0.5 },
            style: { strokeColor: '#366F8C', fill: '#366F8C' },
          },
        ],
      },
   
];

let connectors = [ {
    id: 'connector1',
    // ID of the source and target nodes
    sourceID: 'Start',
    sourcePortID: 'StartPort',
    targetID: 'End',
    targetPortID: 'EndPort',
    type: 'Bezier',

    // Configuring settings for bezier interactions
    bezierSettings: {
      smoothness: BezierSmoothness.SymmetricAngle,
      segmentEditOrientation: 'FreeForm',
    },
  },];
function App() {
    return (<DiagramComponent id="container" width={'900px'} height={'500px'} nodes = {nodes} connectors={connectors}
    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 =
          ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
      }} />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Diagram, NodeModel,ConnectorModel,DiagramComponent, ConnectorConstraints, ConnectorEditing,PortVisibility ,BezierSmoothness} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(ConnectorEditing);
let nodes: NodeModel[] = [
    {
        id: 'Start',
        offsetX: 250,
        offsetY: 150,
        annotations: [{ content: 'Start' }],
        ports: [
          {
            id: 'StartPort',
            visibility: 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: PortVisibility.Visible,
            shape: 'Circle',
            offset: { x: 0, y: 0.5 },
            style: { strokeColor: '#366F8C', fill: '#366F8C' },
          },
        ],
      },
   
];

let connectors: ConnectorModel[] = [ {
    id: 'connector1',
    // ID of the source and target nodes
    sourceID: 'Start',
    sourcePortID: 'StartPort',
    targetID: 'End',
    targetPortID: 'EndPort',
    type: 'Bezier',

    // Configuring settings for bezier interactions
    bezierSettings: {
      smoothness: BezierSmoothness.SymmetricAngle,
      segmentEditOrientation: 'FreeForm',
    },
  },];
function App() {
    return (<DiagramComponent id="container" width={'900px'} height={'500px'} nodes = {nodes} connectors={connectors}
    getNodeDefaults={(node: NodeModel) => {
        node.height = 100;
        node.width = 100;
        node.shape = { type: 'Basic', shape: 'Rectangle' };
        node.style.fill = '#6BA5D7';
        node.style.strokeColor = 'white';
        return node;
      }}
      getConnectorDefaults={(connector: ConnectorModel) => {
        connector.constraints =
          ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
      }} />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);