Labels in Vue Diagram component
7 Dec 202420 minutes to read
Annotation is a block of text that can be displayed over a node or connector. Annotation is used to textually represent an object with a string that can be edited at runtime. Multiple annotations can be added to a node/connector.
Create annotation
An annotation can be added to a node/connector by defining the annotation object and adding that to the annotation collection of the node/connector. The content property of annotation defines the text to be displayed.
To create and add annotation to Nodes and Connectors using the EJ2 Vue Diagram, refer to the below video link,
The following code illustrates how to create a annotation.
<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 = [{
// Position of the node
offsetX: 100,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
// Sets the Annotation for the Node
annotations: [{
// Sets the text to be displayed
content: 'Annotation'
}]
}];
const connectors = [{
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 300
},
type: 'Orthogonal',
// Sets the Annotation for the Connector
annotations: [{
// Sets the text to be diaplayed
content: 'Annotation'
}]
}];
const width = "750px";
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 = [{
// Position of the node
offsetX: 100,
offsetY: 100,
// Size of the node
width: 100,
height: 100,
// Sets the Annotation for the Node
annotations: [{
// Sets the text to be displayed
content: 'Annotation'
}]
}];
let connectors = [{
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 300
},
type: 'Orthogonal',
// Sets the Annotation for the Connector
annotations: [{
// Sets the text to be diaplayed
content: 'Annotation'
}]
}];
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>Add annotations at runtime
Annotations can be added at runtime by using the diagram method addLabels. The following code illustrates how to add a annotation to a node.
The annotation’s id property is used to define the name of the annotation and its further used to find the annotation at runtime and do any customization.
<template>
<div id="app">
<ejs-button ref="addAnnotation" id="addAnnotation" >Add Annotation</ejs-button>
<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';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
const diagram = ref(null);
const addAnnotation = ref(null);
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
}];
const width = "750px";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
const addAnnotationInstance = addAnnotation.value.ej2Instances;
let annotation = [{
id: 'label1',
content: 'Annotation'
}]
//Method to add labels at run time
addAnnotationInstance.element.onclick = () => {
diagramInstance.addLabels(diagramInstance.nodes[0], annotation);
diagramInstance.dataBind();
}
})
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-button ref="addAnnotation" id="addAnnotation" >Add Annotation</ejs-button>
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
'ejs-button': ButtonComponent,
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
const addAnnotation = this.$refs.addAnnotation.ej2Instances;
let annotation = [{
id: 'label1',
content: 'Annotation'
}]
//Method to add labels at run time
addAnnotation.element.onclick = () => {
diagramInstance.addLabels(diagramInstance.nodes[0], annotation);
diagramInstance.dataBind();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Remove annotation
A collection of annotations can be removed from the node by using diagram method removeLabels. The following code illustrates how to remove a annotation to a node.
<template>
<div id="app">
<ejs-button ref="removeAnnotation" id="removeAnnotation" >Remove Annotation</ejs-button>
<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';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
const diagram = ref(null);
const removeAnnotation = ref(null);
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
id: 'label1',
// Sets the text to be displayed
content: 'Annotation'
}]
}]
const width = "750px";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
const removeAnnotationInstance = removeAnnotation.value.ej2Instances;
let annotation = [{
id: 'label1',
content: 'Annotation'
}];
//Method to remove labels at run time
removeAnnotationInstance.element.onclick = () => {
diagramInstance.removeLabels(diagramInstance.nodes[0], annotation);
}
})
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-button ref="removeAnnotation" id="removeAnnotation" >Remove Annotation</ejs-button>
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, shapeAnnotationModel } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
id: 'label1',
// Sets the text to be displayed
content: 'Annotation'
}]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
'ejs-button': ButtonComponent,
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
const removeAnnotation = this.$refs.removeAnnotation.ej2Instances;
let annotation = [{
id: 'label1',
content: 'Annotation'
}];
//Method to remove labels at run time
removeAnnotation.element.onclick = () => {
diagramInstance.removeLabels(diagramInstance.nodes[0], annotation);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Update annotation at runtime
You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. To reflect the changes immediately, we need to call dataBind.
The following code example illustrates how to change the annotation properties.
<template>
<div id="app">
<ejs-button ref="updateAnnotation" id="updateAnnotation" >Update Annotation</ejs-button>
<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';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
const nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
content: 'Annotation'
}]
}];
const diagram = ref(null);
const updateAnnotation = ref(null);
const width = "750px";
const height = "350px";
onMounted(function () {
const diagramInstance = diagram.value.ej2Instances;
const updateAnnotationInstance = updateAnnotation.value.ej2Instances;
updateAnnotationInstance.element.onclick = () => {
// Adds to the Diagram
diagramInstance.nodes[0].annotations[0].content = 'Updated Annotation';
//Method to update the annotation at run time
diagramInstance.dataBind();
}
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-button ref="updateAnnotation" id="updateAnnotation" >Update Annotation</ejs-button>
<ejs-diagram id="diagram" ref="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
let nodes = [{
// Position of the node
offsetX: 250,
offsetY: 250,
// Size of the node
width: 100,
height: 100,
// Sets the annotation for the node
annotations: [{
content: 'Annotation'
}]
}];
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent,
'ejs-button': ButtonComponent,
},
data() {
return {
width: "100%",
height: "350px",
nodes: nodes,
}
},
mounted: function () {
const diagramInstance = this.$refs.diagram.ej2Instances;
const updateAnnotation = this.$refs.updateAnnotation.ej2Instances;
updateAnnotation.element.onclick = () => {
// Adds to the Diagram
diagramInstance.nodes[0].annotations[0].content = 'Updated Annotation';
//Method to update the annotation at run time
diagramInstance.dataBind();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>