Nodes in Vue Diagram component
25 Jul 202424 minutes to read
Nodes are graphical objects used to visually represent the geometrical information, process flow, internal business procedure, entity, or any other kind of data.
Create node
A node can be created and added to the diagram, either programmatically or interactively. Nodes are stacked on the diagram area from bottom to top in the order they are added.
To create a node easily and to know about different types of node shapes in a EJ2 Vue Diagram, refer to the below video link.
Add node through nodes collection
To create a node, define the node
object and add that to nodes collection of the diagram model. The following code example illustrates how to add a node to the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } 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'
},
// Text(label) added to the node
}];
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 } 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'
},
// Text(label) added to the node
}];
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/Remove node at runtime
-
Nodes can be added at runtime by using public method, add and can be removed at runtime by using public method,
remove. On adding node at runtime, the nodes collection is changed and thecollectionChange
event will trigger. -
The node’s ID property is used to define the name of the node and its further used to find the node at runtime and do any customization.
The following code illustrates how to add a node.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } 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'
},
// Text(label) added to the node
}
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
// Adds to the Diagram
diagramInstance.add(nodes)
});
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } 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'
},
// Text(label) added to the node
}
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2instances;
// Adds to the Diagram
diagramInstance.add(nodes)
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Add collection of nodes at runtime
- The collection of nodes can be dynamically added using ‘addElements’ method.Each time an element is added to the diagram canvas, the ‘collectionChange’ event will be triggered.
The following code illustrates how to add a nodes collection at runtime.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height'></ejs-diagram>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [
{ id: 'node16', offsetX: 35, offsetY: 260 },
{ id: 'node17', offsetX: 140, offsetY: 260 },
{ id: 'node18', offsetX: 240, offsetY: 260 }
];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
//Add collection of nodes
diagramInstance.addElements(nodes)
});
</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'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
const nodes = [
{ id: 'node16', offsetX: 35, offsetY: 260 },
{ id: 'node17', offsetX: 140, offsetY: 260 },
{ id: 'node18', offsetX: 240, offsetY: 260 }
];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2instances;
//Add collection of nodes
diagramInstance.addElements(nodes)
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Add node from palette
Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information
about adding nodes from symbol palette, refer to Symbol Palette
.
- Once you drag a node/connector from the palette to the diagram, the following events can be used to do your customization.
- When a symbol is dragged into diagram from symbol palette, the
dragEnter
event gets triggered. - When a symbol is dragged over diagram, the
dragOver
event gets triggered. - When a symbol is dragged and dropped from symbol palette to diagram area, the
drop
event gets triggered. - When a symbol is dragged outside of the diagram, the
dragLeave
event gets triggered.
Create node through data source
Nodes can be generated automatically with the information provided through data source. The default properties for
these nodes are fetched from default settings. For more information about data source, refer to Data Binding.
Draw nodes
Nodes can be interactively drawn by clicking and dragging the diagram surface by using NodeDrawingTool
. For more
information about drawing nodes, refer to Draw Nodes.
Position
-
Position of a node is controlled by using its
offsetX
andoffsetY
properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point. -
You may expect this offset values to represent the distance between page origin and node’s top-left corner instead of center. The Pivot property helps to solve this problem. Default value of node’s
pivot
point is (0.5, 0.5), that means center of the node. -
The size of the node can be controlled by using its
width
and
height
properties. -
Rotation of a node is controlled by using its
rotateAngle
property.
The following table illustrates how pivot relates offset values with node boundaries.
Pivot | Offset |
---|---|
(0.5,0.5) | offsetX and offsetY values are considered as the node’s center point. |
(0,0) | offsetX and offsetY values are considered as the top-left corner of the node. |
(1,1) | offsetX and offsetY values are considered as the bottom-right corner of the node. |
The following code illustrates how to change the pivot
value.
<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 } 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,
pivot: {
x: 0,
y: 0
},
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Text(label) added to the node
}];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
diagramInstance.select([diagramInstance.nodes[0]]);
})
</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 } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
pivot: {
x: 0,
y: 0
},
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
// Text(label) added to the node
}];
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.select([diagramInstance.nodes[0]]);
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Flip
The diagram Provides support to flip the node. flip
is performed to
give the mirrored image of the original element.
The flip types are as follows:
-
HorizontalFlip
Horizontal
is used to change the element in horizontal direction. -
VerticalFlip
Vertical
is used to change the element in vertical direction -
Both
Both
which involves both vertical and horizontal changes of the element.
The following code illustrates how to provide the mirror image of the original element.
<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 } 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,
// Flip the node in Horizontal Direction
flip: 'Horizontal',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
}];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
diagramInstance.select([diagramInstance.nodes[0]]);
})
</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 } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Flip the node in Horizontal Direction
flip: 'Horizontal',
shape: {
type: 'Basic',
shape: 'RightTriangle',
},
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
}];
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.select([diagramInstance.nodes[0]]);
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Note: The flip is also applicable for group and BPMN shapes.
Appearance
-
The appearance of a node can be customized by changing its
fill
color,borderColor
,borderWidth
,strokeDashArray
,
opacity
, andshadow
. -
The
visible
property of the node enables or disables the visibility of the node.
The following code illustrates how to customize the appearance of the shape.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } 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',
strokeDashArray: '5,5'
},
borderWidth: 2,
borderColor: 'red',
// Text(label) added to the node
}];
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 } 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',
strokeDashArray: '5,5'
},
borderWidth: 2,
borderColor: 'red',
// Text(label) added to the node
}];
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>
Customize the style of main node on multi-selection.
The style of the main node can be customized by using the className e-diagram-first-selection-indicator
.
Use the following CSS to customize the style of main node on multiple selection.
.e-diagram-first-selection-indicator{
stroke-width: 5px;
stroke: red;
stroke-dasharray: 1,1;
}
Gradient
The gradient
property of the node allows you to define and apply the gradient effect to that node.
The gradient stop property defines the color and a position, where the previous color transition ends and a new color transition starts.
The gradient stop’s opacity property defines the transparency level of the region.
There are two types of gradients as follows:
-
Linear gradient
-
Radial gradient
Linear gradient
-
LinearGradient
defines a smooth transition between a set of colors (so-called stops) on a line. -
A linear gradient’s x1, y1, x2, y2 properties are used to define the position (relative to the node) of the rectangular region that needs to be painted.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const linearGradient = {
//Start point of linear gradient
x1: 0,
y1: 0,
//End point of linear gradient
x2: 50,
y2: 50,
//Sets an array of stop objects
stops: [{
color: 'white',
offset: 0
},
{
color: '#6BA5D7',
offset: 100
}
],
type: 'Linear'
};
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
gradient: linearGradient
}
// Text(label) added to the node
}];
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 } from '@syncfusion/ej2-vue-diagrams';
let linearGradient = {
//Start point of linear gradient
x1: 0,
y1: 0,
//End point of linear gradient
x2: 50,
y2: 50,
//Sets an array of stop objects
stops: [{
color: 'white',
offset: 0
},
{
color: '#6BA5D7',
offset: 100
}
],
type: 'Linear'
};
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
gradient: linearGradient
}
// Text(label) added to the node
}];
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>
Radial gradient
-
RadialGradient
defines a smooth transition between stops on a circle. -
A radial gradient’s cx, cy, fx, fy properties are used to define the position (relative to the node) of the outermost or the innermost circle of the radial gradient.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const radialGradient = {
//Center point of outer circle
cx: 50,
cy: 50,
//Center point of inner circle
fx: 25,
fy: 25,
//Radius of a radial gradient
r: 50,
//Sets an array of stop objects
stops: [{
color: 'white',
offset: 0
},
{
color: '#6BA5D7',
offset: 100
}
],
type: 'Radial'
};
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
gradient: radialGradient
}
// Text(label) added to the node
}];
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 } from '@syncfusion/ej2-vue-diagrams';
const radialGradient = {
//Center point of outer circle
cx: 50,
cy: 50,
//Center point of inner circle
fx: 25,
fy: 25,
//Radius of a radial gradient
r: 50,
//Sets an array of stop objects
stops: [{
color: 'white',
offset: 0
},
{
color: '#6BA5D7',
offset: 100
}
],
type: 'Radial'
};
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
style: {
gradient: radialGradient
}
// Text(label) added to the node
}];
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>
Shadow
Diagram provides support to add shadow
effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. The following code illustrates how to drop shadow.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, NodeConstraints } 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'
},
constraints: NodeConstraints.Default | NodeConstraints.Shadow,
// Text(label) added to the node
}];
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, NodeConstraints } 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'
},
constraints: NodeConstraints.Default | NodeConstraints.Shadow,
// Text(label) added to the node
}];
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>
Customizing shadow
The angle, distance, and opacity of the shadow can be customized with the shadow property of the node. The following code example illustrates how to customize shadow.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram, NodeConstraints } 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'
},
constraints: NodeConstraints.Default | NodeConstraints.Shadow,
shadow: {
angle: 50,
opacity: 0.8,
distance: 9
}
}];
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, NodeConstraints } 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'
},
constraints: NodeConstraints.Default | NodeConstraints.Shadow,
shadow: {
angle: 50,
opacity: 0.8,
distance: 9
}
}];
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>
Icon
Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state.
Note: Icon can be created only when the node has outEdges.
-
To explore the properties of expand and collapse icon, refer to
expandIcon
andcollapseIcon
. -
The expandIcon’s and collapseIcon’s shape properties allow to define the shape of the icon.
The following code example illustrates how to create an icon of various shapes.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const nodes = [{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [{
content: 'Node1'
}],
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
expandIcon: {
shape: 'ArrowDown',
width: 10,
height: 10
},
collapseIcon: {
shape: 'ArrowUp',
width: 10,
height: 10
}
},
{
id: 'Init',
width: 140,
height: 50,
offsetX: 300,
offsetY: 140,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
annotations: [{
content: 'Node2'
}],
}
];
const connectors = [{
// Unique name for the connector
id: "connector1",
// Source and Target node's name to which connector needs to be connected.
sourceID: "Start",
targetID: "Init",
type: 'Orthogonal'
}];
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' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
id: 'Start',
width: 140,
height: 50,
offsetX: 300,
offsetY: 50,
annotations: [{
content: 'Node1'
}],
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
expandIcon: {
shape: 'ArrowDown',
width: 10,
height: 10
},
collapseIcon: {
shape: 'ArrowUp',
width: 10,
height: 10
}
},
{
id: 'Init',
width: 140,
height: 50,
offsetX: 300,
offsetY: 140,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
annotations: [{
content: 'Node2'
}],
}
];
let connectors = [{
// Unique name for the connector
id: "connector1",
// Source and Target node's name to which connector needs to be connected.
sourceID: "Start",
targetID: "Init",
type: 'Orthogonal'
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: connectors
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
Customizing expand icon
-
Set the borderColor, borderWidth, and background color for an expandIcon using borderColor, borderWidth, and fill properties.
-
Set a size for an expandIcon by using width and height properties.
-
The expand icon can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment.
-
The
iconColor
property can be used to set the strokeColor of the Icon.
Customizing collapse icon
-
Set the
borderColor
,
borderWidth
, background color for an collapseIcon using borderColor, borderWidth, andfill
properties. -
Set a size for collapseIcon by using
width
and
height
properties. -
Like expand icon, collapse icon also can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment.
-
The
iconColor
property can be used to set the strokeColor of the Icon.
Interaction
Diagram provides support to drag, resize, or rotate the node interactively. For more information about editing a node at runtime, refer to Edit Nodes.
Constraints
The constraints property of the node allows you to enable/disable certain features. For more information about node constraints, refer to Node Constraints
.
Custom properties
The addInfo
property of the node allows to maintain additional information to the node.
Stack order
The nodes z-order property specifies the stack order of the node. A node with greater stack order is always in front of a node with a lower stack order.
Data flow
Node has the InEdges and OutEdges read-only property. In this property, you can find what are all the connectors that are connected to the node, and then you can find these connectors by using the getObject
method in the diagram.
<template>
<div id="app">
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors'>
</ejs-diagram>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';
const diagram = ref(null);
const nodes = [{
id: 'node1',
// Position of the node
offsetX: 450,
offsetY: 100,
// Size of the node
width: 80,
height: 50,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
},
{
id: 'node2',
// Position of the node
offsetX: 350,
offsetY: 200,
// Size of the node
width: 80,
height: 50,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
},
{
id: 'node3',
// Position of the node
offsetX: 450,
offsetY: 200,
// Size of the node
width: 80,
height: 50,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
},
{
id: 'node4',
// Position of the node
offsetX: 550,
offsetY: 200,
// Size of the node
width: 80,
height: 50,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
}];
const connectors = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
type: 'Orthogonal'
},
{
id: 'connector2',
sourceID: 'node1',
targetID: 'node3',
type: 'Orthogonal'
},
{
id: 'connector3',
sourceID: 'node1',
targetID: 'node4',
type: 'Orthogonal'
}];
const width = "100%";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
diagramInstance.getObject('connector1');
});
</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' :connectors='connectors'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
let nodes = [{
id: 'node1',
// Position of the node
offsetX: 450,
offsetY: 100,
// Size of the node
width: 80,
height: 50,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
},
{
id: 'node2',
// Position of the node
offsetX: 350,
offsetY: 200,
// Size of the node
width: 80,
height: 50,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
},
{
id: 'node3',
// Position of the node
offsetX: 450,
offsetY: 200,
// Size of the node
width: 80,
height: 50,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
},
{
id: 'node4',
// Position of the node
offsetX: 550,
offsetY: 200,
// Size of the node
width: 80,
height: 50,
style: {
fill: '#6BA5D7',
strokeColor: 'white'
},
}];
let connectors = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
type: 'Orthogonal'
},
{
id: 'connector2',
sourceID: 'node1',
targetID: 'node3',
type: 'Orthogonal'
},
{
id: 'connector3',
sourceID: 'node1',
targetID: 'node4',
type: 'Orthogonal'
}];
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
connectors: connectors
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
diagramInstance.getObject('connector1');
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>