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

Author: bcakmakoglu

.changeset/fifty-cherries-perform.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Remove node intersections from drag event args

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);
 }

docs/src/.vitepress/config.mts

@@ -210,7 +210,6 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
             { text: 'Screenshot', link: '/examples/screenshot' },
             { text: 'Confirm Delete', link: '/examples/confirm' },
             { text: 'Hidden', link: '/examples/hidden' },
-            { text: 'Node Intersections', link: '/examples/intersection' },
             { text: 'Multiple Flows', link: '/examples/multi' },
             { text: 'Pinia Store', link: '/examples/pinia' },
             { text: 'Viewport Transition', link: '/examples/transition' },
@@ -224,6 +223,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
           items: [
             { text: 'Custom Node', link: '/examples/nodes/' },
             { text: 'Update Node', link: '/examples/nodes/update-node' },
+            { text: 'Intersections', link: '/examples/nodes/intersection' },
             { text: 'Nested Nodes', link: '/examples/nodes/nesting' },
             { text: 'Node Resizer', link: '/examples/nodes/node-resizer' },
             { text: 'Node Toolbar', link: '/examples/nodes/node-toolbar' },

docs/src/examples/intersection.md

@@ -0,0 +1,9 @@
+# Node Intersections
+
+Sometimes you need to know if two nodes intersect. `useVueFlow` provides you methods like `getIntersectingNodes`
+or `isNodeIntersection` to help you find out when two or more nodes intersect,
+or if a node intersects with a given area.
+
+<div class="mt-6">
+  <Repl example="intersection"></Repl>
+</div>

docs/src/examples/nodes/intersection.md

@@ -50,7 +50,6 @@ const NodeWrapper = defineComponent({
       addSelectedNodes,
       updateNodeDimensions,
       onUpdateNodeInternals,
-      getIntersectingNodes,
       getNodeTypes,
       nodeExtent,
       elevateNodesOnSelect,
@@ -120,17 +119,16 @@ const NodeWrapper = defineComponent({
       id: props.id,
       el: nodeElement,
       disabled: () => !isDraggable.value,
-      selectable: () => isSelectable.value,
+      selectable: isSelectable,
       dragHandle: () => node.dragHandle,
       onStart(args) {
-        // todo: remove intersections from here - they are not needed and only reduce performance
-        emit.dragStart({ ...args, intersections: getIntersectingNodes(node) })
+        emit.dragStart(args)
       },
       onDrag(args) {
-        emit.drag({ ...args, intersections: getIntersectingNodes(node) })
+        emit.drag(args)
       },
       onStop(args) {
-        emit.dragStop({ ...args, intersections: getIntersectingNodes(node) })
+        emit.dragStop(args)
       },
     })
 

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -21,7 +21,6 @@ export interface NodeDragEvent {
   event: MouseTouchEvent
   node: GraphNode
   nodes: GraphNode[]
-  intersections?: GraphNode[]
 }
 
 export interface EdgeMouseEvent {