Skip to content

Commit f64c73f

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent 5c7dcc6 commit f64c73f

File tree

10 files changed

+357
-2
lines changed

10 files changed

+357
-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-Customize-the-Vue-Diagram-and-Its-Elements
2-
A quick start Vue project that shows how to customize the canvas page in the Vue Diagram component. This project includes code snippets for displaying page breaks and multiple pages in the canvas. It also includes code snippets for customizing the appearance of nodes and connectors and bridging connectors.
1+
# How to Customize the Vue Diagram and Its Elements
2+
3+
A quick start Vue project that shows how to customize the canvas page in the [Vue Diagram]( https://www.syncfusion.com/vue-components/vue-diagram?utm_source=github&utm_medium=listing&utm_campaign=vue-diagram-customization-sample) component. This project includes code snippets for displaying page breaks and multiple pages in the canvas. It also includes code snippets for customizing the appearance of nodes and connectors and bridging connectors.
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/getting-started-vue-3
8+
9+
Check out this online example of the Vue Diagram component: https://ej2.syncfusion.com/vue/demos/#/material3/diagram/default-functionality.html
10+
11+
Before working on this project make sure you have the latest versions of Node.js and Visual Studio Code on your machine.
12+
13+
## How to run this application
14+
To run this application, clone the `How-to-Customize-the-Vue-Diagram-and-Its-Elements` repository and open it in Visual Studio Code. Then, 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.2.5",
13+
"vue": "^3.4.27"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^5.0.4",
17+
"vite": "^5.2.11"
18+
}
19+
}

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<template>
2+
<ejs-diagram :width="width" :height="height"
3+
:nodes="nodes" :connectors="connectors"
4+
:pageSettings="pageSettings"
5+
:snapSettings="snapSettings"
6+
:getNodeDefaults="getNodeDefaults"
7+
:getConnectorDefaults="getConnectorDefaults"
8+
:constraints="constraints"
9+
:bridgeDirection="bridgeDirection"
10+
></ejs-diagram>
11+
</template>
12+
13+
<script>
14+
// #region Nodes and Connectors definitions
15+
const nodes = [
16+
{
17+
id: "startNode",
18+
offsetX: 300,
19+
offsetY: 60,
20+
height: 60,
21+
width: 150,
22+
shape: { type: "Flow", shape: "Terminator" },
23+
annotations: [{ content: 'Start'}]
24+
},
25+
{
26+
id: "inputNode",
27+
offsetX: 300,
28+
offsetY: 180,
29+
height: 60,
30+
width: 150,
31+
shape: { type: "Flow", shape: "Data" },
32+
annotations: [{ content: 'Enter a number'}]
33+
},
34+
{
35+
id: "decisionNode",
36+
offsetX: 300,
37+
offsetY: 300,
38+
height: 60,
39+
width: 150,
40+
shape: { type: "Flow", shape: "Decision" },
41+
annotations: [{ content: 'N divisible by 2 ?'}]
42+
},
43+
{
44+
id: "processEvenNode",
45+
offsetX: 600,
46+
offsetY: 300,
47+
height: 60,
48+
width: 150,
49+
shape: { type: "Flow", shape: "Process" },
50+
annotations: [{ content: 'N is Even'}]
51+
},
52+
{
53+
id: "processOddNode",
54+
offsetX: 300,
55+
offsetY: 420,
56+
height: 60,
57+
width: 150,
58+
shape: { type: "Flow", shape: "Process" },
59+
annotations: [{ content: 'N is Odd'}]
60+
},
61+
{
62+
id: "endNode",
63+
offsetX: 300,
64+
offsetY: 540,
65+
height: 60,
66+
width: 150,
67+
shape: { type: "Flow", shape: "Terminator" },
68+
annotations: [{ content: 'End' }]
69+
}
70+
];
71+
72+
const connectors = [
73+
{
74+
id: 'startToInputConnector',
75+
sourceID: 'startNode',
76+
targetID: 'inputNode'
77+
},
78+
{
79+
id: 'inputToDecisionConnector',
80+
sourceID: 'inputNode',
81+
targetID: 'decisionNode'
82+
},
83+
{
84+
id: 'decisionToProcessEvenConnector',
85+
sourceID: 'decisionNode',
86+
targetID: 'processEvenNode',
87+
annotations: [{ content: 'true', alignment: 'Before', displacement: { x: 3, y: 3 } }]
88+
},
89+
{
90+
id: 'decisionToProcessOddConnector',
91+
sourceID: 'decisionNode',
92+
targetID: 'processOddNode',
93+
annotations: [{ content: 'false', alignment: 'After', 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+
// #endregion
109+
110+
import {
111+
DiagramComponent, SnapConstraints, ConnectorBridging, DiagramConstraints
112+
} from '@syncfusion/ej2-vue-diagrams';
113+
114+
export default {
115+
components: {
116+
'ejs-diagram': DiagramComponent
117+
},
118+
data: function () {
119+
return {
120+
width: '902px',
121+
height: '602px',
122+
nodes: nodes,
123+
connectors: connectors,
124+
snapSettings: {constraints: SnapConstraints.None },
125+
constraints: DiagramConstraints.Default | DiagramConstraints.Bridging,
126+
bridgeDirection: 'Right',
127+
pageSettings:{
128+
height: 842,
129+
width: 595,
130+
showPageBreaks: true,
131+
margin: { left: 20, right: 20, top: 20, bottom: 20 },
132+
background: { color: '#CEF6F5' },
133+
orientation: 'Portrait',
134+
multiplePage: true
135+
}
136+
};
137+
},
138+
methods: {
139+
getNodeDefaults(node){
140+
//node.pivot = { x:0, y:0 };
141+
node.style ={ fill: 'LightGreen', strokeColor: 'Orange', strokeWidth: 3, strokeDashArray: '7,7',
142+
gradient: {
143+
type: 'Linear',
144+
x1: 0,
145+
y1: 0,
146+
x2: 50,
147+
y2: 50,
148+
stops:[
149+
{ color: 'White', offset: 0 },
150+
{ color: '#6BA5D7', offset: 100 }
151+
]
152+
}
153+
};
154+
},
155+
getConnectorDefaults(connector){
156+
connector.style = { strokeColor: 'Blue' };
157+
connector.sourceDecorator = { shape: 'Diamond', style: { fill: 'Yellow', strokeColor: 'Blue', strokeWidth: 2 }};
158+
connector.targetDecorator = { shape: 'IndentedArrow'};
159+
connector.hitPadding = 50;
160+
connector.sourcePadding = 5;
161+
connector.targetPadding = 5;
162+
}
163+
},
164+
provide: { diagram:[ConnectorBridging]}
165+
};
166+
</script>
167+
168+
<style>
169+
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
170+
</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/V1NBaF5cXmRCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWXxcd3RTQ2FfV0N+XkM=')
6+
createApp(App).mount('#app')

‎src/style.css‎

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

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