Skip to content

Commit 53786e3

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent 8bdb292 commit 53786e3

File tree

10 files changed

+309
-2
lines changed

10 files changed

+309
-2
lines changed

‎README.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,15 @@
1-
# How-to-Add-the-Symbol-Palette-to-a-Vue-Diagram-Component
2-
A quick-start Vue project that shows how to add and customize the symbol palette in the Syncfusion Vue Diagram component. This project also includes code snippets for restricting the symbol palette's panel, customizing its symbol size, and customizing the symbol preview size.
1+
# How to Add the Symbol Palette to a Vue Diagram Component
2+
3+
A quick-start Vue project that shows how to add and customize the symbol palette in the Syncfusion [Vue Diagram]( https://www.syncfusion.com/vue-components/vue-diagram?utm_source=github&utm_medium=listing&utm_campaign=vue-diagram-symbolpalette-sample) component. This project also includes code snippets for restricting the symbol palette's panel, customizing its symbol size, and customizing the symbol preview size.
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/symbol-palette
8+
Check out this online example of the Vue Diagram component: https://ej2.syncfusion.com/vue/demos/#/material3/diagram/symbol-palette.html
9+
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-the-Symbol-Palette-to-a-Vue-Diagram-Component` 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.
15+

‎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": "^24.2.7",
13+
"vue": "^3.4.19"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^5.0.4",
17+
"vite": "^5.1.4"
18+
}
19+
}

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<template>
2+
<div class="container">
3+
<div>
4+
<ejs-symbolpalette :width="paletteWidth" :height="paletteHeight"
5+
:palettes="palettes"
6+
:symbolHeight="symbolHeight"
7+
:symbolWidth="symbolWidth"
8+
:paletteExpanding="paletteExpanding"
9+
:enableSearch="true"
10+
:symbolPreview="symbolPreview"></ejs-symbolpalette>
11+
</div>
12+
<div>
13+
<ejs-diagram :width="width" :height="height"></ejs-diagram>
14+
</div>
15+
</div>
16+
</template>
17+
<script>
18+
19+
import {
20+
DiagramComponent,
21+
SymbolPaletteComponent
22+
} from '@syncfusion/ej2-vue-diagrams';
23+
24+
let flowShapes = [
25+
{ id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' }},
26+
{ id: 'Process', shape: { type: 'Flow', shape: 'Process' } },
27+
{ id: 'Data', shape: { type: 'Flow', shape: 'Data' } },
28+
{ id: 'Document', shape: { type: 'Flow', shape: 'Document' } }
29+
];
30+
31+
let basicShapes = [
32+
{ id: 'Rectangle', shape: { type: 'Basic', shape: 'Rectangle' } },
33+
{ id: 'Ellipse', shape: { type: 'Basic', shape: 'Ellipse' } },
34+
{ id: 'Hexagon', shape: { type: 'Basic', shape: 'Hexagon' } },
35+
{ id: 'Star', shape: { type: 'Basic', shape: 'Star' } }
36+
];
37+
38+
let connectorSymbols = [
39+
{
40+
id: 'Directional-Connector',
41+
type: 'Straight',
42+
sourcePoint: { x:0, y:0},
43+
targetPoint: { x:0, y:60},
44+
targetDecorator: {shape: 'Arrow'}
45+
},
46+
{
47+
id: 'Line',
48+
type: 'Straight',
49+
sourcePoint: { x: 0, y: 0 },
50+
targetPoint: { x: 60, y: 60 },
51+
targetDecorator: { shape: 'None' }
52+
},
53+
{
54+
id: 'Elbow-Directional',
55+
type: 'Orthogonal',
56+
sourcePoint: { x: 0, y: 0 },
57+
targetPoint: { x: 60, y: 60 },
58+
targetDecorator: { shape: 'Arrow' }
59+
},
60+
{
61+
id: 'Elbow',
62+
type: 'Orthogonal',
63+
sourcePoint: { x: 0, y: 0 },
64+
targetPoint: { x: 60, y: 60 },
65+
targetDecorator: { shape: 'None' }
66+
}
67+
];
68+
69+
export default {
70+
components: {
71+
'ejs-diagram': DiagramComponent,
72+
'ejs-symbolpalette': SymbolPaletteComponent
73+
},
74+
data: function () {
75+
return {
76+
width: '1102px',
77+
height: '702px',
78+
paletteWidth: '300px',
79+
paletteHeight: '700px',
80+
symbolHeight: 60,
81+
symbolWidth: 60,
82+
symbolPreview: {
83+
height: 150,
84+
width: 150,
85+
offset: {
86+
x:15,
87+
y:10
88+
}
89+
},
90+
palettes: [
91+
{
92+
id: 'flow',
93+
title: 'Flow Shapes',
94+
symbols: flowShapes
95+
},
96+
{
97+
id: 'basic',
98+
title: 'Basic Shapes',
99+
symbols: basicShapes,
100+
expanded: false
101+
},
102+
{
103+
id: 'connectors',
104+
title: 'Connectors',
105+
symbols: connectorSymbols,
106+
}
107+
],
108+
paletteExpanding: (args)=>{
109+
if(args.palette.id == 'flow'){
110+
args.cancel = true;
111+
}
112+
}
113+
};
114+
}
115+
};
116+
</script>
117+
118+
<style>
119+
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
120+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
121+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
122+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
123+
124+
.container {
125+
display: flex;
126+
margin-left: 10px;
127+
}
128+
</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/V1NAaF1cWmhIfEx1RHxQdld5ZFRHallYTnNWUj0eQnxTdEFjW31ccHFVQWRcVUJ3Vg==')
6+
createApp(App).mount('#app')

‎src/style.css‎

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

‎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)