From 0044a14ac1e96cc8598a2af9caf6803efdacb205 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 13 Oct 2022 10:38:16 +0200
Subject: [PATCH] feat(core): add dragging class to pane

---
 .../src/container/SelectionPane/SelectionPane.vue |  1 +
 packages/core/src/container/Viewport/Viewport.vue | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/container/SelectionPane/SelectionPane.vue b/packages/core/src/container/SelectionPane/SelectionPane.vue
index 781229c7..02c9b3f5 100644
--- a/packages/core/src/container/SelectionPane/SelectionPane.vue
+++ b/packages/core/src/container/SelectionPane/SelectionPane.vue
@@ -88,6 +88,7 @@ export default {
   <NodesSelection v-if="nodesSelectionActive" :key="`nodes-selection-${id}`" />
   <div
     :key="`pane-${id}`"
+    v-bind="$attrs"
     class="vue-flow__pane vue-flow__container"
     @click="onClick"
     @contextmenu="onContextMenu"
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index 5b2a54d9..00b1c2e7 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -37,6 +37,8 @@ const viewportEl = templateRef<HTMLDivElement>('viewport', null)
 
 let isZoomingOrPanning = $ref(false)
 
+let isDragging = $ref(false)
+
 const viewChanged = (prevTransform: ViewpaneTransform, eventTransform: ZoomTransform): boolean =>
   (prevTransform.x !== eventTransform.x && !isNaN(eventTransform.x)) ||
   (prevTransform.y !== eventTransform.y && !isNaN(eventTransform.y)) ||
@@ -114,12 +116,19 @@ onMounted(() => {
     isZoomingOrPanning = true
 
     const flowTransform = eventToFlowTransform(event.transform)
+
+    if (event.sourceEvent?.type === 'mousedown') {
+      isDragging = true
+    }
+
     transform = flowTransform
+
     emits.moveStart({ event, flowTransform })
   })
 
   d3Zoom.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
     isZoomingOrPanning = false
+    isDragging = false
 
     if (viewChanged(transform, event.transform)) {
       const flowTransform = eventToFlowTransform(event.transform)
@@ -177,6 +186,8 @@ onMounted(() => {
     const zoomScroll = zoomKeyPressed.value || zoomOnScroll
     const pinchZoom = zoomOnPinch && event.ctrlKey
 
+    if (event.button === 1 && event.type === 'mousedown' && (event.target as HTMLElement)?.closest(`.vue-flow__node`)) return true
+
     // if all interactions are disabled, we prevent all zoom events
     if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) return false
 
@@ -201,7 +212,7 @@ onMounted(() => {
     if (!panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) return false
 
     // default filter for d3-zoom
-    return (!event.ctrlKey || event.type === 'wheel') && !event.button
+    return (!event.ctrlKey || event.type === 'wheel') && (!event.button || event.button <= 1)
   })
 })
 </script>
@@ -217,6 +228,6 @@ export default {
     <Transform>
       <slot />
     </Transform>
-    <SelectionPane />
+    <SelectionPane :class="{ dragging: isDragging }" />
   </div>
 </template>