refactor(svelte): disable zoom buttons when min/max is reached

packages/svelte/src/lib/plugins/Controls/ControlButton.svelte

@@ -31,9 +31,21 @@
     padding: 5px;
   }
 
+  .svelte-flow__controls-button:hover {
+    background: #f4f4f4;
+  }
+
   .svelte-flow__controls-button :global(svg) {
     width: 100%;
     max-width: 12px;
     max-height: 12px;
   }
+
+  .svelte-flow__controls-button:disabled {
+    pointer-events: none;
+  }
+
+  .svelte-flow__controls-button:disabled :global(svg) {
+    fill-opacity: 0.4;
+  }
 </style>

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -17,9 +17,11 @@
   export let showFitView: $$Props['showFitView'] = true;
   export let showInteractive: $$Props['showInteractive'] = true;
 
-  const { zoomIn, zoomOut, fitView } = useStore();
+  const { zoomIn, zoomOut, fitView, transform, minZoom, maxZoom } = useStore();
 
   const isInteractive = true;
+  $: minZoomReached = $transform[2] <= $minZoom;
+  $: maxZoomReached = $transform[2] >= $maxZoom;
 
   const onZoomInHandler = () => {
     zoomIn();
@@ -50,6 +52,7 @@
       class="svelte-flow__controls-zoomin"
       title="zoom in"
       aria-label="zoom in"
+      disabled={maxZoomReached}
     >
       <PlusIcon />
     </ControlButton>
@@ -59,6 +62,7 @@
       class="svelte-flow__controls-zoomout"
       title="zoom out"
       aria-label="zoom out"
+      disabled={minZoomReached}
     >
       <MinusIcon />
     </svelte:component>