chore: add changeset
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'@vue-flow/core': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Pass node intersections to node drag events (on single node drag)
|
||||||
@@ -6,6 +6,8 @@ Add intersection utils to help with checking if a node intersects with either ot
|
|||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
|
|
||||||
|
- You can either use the action `getIntersectingNodes` to find all nodes that intersect with a given node
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const { onNodeDrag, getIntersectingNodes, getNodes } = useVueFlow()
|
const { onNodeDrag, getIntersectingNodes, getNodes } = useVueFlow()
|
||||||
|
|
||||||
@@ -18,3 +20,25 @@ onNodeDrag(({ node }) => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
- Node drag events will provide you with the intersecting nodes without having to call the action explicitly.
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
onNodeDrag(({ intersections }) => {
|
||||||
|
getNodes.value.forEach((n) => {
|
||||||
|
n.class = intersections?.some((i) => i.id === n.id) ? 'highlight' : ''
|
||||||
|
})
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
- Or you can use the `isIntersecting` util to check if a node intersects with a given area
|
||||||
|
|
||||||
|
```js
|
||||||
|
const { onNodeDrag, isNodeIntersecting } = useVueFlow()
|
||||||
|
|
||||||
|
onNodeDrag(({ node }) => {
|
||||||
|
// highlight the node if it is intersecting with the given area
|
||||||
|
node.class = isNodeIntersecting(node, { x: 0, y: 0, width: 100, height: 100 }) ? 'highlight' : ''
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user