Skip to content

Commit c906f9f

Browse files
ArulrajAbooArulrajAboo
authored
Committed the example project.
1 parent 562ffc0 commit c906f9f

File tree

10 files changed

+306
-2
lines changed

10 files changed

+306
-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-and-Customize-Ports-in-the-Vue-Diagram-Component
2-
A quick start Vue project that shows how to create and customize port nodes programmatically and dynamically in the Syncfusion Vue Diagram component. This project includes code snippets for adding multiple ports, customizing them dynamically, and connecting nodes using ports.
1+
# How to Create and Customize Ports in the Vue Diagram Component
2+
3+
A quick start Vue project that shows how to create and customize port nodes programmatically and dynamically in the Syncfusion [Vue Diagram]( https://www.syncfusion.com/vue-components/vue-diagram?utm_source=github&utm_medium=listing&utm_campaign=vue-diagram-ports-sample) component. This project includes code snippets for adding multiple ports, customizing them dynamically, and connecting nodes using ports.
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/ports
8+
9+
Check out this online example of the Vue Diagram component: https://ej2.syncfusion.com/vue/demos/#/material3/diagram/port.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-and-Customize-Ports-in-the-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.

‎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.1.39",
13+
"@syncfusion/ej2-vue-diagrams": "^25.1.41",
14+
"vue": "^3.4.25"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^5.0.4",
18+
"vite": "^5.2.10"
19+
}
20+
}

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<template>
2+
<div class="container">
3+
<ejs-button class="button" @click="removePort">Remove Port</ejs-button>
4+
<ejs-button class="button" @click="updatePort">Update Port</ejs-button>
5+
</div>
6+
<ejs-diagram ref="diagramObject" :width="width" :height="height" :nodes="nodes"></ejs-diagram>
7+
</template>
8+
<script>
9+
10+
let diagramInstance;
11+
12+
let ports = [
13+
{
14+
id: 'rightMidPort',
15+
offset: { x: 1, y: 0.5 },
16+
visibility: PortVisibility.Visible,
17+
constraints: PortConstraints.Draw | PortConstraints.Default
18+
},
19+
/* {
20+
id: 'port1',
21+
offset: { x:0, y:0 },
22+
visibility: PortVisibility.Visible,
23+
style: {
24+
fill: 'orange',
25+
strokeWidth: 2
26+
},
27+
height: 20,
28+
width: 20,
29+
shape: 'Custom',
30+
pathData: "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z"
31+
},
32+
{
33+
id: 'topMidPort',
34+
offset: { x: 0.5, y: 0 },
35+
visibility: PortVisibility.Visible
36+
}, */
37+
38+
/* {
39+
id: 'bottomMidPort',
40+
offset: { x: 0.5, y: 1 },
41+
visibility: PortVisibility.Visible
42+
},*/
43+
{
44+
id: 'leftMidPort',
45+
offset: { x: 0, y: 0.5 },
46+
visibility: PortVisibility.Visible
47+
},/*
48+
{
49+
id: 'centerPort',
50+
offset: { x: 0.5, y: 0.5 },
51+
visibility: PortVisibility.Visible
52+
} */
53+
];
54+
55+
let nodes = [
56+
{
57+
id: "node1",
58+
offsetX: 300,
59+
offsetY: 200,
60+
height: 200,
61+
width: 200,
62+
//ports: ports,
63+
annotations: [{ content: "Node1" }],
64+
style: { fill: '#6495ED' }
65+
},
66+
{
67+
id: "node2",
68+
offsetX: 700,
69+
offsetY: 200,
70+
height: 200,
71+
width: 200,
72+
annotations: [{ content: "Node2" }],
73+
style: { fill: '#6495ED' },
74+
ports: ports
75+
}
76+
];
77+
78+
import {
79+
DiagramComponent,
80+
PortConstraints,
81+
PortVisibility
82+
} from '@syncfusion/ej2-vue-diagrams';
83+
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
84+
85+
export default {
86+
components: {
87+
'ejs-diagram': DiagramComponent,
88+
'ejs-button': ButtonComponent
89+
},
90+
data: function () {
91+
return {
92+
width: '1102px',
93+
height: '602px',
94+
nodes: nodes,
95+
removePort: ()=>{
96+
diagramInstance.removePorts(diagramInstance.nodes[0], ports);
97+
},
98+
updatePort: ()=>{
99+
//diagramInstance.nodes[0].ports[0].offset = { x:0, y:0 };
100+
diagramInstance.nodes[0].ports[0].verticalAlignment = 'Bottom';
101+
diagramInstance.nodes[0].ports[0].horizontalAlignment = 'Right';
102+
}
103+
};
104+
},
105+
mounted: function(){
106+
diagramInstance = this.$refs.diagramObject.ej2Instances;
107+
diagramInstance.addPorts(diagramInstance.nodes[0], ports);
108+
}
109+
}
110+
</script>
111+
112+
<style>
113+
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
114+
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
115+
116+
.container{
117+
text-align: left;
118+
margin-bottom: 10px;
119+
}
120+
121+
.button{
122+
margin-right: 10px;
123+
}
124+
</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: 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)