From 812a7da2febf424c59d4b86ec8265d70177dd5b6 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Nov 2021 03:06:21 +0100
Subject: [PATCH] fix: move slots outside of zoom pane

* avoids zoom gesture events bubbling to zoom pane and causing elements over flow to trigger zoom when they shouldn't

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/additional-components/Controls/Controls.vue |  8 ++++----
 src/container/SelectionPane/SelectionPane.vue   | 13 ++++++++++---
 src/container/VueFlow/VueFlow.vue               |  2 +-
 src/container/ZoomPane/ZoomPane.vue             |  3 +++
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/additional-components/Controls/Controls.vue b/src/additional-components/Controls/Controls.vue
index 998d9132..de9e5531 100644
--- a/src/additional-components/Controls/Controls.vue
+++ b/src/additional-components/Controls/Controls.vue
@@ -31,22 +31,22 @@ const isInteractive = computed(() => store.nodesDraggable && store.nodesConnecta
 const mapClasses = ['vue-flow__controls']
 
 const onZoomInHandler = () => {
-  zoomIn?.()
+  zoomIn()
   emit('zoom-in')
 }
 
 const onZoomOutHandler = () => {
-  zoomOut?.()
+  zoomOut()
   emit('zoom-out')
 }
 
 const onFitViewHandler = () => {
-  fitView?.(props.fitViewParams)
+  fitView(props.fitViewParams)
   emit('fit-view')
 }
 
 const onInteractiveChangeHandler = () => {
-  store.setInteractive?.(!isInteractive.value)
+  store.setInteractive(!isInteractive.value)
   emit('interaction-change', !isInteractive.value)
 }
 </script>
diff --git a/src/container/SelectionPane/SelectionPane.vue b/src/container/SelectionPane/SelectionPane.vue
index e4851a5a..9d92e82b 100644
--- a/src/container/SelectionPane/SelectionPane.vue
+++ b/src/container/SelectionPane/SelectionPane.vue
@@ -51,10 +51,17 @@ onMounted(() => {
 
   useKeyPress(props.selectionKeyCode, (keyPressed) => (selectionKeyPresed.value = keyPressed))
 })
+const userSelection = computed(() => selectionKeyPresed.value && (store.selectionActive || store.elementsSelectable))
+const nodesSelectionActive = computed(() => store.nodesSelectionActive)
+</script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
 </script>
 <template>
   <slot></slot>
-  <UserSelection v-if="selectionKeyPresed && (store.selectionActive || store.elementsSelectable)" id="user-selection" />
-  <NodesSelection v-if="store.nodesSelectionActive" id="nodes-selection" />
-  <div class="vue-flow__pane" @click.self="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
+  <UserSelection v-if="userSelection" id="user-selection" />
+  <NodesSelection v-if="nodesSelectionActive" id="nodes-selection" />
+  <div class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
 </template>
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index 046ac1d2..53df4deb 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -186,8 +186,8 @@ const edgeTypes = computed(() => {
           </template>
         </EdgeRenderer>
       </SelectionPane>
-      <slot v-bind="{ ...props, store, hooks }"></slot>
     </ZoomPane>
+    <slot v-bind="{ ...props, store, hooks }"></slot>
   </div>
 </template>
 <style>
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index 503975fb..aefcfb07 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -142,6 +142,9 @@ invoke(async () => {
 
   const keyPress = useKeyPress(props.selectionKeyCode)
   d3z.filter((event: MouseEvent) => {
+    event.stopPropagation()
+    event.stopImmediatePropagation()
+    event.preventDefault()
     const pinchZoom = props.zoomOnPinch && event.ctrlKey
 
     // if all interactions are disabled, we prevent all zoom events