update(zoom): disable pointer events on zoom pane when zoom key is active

package/src/container/TransformationPane/TransformationPane.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import { useVueFlow, useZoomPanHelper } from '../../composables'
+import { useKeyPress, useVueFlow, useZoomPanHelper } from '../../composables'
 import { FlowInstance } from '../../types'
 import { onLoadGetEdges, onLoadGetElements, onLoadGetNodes, onLoadProject, onLoadToObject } from '../../utils'
 
@@ -31,9 +31,14 @@ onMounted(() => {
 })
 
 const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
+const keyPressed = useKeyPress(store.selectionKeyCode)
 </script>
 <template>
-  <div :key="`transformation-pane-${id}`" class="vue-flow__transformation-pane vue-flow__container" :style="{ transform }">
+  <div
+    :key="`transformation-pane-${id}`"
+    class="vue-flow__transformation-pane vue-flow__container"
+    :style="{ transform, pointerEvents: keyPressed ? 'none' : 'all' }"
+  >
     <NodeRenderer :key="`node-renderer-${id}`" />
     <EdgeRenderer :key="`edge-renderer-${id}`" />
     <slot />