Merge pull request #368 from reaviz/anton/min-max-zoom-fix

Fix for the Min/Max distance #217

Author: amcdnl

src/GraphCanvas/GraphCanvas.tsx

@@ -148,8 +148,38 @@ export const GraphCanvas: FC<GraphCanvasProps & { ref?: Ref<GraphCanvasRef> }> =
           rendererRef.current?.centerGraph(nodeIds, opts),
         fitNodesInView: (nodeIds, opts) =>
           rendererRef.current?.fitNodesInView(nodeIds, opts),
-        zoomIn: () => controlsRef.current?.zoomIn(),
-        zoomOut: () => controlsRef.current?.zoomOut(),
+        zoomIn: () => {
+          const controls = controlsRef.current?.controls;
+          if (!controls) return;
+
+          const currentDistance = controls.distance;
+          const currentZoom = controls.camera.zoom;
+
+          // Calculate what the new zoom would be has to match CameraControls logic
+          const newZoom = currentZoom + currentZoom / 2;
+          const newEffectiveDistance = currentDistance / newZoom;
+
+          // Check if zooming in would violate minDistance constraint
+          if (!minDistance || newEffectiveDistance >= minDistance) {
+            controlsRef.current?.zoomIn();
+          }
+        },
+        zoomOut: () => {
+          const controls = controlsRef.current?.controls;
+          if (!controls) return;
+
+          const currentDistance = controls.distance;
+          const currentZoom = controls.camera.zoom;
+
+          // Calculate what the new zoom would be (matches CameraControls logic)
+          const newZoom = currentZoom - currentZoom / 2;
+          const newEffectiveDistance = currentDistance / newZoom;
+
+          // Check if zooming out would violate maxDistance constraint
+          if (!maxDistance || newEffectiveDistance <= maxDistance) {
+            controlsRef.current?.zoomOut();
+          }
+        },
         dollyIn: distance => controlsRef.current?.dollyIn(distance),
         dollyOut: distance => controlsRef.current?.dollyOut(distance),
         panLeft: () => controlsRef.current?.panLeft(),

stories/demos/Basic.story.tsx

@@ -280,7 +280,7 @@ export const Circular = () => (
         source: '1',
         target: '1',
         id: '1-1',
-        label: '1-1',
+        label: '1-1'
       },
       {
         source: '2',
@@ -295,7 +295,7 @@ export const Circular = () => (
         id: '3-3',
         label: '3-3',
         arrowPlacement: 'none'
-      },
+      }
     ]}
   />
 );