Skip to content

Commit 82a7828

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent f6e21ad commit 82a7828

File tree

11 files changed

+297
-2
lines changed

11 files changed

+297
-2
lines changed

‎README.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
# How-to-Create-a-Mind-Map-Using-the-Vue-Diagram
2-
A quick start Vue project that shows how to create a mind map layout using the Syncfusion Vue Diagram component. This project includes code snippets for customizing the nodes and connectors in the layout and changing its orientation, align the layout using horizontal and vertical spacing and to add expand and collapse icons.
1+
# How to Create a Mind Map Using the Vue Diagram
2+
3+
A quick start Vue project that shows how to create a mind map layout using the Syncfusion [Vue Diagram](https://www.syncfusion.com/vue-components/vue-diagram?utm_source=github&utm_medium=listing&utm_campaign=vue-diagram-mindmap-sample) component. This project includes code snippets for customizing the nodes and connectors in the layout and changing its orientation. It also contains code to align the layout using horizontal and vertical spacing and to add expand and collapse icons.
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/automatic-layout#mind-map-layout
8+
9+
Check out this online example of the Vue Diagram component: https://ej2.syncfusion.com/vue/demos/#/material3/diagram/mind-map.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-Create-a-Mind-Map-Using-the-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‎

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: 19 additions & 0 deletions
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.38",
13+
"vue": "^3.4.21"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^5.0.4",
17+
"vite": "^5.2.0"
18+
}
19+
}

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<ejs-diagram :width="width" :height="height" :dataSourceSettings="dataSourceSettings" :layout="layout"
3+
:getNodeDefaults="getNodeDefaults" :getConnectorDefaults="getConnectorDefaults"></ejs-diagram>
4+
</template>
5+
<script>
6+
7+
import {
8+
DiagramComponent,
9+
DataBinding,
10+
MindMap
11+
} from '@syncfusion/ej2-vue-diagrams';
12+
import { DataManager } from '@syncfusion/ej2-data';
13+
import { mindMapData } from './data.js';
14+
15+
export default {
16+
components: {
17+
'ejs-diagram': DiagramComponent
18+
},
19+
data: function () {
20+
return {
21+
width: '1502px',
22+
height: '702px',
23+
layout: {
24+
type: 'MindMap',
25+
horizontalSpacing: 40,//50,
26+
orientation: 'Vertical'
27+
},
28+
dataSourceSettings: {
29+
dataSource: new DataManager(mindMapData),
30+
id: 'id',
31+
parentId: 'parentId'
32+
},
33+
getNodeDefaults: (node) => {
34+
node.annotations = [{ content: node.data.Label, style: { color: 'white' } }];
35+
node.height = 40;
36+
node.width = 110;
37+
/* node.ports = [
38+
{ id: "port1", offset: { x: 0, y: 0.5 }, },
39+
{ id: "port2", offset: { x: 1, y: 0.5 }, }
40+
]; */
41+
node.ports = [
42+
{ id: "port1", offset: { y: 0, x: 0.5 }, },
43+
{ id: "port2", offset: { y: 1, x: 0.5 }, }
44+
];
45+
node.expandIcon = { shape: 'Minus'},
46+
node.collapseIcon = {shape: 'Plus'}
47+
48+
const branch = node.data.branch;
49+
if (branch === 'Root' || branch === "Left" || branch === "Right") {
50+
node.shape = branch !== 'Root' ? { type: 'Basic', shape: 'Ellipse' } : { type: 'Path', data: 'M55.7315 17.239C57.8719 21.76 54.6613 27.788 47.1698 26.0787C46.0997 32.309 33.2572 35.323 28.9764 29.2951C25.7658 35.323 10.7829 33.816 10.7829 26.0787C3.29143 30.802 -0.989391 20.253 2.22121 17.239C-0.989317 14.2249 2.22121 6.68993 10.7829 8.39934C13.9935 -0.845086 25.7658 -0.845086 28.9764 5.18301C32.187 0.661909 45.0294 0.661908 47.1698 8.39934C52.5209 5.18301 60.0123 12.7179 55.7315 17.239Z' }
51+
node.style = { fill: branch !== 'Root' ? '#F39C12' : '#E74C3C', strokeWidth: 0 }
52+
}
53+
else {
54+
node.style = { fill: branch === "subRight" ? "#8E44AD" : "#3498DB", strokeWidth: 0 }
55+
}
56+
},
57+
getConnectorDefaults: (connector, diagram) => {
58+
connector.type = 'Bezier';
59+
connector.targetDecorator = { shape: 'None' };
60+
let sourceNode = diagram.getObject(connector.sourceID);
61+
let targetNode = diagram.getObject(connector.targetID);
62+
const branch = targetNode.data.branch;
63+
64+
if(branch === 'Right' || branch === 'subRight'){
65+
connector.sourcePortID = sourceNode.ports[1].id;
66+
connector.targetPortID = targetNode.ports[0].id;
67+
connector.style = { strokeWidth: 3, strokeColor: "#8E44AD" };
68+
}
69+
else if (branch === "Left" || branch === "subLeft") {
70+
connector.sourcePortID = sourceNode.ports[0].id;
71+
connector.targetPortID = targetNode.ports[1].id;
72+
connector.style = { strokeWidth: 3, strokeColor: "#3498DB" };
73+
}
74+
}
75+
};
76+
},
77+
provide: { diagram: [DataBinding, MindMap] }
78+
}
79+
</script>
80+
81+
<style>
82+
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
83+
</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/data.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export const mindMapData = [
2+
{ id: 1, Label: "Creativity", branch: "Root" },
3+
{ id: 2, Label: "Brainstorming", parentId: 1, branch: "Right" },
4+
{ id: 3, Label: "Complementing", parentId: 1, branch: "Left" },
5+
{ id: 4, Label: "Sessions", parentId: 2, branch: "subRight" },
6+
{ id: 5, Label: "Generate", parentId: 2, branch: "subRight" },
7+
{ id: 6, Label: "Local", parentId: 4, branch: "subRight" },
8+
{ id: 7, Label: "Remote", parentId: 4, branch: "subRight" },
9+
{ id: 8, Label: "Individual", parentId: 4, branch: "subRight" },
10+
{ id: 9, Label: "Teams", parentId: 4, branch: "subRight" },
11+
{ id: 10, Label: "Ideas", parentId: 5, branch: "subRight" },
12+
{ id: 11, Label: "Engagement", parentId: 5, branch: "subRight" },
13+
{ id: 12, Label: "Product", parentId: 10, branch: "subRight" },
14+
{ id: 13, Label: "Service", parentId: 10, branch: "subRight" },
15+
{ id: 14, Label: "Business Direction", parentId: 10, branch: "subRight" },
16+
{ id: 15, Label: "Empowering", parentId: 11, branch: "subRight" },
17+
{ id: 16, Label: "Ownership", parentId: 11, branch: "subRight" },
18+
{ id: 17, Label: "Information", parentId: 3, branch: "subLeft" },
19+
{ id: 18, Label: "Expectations", parentId: 3, branch: "subLeft" },
20+
{ id: 19, Label: "Competetors", parentId: 17, branch: "subLeft" },
21+
{ id: 20, Label: "Products", parentId: 17, branch: "subLeft" },
22+
{ id: 21, Label: "Features", parentId: 17, branch: "subLeft" },
23+
{ id: 22, Label: "Other Data", parentId: 17, branch: "subLeft" },
24+
{ id: 23, Label: "Organization", parentId: 18, branch: "subLeft" },
25+
{ id: 24, Label: "Customer", parentId: 18, branch: "subLeft" },
26+
{ id: 25, Label: "Staff", parentId: 18, branch: "subLeft" },
27+
{ id: 26, Label: "Stakeholders", parentId: 18, branch: "subLeft" }
28+
];

‎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/V1NBaF5cXmRCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWXxcd3RTQ2FfV0N+XkM=')
6+
createApp(App).mount('#app')

‎src/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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+
22+
a:hover {
23+
color: #535bf2;
24+
}
25+
26+
body {
27+
margin: 0;
28+
/* margin-left: 180px;
29+
display: flex;
30+
place-items: center;
31+
min-width: 320px;
32+
min-height: 100vh;*/
33+
}
34+
35+
h1 {
36+
font-size: 3.2em;
37+
line-height: 1.1;
38+
}
39+
40+
button {
41+
border-radius: 8px;
42+
border: 1px solid transparent;
43+
padding: 0.6em 1.2em;
44+
font-size: 1em;
45+
font-weight: 500;
46+
font-family: inherit;
47+
background-color: #1a1a1a;
48+
cursor: pointer;
49+
transition: border-color 0.25s;
50+
}
51+
52+
button:hover {
53+
border-color: #646cff;
54+
}
55+
56+
button:focus,
57+
button:focus-visible {
58+
outline: 4px auto -webkit-focus-ring-color;
59+
}
60+
61+
.card {
62+
padding: 2em;
63+
}
64+
65+
#app {
66+
text-align: center;
67+
margin: 60;
68+
padding: 1rem;
69+
/*max-width: 1380px; */
70+
}
71+
72+
@media (prefers-color-scheme: light) {
73+
:root {
74+
color: #213547;
75+
background-color: #ffffff;
76+
}
77+
78+
a:hover {
79+
color: #747bff;
80+
}
81+
82+
button {
83+
background-color: #f9f9f9;
84+
}
85+
}

0 commit comments

Comments
 (0)