Skip to content

Commit c7957df

Browse files
committed
chore(examples): update nuxt example
1 parent 7b39b45 commit c7957df

File tree

9 files changed

+3016
-880
lines changed

9 files changed

+3016
-880
lines changed

examples/nuxt3/app.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
</template>
44

55
<style>
6+
@import './style.css';
67
@import '@vue-flow/core/dist/style.css';
78
@import '@vue-flow/core/dist/theme-default.css';
9+
@import '@vue-flow/controls/dist/style.css';
810
911
html,
1012
body,
@@ -18,7 +20,5 @@ body,
1820
font-family: 'JetBrains Mono', monospace;
1921
-webkit-font-smoothing: antialiased;
2022
-moz-osx-font-smoothing: grayscale;
21-
text-align: center;
22-
color: #2c3e50;
2323
}
2424
</style>

examples/nuxt3/components/BasicFlow.vue

-121
This file was deleted.

examples/nuxt3/components/Flow.vue

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
import { VueFlow, useVueFlow } from '@vue-flow/core'
4+
import { Background } from '@vue-flow/background'
5+
import { ControlButton, Controls } from '@vue-flow/controls'
6+
import { MiniMap } from '@vue-flow/minimap'
7+
import { initialEdges, initialNodes } from './initial-elements.js'
8+
import Icon from './Icon.vue'
9+
10+
/**
11+
* useVueFlow provides all event handlers and store properties
12+
* You can pass the composable an object that has the same properties as the VueFlow component props
13+
*/
14+
const { onPaneReady, onNodeDragStop, onConnect, addEdges, setViewport, toObject } = useVueFlow()
15+
16+
const nodes = ref(initialNodes)
17+
18+
const edges = ref(initialEdges)
19+
20+
// our dark mode toggle flag
21+
const dark = ref(false)
22+
23+
/**
24+
* This is a Vue Flow event-hook which can be listened to from anywhere you call the composable, instead of only on the main component
25+
* Any event that is available as `@event-name` on the VueFlow component is also available as `onEventName` on the composable and vice versa
26+
*
27+
* onPaneReady is called when viewpane & nodes have visible dimensions
28+
*/
29+
onPaneReady(({ fitView }) => {
30+
fitView()
31+
})
32+
33+
/**
34+
* onNodeDragStop is called when a node is done being dragged
35+
*
36+
* Node drag events provide you with:
37+
* 1. the event object
38+
* 2. the nodes array (if multiple nodes are dragged)
39+
* 3. the node that initiated the drag
40+
* 4. any intersections with other nodes
41+
*/
42+
onNodeDragStop(({ event, nodes, node, intersections }) => {
43+
console.log('Node Drag Stop', { event, nodes, node, intersections })
44+
})
45+
46+
/**
47+
* onConnect is called when a new connection is created.
48+
*
49+
* You can add additional properties to your new edge (like a type or label) or block the creation altogether by not calling `addEdges`
50+
*/
51+
onConnect((connection) => {
52+
addEdges(connection)
53+
})
54+
55+
/**
56+
* To update a node or multiple nodes, you can
57+
* 1. Mutate the node objects *if* you're using `v-model`
58+
* 2. Use the `updateNode` method (from `useVueFlow`) to update the node(s)
59+
* 3. Create a new array of nodes and pass it to the `nodes` ref
60+
*/
61+
function updatePos() {
62+
nodes.value = nodes.value.map((node) => {
63+
return {
64+
...node,
65+
position: {
66+
x: Math.random() * 400,
67+
y: Math.random() * 400,
68+
},
69+
}
70+
})
71+
}
72+
73+
/**
74+
* toObject transforms your current graph data to an easily persist-able object
75+
*/
76+
function logToObject() {
77+
console.log(toObject())
78+
}
79+
80+
/**
81+
* Resets the current viewport transformation (zoom & pan)
82+
*/
83+
function resetTransform() {
84+
setViewport({ x: 0, y: 0, zoom: 1 })
85+
}
86+
87+
function toggleDarkMode() {
88+
dark.value = !dark.value
89+
}
90+
</script>
91+
92+
<template>
93+
<VueFlow
94+
:nodes="nodes"
95+
:edges="edges"
96+
:class="{ dark }"
97+
class="basicflow"
98+
:default-viewport="{ zoom: 1.5 }"
99+
:min-zoom="0.2"
100+
:max-zoom="4"
101+
>
102+
<Background pattern-color="#aaa" :gap="16" />
103+
104+
<MiniMap />
105+
106+
<Controls position="top-right">
107+
<ControlButton title="Reset Transform" @click="resetTransform">
108+
<Icon name="reset" />
109+
</ControlButton>
110+
111+
<ControlButton title="Shuffle Node Positions" @click="updatePos">
112+
<Icon name="update" />
113+
</ControlButton>
114+
115+
<ControlButton title="Toggle Dark Mode" @click="toggleDarkMode">
116+
<Icon v-if="dark" name="sun" />
117+
<Icon v-else name="moon" />
118+
</ControlButton>
119+
120+
<ControlButton title="Log `toObject`" @click="logToObject">
121+
<Icon name="log" />
122+
</ControlButton>
123+
</Controls>
124+
</VueFlow>
125+
</template>

examples/nuxt3/components/Icon.vue

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script setup>
2+
defineProps({
3+
name: {
4+
type: String,
5+
required: true,
6+
},
7+
})
8+
</script>
9+
10+
<template>
11+
<svg v-if="name === 'reset'" width="16" height="16" viewBox="0 0 32 32">
12+
<path 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" />
13+
</svg>
14+
15+
<svg v-if="name === 'update'" width="16" height="16" viewBox="0 0 24 24">
16+
<path
17+
d="M14 20v-2h2.6l-3.2-3.2l1.425-1.425L18 16.55V14h2v6Zm-8.6 0L4 18.6L16.6 6H14V4h6v6h-2V7.4Zm3.775-9.425L4 5.4L5.4 4l5.175 5.175Z"
18+
/>
19+
</svg>
20+
21+
<svg v-if="name === 'sun'" width="16" height="16" viewBox="0 0 24 24">
22+
<path
23+
d="M12 17q-2.075 0-3.537-1.463Q7 14.075 7 12t1.463-3.538Q9.925 7 12 7t3.538 1.462Q17 9.925 17 12q0 2.075-1.462 3.537Q14.075 17 12 17ZM2 13q-.425 0-.712-.288Q1 12.425 1 12t.288-.713Q1.575 11 2 11h2q.425 0 .713.287Q5 11.575 5 12t-.287.712Q4.425 13 4 13Zm18 0q-.425 0-.712-.288Q19 12.425 19 12t.288-.713Q19.575 11 20 11h2q.425 0 .712.287q.288.288.288.713t-.288.712Q22.425 13 22 13Zm-8-8q-.425 0-.712-.288Q11 4.425 11 4V2q0-.425.288-.713Q11.575 1 12 1t.713.287Q13 1.575 13 2v2q0 .425-.287.712Q12.425 5 12 5Zm0 18q-.425 0-.712-.288Q11 22.425 11 22v-2q0-.425.288-.712Q11.575 19 12 19t.713.288Q13 19.575 13 20v2q0 .425-.287.712Q12.425 23 12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7q.013-.425.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7q0 .4-.275.7q-.275.3-.687.287q-.413-.012-.713-.287ZM18 19.425l-1.05-1.075q-.275-.3-.275-.712q0-.413.275-.688q.275-.3.688-.287q.412.012.712.287L19.425 18q.3.275.288.7q-.013.425-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.287-.688q.012-.412.287-.712L18 4.575q.275-.3.7-.288q.425.013.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275q-.4 0-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.713-.275q.412 0 .687.275q.3.275.288.688q-.013.412-.288.712L6 19.425q-.275.3-.7.287q-.425-.012-.725-.287Z"
24+
/>
25+
</svg>
26+
27+
<svg v-if="name === 'moon'" width="16" height="16" viewBox="0 0 24 24">
28+
<path
29+
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"
30+
/>
31+
</svg>
32+
33+
<svg v-if="name === 'log'" width="16" height="16" viewBox="0 0 24 24">
34+
<path
35+
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"
36+
/>
37+
</svg>
38+
</template>
+9-40
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,16 @@
11
import { MarkerType } from '@vue-flow/core'
22

3-
/**
4-
* You can pass elements together as a v-model value
5-
* or split them up into nodes and edges and pass them to the `nodes` and `edges` props of Vue Flow (or useVueFlow composable)
6-
*/
7-
export const initialElements = [
8-
{
9-
id: '1',
10-
type: 'input',
11-
label: 'Node 1',
12-
position: { x: 250, y: 5 },
13-
class: 'light',
14-
},
15-
{
16-
id: '2',
17-
type: 'output',
18-
label: 'Node 2',
19-
position: { x: 100, y: 100 },
20-
class: 'light',
21-
},
3+
export const initialNodes = [
4+
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 0 }, class: 'light' },
5+
{ id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
226
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
237
{ id: '4', label: 'Node 4', position: { x: 150, y: 200 }, class: 'light' },
24-
{
25-
id: '5',
26-
type: 'output',
27-
label: 'Node 5',
28-
position: { x: 300, y: 300 },
29-
class: 'light',
30-
},
8+
{ id: '5', type: 'output', label: 'Node 5', position: { x: 300, y: 300 }, class: 'light' },
9+
]
10+
11+
export const initialEdges = [
3112
{ id: 'e1-2', source: '1', target: '2', animated: true },
32-
{
33-
id: 'e1-3',
34-
label: 'edge with arrowhead',
35-
source: '1',
36-
target: '3',
37-
markerEnd: MarkerType.Arrow,
38-
},
13+
{ id: 'e1-3', label: 'edge with arrowhead', source: '1', target: '3', markerEnd: MarkerType.ArrowClosed },
3914
{
4015
id: 'e4-5',
4116
type: 'step',
@@ -45,11 +20,5 @@ export const initialElements = [
4520
style: { stroke: 'orange' },
4621
labelBgStyle: { fill: 'orange' },
4722
},
48-
{
49-
id: 'e3-4',
50-
type: 'smoothstep',
51-
label: 'smoothstep-edge',
52-
source: '3',
53-
target: '4',
54-
},
23+
{ id: 'e3-4', type: 'smoothstep', label: 'smoothstep-edge', source: '3', target: '4' },
5524
]

examples/nuxt3/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414
},
1515
"devDependencies": {
1616
"@tooling/eslint-config": "workspace:*",
17-
"nuxt": "^3.7.4"
17+
"nuxt": "^3.10.2"
1818
}
1919
}

examples/nuxt3/pages/index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
22
<div style="height: 100%">
3-
<BasicFlow />
3+
<Flow />
44
</div>
55
</template>

0 commit comments

Comments
 (0)