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

@@ -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>

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>

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>

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