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