diff --git a/.changeset/neat-snakes-mix.md b/.changeset/neat-snakes-mix.md index fd244842..86ff894b 100644 --- a/.changeset/neat-snakes-mix.md +++ b/.changeset/neat-snakes-mix.md @@ -3,3 +3,18 @@ --- Add intersection utils to help with checking if a node intersects with either other nodes or a given area + +### Usage + +```js +const { onNodeDrag, getIntersectingNodes, getNodes } = useVueFlow() + +onNodeDrag(({ node }) => { + const intersections = getIntersectingNodes(node).map((n) => n.id) + + getNodes.value.forEach((n) => { + // highlight nodes that are intersecting with the dragged node + n.class = intersections.includes(n.id) ? 'highlight' : '' + }) +}) +``` diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 178d947c..66c27dc7 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -462,7 +462,7 @@ export default (state: State, getters: ComputedGetters): Actions => { return [nodeRect, node, isRectObj] } - const getIntersectionNodes: Actions['getIntersectionNodes'] = (nodeOrRect, partially = true, nodes) => { + const getIntersectingNodes: Actions['getIntersectingNodes'] = (nodeOrRect, partially = true, nodes) => { const [nodeRect, node, isRect] = getNodeRect(nodeOrRect) if (!nodeRect) return [] @@ -574,7 +574,7 @@ export default (state: State, getters: ComputedGetters): Actions => { endConnection, setInteractive, setState, - getIntersectionNodes, + getIntersectingNodes, isNodeIntersecting, fitView: async (params = { padding: 0.1 }) => { const { fitView } = await paneReady() diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts index 317ae38f..3058741b 100644 --- a/packages/core/src/types/store.ts +++ b/packages/core/src/types/store.ts @@ -221,7 +221,7 @@ export interface Actions extends ViewportFunctions { updateNodeDimensions: UpdateNodeDimensions /** returns all node intersections */ - getIntersectionNodes: GetIntersectingNodes + getIntersectingNodes: GetIntersectingNodes /** check if a node is intersecting with a defined area */ isNodeIntersecting: IsNodeIntersecting