Syncfusion AI Assistant

How can I help you?

Create multiple segments

4 Sep 202513 minutes to read

Multiple segments can be defined one after another. To create a connector with multiple segments, define and add the segments to the [segments] collection. The following code example illustrates how to create a connector with multiple segments.

ej.diagrams.Diagram.Inject(ej.diagrams.ConnectorEditing);
var connectors = [
  {
    id: 'connector1',
    type: 'Orthogonal',
    // Defines multile segemnts for the connectors
    segments: [
      {
        type: 'Orthogonal',
        direction: 'Bottom',
        length: 150,
      },
      {
        type: 'Orthogonal',
        direction: 'Right',
        length: 150,
      },
      {
        type: 'Orthogonal',
        direction: 'Top',
        length: 100,
      },
      {
        type: 'Orthogonal',
        direction: 'Left',
        length: 100,
      },
    ],
    style: {
      strokeColor: '#6BA5D7',
      fill: '#6BA5D7',
      strokeWidth: 2,
    },
    targetDecorator: {
      style: {
        fill: '#6BA5D7',
        strokeColor: '#6BA5D7',
      },
    },
    sourcePoint: {
      x: 300,
      y: 100,
    },
    targetPoint: {
      x: 350,
      y: 150,
    },
    constraints:
      ej.diagrams.ConnectorConstraints.Default |
      ej.diagrams.ConnectorConstraints.DragSegmentThumb,
  },
  {
    id: 'connector2',
    type: 'Bezier',
    constraints:
      ej.diagrams.ConnectorConstraints.Default |
      ej.diagrams.ConnectorConstraints.DragSegmentThumb,
    segments: [
      { point: { x: 150, y: 150 }, type: 'Bezier' },
      { point: { x: 250, y: 250 }, type: 'Bezier' },
    ],
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 300, y: 300 },
    style: {
      strokeColor: '#6BA5D7',
      fill: '#6BA5D7',
      strokeWidth: 2,
    },
    targetDecorator: {
      style: {
        fill: '#6BA5D7',
        strokeColor: '#6BA5D7',
      },
    },
  },
  {
    id: 'connector3',
    type: 'Straight',
    constraints:
      ej.diagrams.ConnectorConstraints.Default |
      ej.diagrams.ConnectorConstraints.DragSegmentThumb,
    segments: [
      { point: { x: 500, y: 200 }, type: 'Straight' },
      { point: { x: 600, y: 300 }, type: 'Straight' },
    ],
    sourcePoint: { x: 600, y: 100 },
    targetPoint: { x: 800, y: 300 },
    style: {
      strokeColor: '#6BA5D7',
      fill: '#6BA5D7',
      strokeWidth: 2,
    },
    targetDecorator: {
      style: {
        fill: '#6BA5D7',
        strokeColor: '#6BA5D7',
      },
    },
  },
];

var diagram = new ej.diagrams.Diagram(
  {
    width: '100%',
    height: '600px',
    connectors: connectors,
  },
  '#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.1.44/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/33.1.44/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>

Undo/Redo support for connector segments

The Diagram control provides comprehensive undo and redo functionality for all connector segment operations. This includes reversible actions such as dragging, resizing, and rotating source or target nodes, as well as modifying segment points and endpoints.

Key undo/redo capabilities include:

  • Modifying and adjusting segment points.
  • Changing connector endpoints between nodes or ports.
  • Performing node operations that affect connected segments.
  • Adding, removing, or reordering segments.

This functionality ensures consistent editing behavior across all connector types and interactions, enabling users to experiment with complex routing configurations while retaining the ability to revert changes.

The following example demonstrates undo and redo functionality for connector segments:

import {
  Diagram,
  NodeModel,
  ConnectorModel,
  HierarchicalTree,
  ConnectorConstraints,
  ConnectorEditing, UndoRedo
} from '@syncfusion/ej2-diagrams';
Diagram.Inject(HierarchicalTree, ConnectorEditing, UndoRedo);
let nodes: NodeModel[] = [
 {
    id: 'sourcenode',
    width: 150,
    height: 50,
    offsetX: 350,
    offsetY: 50,
    annotations: [
      {
        content: 'Node1',
      },
    ],
    style: {
      fill: '#6BA5D7',
      strokeColor: 'white',
    },
  },
  {
    id: 'targetnode',
    width: 150,
    height: 50,
    offsetX: 200,
    offsetY: 250,
    style: {
      fill: '#6BA5D7',
      strokeColor: 'white',
    },
    annotations: [
      {
        content: 'Node2',
      },
    ],
  },
];
let connectors: ConnectorModel[] = [
  {
    id: 'connector1',
    sourceID: 'sourcenode',
    targetID: 'targetnode',
    type: 'Orthogonal',
    segments: [
      {
        type: 'Orthogonal',
        direction: 'Left',
        length: 100,
      },
      {
        type: 'Orthogonal',
        direction: 'Bottom',
        length: 100
      },
      {
        type: 'Orthogonal',
        direction: 'Right',
        length: 100
      },
      {
        type: 'Orthogonal',
        direction: 'Bottom',
        length: 50
      }
    ],
    constraints:
      ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
  },
];
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '600px',
  nodes: nodes,
  connectors: connectors,
});
diagram.appendTo('#element');

(document.getElementById('undo') as HTMLInputElement).onclick = () => {
  diagram.undo();
};

(document.getElementById('redo') as HTMLInputElement).onclick = () => {
  diagram.redo();
};
<!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.1.44/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/33.1.44/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <input type="button" value="Undo" id="undo" />
        <input type="button" value="Redo" id="redo" />
        <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>