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

docs: update config page

Browse Source
This commit is contained in:
braks
2024-06-13 23:00:26 +02:00
parent c7049e3216
commit 20d18eeed2
1 changed files with 191 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
docs/src/guide/vue-flow/config.md
View File

@@ -61,38 +61,6 @@ const toggleNodesDraggable = () => {
It is used for the lookup and injection of the state instance. It is used for the lookup and injection of the state instance.
### modelValue (optional)
- Type: [`Elements`](/typedocs/types/Elements)
- Details:
An array of elements (nodes + edges).
Use either the modelValue prop or nodes/edges separately. __Do not mix them!__
- Example:
```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
const elements = ref([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
{ id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e1-2', source: '1', target: '2', animated: true },
])
</script>
<template>
<div style="height: 300px">
<VueFlow v-model="elements" />
</div>
</template>
```
### nodes (optional) ### nodes (optional)
- Type: [`Node[]`](/typedocs/interfaces/Node) - Type: [`Node[]`](/typedocs/interfaces/Node)
@@ -107,19 +75,36 @@ const elements = ref([
```vue ```vue
<script setup> <script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
const nodes = ref([ const nodes = ref([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } }, {
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, }, id: '1',
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } }, type: 'input',
{ id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } }, position: { x: 250, y: 5 },
data: { label: 'Node 1' },
},
{
id: '2',
position: { x: 100, y: 100 },
data: { label: 'Node 2' },
},
{
id: '3',
position: { x: 400, y: 100 },
data: { label: 'Node 3' },
},
{
id: '4',
type: 'output',
position: { x: 400, y: 200 },
data: { label: 'Node 4' },
},
]) ])
</script> </script>
<template> <template>
<div style="height: 300px"> <VueFlow :nodes="nodes" />
<VueFlow :nodes="nodes" />
</div>
</template> </template>
``` ```
@@ -140,21 +125,77 @@ const nodes = ref([
import { VueFlow } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
const nodes = ref([ const nodes = ref([
{
id: '1',
type: 'input',
position: { x: 250, y: 5 },
data: { label: 'Node 1' },
},
{
id: '2',
position: { x: 100, y: 100 },
data: { label: 'Node 2' },
},
{
id: '3',
position: { x: 400, y: 100 },
data: { label: 'Node 3' },
},
{
id: '4',
type: 'output',
position: { x: 400, y: 200 },
data: { label: 'Node 4' },
},
])
const edges = ref([
{
id: 'e1->3',
source: '1',
target: '3'
},
{
id: 'e1->2',
source: '1',
target: '2',
},
])
</script>
<template>
<VueFlow :nodes="nodes" :edges="edges" />
</template>
```
### modelValue (optional) (deprecated)
- Type: [`Elements`](/typedocs/types/Elements)
- Details:
An array of elements (nodes + edges).
Use either the modelValue prop or nodes/edges separately. __Do not mix them!__
- Example:
```vue
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
const elements = ref([
{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } }, { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, }, { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } }, { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
{ id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } }, { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
])
const edges = ref([
{ id: 'e1-3', source: '1', target: '3' }, { id: 'e1-3', source: '1', target: '3' },
{ id: 'e1-2', source: '1', target: '2', animated: true }, { id: 'e1-2', source: '1', target: '2', animated: true },
]) ])
</script> </script>
<template> <template>
<div style="height: 300px"> <VueFlow v-model="elements" />
<VueFlow :nodes="nodes" :edges="edges" />
</div>
</template> </template>
``` ```
@@ -172,6 +213,7 @@ const edges = ref([
```vue ```vue
<script setup> <script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
import CustomNode from './CustomNode.vue' import CustomNode from './CustomNode.vue'
@@ -180,18 +222,25 @@ const nodeTypes = {
} }
const nodes = ref([ const nodes = ref([
{ id: '1', type: 'custom', label: 'Node 1', position: { x: 250, y: 5 } }, {
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, }, id: '1',
type: 'custom',
position: { x: 250, y: 5 },
data: { label: 'Node 1' },
},
{
id: '2',
position: { x: 100, y: 100 },
data: { label: 'Node 2' },
},
]) ])
const edges = ref([ const edges = ref([
{ id: 'e1-2', source: '1', target: '2', animated: true }, { id: 'e1->2', source: '1', target: '2' },
]) ])
</script> </script>
<template> <template>
<div style="height: 300px"> <VueFlow :nodes="nodes" :edges="edges" :node-types="nodeTypes" />
<VueFlow :nodes="nodes" :edges="edges" :node-types="nodeTypes" />
</div>
</template> </template>
``` ```
@@ -209,6 +258,7 @@ const edges = ref([
```vue ```vue
<script setup> <script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
import CustomEdge from './CustomEdge.vue' import CustomEdge from './CustomEdge.vue'
@@ -217,18 +267,30 @@ const edgeTypes = {
} }
const nodes = ref([ const nodes = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } }, {
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, }, id: '1',
type: 'custom',
position: { x: 250, y: 5 },
data: { label: 'Node 1' },
},
{
id: '2',
position: { x: 100, y: 100 },
data: { label: 'Node 2' },
},
]) ])
const edges = ref([ const edges = ref([
{ id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true }, {
id: 'e1->2',
type: 'custom',
source: '1',
target: '2'
},
]) ])
</script> </script>
<template> <template>
<div style="height: 300px"> <VueFlow :nodes="nodes" :edges="edges" :edge-types="edgeTypes" />
<VueFlow :nodes="nodes" :edges="edges" :edge-types="edgeTypes" />
</div>
</template> </template>
``` ```
@@ -245,25 +307,13 @@ const edges = ref([
If you want to have full control of state changes, you can disable the default behavior and apply your own change If you want to have full control of state changes, you can disable the default behavior and apply your own change
handlers to the state. handlers to the state.
Check the [controlled flow](/guide/controlled-flow) guide for more information.
- Example: - Example:
```vue ```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
const nodes = ref([
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
])
const edges = ref([
{ id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true },
])
</script>
<template> <template>
<div style="height: 300px"> <VueFlow :apply-default="false" />
<VueFlow :nodes="nodes" :edges="edges" :apply-default="false" />
</div>
</template> </template>
``` ```
@@ -523,17 +573,26 @@ const edges = ref([
- Example: - Example:
```vue{5-6,10} ```vue
<script setup> <script setup>
const elements = ref([ import { ref } from 'vue'
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } }, import { VueFlow } from '@vue-flow/core'
// This will overwrite the globally set option of nodes-draggable const nodesDraggable = ref(false)
{ id: '2', draggable: true, label: 'Node 2', position: { x: 100, y: 100 } },
const nodes = ref([
{ id: '1', position: { x: 250, y: 5 } },
{
id: '2',
// This will overwrite the globally set option of nodes-draggable
draggable: true,
position: { x: 100, y: 100 }
},
]) ])
</script> </script>
<template> <template>
<VueFlow :nodes-draggable="false" /> <VueFlow :nodes="nodes" :nodes-draggable="nodesDraggable" />
</template> </template>
``` ```
@@ -551,17 +610,26 @@ const elements = ref([
- Example: - Example:
```vue{5-6,10} ```vue
<script setup> <script setup>
const elements = ref([ import { ref } from 'vue'
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } }, import { VueFlow } from '@vue-flow/core'
const nodesConnectable = ref(false)
// This will overwrite the globally set option of nodes-connectable const nodes = ref([
{ id: '2', connectable: true, label: 'Node 2', position: { x: 100, y: 100 } }, { id: '1', position: { x: 250, y: 5 } },
{
id: '2',
// This will overwrite the globally set option of nodes-connectable
connectable: true,
position: { x: 100, y: 100 }
},
]) ])
</script> </script>
<template> <template>
<VueFlow :nodes-connectable="false" /> <VueFlow :nodes="nodes" :nodes-connectable="nodesConnectable" />
</template> </template>
``` ```
@@ -586,17 +654,23 @@ const elements = ref([
- Example: - Example:
```vue{5-6} ```vue
<script setup> <script setup>
const elements = ref([ import { ref } from 'vue'
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } }, import { VueFlow } from '@vue-flow/core'
// This will overwrite the globally set option of node-extent const nodes = ref([
{ id: '2', extent: [[-100, -100], [100, 100]], label: 'Node 2', position: { x: 100, y: 100 } }, { id: '1', position: { x: 250, y: 5 } },
{
id: '2',
extent: [[-100, -100], [100, 100]],
position: { x: 100, y: 100 }
},
]) ])
</script> </script>
<template> <template>
<VueFlow /> <VueFlow :nodes="nodes" />
</template> </template>
``` ```
@@ -648,19 +722,30 @@ const elements = ref([
- Example: - Example:
```vue{7-8,12} ```vue
<script setup> <script setup>
const elements = ref([ import { ref } from 'vue'
{ id: '1', label: 'Node 1', position: { x: 250, y: 5 } }, import { VueFlow } from '@vue-flow/core'
{ id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
const edgesUpdatable = ref(false)
{ id: 'e1-3', source: '1', target: '3' }, const nodes = ref([
// Overwrites global edges-updatable config { id: '1', position: { x: 250, y: 5 } },
{ id: 'e1-2', updatable: true, source: '1', target: '2', animated: true }, { id: '2', position: { x: 100, y: 100 } },
])
const edges = ref([
{ id: 'e1->2', source: '1', target: '2' },
{
id: 'e1->3',
// Overwrites global edges-updatable config
updatable: true,
source: '1', target: '3',
},
]) ])
</script> </script>
<template> <template>
<VueFlow :edges-updatable="false" /> <VueFlow :nodes="nodes" :edges="edges" :edges-updatable="edgesUpdatable" />
</template> </template>
``` ```
@@ -706,7 +791,7 @@ const elements = ref([
Does not work for the `addEdge` utility! Does not work for the `addEdge` utility!
### auto-connect (optional) ### auto-connect (optional) (deprecated)
- Type: `boolean` | [`Connector`](/typedocs/types/Connector) - Type: `boolean` | [`Connector`](/typedocs/types/Connector)
@@ -733,11 +818,13 @@ const elements = ref([
#### [Connector](/typedocs/types/Connector) #### [Connector](/typedocs/types/Connector)
```vue{6-18,22} ```vue
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
const elements = ref([/** elements omitted for simplicity */]) const nodes = ref([/** ... */])
const edges = ref([/** ... */])
const connector = (params) => { const connector = (params) => {
if (params.source === params.target) { if (params.source === params.target) {
@@ -755,7 +842,7 @@ const connector = (params) => {
</script> </script>
<template> <template>
<VueFlow v-model="elements" :auto-connect="connector" /> <VueFlow :nodes="nodes" :edges="edges" :auto-connect="connector" />
</template> </template>
``` ```