Ports in Vue Diagram component
25 Jul 202424 minutes to read
Diagram provides support to define custom ports for making connections.
When a connector is connected between two nodes, its end points are automatically docked to the node’s nearest boundary as shown in the following image.
Ports act as the connection points of the node and allows to create connections with only those specific points as shown in the following image.
Create Port
To create and customize the ports in the EJ2 Vue Diagram, refer to the below video link.
Add ports when initializing nodes
To add a connection port, define the port object and add it to node’s ports collection. The offset property of port accepts an object of fractions and used to determine the position of ports. The following code illustrates how to add ports when initializing the node.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Initialize port collection
ports: [{
// Sets the position for the port
offset: {
x: 0.5,
y: 0.5
},
visibility: PortVisibility.Visible
}]
}]
const width = "100%";
const height = "350px";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Initialize port collection
ports: [{
// Sets the position for the port
offset: {
x: 0.5,
y: 0.5
},
visibility: PortVisibility.Visible
}]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Add ports at runtime
Add ports at runtime by using the client-side method addPorts. The following code illustrates how to add ports to node at runtime.
The port’s ID property is used to define the unique ID for the port and its further used to find the port at runtime.
If ID is not set, then default ID is automatically set.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
}];
const port = [{
id: 'port1',
offset: {
x: 0,
y: 0.5
},
visibility: PortVisibility.Visible
},
{
id: 'port2',
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible
},
{
id: 'port3',
offset: {
x: 0.5,
y: 0
},
visibility: PortVisibility.Visible
},
{
id: 'port4',
offset: {
x: 0.5,
y: 1
},
visibility: PortVisibility.Visible
}
];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
// Adds to the Diagram
diagramInstance.addPorts(diagramInstance.nodes[0], port);
})
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
}];
let port = [{
id: 'port1',
offset: {
x: 0,
y: 0.5
},
visibility: PortVisibility.Visible
} {
id: 'port2',
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible
},
{
id: 'port3',
offset: {
x: 0.5,
y: 0
},
visibility: PortVisibility.Visible
},
{
id: 'port4',
offset: {
x: 0.5,
y: 1
},
visibility: PortVisibility.Visible
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
// Adds to the Diagram
diagramInstance.addPorts(diagramInstance.nodes[0], port);
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Remove ports at runtime
Remove ports at runtime by using client-side method removePorts. Refer to the following example which shows how to remove ports at runtime.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Initialize port collection
ports: [{
id: 'port1',
offset: {
x: 0,
y: 0.5
},
visibility: PortVisibility.Visible
},
{
id: 'port2',
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible
},
{
id: 'port3',
offset: {
x: 0.5,
y: 0
},
visibility: PortVisibility.Visible
},
{
id: 'port4',
offset: {
x: 0.5,
y: 1
},
visibility: PortVisibility.Visible
}
]
}]
const width = "100%";
const height = "350px";
onMounted(function () {
let ports = [{
id: 'port1',
}, {
id: 'port2',
}, {
id: 'port3',
}, {
id: 'port4',
}];
const diagramInstance = diagram.value.ej2Instances;
// Adds to the Diagram
diagramInstance.removePorts(diagramInstance.nodes[0], ports);
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Initialize port collection
ports: [{
id: 'port1',
offset: {
x: 0,
y: 0.5
},
visibility: PortVisibility.Visible
},
{
id: 'port2',
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible
},
{
id: 'port3',
offset: {
x: 0.5,
y: 0
},
visibility: PortVisibility.Visible
},
{
id: 'port4',
offset: {
x: 0.5,
y: 1
},
visibility: PortVisibility.Visible
}
]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
let ports = [{
id: 'port1',
}, {
id: 'port2',
}, {
id: 'port3',
}, {
id: 'port4',
}];
const diagramInstance = this.$refs.diagram.ej2Instances;
// Adds to the Diagram
diagramInstance.removePorts(diagramInstance.nodes[0], ports);
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Update Port at runtime
You can change any port properties at runtime and update it through the client-side method dataBind.
The following code example illustrates how to change the port properties.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Initialize port collection
ports: [{
offset: {
x: 0.5,
y: 0.5
},
visibility: PortVisibility.Visible
}]
}];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
diagramInstance.nodes[0].ports[0].offset = {
x: 1,
y: 1
};
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Initialize port collection
ports: [{
offset: {
x: 0.5,
y: 0.5
},
visibility: PortVisibility.Visible
}]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
diagramInstance.nodes[0].ports[0].offset = {
x: 1,
y: 1
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Appearance
-
The shape of port can be changed by using its shape property. To explore the different types of port shapes, refer to Port Shapes. If you need to render a custom shape, then you can set shape as path and define path using path data property of port.
-
The appearance of ports can be customized by using
strokeColor,
strokeWidth, andfillproperties of the port. -
Customize the port size by using the
widthandheightproperties of port. -
The ports
visibilityproperty allows you to define, when the port should be visible.
The following code illustrates how to change the appearance of port.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Initialize port collection
ports: [{
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible,
//Set the style for the port
style: {
fill: 'red',
strokeWidth: 2,
strokeColor: 'black'
},
width: 12,
height: 12,
// Sets the shape of the port as Circle
shape: 'Circle'
}]
}];
const width = "100%";
const height = "350px";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, PortVisibility } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Initialize port collection
ports: [{
offset: {
x: 1,
y: 0.5
},
visibility: PortVisibility.Visible,
//Set the style for the port
style: {
fill: 'red',
strokeWidth: 2,
strokeColor: 'black'
},
width: 12,
height: 12,
// Sets the shape of the port as Circle
shape: 'Circle'
}]
}]
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Offset
The offset property of port is used to align the port based on fractions. 0 represents top/left corner, 1 represents bottom/right corner, and 0.5 represents half of width/height.
Constraints
The constraints property allows to enable/disable certain behaviors of ports. For more information about port constraints, refer to Port Constraints.
Specify connection direction to port
The connectionDirection property of a port allows users to specify the direction in which a connector should establish a connection. This can be either to the port (incoming) or from the port (outgoing).
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors'
:getNodeDefaults='getNodeDefaults'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, PortVisibility,PortConnectionDirection } from '@syncfusion/ej2-vue-diagrams';
let port1 = {
style: {
strokeColor: 'black',
fill: 'yellow'
}
}
port1.shape = 'Square';
port1.visibility = PortVisibility.Visible
// Specify the connection Direction
port1.connectionDirection='Right',
port1.id = 'port1';
port1.offset = {
x: 0.5,
y: 0.5
};
let port2 = {
style: {
strokeColor: 'black',
fill: 'yellow'
}
};
port2.offset = {
x: 0,
y: 0
};
port2.id = 'port2';
port2.visibility = PortVisibility.Visible
// Specify the connection Direction
port1.connectionDirection='Left',
port2.shape = 'Square';
let nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 600,
offsetY: 300,
ports: [port1]
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 800,
offsetY: 200,
ports: [port2]
},
];
let connectors = [{
id: "connector1",
type: 'Orthogonal',
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port1',
targetPortID: 'port2'
}]
const width = "100%";
const height = "350px";
const 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><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors'
:getNodeDefaults='getNodeDefaults'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, PortVisibility, PortConnectionDirection } from '@syncfusion/ej2-vue-diagrams';
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
let port1 = {
id: 'port1',
style: {
strokeColor: 'black',
fill: 'yellow'
},
shape: 'Square',
visibility: PortVisibility.Visible,
connectionDirection:'Right',
offset: {
x: 0.5,
y: 0.5
}
};
let port2 = {
id: 'port2',
style: {
strokeColor: 'black',
fill: 'yellow'
},
shape: 'Square',
visibility: PortVisibility.Visible,
connectionDirection:'Top',
offset: {
x: 0,
y: 0
}
};
let nodes = [
{
id: 'node',
width: 100,
height: 100,
offsetX: 600,
offsetY: 300,
ports: [port1]
},
{
id: 'node1',
width: 100,
height: 100,
offsetX: 800,
offsetY: 200,
ports: [port2]
}
];
let connectors = [
{
id: "connector1",
type: 'Orthogonal',
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port1',
targetPortID: 'port2'
}
];
return {
width: "100%",
height: "650px",
nodes: nodes,
connectors: connectors
};
},
methods: {
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>