Create multiple segments
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.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script setup>
import { provide } from "vue";
import { DiagramComponent as EjsDiagram, ConnectorConstraints, ConnectorEditing } from '@syncfusion/ej2-vue-diagrams';
let 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,
},
],
sourcePoint: {
x: 300,
y: 100,
},
targetPoint: {
x: 350,
y: 150,
},
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
}, {
id: 'connector2',
type: 'Bezier',
constraints:
ConnectorConstraints.Default | 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 },
}, {
id: 'connector3',
type: 'Straight',
constraints:
ConnectorConstraints.Default | 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 },
},
]
const width = "100%";
const height = "350px";
provide('diagram', [ConnectorEditing]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent,ConnectorConstraints,ConnectorEditing } from '@syncfusion/ej2-vue-diagrams';
let 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,
},
],
sourcePoint: {
x: 300,
y: 100,
},
targetPoint: {
x: 350,
y: 150,
},
constraints:
ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
}, {
id: 'connector2',
type: 'Bezier',
constraints:
ConnectorConstraints.Default | 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 },
}, {
id: 'connector3',
type: 'Straight',
constraints:
ConnectorConstraints.Default | 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 },
},
]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}, provide: {
diagram: [ConnectorEditing]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>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:
<template>
<div id="app">
<button @click="undo">Undo</button>
<button @click="redo">Redo</button>
<ejs-diagram id="diagram" :width="width" :height="height" :nodes="nodes" :connectors="connectors"></ejs-diagram>
</div>
</template>
<script setup>
import {
DiagramComponent as EjsDiagram,
ConnectorConstraints,
ConnectorEditing,
UndoRedo,
} from "@syncfusion/ej2-vue-diagrams";
import { provide } from "vue";
const width = "100%";
const height = "350px";
const nodes = [
{
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",
},
],
},
];
const connectors = [
{
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,
},
];
const undo = function () {
diagram.value.ej2Instances.undo();
};
const redo = function () {
diagram.value.ej2Instances.redo();
};
provide: {
diagram: [ConnectorEditing, UndoRedo];
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style><template>
<div id="app">
<button @click="undo">Undo</button>
<button @click="redo">Redo</button>
<ejs-diagram ref="diagram" :width="width" :height="height" :nodes="nodes" :connectors="connectors"></ejs-diagram>
</div>
</template>
<script>
import {
DiagramComponent,
ConnectorConstraints,
ConnectorEditing,
UndoRedo,
} from "@syncfusion/ej2-vue-diagrams";
let nodes = [
{
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 = [
{
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,
},
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: connectors,
};
},
methods: {
undo() {
this.$refs.diagram.ej2Instances.undo();
},
redo() {
this.$refs.diagram.ej2Instances.redo();
},
},
provide: {
diagram: [ConnectorEditing, UndoRedo],
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>