Skip to content

Commit 338569b

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent 9485279 commit 338569b

File tree

10 files changed

+302
-2
lines changed

10 files changed

+302
-2
lines changed

‎README.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
1-
# How-to-Group-Nodes-and-Connectors-in-the-Vue-Diagram-Component
2-
A quick start Vue project that shows how to group nodes and connectors in the Vue Diagram component. This project includes code snippets to create and update groups dynamically. It also includes code snippets to add annotations to a group and create a nested group.
1+
# Vue 3 + Vite
2+
3+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

‎index.html

Lines changed: 13 additions & 0 deletions
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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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-buttons": "^25.2.4",
13+
"@syncfusion/ej2-vue-diagrams": "^25.2.5",
14+
"vue": "^3.4.27"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^5.0.4",
18+
"vite": "^5.2.11"
19+
}
20+
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<template>
2+
<div class="container">
3+
<ejs-button class="button" @click="addChildNodeToGroup">Add Child Node to Group</ejs-button>
4+
<ejs-button class="button" @click="ungroup">Ungroup</ejs-button>
5+
<ejs-button class="button" @click="updateGroup">Update Group</ejs-button>
6+
</div>
7+
<ejs-diagram ref="diagramObject" :width="width" :height="height" :nodes="nodes" :connectors="connectors"></ejs-diagram>
8+
</template>
9+
<script>
10+
11+
let diagramInstance;
12+
13+
let connectors = [
14+
{
15+
id: 'connector1',
16+
sourceID: 'node1',
17+
targetID: 'node2'
18+
},
19+
{
20+
id: 'connector2',
21+
sourceID: 'node2',
22+
targetID: 'node3'
23+
},
24+
{
25+
id: 'connector3',
26+
sourceID: 'node3',
27+
targetID: 'node1'
28+
}
29+
];
30+
31+
let nodes = [
32+
{
33+
id: "node1",
34+
offsetX: 375,
35+
offsetY: 130,
36+
height: 60,
37+
width: 150,
38+
annotations: [ { content: "Node 1" } ]
39+
},
40+
{
41+
id: "node2",
42+
offsetX: 675,
43+
offsetY: 130,
44+
height: 60,
45+
width: 150,
46+
annotations: [ { content: "Node 2" } ]
47+
},
48+
{
49+
id: "node3",
50+
offsetX: 525, offsetY: 270,
51+
height: 60, width: 150,
52+
annotations: [{ content: "Node 3" }]
53+
},
54+
{
55+
id: "node4",
56+
offsetX: 525, offsetY: 370,
57+
height: 60, width: 150,
58+
annotations: [{ content: "Node 4" }]
59+
}
60+
];
61+
62+
let group = {
63+
id: 'group1',
64+
children: ['node1', 'node2', 'connector1', 'connector2', 'connector3', 'node3'],
65+
padding: { left:20, right:20, top:20, bottom:20 },
66+
style: { fill:'Orange', strokeColor: 'Black', strokeWidth:2 },
67+
annotations: [{ content: 'Group Node'}]
68+
};
69+
70+
let nestedGroup = {
71+
id: 'nestedGroup1',
72+
children: ['group1', 'node4'],
73+
padding: { left:20, right:20, top:20, bottom:20 },
74+
style: { fill:'Blue', strokeColor: 'Black', strokeWidth:2 },
75+
annotations: [{ content: 'Nested Group Node'}]
76+
};
77+
78+
79+
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';
80+
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
81+
82+
export default {
83+
components: {
84+
'ejs-diagram': DiagramComponent,
85+
'ejs-button': ButtonComponent
86+
},
87+
data: function () {
88+
return {
89+
width: '1102px',
90+
height: '602px',
91+
nodes: nodes,
92+
connectors: connectors
93+
};
94+
},
95+
methods: {
96+
addChildNodeToGroup(){
97+
diagramInstance.addChildToGroup(group, 'node3');
98+
},
99+
ungroup(){
100+
diagramInstance.unGroup();
101+
},
102+
updateGroup(){
103+
diagramInstance.nodes[3].offsetX = 300;
104+
diagramInstance.nodes[3].offsetY = 300;
105+
}
106+
},
107+
mounted: function(){
108+
diagramInstance = this.$refs.diagramObject.ej2Instances;
109+
diagramInstance.add(group);
110+
diagramInstance.add(nestedGroup);
111+
}
112+
};
113+
</script>
114+
115+
<style>
116+
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
117+
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
118+
119+
.container {
120+
text-align: left;
121+
margin-bottom: 10px;
122+
}
123+
124+
.button{
125+
margin-right: 10px;
126+
}
127+
</style>

‎src/assets/vue.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue

Lines changed: 40 additions & 0 deletions
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

Lines changed: 6 additions & 0 deletions
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/V1NBaF1cXmhIfEx1RHxQdld5ZFRHallYTnNWUj0eQnxTdEFjXH5acHVUQWFUVUF2Xg==')
6+
createApp(App).mount('#app')

‎src/style.css

Lines changed: 80 additions & 0 deletions
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

Lines changed: 7 additions & 0 deletions
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)