From fb1c828deab9786279cf1681e470fb258ac3f9a0 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 30 Mar 2022 18:57:03 +0200
Subject: [PATCH] update(zoom): disable pointer events on zoom pane when zoom
 key is active

---
 .../container/TransformationPane/TransformationPane.vue  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/package/src/container/TransformationPane/TransformationPane.vue b/package/src/container/TransformationPane/TransformationPane.vue
index 463472d6..46d448b2 100644
--- a/package/src/container/TransformationPane/TransformationPane.vue
+++ b/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 />