Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them.
Connector can be created by defining the source and target point of the connector. The path to be drawn can be defined with a collection of segments. To explore the properties of a connector
, refer to Connector Properties
.
sourcePoint
and targetPoint
properties of connector allow you to define the end points of a connector.The following code example illustrates how to add a connector through connector collection.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
diagram.add
and can be removed at runtime by using public method, diagram.remove
.The following code example illustrates how to add connector at runtime.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height'></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,Diagram,ConnectorModel } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connector: ConnectorModel = {
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
}
}
mounted: function() {
let diagramInstance: Diagram;
let diagramObj: any = document.getElementById("diagram");
diagramInstance = diagramObj.ej2_instances[0];
// Adds to the diagram
diagramInstance.add(connector)
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
For more information about adding connectors from symbol palette, refer to [Symbol Palette
].
Connectors can be interactively drawn by clicking and dragging on the Diagram surface by using [drawingObject
]. For more information about drawing connectors, refer to Draw Connectors
.
Various Connector properties such as sourcePoint
, targetPoint
,style
,sourcePortID
,targetPortID
etc can be update at the run time .
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
// Name of the connector
id: "connector1",
// Sets source and target points
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
mounted: function() {
let diagramInstance: Diagram;
let diagramObj: any = document.getElementById("diagram");
diagramInstance = diagramObj.ej2_instances[0];
diagramInstance.connectors[0].style.strokeColor = '#6BA5D7';
diagramInstance.connectors[0].style.fill = '#6BA5D7';
diagramInstance.connectors[0].style.strokeWidth = 2;
diagramInstance.connectors[0].targetDecorator.style.fill = '#6BA5D7';
diagramInstance.connectors[0].targetDecorator.style.strokeColor = '#6BA5D7';
diagramInstance.connectors[0].sourcePoint.x = 150;
diagramInstance.connectors[0].targetPoint.x = 150;
diagramInstance.dataBind();
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
sourceID
and targetID
properties allow to define the nodes to be connected.<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let nodes = [{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 100,
annotations: [{
id: 'label1',
content: 'Start'
}],
shape: {
type: 'Flow',
shape: 'Terminator'
}
},
{
id: 'Init',
width: 140,
height: 50,
offsetX: 300,
offsetY: 300,
shape: {
type: 'Flow',
shape: 'Process'
},
annotations: [{
content: 'var i = 0;'
}]
}
];
let connectors = [{
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourceID: "Start",
targetID: "Init",
type: 'Orthogonal'
}, ]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: connectors,
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
//Initialize diagram
let diagram: Diagram = new Diagram({
nodes:[
{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 150,
shape: { type: 'Basic', shape: 'Rectangle' },
//Disable InConnect constraints
constraints: NodeConstraints.Default & ~NodeConstraints.InConnect,
}
]
});
diagram.appendTo('#diagram');
The sourcePortID
and targetPortID
properties allow to create connections between some specific points of source/target nodes.
The following code example illustrates how to create port to port connections.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,PointPortModel,PortVisibility } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let port1: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
}
port1.shape = 'Circle';
port1.id = 'nodeportnew'
port1.visibility = PortVisibility.Visible
port1.id = 'port';
port1.offset = {
x: 1,
y: 1
};
let port2: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
port2.offset = {
x: 1,
y: 0.5
};
port2.id = 'port1';
port2.visibility = PortVisibility.Visible
port2.shape = 'Circle';
let port3: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
port3.offset = {
x: 0,
y: 1
};
port3.id = 'newnodeport1';
port3.visibility = PortVisibility.Visible
port3.shape = 'Circle';
let nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
ports: [port1]
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
ports: [port2, port3]
},
];
let connectors = {
id: "connector1",
sourcePoint: {
x: 100,
y: 100
},
type: 'Orthogonal',
targetPoint: {
x: 200,
y: 200
},
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port',
targetPortID: 'port1'
}
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: [connectors],
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
similarly we can change the [sourcePortID
] or [targetPortID
] at the run time by the changing the port sourcePortID
or targetPortID
The following code example illustrates how to create port to port connections.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,PointPortModel,PortVisibility } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let port1: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
}
port1.shape = 'Circle';
port1.id = 'nodeportnew'
port1.visibility = PortVisibility.Visible
port1.id = 'port';
port1.offset = {
x: 1,
y: 1
};
let port2: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
port2.offset = {
x: 1,
y: 0.5
};
port2.id = 'port1';
port2.visibility = PortVisibility.Visible
port2.shape = 'Circle';
let port3: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
port3.offset = {
x: 0,
y: 1
};
port3.id = 'newnodeport1';
port3.visibility = PortVisibility.Visible
port3.shape = 'Circle';
let nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
ports: [port1]
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
ports: [port2, port3]
},
];
let connectors = {
id: "connector1",
sourcePoint: {
x: 100,
y: 100
},
type: 'Orthogonal',
targetPoint: {
x: 200,
y: 200
},
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port',
targetPortID: 'port1'
}
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: [connectors],
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
}
}
mounted: function() {
let diagramInstance: Diagram;
let diagramObj: any = document.getElementById("diagram");
diagramInstance = diagramObj.ej2_instances[0];
diagramInstance.connectors[0].targetPortID = 'newnodeport1'
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
//Initialize diagram
let diagram: Diagram = new Diagram({
nodes:[
{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 150,
shape: { type: 'Basic', shape: 'Rectangle' },
ports: [
//Enable portConstraints Inconnect
{ id: 'port', height: 10, width: 10, offset: { x: 1, y: 0.5 }, constraints: PortConstraints.InConnect },
]
}
]
});
diagram.appendTo('#diagram');
The path of the connector is defined with a collection of segments. There are three types of segments.
To create a straight line, you should specify the type
of the segment as “straight” and add a straight segment to segments
collection and need to specify type
for the connector. The following code example illustrates how to create a default straight segment.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: "connector1",
type: 'Straight',
segments: [{
// Defines the segment type of the connector
type: 'Straight'
}],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
The point
property of straight segment allows you to define the end point of it. The following code example illustrates how to define the end point of a straight segment.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: "connector1",
// Defines the segment type of the connector
segments: [{
type: 'Straight',
// Defines the point of the segment
point: {
x: 100,
y: 150
}
}],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Orthogonal segments are used to create segments that are perpendicular to each other.
Set the segment type
as “orthogonal” to create a default orthogonal segment and need to specify type
. The following code example illustrates how to create a default orthogonal segment.
connector.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>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: "connector1",
// Define the type of the segment
type: 'Orthogonal',
segments: [{
type: 'Orthogonal'
}],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
The length
and direction
properties allow to define the flow and length of segment. The following code example illustrates how to create customized orthogonal segments.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: "connector1",
type: 'Orthogonal',
segments: [{
type: 'Orthogonal',
// Defines the direction for the segment lines
direction: 'Right',
// Defines the length for the segment lines
length: 50
}],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
},
{
id: "connector2",
type: 'Orthogonal',
// Defines multile segemnts for the connectors
segments: [{
type: 'Orthogonal',
direction: 'Bottom',
length: 150
},
{
type: 'Orthogonal',
direction: 'Right',
length: 150
}
],
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 200
}
}
]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Note: We need mention the segment type as same as what we mentioned in connector type. There should be no contradiction between connector type and segment type.
Orthogonal segments are automatically re-routed, in order to avoid overlapping with the source and target nodes. The following preview illustrate how orthogonal segments are re-routed.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,PointPortModel,PortVisibility } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let nodeport: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
};
nodeport.shape = 'Circle';
nodeport.visibility = PortVisibility.Visible
nodeport.id = 'port';
nodeport.offset = {
x: 0,
y: 0.5
};
let port2: PointPortModel = {
style: {
strokeColor: '#366F8C',
fill: '#366F8C'
}
}
port2.offset = {
x: 0,
y: 0.5
};
port2.id = 'port1';
port2.visibility = PortVisibility.Visible
port2.shape = 'Circle';
let nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
ports: [nodeport]
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
ports: [port2]
},
];
let connectors = {
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
type: 'Orthogonal',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port',
targetPortID: 'port1'
}
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: [connectors],
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Bezier segments are used to create curve segments and the curves are configurable either with the control points or with vectors.
To create a bezier segment, the segment.type
is set as bezier
and need to specify type
for the connector. The following code example illustrates how to create a default Bezier segment.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: 'connector1',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
type: 'Bezier',
segments: [{
// Defines the type of the segment
type: 'Bezier',
}],
sourcePoint: {
x: 50,
y: 100
},
targetPoint: {
x: 150,
y: 200
},
}, ]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
The point1
and point2
properties of bezier segment enable you to set the control points. The following code example illustrates how to configure the Bezier segments with control points.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: 'connector3',
type: 'Bezier',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
segments: [{
type: 'Bezier',
// First control point: an absolute position from the page origin
point1: {
x: 100,
y: 100
},
// Second control point: an absolute position from the page origin
point2: {
x: 200,
y: 200
}
}],
sourcePoint: {
x: 100,
y: 200
},
targetPoint: {
x: 200,
y: 100
},
}, ]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
The vector1
and vector2
properties of bezier segment enable you to define the vectors. The following code illustrates how to configure a bezier curve with vectors.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: 'connector2',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// Defines the type of the segment
type: 'Bezier',
segments: [{
type: 'Bezier',
// Length and angle between the source point and the first control point
vector1: {
distance: 100,
angle: 90
},
// Length and angle between the target point and the second control point
vector2: {
distance: 45,
angle: 270
}
}],
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
}, ]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
sourceDecorator
and targetDecorator
properties of connector.shape
property of sourceDecorator
allows to define the shape of the decorators. Similarly, the shape property of targetDecorator
allows to define the shape of the decorators.pathData
property. similarly, to create custom shape for target decorator, use pathData
property.<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: "connector1",
type: 'Straight',
// Decorator shape- circle
sourceDecorator: {
shape: 'Circle',
// Defines the style for the sourceDecorator
style: {
// Defines the strokeWidth for the sourceDecorator
strokeWidth: 3,
// Defines the strokeColor for the sourceDecorator
strokeColor: 'red'
},
},
// Decorator shape - Diamond
targetDecorator: {
// Defines the custom shape for the connector's target decorator
shape: 'Custom',
//Defines the path for the connector's target decorator
pathData: 'M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5' +
'C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z'
//defines the style for the target decorator
style: {
// Defines the strokeWidth for the targetDecorator
strokeWidth: 3,
// Defines the strokeColor for the sourceDecorator
strokeColor: 'green',
// Defines the opacity for the sourceDecorator
opacity: .8
},
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
},
{
id: "connectors2",
type: 'Straight',
// Decorator shape - IndentedArrow
sourceDecorator: {
shape: 'IndentedArrow',
style: {
strokeWidth: 3,
strokeColor: 'blue'
},
},
// Decorator shape - OutdentedArrow
targetDecorator: {
shape: 'OutdentedArrow',
style: {
strokeWidth: 3,
strokeColor: 'yellow'
},
},
sourcePoint: {
x: 400,
y: 100
},
targetPoint: {
x: 300,
y: 200
}
}
]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Padding is used to leave the space between the Connector’s end point and the object to where it is connected.
sourcePadding
property of connector defines space between the source point and the source node of the connector.targetPadding
property of connector defines space between the end point and the target node of the connector.<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
}
];
let connectors = [{
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourceID: "node",
targetID: "node1",
// Set Source Padding value
sourcePadding:20,
// Set Target Padding value
targetPadding:20
}, ]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: connectors,
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
The diagram Provides support to flip the connector. The flip
is performed to give the mirrored image of the original element.
The flip types are as follows:
Horizontal
is used to interchange the connector source and target x points.Vertical
is used to interchange the connector source and target y points.Both
is used to interchange the source point as target point and target point as source point<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
// Name of the connector
id: "connector1",
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
// Flip the connector in horizontal direction
flip:"Horizontal"
}
]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Note: The flip is not applicable when the connectors connect in nodes
Line Bridging creates a bridge for lines to smartly cross over other lines, at points of intersection. By default bridgeDirection
is set to top. Depending upon the direction given bridging direction appears.
Bridging can be enabled/disabled either with the [connector.constraints
] or [diagram.constraints
]. The following code example illustrates how to enable line bridging.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :constraints='constraints' :getNodeDefaults='getNodeDefaults' :getConnectorDefaults='getConnectorDefaults'></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { Diagram,DiagramPlugin,DiagramConstraints,ConnectorBridging } from '@syncfusion/ej2-vue-diagrams';
Diagram.Inject(ConnectorBridging);
Vue.use(DiagramPlugin);
let nodes = [{
id: 'Transaction',
width: 150,
height: 60,
offsetX: 300,
offsetY: 60,
shape: {
type: 'Flow',
shape: 'Terminator'
},
annotations: [{
id: 'label1',
content: 'Start Transaction',
offset: {
x: 0.5,
y: 0.5
}
}],
},
{
id: 'Verification',
width: 150,
height: 60,
offsetX: 300,
offsetY: 250,
shape: {
type: 'Flow',
shape: 'Process'
},
annotations: [{
id: 'label2',
content: 'Verification',
offset: {
x: 0.5,
y: 0.5
}
}]
}
];
let connectors = [{
id: 'connector1',
type: 'Straight',
sourceID: 'Transaction',
targetID: 'Verification'
}, {
id: 'connector2',
type: 'Straight',
sourcePoint: {
x: 200,
y: 130
},
targetPoint: {
x: 400,
y: 130
}
},
{
id: 'connector3',
type: 'Straight',
sourcePoint: {
x: 200,
y: 170
},
targetPoint: {
x: 400,
y: 170
}
}
]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
constraints: DiagramConstraints.Default | DiagramConstraints.Bridging,
nodes: nodes,
connectors: connectors,
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
getConnectorDefaults: (obj) => {
obj.style.strokeColor = '#6BA5D7';
obj.style.fill = '#6BA5D7';
obj.style.strokeWidth = 2;
obj.targetDecorator.style.fill = '#6BA5D7';
obj.targetDecorator.style.strokeColor = '#6BA5D7';
return obj;
},
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Note: We Need to inject Connector bridging module into the diagram.
You can use bridgeSpace
property of connectors to define the width for line bridging.
Limitation: Bezier segments do not support bridging.
Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with cornerRadius
property.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults'></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let nodes = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 100,
offsetY: 350,
},
];
let connectors = [{
id: "connector1",
type: 'Orthogonal',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
// Sets the radius for the rounded corner
cornerRadius: 10,
sourceID: 'node1',
targetID: 'node2',
segments: [{
type: 'Orthogonal',
direction: 'Right',
length: 50
}],
}]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: connectors,
getNodeDefaults: (node) => {
node.height = 100;
node.width = 100;
node.style.fill = '#6BA5D7';
node.style.strokeColor = 'white';
return node;
},
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
strokeWidth
, strokeColor
, strokeDashArray
and opacity
properties are used to customize the appearance of the connector segments.visible
property of the connector enables or disables the visibility of connector.connectors
can be set using the getConnectorDefaults
properties. For example, if all connectors have the same type or having the same property then such properties can be moved into getConnectorDefaults
.<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :getConnectorDefaults='getConnectorDefaults' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: "connector1",
targetDecorator: {
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
}
},
style: {
// Stroke color
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
// Stroke width of the line
strokeWidth: 2,
// Line style
strokeDashArray: '2,2'
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: 'Orthogonal',
direction: 'Right',
length: 50
}],
},
{
id: "connector2",
// Set the visibility of the connector to false
visible: false,
targetDecorator: {
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
}
},
style: {
// Stroke color
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
// Stroke width of the line
strokeWidth: 2,
// Line style
strokeDashArray: '2,2'
},
sourcePoint: {
x: 300,
y: 300
},
targetPoint: {
x: 400,
y: 400
},
segments: [{
type: 'Orthogonal',
direction: 'Right',
length: 50
}],
}
]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors,
getConnectorDefaults: (obj) => {
obj.type = 'Orthogonal'
return obj;
},
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
strokeColor
, strokeWidth
and strokeDashArray
properties are used to customize the color and width and appearance of the decorator.strokeColor
, strokeWidth
and strokeDashArray
.The following code example illustrates how to customize the appearance of the decorator.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: "connector1",
type: 'Straight',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
bridgeSpace: 20,
// Cutomize the target decorator
targetDecorator: {
style: {
// Fill color of the decorator
fill: '#6BA5D7',
// Stroke color of the decorator
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Connection Editing
.Diagram provides additional flexibility to re-route the diagram connectors. A connector will frequently re-route itself when a shape moves next to it. The following screenshot illustrates how the connector automatically re-routes the segments.
<script>
import {DiagramPlugin,LineRouting,Diagram,DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';
Diagram.Inject(LineRouting);
Vue.use(DiagramPlugin);
</script>
/**
* Initialize the Diagram
*/
<ejs-diagram #diagram [constraints]='constraints'>
<template>
<div id="app">
<ejs-diagram :constraints='constraints' ></ejs-diagram>
</div>
</template>
<script>
// Enable line routing constraints.
let constraints = DiagramConstraints.Default | DiagramConstraints.LineRouting;
</script>
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :constraints='constraints' :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults'></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,LineRouting,Diagram,DiagramConstraints } from '@syncfusion/ej2-vue-diagrams';
Diagram.Inject(LineRouting);
Vue.use(DiagramPlugin);
let nodes = [
{ id: 'shape1', offsetX: 100, offsetY: 100, width: 120, height: 50 },
{ id: 'shape2', offsetX: 300, offsetY: 300, width: 120, height: 50 },
{ id: 'shape3', offsetX: 150, offsetY: 200, width: 120, height: 50 }
];
let connectors = [
{ id: 'connector', sourceID: 'shape1', targetID: 'shape2', type: 'Orthogonal' }
];
function getNodeDefaults(obj) {
obj = { style: { strokeColor: '#6BA5D7', fill: '#6BA5D7' } };
return obj;
}
let constraints = DiagramConstraints.Default | DiagramConstraints.LineRouting;
export default {
name: 'app',
data () {
return {
width: "100%",
height: "350px",
connectors:connectors,
nodes:nodes,
constraints:constraints,
getNodeDefaults: (obj) => {
obj = { style: { strokeColor: '#6BA5D7', fill: '#6BA5D7' } };
return obj;
},
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>
constraints
property of the connector like the following code snippet.<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :constraints='constraints' :nodes='nodes' :connectors='connectors' :getNodeDefaults='getNodeDefaults'></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,LineRouting,Diagram,DiagramConstraints,ConnectorConstraints } from '@syncfusion/ej2-vue-diagrams';
Diagram.Inject(LineRouting);
Vue.use(DiagramPlugin);
let nodes = [
{ id: 'shape1', offsetX: 100, offsetY: 100, width: 120, height: 50 },
{ id: 'shape2', offsetX: 350, offsetY: 300, width: 120, height: 50 },
{ id: 'shape3', offsetX: 150, offsetY: 200, width: 120, height: 50 },
{ id: 'shape4', offsetX: 300, offsetY: 200, width: 120, height: 50 }
];
let connectors = [
{ id: 'connector', sourceID: 'shape1', targetID: 'shape2', type: 'Orthogonal', annotations: [{ offset: .7, content: ' Routing \n enabled', style: { fill: "white" } }] },
{ id: 'connector2', sourceID: 'shape1', targetID: 'shape2', annotations: [{ offset: .6, content: ' Routing \n disabled', style: { fill: "white" } }], type: 'Orthogonal', constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritLineRouting }
];
function getNodeDefaults(obj) {
obj = { style: { strokeColor: '#6BA5D7', fill: '#6BA5D7' } };
return obj;
}
let constraints = DiagramConstraints.Default | DiagramConstraints.LineRouting;
export default {
name: 'app',
data () {
return {
width: "100%",
height: "350px",
connectors:connectors,
nodes:nodes,
constraints:constraints,
getNodeDefaults: (obj) => {
obj = { style: { strokeColor: '#6BA5D7', fill: '#6BA5D7' } };
return obj;
},
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>
constraints
property of connector allows to enable/disable certain features of connectors.constraints
The following code illustrates how to disable selection.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' ></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,ConnectorConstraints } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: "connector1",
// Disables selection constraints
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select,
type: 'Straight',
style: {
strokeColor: '#6BA5D7',
fill: '#6BA5D7',
strokeWidth: 2
},
targetDecorator: {
style: {
fill: '#6BA5D7',
strokeColor: '#6BA5D7'
}
},
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
addInfo
property of connectors allows to maintain additional information to connectors.let connectors: ConnectorModel = {
id: 'connector1',
// Defines the information about the connector
addInfo:'centralconnector',
type: 'Straight',
sourceID: 'Transaction',
targetID: 'Verification'
};
zIndex
property specifies the stack order of an connector. A connector with greater stack order is always in front of an connector with a lower stack order.The following code illustrates how to render connector based on the stack order.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :connectors='connectors' :getConnectorDefaults='getConnectorDefaults'></ejs-diagram>
</div>
</template>
<script>
import Vue from 'vue';
import { DiagramPlugin,ConnectorConstraints } from '@syncfusion/ej2-vue-diagrams';
Vue.use(DiagramPlugin);
let connectors = [{
id: 'connector1',
// Defines the z-index value for the connector
zIndex: 2,
type: 'Straight',
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 300,
y: 200
}
},
{
id: 'connector2',
type: 'Straight',
// Defines the z-index value for the connector
zIndex: 1,
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
}
]
export default {
name: 'app'
data() {
return {
width: "100%",
height: "350px",
connectors: connectors,
getConnectorDefaults: (obj) => {
obj.style.strokeColor = '#6BA5D7';
obj.style.fill = '#6BA5D7';
obj.style.strokeWidth = 2;
obj.targetDecorator.style.fill = '#6BA5D7';
obj.targetDecorator.style.strokeColor = '#6BA5D7';
return obj;
},
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>