Skip to content

Commit 24c2091

Browse files
bcakmakoglubcakmakoglu
committed
chore(docs): cleanup examples
1 parent 0348850 commit 24c2091

File tree

13 files changed

+142
-160
lines changed

13 files changed

+142
-160
lines changed

‎docs/examples/nested/App.vue

Lines changed: 69 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,81 @@
11
<script setup>
2-
import { VueFlow, useVueFlow } from '@vue-flow/core'
2+
import { ref } from 'vue'
3+
import { VueFlow } from '@vue-flow/core'
34
import { Background } from '@vue-flow/background'
45
import { Controls } from '@vue-flow/controls'
56
import { MiniMap } from '@vue-flow/minimap'
6-
import { onMounted } from 'vue'
77
8-
const { onConnect, addEdges, addNodes } = useVueFlow({
9-
fitViewOnInit: true,
10-
// set this to true so edges get elevated when selected, defaults to false
11-
elevateEdgesOnSelect: true,
12-
nodes: [
13-
{ id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 } },
14-
{
15-
id: '2',
16-
label: 'parent node',
17-
position: { x: 100, y: 100 },
18-
style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '200px', height: '200px' },
19-
},
20-
{
21-
id: '2a',
22-
label: 'child node',
23-
position: { x: 10, y: 50 },
24-
parentNode: '2',
25-
},
26-
{
27-
id: '4',
28-
label: 'parent node',
29-
position: { x: 320, y: 175 },
30-
style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '400px', height: '300px' },
31-
},
32-
{
33-
id: '4a',
34-
label: 'child node',
35-
position: { x: 15, y: 65 },
36-
extent: 'parent',
37-
parentNode: '4',
38-
},
39-
{
40-
id: '4b',
41-
label: 'nested parent node',
42-
position: { x: 15, y: 120 },
43-
style: { backgroundColor: 'rgba(139, 92, 246, 0.5)', height: '150px', width: '270px' },
44-
parentNode: '4',
45-
},
46-
{
47-
id: '4b1',
48-
label: 'nested child node',
49-
position: { x: 20, y: 40 },
50-
parentNode: '4b',
51-
},
52-
{
53-
id: '4b2',
54-
label: 'nested child node',
55-
position: { x: 100, y: 100 },
56-
parentNode: '4b',
57-
},
58-
{ id: '4c', label: 'child node', position: { x: 200, y: 65 }, parentNode: '4' },
59-
],
60-
edges: [
61-
{ id: 'e1-2', source: '1', target: '2' },
62-
{ id: 'e1-4', source: '1', target: '4' },
63-
{ id: 'e1-4c', source: '1', target: '4c' },
64-
{ id: 'e2a-4a', source: '2a', target: '4a' },
65-
{ id: 'e4a-4b1', source: '4a', target: '4b1' },
66-
{ id: 'e4a-4b2', source: '4a', target: '4b2' },
67-
{ id: 'e4b1-4b2', source: '4b1', target: '4b2' },
68-
],
69-
})
8+
const nodes = ref([
9+
{ id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 } },
10+
{
11+
id: '2',
12+
label: 'parent node',
13+
position: { x: 100, y: 100 },
14+
style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '200px', height: '200px' },
15+
},
16+
{
17+
id: '2a',
18+
label: 'child node',
19+
position: { x: 10, y: 50 },
20+
parentNode: '2',
21+
},
22+
{
23+
id: '4',
24+
label: 'parent node',
25+
position: { x: 320, y: 175 },
26+
style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '400px', height: '300px' },
27+
},
28+
{
29+
id: '4a',
30+
label: 'child node',
31+
position: { x: 15, y: 65 },
32+
extent: 'parent',
33+
parentNode: '4',
34+
},
35+
{
36+
id: '4b',
37+
label: 'nested parent node',
38+
position: { x: 15, y: 120 },
39+
style: { backgroundColor: 'rgba(139, 92, 246, 0.5)', height: '150px', width: '270px' },
40+
parentNode: '4',
41+
},
42+
{
43+
id: '4b1',
44+
label: 'nested child node',
45+
position: { x: 20, y: 40 },
46+
parentNode: '4b',
47+
},
48+
{
49+
id: '4b2',
50+
label: 'nested child node',
51+
position: { x: 100, y: 100 },
52+
parentNode: '4b',
53+
},
54+
{ id: '4c', label: 'child node', position: { x: 200, y: 65 }, parentNode: '4' },
55+
{
56+
id: '999',
57+
type: 'input',
58+
label: 'Drag me to extend area!',
59+
position: { x: 20, y: 100 },
60+
class: 'light',
61+
expandParent: true,
62+
parentNode: '2',
63+
},
64+
])
7065
71-
onConnect((params) => addEdges(params))
72-
73-
onMounted(() => {
74-
// add nodes to parent
75-
addNodes([
76-
{
77-
id: '999',
78-
type: 'input',
79-
label: 'Drag me to extend area!',
80-
position: { x: 20, y: 100 },
81-
class: 'light',
82-
expandParent: true,
83-
parentNode: '2',
84-
},
85-
])
86-
})
66+
const edges = ref([
67+
{ id: 'e1-2', source: '1', target: '2' },
68+
{ id: 'e1-4', source: '1', target: '4' },
69+
{ id: 'e1-4c', source: '1', target: '4c' },
70+
{ id: 'e2a-4a', source: '2a', target: '4a' },
71+
{ id: 'e4a-4b1', source: '4a', target: '4b1' },
72+
{ id: 'e4a-4b2', source: '4a', target: '4b2' },
73+
{ id: 'e4b1-4b2', source: '4b1', target: '4b2' },
74+
])
8775
</script>
8876

8977
<template>
90-
<VueFlow>
78+
<VueFlow :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
9179
<MiniMap />
9280

9381
<Controls />

‎docs/examples/node-resizer/App.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup>
2-
import { VueFlow } from '@vue-flow/core'
32
import { ref } from 'vue'
3+
import { VueFlow } from '@vue-flow/core'
44
import ResizableNode from './ResizableNode.vue'
55
6-
const elements = ref([
6+
const nodes = ref([
77
{
88
id: '1',
99
type: 'resizable',
@@ -15,7 +15,7 @@ const elements = ref([
1515
</script>
1616

1717
<template>
18-
<VueFlow v-model="elements" fit-view-on-init>
18+
<VueFlow :nodes="nodes" fit-view-on-init>
1919
<template #node-resizable="resizableNodeProps">
2020
<ResizableNode :label="resizableNodeProps.label" />
2121
</template>

‎docs/examples/node-toolbar/App.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup>
2-
import { Position, VueFlow } from '@vue-flow/core'
32
import { ref } from 'vue'
3+
import { Position, VueFlow } from '@vue-flow/core'
44
import ToolbarNode from './ToolbarNode.vue'
55
66
const defaultNodeStyle = {
@@ -10,7 +10,7 @@ const defaultNodeStyle = {
1010
borderRadius: '99px',
1111
}
1212
13-
const elements = ref([
13+
const nodes = ref([
1414
{
1515
id: '1',
1616
type: 'toolbar',
@@ -55,7 +55,7 @@ const elements = ref([
5555
</script>
5656

5757
<template>
58-
<VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
58+
<VueFlow :nodes="nodes" fit-view-on-init class="vue-flow-basic-example">
5959
<template #node-toolbar="nodeProps">
6060
<ToolbarNode :data="nodeProps.data" :label="nodeProps.label" />
6161
</template>

‎docs/examples/save-restore/App.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script lang="ts" setup>
2-
import { VueFlow } from '@vue-flow/core'
32
import { ref } from 'vue'
3+
import { VueFlow } from '@vue-flow/core'
44
import SaveRestoreControls from './Controls.vue'
55
6-
const elements = ref([{ id: '1', label: 'Node 1', position: { x: 100, y: 100 } }])
6+
const nodes = ref([{ id: '1', label: 'Node 1', position: { x: 100, y: 100 } }])
77
</script>
88

99
<template>
10-
<VueFlow v-model="elements">
10+
<VueFlow :nodes="nodes">
1111
<SaveRestoreControls />
1212
</VueFlow>
1313
</template>

‎docs/examples/save-restore/Controls.vue

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Panel, useVueFlow } from '@vue-flow/core'
33
44
const flowKey = 'example-flow'
55
6-
const { nodes, addNodes, setNodes, setEdges, dimensions, setTransform, toObject } = useVueFlow()
6+
const { nodes, addNodes, dimensions, toObject, fromObject } = useVueFlow()
77
88
function onSave() {
99
localStorage.setItem(flowKey, JSON.stringify(toObject()))
@@ -13,10 +13,7 @@ function onRestore() {
1313
const flow = JSON.parse(localStorage.getItem(flowKey))
1414
1515
if (flow) {
16-
const [x = 0, y = 0] = flow.position
17-
setNodes(flow.nodes)
18-
setEdges(flow.edges)
19-
setTransform({ x, y, zoom: flow.zoom || 0 })
16+
fromObject(flow)
2017
}
2118
}
2219

‎docs/examples/stress/App.vue

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,30 @@
11
<script setup>
2-
import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
2+
import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
33
import { Background } from '@vue-flow/background'
44
import { MiniMap } from '@vue-flow/minimap'
55
import { nextTick, ref } from 'vue'
66
import { getElements } from './utils.js'
77
8-
const { nodes, edges } = getElements(15, 15)
8+
const { nodes: initialNodes, edges: initialEdges } = getElements(15, 15)
99
10-
const elements = ref([...nodes, ...edges])
10+
const nodes = ref(initialNodes)
1111
12-
const { onPaneReady, dimensions, fitView } = useVueFlow()
12+
const edges = ref(initialEdges)
1313
14-
onPaneReady(({ fitView, getElements }) => {
15-
fitView({ padding: 0.2 })
16-
17-
console.log(getElements.value)
18-
})
14+
const { dimensions, fitView } = useVueFlow()
1915
2016
function toggleClass() {
21-
return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
17+
nodes.value = nodes.value.map((node) => ({ ...node, class: node.class === 'light' ? 'dark' : 'light' }))
2218
}
2319
2420
function updatePos() {
25-
elements.value.forEach((el) => {
26-
if (isNode(el)) {
27-
el.position = {
21+
nodes.value = nodes.value.map((node) => {
22+
return {
23+
...node,
24+
position: {
2825
x: Math.random() * 10 * dimensions.value.width,
2926
y: Math.random() * 10 * dimensions.value.height,
30-
}
27+
},
3128
}
3229
})
3330
@@ -38,7 +35,7 @@ function updatePos() {
3835
</script>
3936

4037
<template>
41-
<VueFlow v-model="elements" :min-zoom="0.1">
38+
<VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.1" fit-view-on-init>
4239
<MiniMap />
4340

4441
<Background />

‎docs/examples/teleport/App.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script setup>
2-
import { VueFlow } from '@vue-flow/core'
32
import { ref } from 'vue'
3+
import { VueFlow } from '@vue-flow/core'
44
import Sidebar from './Sidebar.vue'
55
import TeleportableNode from './TeleportableNode.vue'
66
7-
const elements = ref([
7+
const nodes = ref([
88
{
99
id: '1',
1010
label: 'Click to teleport',
@@ -26,6 +26,9 @@ const elements = ref([
2626
position: { x: 0, y: 200 },
2727
data: {},
2828
},
29+
])
30+
31+
const edges = ref([
2932
{
3033
id: 'e1-2',
3134
source: '1',
@@ -36,7 +39,7 @@ const elements = ref([
3639

3740
<template>
3841
<div class="teleportflow">
39-
<VueFlow v-model="elements" fit-view-on-init>
42+
<VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
4043
<template #node-teleportable="{ id }">
4144
<TeleportableNode :id="id" />
4245
</template>

‎docs/examples/teleport/Sidebar.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
<script setup>
2-
// ...
3-
</script>
4-
51
<template>
62
<aside>
73
<div class="description">Teleport destination</div>

‎docs/examples/transition/App.vue

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ref } from 'vue'
33
import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
44
import TransitionEdge from './TransitionEdge.vue'
55
6-
const elements = ref([
6+
const nodes = ref([
77
{
88
id: '1',
99
type: 'input',
@@ -18,21 +18,19 @@ const elements = ref([
1818
position: { x: 1000, y: 1000 },
1919
targetPosition: Position.Left,
2020
},
21-
22-
{ id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
2321
])
2422
23+
const edges = ref([{ id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true, style: { stroke: '#fff' } }])
24+
2525
const { onPaneReady } = useVueFlow()
2626
27-
onPaneReady((i) => {
28-
i.fitView({
29-
nodes: ['1'],
30-
})
27+
onPaneReady(({ fitView }) => {
28+
fitView({ nodes: ['1'] })
3129
})
3230
</script>
3331

3432
<template>
35-
<VueFlow v-model="elements" :style="{ backgroundColor: '#1A192B' }">
33+
<VueFlow :nodes="nodes" :edges="edges" :style="{ backgroundColor: '#1A192B' }">
3634
<template #edge-custom="props">
3735
<TransitionEdge v-bind="props" />
3836
</template>

‎docs/examples/transition/TransitionEdge.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup>
2+
import { computed, ref } from 'vue'
23
import { TransitionPresets, useDebounceFn, useTransition, watchDebounced } from '@vueuse/core'
34
import { getBezierPath, useVueFlow } from '@vue-flow/core'
4-
import { computed, ref } from 'vue'
55
66
const props = defineProps({
77
id: {

0 commit comments

Comments
 (0)