From 49fbdadb720801e9cd174f151358629060745b6f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 17 May 2023 12:03:27 +0200
Subject: [PATCH] refactor(controls): disable zoom in/out btns when max/min
 zoom is reached

---
 packages/controls/src/Controls.vue | 26 +++++++++++++++++++++++---
 packages/controls/src/style.css    |  9 +++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/controls/src/Controls.vue b/packages/controls/src/Controls.vue
index 37bf5e37..00b76c44 100644
--- a/packages/controls/src/Controls.vue
+++ b/packages/controls/src/Controls.vue
@@ -23,10 +23,25 @@ const emit = defineEmits<{
   (event: 'interactionChange', active: boolean): void
 }>()
 
-const { nodesDraggable, nodesConnectable, elementsSelectable, setInteractive, zoomIn, zoomOut, fitView } = useVueFlow()
+const {
+  nodesDraggable,
+  nodesConnectable,
+  elementsSelectable,
+  setInteractive,
+  zoomIn,
+  zoomOut,
+  fitView,
+  viewport,
+  minZoom,
+  maxZoom,
+} = useVueFlow()
 
 const isInteractive = computed(() => nodesDraggable.value || nodesConnectable.value || elementsSelectable.value)
 
+const minZoomReached = computed(() => viewport.value.zoom <= minZoom.value)
+
+const maxZoomReached = computed(() => viewport.value.zoom >= maxZoom.value)
+
 function onZoomInHandler() {
   zoomIn()
 
@@ -62,22 +77,25 @@ export default {
 <template>
   <Panel class="vue-flow__controls" :position="position">
     <slot name="top"></slot>
+
     <template v-if="showZoom">
       <slot name="control-zoom-in">
-        <ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
+        <ControlButton class="vue-flow__controls-zoomin" :disabled="maxZoomReached" @click="onZoomInHandler">
           <slot name="icon-zoom-in">
             <component :is="PlusIcon" />
           </slot>
         </ControlButton>
       </slot>
+
       <slot name="control-zoom-out">
-        <ControlButton class="vue-flow__controls-zoomout" @click="onZoomOutHandler">
+        <ControlButton class="vue-flow__controls-zoomout" :disabled="minZoomReached" @click="onZoomOutHandler">
           <slot name="icon-zoom-out">
             <component :is="MinusIcon" />
           </slot>
         </ControlButton>
       </slot>
     </template>
+
     <template v-if="showFitView">
       <slot name="control-fit-view">
         <ControlButton class="vue-flow__controls-fitview" @click="onFitViewHandler">
@@ -87,6 +105,7 @@ export default {
         </ControlButton>
       </slot>
     </template>
+
     <template v-if="showInteractive">
       <slot name="control-interactive">
         <ControlButton v-if="showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
@@ -99,6 +118,7 @@ export default {
         </ControlButton>
       </slot>
     </template>
+
     <slot></slot>
   </Panel>
 </template>
diff --git a/packages/controls/src/style.css b/packages/controls/src/style.css
index 1118bd43..73680286 100644
--- a/packages/controls/src/style.css
+++ b/packages/controls/src/style.css
@@ -26,3 +26,12 @@
 .vue-flow__controls-button:hover {
   background: #f4f4f4;
 }
+
+
+.vue-flow__controls-button:disabled {
+  pointer-events: none;
+}
+
+.vue-flow__controls-button:disabled svg {
+  fill-opacity: 0.4;
+}