refactor(core): remove node intersections arg from drag events (#1460)

* refactor(core): remove node intersections arg from drag events

* chore(changeset): add

* docs(examples): update intersection example

docs/examples/intersection/App.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { computed, ref } from 'vue'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 
 /**
  * You can either use `getIntersectingNodes` to check if a given node intersects with others
  * or `isNodeIntersecting` to check if a node is intersecting with a given area
  */
-const { onNodeDrag, getIntersectingNodes, isNodeIntersecting: __, updateNode } = useVueFlow()
+const { onNodeDrag, getIntersectingNodes, isNodeIntersecting, updateNode, screenToFlowCoordinate } = useVueFlow()
 
 const nodes = ref([
   {
@@ -37,8 +37,34 @@ const nodes = ref([
   },
 ])
 
-onNodeDrag(({ node }) => {
-  const intersectionIds = getIntersectingNodes(node).map((intersection) => intersection.id)
+const panelEl = ref()
+
+const isIntersectingWithPanel = ref(false)
+
+const panelPosition = computed(() => {
+  if (!panelEl.value) {
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+    }
+  }
+
+  const { left, top, width, height } = panelEl.value.$el.getBoundingClientRect()
+
+  return {
+    ...screenToFlowCoordinate({ x: left, y: top }),
+    width,
+    height,
+  }
+})
+
+onNodeDrag(({ node: draggedNode }) => {
+  const intersections = getIntersectingNodes(draggedNode)
+  const intersectionIds = intersections.map((intersection) => intersection.id)
+
+  isIntersectingWithPanel.value = isNodeIntersecting(draggedNode, panelPosition.value)
 
   for (const node of nodes.value) {
     const isIntersecting = intersectionIds.includes(node.id)
@@ -49,5 +75,7 @@ onNodeDrag(({ node }) => {
 </script>
 
 <template>
-  <VueFlow :nodes="nodes" fit-view-on-init />
+  <VueFlow :nodes="nodes" fit-view-on-init>
+    <Panel ref="panelEl" position="bottom-right" :class="{ intersecting: isIntersectingWithPanel }"> </Panel>
+  </VueFlow>
 </template>

docs/examples/intersection/style.css

@@ -1,3 +1,19 @@
 .vue-flow__node.intersecting {
-  background-color: yellow;
+  background-color: #f15a16;
+}
+
+.vue-flow__panel {
+  height: 250px;
+  width: 250px;
+  border: 1px dashed #ccc;
+  pointer-events: none !important;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vue-flow__panel.intersecting {
+  border-color: #f15a16;
+  background-color: rgba(241, 90, 22, 0.03);
 }