Skip to content

Commit 5a3d050

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent 4997024 commit 5a3d050

File tree

10 files changed

+322
-2
lines changed

10 files changed

+322
-2
lines changed

‎README.md

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
# How-to-Add-and-Customize-Annotations-in-Nodes-and-Connectors-in-Vue-Diagram
2-
A quick start Vue project that shows how to add annotations to nodes and connectors in the Syncfusion Vue Diagram component. This project includes code snippets to add an annotation programmatically and showing customization options like horizontal alignment, vertical alignment, offset, text wrapping, font styles, and hyperlinks.
1+
# How to Add and Customize Annotations in Nodes and Connectors in Vue Diagram
2+
3+
A quick start Vue project that shows how to add annotations to nodes and connectors in the Syncfusion [Vue Diagram](https://www.syncfusion.com/vue-components/vue-diagram?utm_source=github&utm_medium=listing&utm_campaign=vue-diagram-annotations-sample) component. This project includes code snippets to add an annotation programmatically and showing customization options like horizontal alignment, vertical alignment, offset, text wrapping, and font styles. It includes code snippets for interacting with annotations and adding hyperlinks to them.
4+
5+
Watch the video: Coming soon…
6+
7+
Refer to the following documentation to learn about the Vue Diagram component: https://ej2.syncfusion.com/vue/documentation/diagram/labels
8+
9+
Check out this online example of the Vue Diagram component: https://ej2.syncfusion.com/vue/demos/#/material3/diagram/annotation.html
10+
11+
Make sure you have the latest versions of Node.js and Visual Studio Code on your machine before working on this project.
12+
13+
## How to run this application
14+
To run this application, you need to clone the `How-to-Add-and-Customize-Annotations-in-Nodes-and-Connectors-in-Vue-Diagram` repository and then open it in Visual Studio Code. After that, just install all the necessary Vue packages in your project using the `npm install` command and run your project using the `npm run dev` command.

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-diagrams": "^25.1.40",
13+
"vue": "^3.4.21"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^5.0.4",
17+
"vite": "^5.2.9"
18+
}
19+
}

‎public/vite.svg

+1
Loading

‎src/App.vue

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<template>
2+
<ejs-diagram ref="diagramObject" :width="width" :height="height"
3+
:nodes="nodes" :connectors="connectors"
4+
:getNodeDefaults="getNodeDefaults"></ejs-diagram>
5+
</template>
6+
<script>
7+
8+
let diagramInstance;
9+
10+
let nodes = [
11+
{
12+
id: "startNode",
13+
offsetX: 440,
14+
offsetY: 60,
15+
shape: { type: "Flow", shape: "Terminator" },
16+
annotations: [{ content: 'Start'}]
17+
},
18+
{
19+
id: "inputNode",
20+
offsetX: 440,
21+
offsetY: 180,
22+
shape: { type: "Flow", shape: "Data" },
23+
annotations: [{ content: 'Enter a number',
24+
//offset: { x:0, y:0 },
25+
//verticalAlignment: 'Top',
26+
//horizontalAlignment: 'Left',
27+
style: { textWrapping: 'Wrap', fontFamily: 'TimesNewRoman', fontSize: 14 },
28+
//width: 45,
29+
constraints: AnnotationConstraints.ReadOnly,
30+
hyperlink:{
31+
content: 'My Hyperlink',
32+
link: 'https://syncfusion.com',
33+
hyperlinkOpenState: 'CurrentTab'
34+
}
35+
}]
36+
},
37+
{
38+
id: "decisionNode",
39+
offsetX: 440,
40+
offsetY: 300,
41+
shape: { type: "Flow", shape: "Decision" },
42+
annotations: [{ content: 'N divisible by 2 ?' }]
43+
},
44+
{
45+
id: "processEvenNode",
46+
offsetX: 700,
47+
offsetY: 300,
48+
shape: { type: "Flow", shape: "Process" },
49+
//annotations: [{ content: 'N is Even' }]
50+
},
51+
{
52+
id: "processOddNode",
53+
offsetX: 440,
54+
offsetY: 420,
55+
shape: { type: "Flow", shape: "Process" },
56+
annotations: [{ content: 'N is Odd' }]
57+
},
58+
{
59+
id: "endNode",
60+
offsetX: 440,
61+
offsetY: 540,
62+
shape: { type: "Flow", shape: "Terminator" },
63+
annotations: [{ content: 'End' }]
64+
}
65+
];
66+
67+
let connectors = [
68+
{
69+
id: 'startToInputConnector',
70+
sourceID: 'startNode',
71+
targetID: 'inputNode'
72+
},
73+
{
74+
id: 'inputToDecisionConnector',
75+
sourceID: 'inputNode',
76+
targetID: 'decisionNode'
77+
},
78+
{
79+
id: 'decisionToProcessEvenConnector',
80+
sourceID: 'decisionNode',
81+
targetID: 'processEvenNode',
82+
annotations: [{ content: 'true', style: {fill: 'white'},
83+
//offset:0,
84+
alignment: 'Before',
85+
displacement: {x:5, y:5}}]
86+
},
87+
{
88+
id: 'decisionToProcessOddConnector',
89+
sourceID: 'decisionNode',
90+
targetID: 'processOddNode',
91+
annotations: [{ content: 'false', style: {fill: 'white'},
92+
alignment: 'After',
93+
displacement: {x:5, y:5}}]
94+
},
95+
{
96+
id: 'processOddToEndConnector',
97+
sourceID: 'processOddNode',
98+
targetID: 'endNode'
99+
},
100+
{
101+
id: 'processEvenToEndConnector',
102+
sourceID: 'processEvenNode',
103+
targetID: 'endNode',
104+
type: "Orthogonal",
105+
segments: [ { type: "Orthogonal", direction: "Bottom", length: 200 } ]
106+
}
107+
];
108+
109+
import {
110+
DiagramComponent, AnnotationConstraints
111+
} from '@syncfusion/ej2-vue-diagrams';
112+
113+
export default {
114+
components: {
115+
'ejs-diagram': DiagramComponent
116+
},
117+
data: function () {
118+
return {
119+
width: '1102px',
120+
height: '602px',
121+
nodes: nodes,
122+
connectors: connectors,
123+
getNodeDefaults: (node) => {
124+
node.height = 60;
125+
node.width = 150;
126+
}
127+
};
128+
},
129+
mounted: function(){
130+
diagramInstance = this.$refs.diagramObject.ej2Instances;
131+
diagramInstance.addLabels(diagramInstance.nodes[3], [{ content: 'N is Even'}]);
132+
//diagramInstance.addLabels(diagramInstance.connectors[3], [{ content: 'false', style: { fill: 'white'}}]);
133+
134+
//diagramInstance.nodes[3].annotations[0].content = 'Updated Node Annotation';
135+
//diagramInstance.connectors[3].annotations[0].content = 'Updated Connector Annotation';
136+
}
137+
};
138+
</script>
139+
<style>
140+
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
141+
</style>

‎src/assets/vue.svg

+1
Loading

‎src/components/HelloWorld.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Install
30+
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
31+
in your IDE for a better DX
32+
</p>
33+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34+
</template>
35+
36+
<style scoped>
37+
.read-the-docs {
38+
color: #888;
39+
}
40+
</style>

‎src/main.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
import { registerLicense } from '@syncfusion/ej2-base'
5+
registerLicense('Ngo9BigBOggjHTQxAR8/V1NBaF5cWWNCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWXtfd3RTRWRZVE1/WUU=')
6+
createApp(App).mount('#app')

‎src/style.css

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
a {
17+
font-weight: 500;
18+
color: #646cff;
19+
text-decoration: inherit;
20+
}
21+
a:hover {
22+
color: #535bf2;
23+
}
24+
25+
body {
26+
margin: 0;
27+
margin-left: 180px;
28+
/* display: flex;
29+
place-items: center;*/
30+
min-width: 320px;
31+
min-height: 100vh;
32+
}
33+
34+
h1 {
35+
font-size: 3.2em;
36+
line-height: 1.1;
37+
}
38+
39+
button {
40+
border-radius: 8px;
41+
border: 1px solid transparent;
42+
padding: 0.6em 1.2em;
43+
font-size: 1em;
44+
font-weight: 500;
45+
font-family: inherit;
46+
background-color: #1a1a1a;
47+
cursor: pointer;
48+
transition: border-color 0.25s;
49+
}
50+
button:hover {
51+
border-color: #646cff;
52+
}
53+
button:focus,
54+
button:focus-visible {
55+
outline: 4px auto -webkit-focus-ring-color;
56+
}
57+
58+
.card {
59+
padding: 2em;
60+
}
61+
62+
#app {
63+
max-width: 1280px;
64+
text-align: center;
65+
margin: 0 auto;
66+
padding: 2rem;
67+
}
68+
69+
@media (prefers-color-scheme: light) {
70+
:root {
71+
color: #213547;
72+
background-color: #ffffff;
73+
}
74+
a:hover {
75+
color: #747bff;
76+
}
77+
button {
78+
background-color: #f9f9f9;
79+
}
80+
}

‎vite.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
 (0)