alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

examples: update pinia example (#1458)

Browse Source 
* examples: update pinia example

* chore(examples): update pinia dep

* examples: add icons to pinia panel

* docs(examples): update pinia example
This commit is contained in:
Braks
2024-06-08 16:07:50 +02:00
committed by GitHub
parent 9bd813dc59
commit 6503b3e9ed
6 changed files with 181 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/vite/package.json
View File

@@ -14,7 +14,7 @@
"@vue-flow/minimap": "workspace:*",
"@vue-flow/node-resizer": "workspace:*",
"@vue-flow/node-toolbar": "workspace:*",
"pinia": "^2.1.6"
"pinia": "^2.1.7"
},
"devDependencies": {
"@tooling/eslint-config": "workspace:*",

32
examples/vite/src/Pinia/Icon.vue Normal file
View File

@@ -0,0 +1,32 @@
<script lang="ts" setup>
defineProps<{
name: 'moon' | 'log' | 'shuffle' | 'reset'
}>()
</script>
<template>
<svg v-if="name === 'moon'" width="16" height="16" viewBox="0 0 24 24">
<path
fill="currentColor"
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"
/>
</svg>
<svg v-else-if="name === 'log'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
fill="currentColor"
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"
/>
</svg>
<svg v-else-if="name === 'reset'" width="16" height="16" viewBox="0 0 32 32">
<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" />
</svg>
<svg v-else-if="name === 'shuffle'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
fill="currentColor"
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"
/>
</svg>
</template>

80
examples/vite/src/Pinia/PiniaExample.vue
View File

@@ -1,55 +1,79 @@
<script lang="ts" setup>
import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
import useStore from './store'
import Icon from './Icon.vue'
const store = useStore()
const { onConnect, addEdges } = useVueFlow()
onConnect(addEdges)
onConnect((params) => addEdges([params]))
</script>
<template>
<VueFlow v-model="store.elements" fit-view-on-init>
<Panel position="top-center">
<button @click="store.updatePosition">update positions</button>
<button @click="store.toggleClass">toggle class</button>
<button @click="store.log">log store state</button>
<button @click="store.reset">reset elements</button>
<VueFlow v-model:nodes="store.nodes" v-model:edges="store.edges" class="pinia-flow" fit-view-on-init>
<Panel position="top-right">
<div class="buttons-panel">
<button @click="store.updatePositions">
<Icon name="shuffle" />
</button>
<button @click="store.toggleClass">
<Icon name="moon" />
</button>
<button @click="store.log">
<Icon name="log" />
</button>
<button @click="store.reset">
<Icon name="reset" />
</button>
</div>
</Panel>
</VueFlow>
</template>
<style scoped>
<style>
.pinia-flow {
background-color: #1a192b;
height: 100%;
width: 100%;
}
.buttons-panel {
display: flex;
gap: 10px;
}
.vue-flow__panel {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
color: #333;
font-size: 0.8rem;
margin: 0.25rem;
padding: 0.25rem 0.5rem;
background-color: #2d3748;
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
.vue-flow__panel button {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
color: #333;
border: none;
cursor: pointer;
font-size: 0.8rem;
margin: 0.25rem;
padding: 0.25rem 0.5rem;
background-color: #4a5568;
border-radius: 8px;
color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
width: 40px;
height: 40px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.vue-flow__panel button:hover {
background-color: #e5e5e5;
background-color: #2563eb;
transition: background-color 0.2s;
}
.vue-flow__panel button:active {
background-color: #d5d5d5;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
.vue-flow__node.dark {
background-color: #2d3748;
color: white;
}
</style>

125
examples/vite/src/Pinia/store.ts
View File

@@ -1,63 +1,80 @@
import { defineStore } from 'pinia'
import { isNode } from '@vue-flow/core'
import { ref } from 'vue'
import type { Edge, Node } from '@vue-flow/core'
const useStore = defineStore('elementsStore', {
state() {
return {
foo: ['bar', 'baz'],
elements: [
{
id: '1',
type: 'input',
label: 'Node 1',
position: { x: 250, y: 5 },
class: 'light',
},
{
id: '2',
label: 'Node 2',
position: { x: 100, y: 100 },
class: 'light',
},
{
id: '3',
label: 'Node 3',
position: { x: 400, y: 100 },
class: 'light',
},
{
id: '4',
label: 'Node 4',
position: { x: 400, y: 200 },
class: 'light',
},
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4' },
],
}
},
actions: {
reset() {
this.elements = []
const useStore = defineStore('vue-flow-pinia', () => {
const nodes = ref<Node[]>([
{
id: '1',
type: 'input',
label: 'Node 1',
position: { x: 250, y: 5 },
class: 'light',
},
log() {
console.log('stored elements', this.elements)
{
id: '2',
label: 'Node 2',
position: { x: 100, y: 100 },
class: 'light',
},
toggleClass() {
this.elements.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
{
id: '3',
label: 'Node 3',
position: { x: 400, y: 100 },
class: 'light',
},
updatePosition() {
this.elements.forEach((el) => {
if (isNode(el)) {
el.position = {
x: Math.random() * 400,
y: Math.random() * 400,
}
}
})
{
id: '4',
label: 'Node 4',
position: { x: 400, y: 200 },
class: 'light',
},
},
])
const edges = ref<Edge[]>([
{ id: 'e1-2', source: '1', target: '2' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4' },
])
const reset = () => {
edges.value = []
nodes.value = []
}
const log = () => {
console.log('nodes', nodes.value, 'edges', edges.value)
}
const toggleClass = () => {
nodes.value = nodes.value.map((node) => {
return {
...node,
class: node.class === 'dark' ? 'light' : 'dark',
}
})
}
const updatePositions = () => {
nodes.value = nodes.value.map((node) => {
return {
...node,
position: {
x: Math.random() * 400,
y: Math.random() * 400,
},
}
})
}
return {
nodes,
edges,
reset,
log,
toggleClass,
updatePositions,
}
})
export default useStore