From 18a31d21a3ed2db8bcf2db6c4d6da0366d532de2 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 24 Aug 2022 16:23:51 +0200 Subject: [PATCH] docs: update node guide --- docs/src/guide/node.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/docs/src/guide/node.md b/docs/src/guide/node.md index ef5686db..a6da3c0b 100644 --- a/docs/src/guide/node.md +++ b/docs/src/guide/node.md @@ -383,6 +383,8 @@ interface CustomNodeProps extends NodeProps { events: CustomNodeEvents } +const props = defineProps() + props.events.click(() => { console.log(`Node ${props.id} clicked`) }) @@ -390,6 +392,7 @@ props.events.click(() => { // custom events are just functions, they are not hooks which you can listen to like `click` props.events.customEvent('custom event triggered') + @@ -413,14 +416,14 @@ When you create a new node type you also need to implement some styling. Your cu } ``` -### Allow scrolling inside a node +## Allow 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 that element. By default, the `noWheelClassName` is `.nowheel`. By adding this class you can also enable scrolling inside a node. -### Dynamic handle positions / Adding handles dynamically +## Dynamic handle positions / Adding handles dynamically When working with dynamic handle positions or adding handles dynamically, you need to use the [`updateNodeInternals`](/typedocs/types/UpdateNodeInternals) method. @@ -431,7 +434,7 @@ misaligned. You can either use the store action to update multiple nodes at once by passing their ids into the method, or you can emit the `updateNodeInternals` event from your custom node component without passing any parameters. -#### Examples +### Examples - Using store action