diff --git a/.changeset/lemon-news-kiss.md b/.changeset/lemon-news-kiss.md new file mode 100644 index 00000000..aafcd0c9 --- /dev/null +++ b/.changeset/lemon-news-kiss.md @@ -0,0 +1,5 @@ +--- +'@vue-flow/core': minor +--- + +Pass node intersections to node drag events (on single node drag) diff --git a/.changeset/neat-snakes-mix.md b/.changeset/neat-snakes-mix.md index 86ff894b..803c3060 100644 --- a/.changeset/neat-snakes-mix.md +++ b/.changeset/neat-snakes-mix.md @@ -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() @@ -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' : '' +}) +```