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

docs: documentation for new node events property

Browse Source
This commit is contained in:
bcakmakoglu
2022-06-23 19:13:50 +02:00
committed by Braks
parent 439aa49c23
commit 7d47904a81
1 changed files with 83 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/node.md
+83 -21
View File
@@ -91,7 +91,7 @@ onMounted(() => {
You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/Actions.html#applynodechanges/) utility function, You can also apply changes using the [`applyNodeChanges`](/typedocs/interfaces/Actions.html#applynodechanges/) utility function,
which expects an array of [changes](/typedocs/types/NodeChange.html/) to be applied to the currently stored nodes. which expects an array of [changes](/typedocs/types/NodeChange.html/) to be applied to the currently stored nodes.
```vue:no-line-numbers ```vue:no-line-numbers{11,17-22}
<script setup> <script setup>
import { VueFlow, useVueFlow } from '@braks/vue-flow' import { VueFlow, useVueFlow } from '@braks/vue-flow'
@@ -271,7 +271,7 @@ You can find a more advanced example [here](/examples/custom-node.html/).
You can also set a template per node, which will overwrite the node-type component but will retain You can also set a template per node, which will overwrite the node-type component but will retain
the type otherwise. the type otherwise.
```vue:no-line-numbers ```vue:no-line-numbers{17}
<script setup> <script setup>
import { markRaw } from 'vue' import { markRaw } from 'vue'
import CustomNode from './CustomNode.vue' import CustomNode from './CustomNode.vue'
@@ -310,24 +310,86 @@ 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 | false |
| type | Node type | string | false | | type | Node type | string | false |
| selected | Is node selected | boolean | false | | selected | Is node selected | boolean | false |
| dragging | Is node dragging | boolean | false | | dragging | Is node dragging | boolean | false |
| connectable | Is node connectable | boolean | false | | connectable | Is node connectable | boolean | false |
| position | Relative position of a node | XYPosition | false | | position | Relative position of a node | [XYPosition](/typedocs/interfaces/XYPosition.html/) | false |
| zIndex | Node z-index | number | false | | zIndex | Node z-index | number | false |
| dimensions | Node size | Dimensions | false | | dimensions | Node size | [Dimensions](/typedocs/interfaces/Dimensions.html) | false |
| data | Custom data object | Any object | true | | data | Custom data object | Any object | true |
| label | Node label | string, Component | true | | events | Node events and custom events | [NodeEventsOn](/typedocs/types/NodeEventsOn.html/) | true |
| isValidTargetPos | Called when target handle is used for connection | Function | true | | label | Node label | string, Component | true |
| isValidSourcePos | Called when source handle is used for connection | Function | true | | isValidTargetPos | Called when target handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc.html/) | true |
| parentNode | Parent node id | string | true | | isValidSourcePos | Called when source handle is used for connection | [ValidConnectionFunc](/typedocs/types/ValidConnectionFunc.html/) | true |
| targetPosition | Target handle position | Position | true | | parentNode | Parent node id | string | true |
| sourcePosition | Source handle position | Position | true | | targetPosition | Target handle position | [Position](/typedocs/enums/Position.html/) | true |
| dragHandle | Node drag handle class | string | true | | sourcePosition | Source handle position | [Position](/typedocs/enums/Position.html/) | true |
| dragHandle | Node drag handle class | string | true |
### [(Custom) Node Events](/typedocs/interfaces/NodeEvents.html/)
In addition to the event handlers that you can access through [`useVueFlow`](/guide/composables#useVueFlow/) or the Vue Flow component,
you can also pass in event handlers in your initial node definition, or you can access the node events through the `events` prop passed
to your node components.
```vue:no-line-numbers{9-13}
<script setup>
import { VueFlow } from '@braks/vue-flow'
const elements = ref([
{
id: '1',
label: 'Node 1',
type: 'custom',
position: { x: 50, y: 50 },
events: {
click: () => {
console.log('Node 1 clicked')
},
customEvent: () => {
console.log('Node 1 custom event')
},
}
}
])
</script>
```
As you can see above, you can also pass in custom event handlers. These will not be called by Vue Flow but can be used
to forward callback functions to your custom components.
The `click` handler is part of the [`NodeEvents`](/typedocs/interfaces/NodeEvents.html) interface, meaning it will be
triggered when the node is clicked.
```vue:no-line-numbers
<script setup>
import { NodeProps, NodeEventsOn } from '@braks/vue-flow'
// define your events
interface CustomNodeEvents {
click: NodeEventsOn['click']
customEvent: (input: string) => void
}
interface CustomNodeProps extends NodeProps<any, CustomNodeEvents> {
id: string
events: CustomNodeEvents
}
props.events.click(() => {
console.log(`Node ${props.id} clicked`)
})
// custom events are just functions, they are not hooks which you can listen to like `click`
props.events.customEvent('custom event triggered')
</script>
<template>
<!-- Omitted for simplicty -->
</template>
```
## Styling ## Styling
@@ -351,5 +413,5 @@ When you create a new node type you also need to implement some styling. Your cu
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 which will prevent zoom-on-scroll or pan-on-scroll behavior on
that element. that element.
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 also enable scrolling inside a node.