Skip to content

Commit 6503b3e

Browse files
bcakmakoglubcakmakoglu
authored
examples: update pinia example (#1458)
* examples: update pinia example * chore(examples): update pinia dep * examples: add icons to pinia panel * docs(examples): update pinia example
1 parent 9bd813d commit 6503b3e

File tree

6 files changed

+182
-110
lines changed

6 files changed

+182
-110
lines changed

‎docs/examples/pinia/PiniaExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import sdk from '@stackblitz/sdk'
44
const el = ref<HTMLDivElement>()
55
66
onMounted(() => {
7-
sdk.embedProjectId(el.value!, 'vitejs-vite-ujrwcm', {
7+
sdk.embedProjectId(el.value!, 'vitejs-vite-zk9hqt', {
88
forceEmbedLayout: true,
99
openFile: 'src/App.vue',
1010
height: 750,

‎examples/vite/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"@vue-flow/minimap": "workspace:*",
1515
"@vue-flow/node-resizer": "workspace:*",
1616
"@vue-flow/node-toolbar": "workspace:*",
17-
"pinia": "^2.1.6"
17+
"pinia": "^2.1.7"
1818
},
1919
"devDependencies": {
2020
"@tooling/eslint-config": "workspace:*",

‎examples/vite/src/Pinia/Icon.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts" setup>
2+
defineProps<{
3+
name: 'moon' | 'log' | 'shuffle' | 'reset'
4+
}>()
5+
</script>
6+
7+
<template>
8+
<svg v-if="name === 'moon'" width="16" height="16" viewBox="0 0 24 24">
9+
<path
10+
fill="currentColor"
11+
d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025q.337.025.662.075q-1.025.725-1.637 1.887Q11.1 6.15 11.1 7.5q0 2.25 1.575 3.825Q14.25 12.9 16.5 12.9q1.375 0 2.525-.613q1.15-.612 1.875-1.637q.05.325.075.662Q21 11.65 21 12q0 3.75-2.625 6.375T12 21Z"
12+
/>
13+
</svg>
14+
15+
<svg v-else-if="name === 'log'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
16+
<path
17+
fill="currentColor"
18+
d="M20 19V7H4v12h16m0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16m-7 14v-2h5v2h-5m-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59l3.99-4Z"
19+
/>
20+
</svg>
21+
22+
<svg v-else-if="name === 'reset'" width="16" height="16" viewBox="0 0 32 32">
23+
<path fill="currentColor" d="M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z" />
24+
</svg>
25+
26+
<svg v-else-if="name === 'shuffle'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
27+
<path
28+
fill="currentColor"
29+
d="M14 20v-2h2.6l-3.175-3.175L14.85 13.4L18 16.55V14h2v6zm-8.6 0L4 18.6L16.6 6H14V4h6v6h-2V7.4zm3.775-9.425L4 5.4L5.4 4l5.175 5.175z"
30+
/>
31+
</svg>
32+
</template>

‎examples/vite/src/Pinia/PiniaExample.vue

Lines changed: 52 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,79 @@
11
<script lang="ts" setup>
22
import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
33
import useStore from './store'
4+
import Icon from './Icon.vue'
45
56
const store = useStore()
67
78
const { onConnect, addEdges } = useVueFlow()
89
9-
onConnect(addEdges)
10+
onConnect((params) => addEdges([params]))
1011
</script>
1112

1213
<template>
13-
<VueFlow v-model="store.elements" fit-view-on-init>
14-
<Panel position="top-center">
15-
<button @click="store.updatePosition">update positions</button>
16-
<button @click="store.toggleClass">toggle class</button>
17-
<button @click="store.log">log store state</button>
18-
<button @click="store.reset">reset elements</button>
14+
<VueFlow v-model:nodes="store.nodes" v-model:edges="store.edges" class="pinia-flow" fit-view-on-init>
15+
<Panel position="top-right">
16+
<div class="buttons-panel">
17+
<button @click="store.updatePositions">
18+
<Icon name="shuffle" />
19+
</button>
20+
<button @click="store.toggleClass">
21+
<Icon name="moon" />
22+
</button>
23+
<button @click="store.log">
24+
<Icon name="log" />
25+
</button>
26+
<button @click="store.reset">
27+
<Icon name="reset" />
28+
</button>
29+
</div>
1930
</Panel>
2031
</VueFlow>
2132
</template>
2233

23-
<style scoped>
34+
<style>
35+
.pinia-flow {
36+
background-color: #1a192b;
37+
height: 100%;
38+
width: 100%;
39+
}
40+
41+
.buttons-panel {
42+
display: flex;
43+
gap: 10px;
44+
}
45+
2446
.vue-flow__panel {
25-
background-color: #fff;
26-
border: 1px solid #ddd;
27-
border-radius: 4px;
28-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
29-
color: #333;
30-
font-size: 0.8rem;
31-
margin: 0.25rem;
32-
padding: 0.25rem 0.5rem;
47+
background-color: #2d3748;
48+
padding: 10px;
49+
border-radius: 8px;
50+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
51+
display: flex;
52+
flex-direction: column;
3353
}
3454
3555
.vue-flow__panel button {
36-
background-color: #f5f5f5;
37-
border: 1px solid #ddd;
38-
border-radius: 4px;
39-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
40-
color: #333;
56+
border: none;
4157
cursor: pointer;
42-
font-size: 0.8rem;
43-
margin: 0.25rem;
44-
padding: 0.25rem 0.5rem;
58+
background-color: #4a5568;
59+
border-radius: 8px;
60+
color: white;
61+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
62+
width: 40px;
63+
height: 40px;
64+
font-size: 16px;
65+
display: flex;
66+
align-items: center;
67+
justify-content: center;
4568
}
4669
4770
.vue-flow__panel button:hover {
48-
background-color: #e5e5e5;
71+
background-color: #2563eb;
72+
transition: background-color 0.2s;
4973
}
5074
51-
.vue-flow__panel button:active {
52-
background-color: #d5d5d5;
53-
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
75+
.vue-flow__node.dark {
76+
background-color: #2d3748;
77+
color: white;
5478
}
5579
</style>

‎examples/vite/src/Pinia/store.ts

Lines changed: 72 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,80 @@
11
import { defineStore } from 'pinia'
2-
import { isNode } from '@vue-flow/core'
3-
4-
const useStore = defineStore('elementsStore', {
5-
state() {
6-
return {
7-
foo: ['bar', 'baz'],
8-
elements: [
9-
{
10-
id: '1',
11-
type: 'input',
12-
label: 'Node 1',
13-
position: { x: 250, y: 5 },
14-
class: 'light',
15-
},
16-
{
17-
id: '2',
18-
label: 'Node 2',
19-
position: { x: 100, y: 100 },
20-
class: 'light',
21-
},
22-
{
23-
id: '3',
24-
label: 'Node 3',
25-
position: { x: 400, y: 100 },
26-
class: 'light',
27-
},
28-
{
29-
id: '4',
30-
label: 'Node 4',
31-
position: { x: 400, y: 200 },
32-
class: 'light',
33-
},
34-
{ id: 'e1-2', source: '1', target: '2' },
35-
{ id: 'e1-3', source: '1', target: '3' },
36-
{ id: 'e3-4', source: '3', target: '4' },
37-
],
38-
}
39-
},
40-
actions: {
41-
reset() {
42-
this.elements = []
2+
import { ref } from 'vue'
3+
import type { Edge, Node } from '@vue-flow/core'
4+
5+
const useStore = defineStore('vue-flow-pinia', () => {
6+
const nodes = ref<Node[]>([
7+
{
8+
id: '1',
9+
type: 'input',
10+
label: 'Node 1',
11+
position: { x: 250, y: 5 },
12+
class: 'light',
4313
},
44-
log() {
45-
console.log('stored elements', this.elements)
14+
{
15+
id: '2',
16+
label: 'Node 2',
17+
position: { x: 100, y: 100 },
18+
class: 'light',
4619
},
47-
toggleClass() {
48-
this.elements.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
20+
{
21+
id: '3',
22+
label: 'Node 3',
23+
position: { x: 400, y: 100 },
24+
class: 'light',
4925
},
50-
updatePosition() {
51-
this.elements.forEach((el) => {
52-
if (isNode(el)) {
53-
el.position = {
54-
x: Math.random() * 400,
55-
y: Math.random() * 400,
56-
}
57-
}
58-
})
26+
{
27+
id: '4',
28+
label: 'Node 4',
29+
position: { x: 400, y: 200 },
30+
class: 'light',
5931
},
60-
},
32+
])
33+
34+
const edges = ref<Edge[]>([
35+
{ id: 'e1-2', source: '1', target: '2' },
36+
{ id: 'e1-3', source: '1', target: '3' },
37+
{ id: 'e3-4', source: '3', target: '4' },
38+
])
39+
40+
const reset = () => {
41+
edges.value = []
42+
nodes.value = []
43+
}
44+
45+
const log = () => {
46+
console.log('nodes', nodes.value, 'edges', edges.value)
47+
}
48+
49+
const toggleClass = () => {
50+
nodes.value = nodes.value.map((node) => {
51+
return {
52+
...node,
53+
class: node.class === 'dark' ? 'light' : 'dark',
54+
}
55+
})
56+
}
57+
58+
const updatePositions = () => {
59+
nodes.value = nodes.value.map((node) => {
60+
return {
61+
...node,
62+
position: {
63+
x: Math.random() * 400,
64+
y: Math.random() * 400,
65+
},
66+
}
67+
})
68+
}
69+
70+
return {
71+
nodes,
72+
edges,
73+
reset,
74+
log,
75+
toggleClass,
76+
updatePositions,
77+
}
6178
})
6279

6380
export default useStore

0 commit comments

Comments
 (0)