From 0825101ebe8ef7e6fed8edcacf1f384e2d12128f Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 9 Jun 2024 07:12:00 +0200
Subject: [PATCH] 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
---
 .changeset/fifty-cherries-perform.md          |  5 +++
 docs/examples/intersection/App.vue            | 40 ++++++++++++++++---
 docs/examples/intersection/style.css          | 18 ++++++++-
 docs/src/.vitepress/config.mts                |  2 +-
 docs/src/examples/intersection.md             |  7 ----
 docs/src/examples/nodes/intersection.md       |  9 +++++
 .../core/src/components/Nodes/NodeWrapper.ts  | 10 ++---
 packages/core/src/types/hooks.ts              |  1 -
 8 files changed, 70 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/fifty-cherries-perform.md
 delete mode 100644 docs/src/examples/intersection.md
 create mode 100644 docs/src/examples/nodes/intersection.md

diff --git a/.changeset/fifty-cherries-perform.md b/.changeset/fifty-cherries-perform.md
new file mode 100644
index 00000000..728e6424
--- /dev/null
+++ b/.changeset/fifty-cherries-perform.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Remove node intersections from drag event args
diff --git a/docs/examples/intersection/App.vue b/docs/examples/intersection/App.vue
index c9e997cb..cda8038e 100644
--- a/docs/examples/intersection/App.vue
+++ b/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>
diff --git a/docs/examples/intersection/style.css b/docs/examples/intersection/style.css
index 78844900..f6c7f832 100644
--- a/docs/examples/intersection/style.css
+++ b/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);
 }
diff --git a/docs/src/.vitepress/config.mts b/docs/src/.vitepress/config.mts
index 0be970ad..94787aa9 100644
--- a/docs/src/.vitepress/config.mts
+++ b/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' },
diff --git a/docs/src/examples/intersection.md b/docs/src/examples/intersection.md
deleted file mode 100644
index 89f907d1..00000000
--- a/docs/src/examples/intersection.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Intersection
-
-Vue Flow provides utils to find intersections of nodes with other nodes (or a given area).
-
-<div class="mt-6">
-  <Repl example="intersection"></Repl>
-</div>
diff --git a/docs/src/examples/nodes/intersection.md b/docs/src/examples/nodes/intersection.md
new file mode 100644
index 00000000..09121eec
--- /dev/null
+++ b/docs/src/examples/nodes/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>
diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts
index 36be4f15..663a42e1 100644
--- a/packages/core/src/components/Nodes/NodeWrapper.ts
+++ b/packages/core/src/components/Nodes/NodeWrapper.ts
@@ -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)
       },
     })
 
diff --git a/packages/core/src/types/hooks.ts b/packages/core/src/types/hooks.ts
index cad49e44..64181002 100644
--- a/packages/core/src/types/hooks.ts
+++ b/packages/core/src/types/hooks.ts
@@ -21,7 +21,6 @@ export interface NodeDragEvent {
   event: MouseTouchEvent
   node: GraphNode
   nodes: GraphNode[]
-  intersections?: GraphNode[]
 }
 
 export interface EdgeMouseEvent {