Skip to content

Commit

Permalink
chore: add changeset
Browse files Browse the repository at this point in the history
  • Loading branch information
bcakmakoglu committed Nov 4, 2022
1 parent 632fa93 commit 9530290
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/lemon-news-kiss.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@vue-flow/core': minor
---

Pass node intersections to node drag events (on single node drag)
24 changes: 24 additions & 0 deletions .changeset/neat-snakes-mix.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ Add intersection utils to help with checking if a node intersects with either ot

### Usage

- You can either use the action `getIntersectingNodes` to find all nodes that intersect with a given node

```js
const { onNodeDrag, getIntersectingNodes, getNodes } = useVueFlow()

Expand All @@ -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' : ''
})
```

2 comments on commit 9530290

@vercel
Copy link

@vercel vercel bot commented on 9530290 Nov 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 9530290 Nov 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.