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

chore(docs): update node and edge doc page

Browse Source
This commit is contained in:
braks
2023-06-08 18:50:35 +02:00
committed by Braks
parent 12f4284a0a
commit 6eb5e5a986
3 changed files with 227 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/auto-imports.d.ts
Vendored
+11 -1
View File
@@ -19,7 +19,9 @@ declare global {
const createGlobalState: typeof import('@vueuse/core')['createGlobalState'] const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
const createInjectionState: typeof import('@vueuse/core')['createInjectionState'] const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn'] const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable'] const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn'] const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
const customRef: typeof import('vue')['customRef'] const customRef: typeof import('vue')['customRef']
const debouncedRef: typeof import('@vueuse/core')['debouncedRef'] const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
@@ -87,8 +89,9 @@ declare global {
const throttledWatch: typeof import('@vueuse/core')['throttledWatch'] const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
const toRaw: typeof import('vue')['toRaw'] const toRaw: typeof import('vue')['toRaw']
const toReactive: typeof import('@vueuse/core')['toReactive'] const toReactive: typeof import('@vueuse/core')['toReactive']
const toRef: typeof import('vue')['toRef'] const toRef: typeof import('@vueuse/core')['toRef']
const toRefs: typeof import('vue')['toRefs'] const toRefs: typeof import('vue')['toRefs']
const toValue: typeof import('@vueuse/core')['toValue']
const triggerRef: typeof import('vue')['triggerRef'] const triggerRef: typeof import('vue')['triggerRef']
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount'] const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount'] const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -99,11 +102,14 @@ declare global {
const unrefElement: typeof import('@vueuse/core')['unrefElement'] const unrefElement: typeof import('@vueuse/core')['unrefElement']
const until: typeof import('@vueuse/core')['until'] const until: typeof import('@vueuse/core')['until']
const useActiveElement: typeof import('@vueuse/core')['useActiveElement'] const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
const useAnimate: typeof import('@vueuse/core')['useAnimate']
const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery'] const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter'] const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
const useArrayFind: typeof import('@vueuse/core')['useArrayFind'] const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex'] const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast'] const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin'] const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
const useArrayMap: typeof import('@vueuse/core')['useArrayMap'] const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce'] const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -189,6 +195,8 @@ declare global {
const useOnline: typeof import('@vueuse/core')['useOnline'] const useOnline: typeof import('@vueuse/core')['useOnline']
const usePageLeave: typeof import('@vueuse/core')['usePageLeave'] const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
const useParallax: typeof import('@vueuse/core')['useParallax'] const useParallax: typeof import('@vueuse/core')['useParallax']
const useParentElement: typeof import('@vueuse/core')['useParentElement']
const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
const usePermission: typeof import('@vueuse/core')['usePermission'] const usePermission: typeof import('@vueuse/core')['usePermission']
const usePointer: typeof import('@vueuse/core')['usePointer'] const usePointer: typeof import('@vueuse/core')['usePointer']
const usePointerLock: typeof import('@vueuse/core')['usePointerLock'] const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
@@ -254,8 +262,10 @@ declare global {
const watchArray: typeof import('@vueuse/core')['watchArray'] const watchArray: typeof import('@vueuse/core')['watchArray']
const watchAtMost: typeof import('@vueuse/core')['watchAtMost'] const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
const watchDebounced: typeof import('@vueuse/core')['watchDebounced'] const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
const watchDeep: typeof import('@vueuse/core')['watchDeep']
const watchEffect: typeof import('vue')['watchEffect'] const watchEffect: typeof import('vue')['watchEffect']
const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable'] const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
const watchOnce: typeof import('@vueuse/core')['watchOnce'] const watchOnce: typeof import('@vueuse/core')['watchOnce']
const watchPausable: typeof import('@vueuse/core')['watchPausable'] const watchPausable: typeof import('@vueuse/core')['watchPausable']
const watchPostEffect: typeof import('vue')['watchPostEffect'] const watchPostEffect: typeof import('vue')['watchPostEffect']
docs/src/guide/edge.md
+128 -80
View File
@@ -1,3 +1,74 @@
<script setup>
import { VueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import Check from '~icons/mdi/check';
import Close from '~icons/mdi/close';
import { ref } from 'vue';
const nodes = [
{
id: '1',
type: 'input',
label: 'Node 1',
position: { x: 50, y: 25 },
},
{
id: '2',
label: 'Node 2',
position: { x: 100, y: 125 },
},
];
const bezierEdge = ref([
...nodes,
{
id: 'e1-2',
source: '1',
target: '2',
}
]);
const stepEdge = ref([
...nodes,
{
id: 'e1-2',
type: 'step',
source: '1',
target: '2',
},
]);
const smoothStepEdge = ref([
...nodes,
{
id: 'e1-2',
type: 'smoothstep',
source: '1',
target: '2',
},
]);
const straightEdge = ref([
{
id: '1',
type: 'input',
label: 'Node 1',
position: { x: 50, y: 25 },
},
{
id: '2',
label: 'Node 2',
position: { x: 50, y: 125 },
},
{
id: 'e1-2',
type: 'straight',
source: '1',
target: '2',
},
]);
</script>
# Edges # Edges
Edges are what connects your nodes into a map. Edges are what connects your nodes into a map.
@@ -5,9 +76,8 @@ Edges are what connects your nodes into a map.
They cannot exist on their own and need nodes to which they are connected. They cannot exist on their own and need nodes to which they are connected.
Each edge <span class="font-bold text-blue-500">requires a unique id, a source node and a target node id.</span> Each edge <span class="font-bold text-blue-500">requires a unique id, a source node and a target node id.</span>
Anything else is optional.
You can check the full options for an edge element in the TypeDocs [here](/typedocs/types/Edge). You can view the full options-list for an edge [here](/typedocs/types/Edge).
## Usage ## Usage
@@ -55,9 +125,8 @@ export default defineComponent({
``` ```
For more advanced graphs that require more state access you will want to use the useVueFlow composable. For more advanced graphs that require more state access you will want to use the useVueFlow composable.
[useVueFlow](/typedocs/functions/useVueFlow) will provide [useVueFlow](/typedocs/functions/useVueFlow) will provide the [`addEdges`](/typedocs/interfaces/Actions#addedges/) action,
you with an [`addEdges`](/typedocs/interfaces/Actions#addedges/) utility function, which you can use to add edges which you can use to add edges directly to the state.
directly to the state.
```vue ```vue
<script setup> <script setup>
@@ -98,10 +167,6 @@ onMounted(() => {
</template> </template>
``` ```
You can also apply changes (like removing elements safely) using
the [`applyEdgeChanges`](/typedocs/interfaces/Actions#applyedgechanges/) utility function, which expects an array
of [changes](/typedocs/types/EdgeChange) to be applied to the currently stored edges.
## [Default Edge-Types](/typedocs/interfaces/DefaultEdgeTypes) ## [Default Edge-Types](/typedocs/interfaces/DefaultEdgeTypes)
Vue Flow comes with built-in edges that you can use right out of the box. Vue Flow comes with built-in edges that you can use right out of the box.
@@ -109,73 +174,54 @@ These edge types include `default` (bezier), `step`, `smoothstep` and `straight`
### Default Edge (Bezier) ### Default Edge (Bezier)
A bezier edge has a curved path. The default edge is a bezier curve that connects two nodes.
```js <div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
const edges = [ <VueFlow v-model="bezierEdge">
{ <Background />
id: 'e1-2', </VueFlow>
source: '1', </div>
target: '2',
}
]
```
### Step Edge ### Step Edge
A step edge has a straight path with a step towards the target. A step edge has a straight path with a step towards the target.
```js{4} <div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
const edges = [ <VueFlow v-model="stepEdge">
{ <Background />
id: 'e1-2', </VueFlow>
type: 'step', </div>
source: '1',
target: '2',
}
]
```
### Smoothstep Edge ### Smoothstep Edge
The same as the step edge though with a border radius on the step (rounded step). The same as the step edge though with a border radius on the step (rounded step).
```js{4} <div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
const edges = [ <VueFlow v-model="smoothStepEdge">
{ <Background />
id: 'e1-2', </VueFlow>
type: 'smoothstep', </div>
source: '1',
target: '2',
}
]
```
### Straight Edge ### Straight Edge
A simple straight path. A simple straight path.
```js{4} <div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
const edges = [ <VueFlow v-model="straightEdge">
{ <Background />
id: 'e1-2', </VueFlow>
type: 'straight', </div>
source: '1',
target: '2',
}
]
```
## Custom Edges ## Custom Edges
In addition to the default edge types from the previous chapter, you can define any amount of custom edge-types. In addition to the default edge types from the previous chapter, you can define any amount of custom edge-types.
Edge-types are inferred from your edge's definition. Edge-types are inferred from your edge's definition.
```js{5,11} ```js{4}
const edges = [ const edges = [
{ {
id: 'e1-2', id: 'e1-2',
type: 'special', type: 'custom',
source: '1', source: '1',
target: '2', target: '2',
}, },
@@ -195,6 +241,8 @@ The easiest way to define custom edges is, by passing them as template slots.
Your custom edge-types are dynamically resolved to slot-names, meaning an edge with the type `custom` Your custom edge-types are dynamically resolved to slot-names, meaning an edge with the type `custom`
will expect a slot to have the name `edge-custom`. will expect a slot to have the name `edge-custom`.
You can choose any name you want for your edge-type, and it will be resolved to the corresponding slot (i.e. `my-edge-type` -> `#edge-my-edge-type`)
```vue{18,26} ```vue{18,26}
<script setup> <script setup>
import { VueFlow } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
@@ -277,7 +325,7 @@ const elements = ref([
You can also set a template per edge, which will overwrite the edge-type component but will retain You can also set a template per edge, which will overwrite the edge-type component but will retain
the type otherwise. the type otherwise.
```vue ```vue{30}
<script setup> <script setup>
import { markRaw } from 'vue' import { markRaw } from 'vue'
import CustomEdge from './CustomEdge.vue' import CustomEdge from './CustomEdge.vue'
@@ -293,7 +341,7 @@ const elements = ref([
label: 'Node 2', label: 'Node 2',
position: { x: 0, y: 150 }, position: { x: 0, y: 150 },
}, },
{ {
id: '3', id: '3',
label: 'Node 3', label: 'Node 3',
position: { x: 0, y: 300 }, position: { x: 0, y: 300 },
@@ -324,33 +372,33 @@ Your custom edges are wrapped so that the basic functions like selecting work.
But you might want to extend on that functionality or implement your own business logic inside of edges, therefore But you might want to extend on that functionality or implement your own business logic inside of edges, therefore
your edges receive the following props: your edges receive the following props:
| Name | Definition | Type | Optional | | Name | Definition | Type | Optional |
|---------------------|-------------------------------|-----------------------------------------------|----------| |---------------------|-------------------------------|------------------------------------------------|--------------------------------------------|
| id | Edge id | string | false | | id | Edge id | string | <Close class="text-red-500" /> |
| source | The source node id | string | false | | source | The source node id | string | <Close class="text-red-500" /> |
| target | The target node id | string | false | | target | The target node id | string | <Close class="text-red-500" /> |
| sourceNode | The source node | GraphNode | false | | sourceNode | The source node | GraphNode | <Close class="text-red-500" /> |
| targetNode | The target node | GraphNode | false | | targetNode | The target node | GraphNode | <Close class="text-red-500" /> |
| sourceX | X position of source handle | number | false | | sourceX | X position of source handle | number | <Close class="text-red-500" /> |
| sourceY | Y position of source handle | number | false | | sourceY | Y position of source handle | number | <Close class="text-red-500" /> |
| targetX | X position of target handle | number | false | | targetX | X position of target handle | number | <Close class="text-red-500" /> |
| targetY | Y position of target handle | number | false | | targetY | Y position of target handle | number | <Close class="text-red-500" /> |
| type | Edge type | string | true | | type | Edge type | string | <Check class="text-[var(--vp-c-brand)]" /> |
| sourceHandleId | Source handle id | string | true | | sourceHandleId | Source handle id | string | <Check class="text-[var(--vp-c-brand)]" /> |
| targetHandleId | Target handle id | string | true | | targetHandleId | Target handle id | string | <Check class="text-[var(--vp-c-brand)]" /> |
| data | Custom data object | Any object | true | | data | Custom data object | Any object | <Check class="text-[var(--vp-c-brand)]" /> |
| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | true | | events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | <Check class="text-[var(--vp-c-brand)]" /> |
| label | Edge label | string, Component | true | | label | Edge label | string, Component | <Check class="text-[var(--vp-c-brand)]" /> |
| labelStyle | Additional label styles | CSSProperties | true | | labelStyle | Additional label styles | CSSProperties | <Check class="text-[var(--vp-c-brand)]" /> |
| labelShowBg | Enable/Disable label bg | boolean | true | | labelShowBg | Enable/Disable label bg | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
| labelBgPadding | Edge label bg padding | number | true | | labelBgPadding | Edge label bg padding | number | <Check class="text-[var(--vp-c-brand)]" /> |
| labelBgBorderRadius | Edge label bg border radius | number | true | | labelBgBorderRadius | Edge label bg border radius | number | <Check class="text-[var(--vp-c-brand)]" /> |
| selected | Is edge selected | boolean | true | | selected | Is edge selected | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
| animated | Is edge animated | boolean | true | | animated | Is edge animated | boolean | <Check class="text-[var(--vp-c-brand)]" /> |
| updatable | Is edge updatable | [EdgeUpdatable](/typedocs/types/EdgeUpdatable)| true | | updatable | Is edge updatable | [EdgeUpdatable](/typedocs/types/EdgeUpdatable) | <Check class="text-[var(--vp-c-brand)]" /> |
| markerEnd | Edge marker id | string | true | | markerEnd | Edge marker id | string | <Check class="text-[var(--vp-c-brand)]" /> |
| markerStart | Edge marker id | string | true | | markerStart | Edge marker id | string | <Check class="text-[var(--vp-c-brand)]" /> |
| curvature | Edge path curvature | number | true | | curvature | Edge path curvature | number | <Check class="text-[var(--vp-c-brand)]" /> |
### (Custom) Edge Events ### (Custom) Edge Events
docs/src/guide/node.md
+88 -69
View File
@@ -1,3 +1,37 @@
<script setup>
import { VueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import Check from '~icons/mdi/check';
import Close from '~icons/mdi/close';
import { ref } from 'vue';
const defaultNode = ref([
{
id: '1',
label: 'Default Node',
position: { x: 50, y: 75 },
}
]);
const inputNode = ref([
{
id: '1',
type: 'input',
label: 'Input Node',
position: { x: 50, y: 75 },
}
]);
const outputNode = ref([
{
id: '1',
type: 'output',
label: 'Output Node',
position: { x: 50, y: 75 },
}
]);
</script>
# Nodes # Nodes
Nodes are the building blocks of your graph. They represent any sort of data you want to present in your graph. Nodes are the building blocks of your graph. They represent any sort of data you want to present in your graph.
@@ -5,10 +39,9 @@ Nodes are the building blocks of your graph. They represent any sort of data you
They can exist on their own but can be connected to each other with edges to create a map. They can exist on their own but can be connected to each other with edges to create a map.
Each node <span class="font-bold text-blue-500">requires a unique id and Each node <span class="font-bold text-blue-500">requires a unique id and
a [xy-position](/typedocs/interfaces/XYPosition).</span> an [xy-position](/typedocs/interfaces/XYPosition).</span>
Anything else is optional.
You can check the full options for a node element [here](/typedocs/interfaces/Node). You can view the full options-list for a node [here](/typedocs/interfaces/Node).
## Usage ## Usage
@@ -43,6 +76,7 @@ export default defineComponent({
} }
}) })
</script> </script>
<template> <template>
<div style="height: 300px"> <div style="height: 300px">
<VueFlow v-model="elements" /> <VueFlow v-model="elements" />
@@ -51,9 +85,10 @@ export default defineComponent({
``` ```
For more advanced graphs that require more state access you will want to use the useVueFlow composable. For more advanced graphs that require more state access you will want to use the useVueFlow composable.
[useVueFlow](/typedocs/functions/useVueFlow) will provide [useVueFlow](/typedocs/functions/useVueFlow) will provide the [`addNodes`](/typedocs/interfaces/Actions#addnodes) action,
you with an [`addNodes`](/typedocs/interfaces/Actions#addnodes) utility function, which you can use to add nodes which you can use to add nodes directly to the state.
directly to the state.
This action can be even be used outside the component that is rendering the graph, like a Sidebar or a Toolbar.
```vue ```vue
<script setup> <script setup>
@@ -81,42 +116,7 @@ onMounted(() => {
]) ])
}) })
</script> </script>
<template>
<div style="height: 300px">
<VueFlow />
</div>
</template>
```
You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/Actions#applynodechanges/) utility
function,
which expects an array of [changes](/typedocs/types/NodeChange) to be applied to the currently stored nodes.
```vue{11,17-22}
<script setup>
import { VueFlow, useVueFlow } from '@vue-flow/core'
const initialNodes = ref([
{
id: '1',
position: { x: 50, y: 50 },
label: 'Node 1',
}
])
const { applyNodeChanges } = useVueFlow({
nodes: initialNodes,
})
onMounted(() => {
// Remove an element after mount
applyNodeChanges([
{
id: '1',
type: 'remove',
}
])
})
</script>
<template> <template>
<div style="height: 300px"> <div style="height: 300px">
<VueFlow /> <VueFlow />
@@ -131,7 +131,11 @@ These node types include `default`, `input` and `output`.
### Default Node ### Default Node
![vue flow default node](https://images.prismic.io/bcakmakoglu/235b4a10-5bdc-41c0-ba3f-4fb402fba65f_Default-node.png?auto=compress,format) <div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
<VueFlow v-model="defaultNode">
<Background />
</VueFlow>
</div>
A default node comes with two handles. A default node comes with two handles.
It represents a branching point in your map. It represents a branching point in your map.
@@ -151,14 +155,23 @@ const nodes = [
### Input Node ### Input Node
![vue flow input node](https://images.prismic.io/bcakmakoglu/fd871fe3-6c5f-4ef1-8e71-fb66d947866b_Input-node.png?auto=compress,format) <div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
<VueFlow v-model="inputNode">
<Background />
</VueFlow>
</div>
An input node has a single handle, located at the bottom by default. An input node has a single handle, located at the bottom by default.
It represents a starting point of your map. It represents a starting point of your map.
### Output Node ### Output Node
![vue flow output node](https://images.prismic.io/bcakmakoglu/abe32a60-d0a4-40ee-a710-092570d4d128_Output-node.png?auto=compress,format) <div class="mt-4 bg-[var(--vp-code-block-bg)] rounded h-50">
<VueFlow v-model="outputNode">
<Background />
</VueFlow>
</div>
An output node has a single handle, located at the top by default. An output node has a single handle, located at the top by default.
It represents an ending point of your map. It represents an ending point of your map.
@@ -311,25 +324,25 @@ Your custom nodes are wrapped so that the basic functions like dragging or selec
But you might want to extend on that functionality or implement your own business logic inside of nodes, therefore But you might want to extend on that functionality or implement your own business logic inside of nodes, therefore
your nodes receive the following props: your nodes receive the following props:
| Name | Definition | Type | Optional | | Name | Definition | Type | Optional |
|------------------|--------------------------------------------------|------------------------------------------------------------|----------| |------------------|--------------------------------------------------|------------------------------------------------------------|--------------------------------------------|
| id | Node id | string | false | | id | Node id | string | <Close class="text-red-500" /> |
| type | Node type | string | false | | type | Node type | string | <Close class="text-red-500" /> |
| selected | Is node selected | boolean | false | | selected | Is node selected | boolean | <Close class="text-red-500" /> |
| dragging | Is node dragging | boolean | false | | dragging | Is node dragging | boolean | <Close class="text-red-500" /> |
| connectable | Is node connectable | boolean | false | | connectable | Is node connectable | boolean | <Close class="text-red-500" /> |
| position | Relative position of a node | [XYPosition](/typedocs/interfaces/XYPosition) | false | | position | Relative position of a node | [XYPosition](/typedocs/interfaces/XYPosition) | <Close class="text-red-500" /> |
| zIndex | Node z-index | number | false | | zIndex | Node z-index | number | <Close class="text-red-500" /> |
| dimensions | Node size | [Dimensions](/typedocs/interfaces/Dimensions) | false | | dimensions | Node size | [Dimensions](/typedocs/interfaces/Dimensions) | <Close class="text-red-500" /> |
| data | Custom data object | Any object | true | | data | Custom data object | Any object | <Check class="text-[var(--vp-c-brand)]" /> |
| events | Node events and custom events | [NodeEventsOn](/typedocs/types/NodeEventsOn) | true | | events | Node events and custom events | [NodeEventsOn](/typedocs/types/NodeEventsOn) | <Check class="text-[var(--vp-c-brand)]" /> |
| label | Node label | string, Component | true | | label | Node label | string, Component | <Check class="text-[var(--vp-c-brand)]" /> |
| isValidTargetPos | Called when target handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | true | | isValidTargetPos | Called when target handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | <Check class="text-[var(--vp-c-brand)]" /> |
| isValidSourcePos | Called when source handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | true | | isValidSourcePos | Called when source handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc) | <Check class="text-[var(--vp-c-brand)]" /> |
| parentNode | Parent node id | string | true | | parentNode | Parent node id | string | <Check class="text-[var(--vp-c-brand)]" /> |
| targetPosition | Target handle position | [Position](/typedocs/enums/Position) | true | | targetPosition | Target handle position | [Position](/typedocs/enums/Position) | <Check class="text-[var(--vp-c-brand)]" /> |
| sourcePosition | Source handle position | [Position](/typedocs/enums/Position) | true | | sourcePosition | Source handle position | [Position](/typedocs/enums/Position) | <Check class="text-[var(--vp-c-brand)]" /> |
| dragHandle | Node drag handle class | string | true | | dragHandle | Node drag handle class | string | <Check class="text-[var(--vp-c-brand)]" /> |
### (Custom) Node Events ### (Custom) Node Events
@@ -339,7 +352,7 @@ you can also pass in event handlers in your initial node definition, or you can
the `events` prop passed the `events` prop passed
to your node components. to your node components.
```vue{9-13} ```vue{10-17}
<script setup> <script setup>
import { VueFlow } from '@vue-flow/core' import { VueFlow } from '@vue-flow/core'
@@ -416,12 +429,18 @@ When you create a new node type you also need to implement some styling. Your cu
} }
``` ```
## Allow scrolling inside a node ## Scrolling inside a node
You can use the `noWheelClassName` prop to define a class which will prevent zoom-on-scroll or pan-on-scroll behavior on You can use the `noWheelClassName` prop to define a class name which will prevent zoom-on-scroll or pan-on-scroll behavior on
that element. that node.
By default, the `noWheelClassName` is `.nowheel`. By default, the `noWheelClassName` is `nowheel`.
By adding this class you can also enable scrolling inside a node. By adding this class you can enable scrolling inside a node without triggering zoom-pan behavior.
## Dragging inside a node
You can use the `noDragClassName` prop to define a class name which will not trigger dragging behavior on
that node.
By default, the `noDragClassName` is `nodrag`.
## Dynamic handle positions / Adding handles dynamically ## Dynamic handle positions / Adding handles dynamically