From e57f22c185bf95f6c2c3a7cb5fc2d84eca4340f5 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 28 Jun 2024 21:46:13 +0200
Subject: [PATCH] fix(core): correct pane pointer evt handlers (#1505)

---
 packages/core/src/container/Pane/Pane.vue | 44 ++++++++---------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index e4bf28b3..40b98111 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/packages/core/src/container/Pane/Pane.vue
@@ -2,7 +2,7 @@
 import { ref, toRef, watch } from 'vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
-import { type GraphNode, SelectionMode } from '../../types'
+import { SelectionMode } from '../../types'
 import { useKeyPress, useVueFlow } from '../../composables'
 import { getConnectedEdges, getNodesInside } from '../../utils'
 import { getMousePosition } from './utils'
@@ -54,28 +54,11 @@ watch(deleteKeyPressed, (isKeyPressed) => {
     return
   }
 
-  const nodesToRemove: GraphNode[] = []
-  for (const node of getNodes.value) {
-    if (!node.selected && node.parentNode && nodesToRemove.some((n) => n.id === node.parentNode)) {
-      nodesToRemove.push(node)
-    } else if (node.selected) {
-      nodesToRemove.push(node)
-    }
-  }
+  removeNodes(getSelectedNodes.value)
 
-  if (nodesToRemove || getSelectedEdges.value) {
-    if (getSelectedEdges.value.length > 0) {
-      removeEdges(getSelectedEdges.value)
-    }
+  removeEdges(getSelectedEdges.value)
 
-    if (nodesToRemove.length > 0) {
-      removeNodes(nodesToRemove)
-    }
-
-    nodesSelectionActive.value = false
-
-    removeSelectedElements()
-  }
+  nodesSelectionActive.value = false
 })
 
 watch(multiSelectKeyPressed, (isKeyPressed) => {
@@ -125,17 +108,14 @@ function onWheel(event: WheelEvent) {
 }
 
 function onPointerDown(event: PointerEvent) {
+  if (!hasActiveSelection.value) {
+    return emits.paneMouseMove(event)
+  }
+
   containerBounds.value = vueFlowRef.value?.getBoundingClientRect()
   container.value?.setPointerCapture(event.pointerId)
 
-  if (
-    !hasActiveSelection.value ||
-    !elementsSelectable ||
-    !isSelecting ||
-    event.button !== 0 ||
-    event.target !== container.value ||
-    !containerBounds.value
-  ) {
+  if (!elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container.value || !containerBounds.value) {
     return
   }
 
@@ -198,12 +178,16 @@ function onPointerMove(event: PointerEvent) {
 }
 
 function onPointerUp(event: PointerEvent) {
-  if (!hasActiveSelection.value || event.button !== 0) {
+  if (event.button !== 0) {
     return
   }
 
   container.value?.releasePointerCapture(event.pointerId)
 
+  if (!hasActiveSelection.value) {
+    return
+  }
+
   // We only want to trigger click functions when in selection mode if
   // the user did not move the mouse.
   if (!userSelectionActive.value && userSelectionRect.value && event.target === container.value) {