Normalize workspace zoom step to 5 percent

Author: beNative

App.tsx

@@ -50,7 +50,7 @@ const MIN_LOGGER_HEIGHT = 100;
 const PREVIEW_INITIAL_SCALE = 1;
 const PREVIEW_MIN_SCALE = 0.25;
 const PREVIEW_MAX_SCALE = 5;
-const PREVIEW_ZOOM_STEP = 0.25;
+const PREVIEW_ZOOM_STEP = 0.05;
 
 const isElectron = !!window.electronAPI;
 
@@ -263,17 +263,17 @@ export const MainApp: React.FC = () => {
 
     const handlePreviewZoomIn = useCallback(() => {
         if (workspaceZoomTarget === 'preview') {
-            setPreviewScale(prev => clampZoomScale(prev * (1 + PREVIEW_ZOOM_STEP)));
+            setPreviewScale(prev => clampZoomScale(prev + PREVIEW_ZOOM_STEP));
         } else {
-            setEditorScale(prev => clampZoomScale(prev * (1 + PREVIEW_ZOOM_STEP)));
+            setEditorScale(prev => clampZoomScale(prev + PREVIEW_ZOOM_STEP));
         }
     }, [clampZoomScale, workspaceZoomTarget]);
 
     const handlePreviewZoomOut = useCallback(() => {
         if (workspaceZoomTarget === 'preview') {
-            setPreviewScale(prev => clampZoomScale(prev / (1 + PREVIEW_ZOOM_STEP)));
+            setPreviewScale(prev => clampZoomScale(prev - PREVIEW_ZOOM_STEP));
         } else {
-            setEditorScale(prev => clampZoomScale(prev / (1 + PREVIEW_ZOOM_STEP)));
+            setEditorScale(prev => clampZoomScale(prev - PREVIEW_ZOOM_STEP));
         }
     }, [clampZoomScale, workspaceZoomTarget]);
 

components/ZoomPanContainer.tsx

@@ -43,7 +43,7 @@ const ZoomPanContainer = React.forwardRef<HTMLDivElement, ZoomPanContainerProps>
     minScale = 0.25,
     maxScale = 5,
     initialScale = 1,
-    zoomStep = 0.25,
+    zoomStep = 0.05,
     disableControls = false,
     disablePan = false,
     disableZoom = false,
@@ -119,10 +119,11 @@ const ZoomPanContainer = React.forwardRef<HTMLDivElement, ZoomPanContainerProps>
       }
       const direction = deltaY > 0 ? -1 : 1;
       const magnitude = Math.min(Math.abs(deltaY) / 300, 1.5);
-      const factor = 1 + effectiveZoomStep * magnitude;
+      const stepCount = Math.max(1, Math.round(magnitude));
+      const deltaScale = effectiveZoomStep * stepCount;
       const nextScale = direction > 0
-        ? scaleRef.current * factor
-        : scaleRef.current / factor;
+        ? scaleRef.current + deltaScale
+        : scaleRef.current - deltaScale;
       setScale(nextScale);
       return;
     }
@@ -193,8 +194,8 @@ const ZoomPanContainer = React.forwardRef<HTMLDivElement, ZoomPanContainerProps>
     }
     event.preventDefault();
     const isZoomOut = event.shiftKey || event.altKey || event.button === 1;
-    const factor = 1 + effectiveZoomStep;
-    setScale(isZoomOut ? scaleRef.current / factor : scaleRef.current * factor);
+    const deltaScale = effectiveZoomStep;
+    setScale(isZoomOut ? scaleRef.current - deltaScale : scaleRef.current + deltaScale);
   }, [disableZoom, effectiveZoomStep, setScale]);
 
   const handleResetView = useCallback(() => {
@@ -296,7 +297,7 @@ const ZoomPanContainer = React.forwardRef<HTMLDivElement, ZoomPanContainerProps>
             tooltip="Zoom out"
             variant="ghost"
             size="sm"
-            onClick={() => setScale(scaleRef.current / (1 + zoomStep))}
+            onClick={() => setScale(scaleRef.current - zoomStep)}
             className="text-text-secondary"
           >
             <MinusIcon className="w-4 h-4" />
@@ -308,7 +309,7 @@ const ZoomPanContainer = React.forwardRef<HTMLDivElement, ZoomPanContainerProps>
             tooltip="Zoom in"
             variant="ghost"
             size="sm"
-            onClick={() => setScale(scaleRef.current * (1 + zoomStep))}
+            onClick={() => setScale(scaleRef.current + zoomStep)}
             className="text-text-secondary"
           >
             <PlusIcon className="w-4 h-4" />

contexts/PreviewZoomContext.tsx

@@ -36,7 +36,7 @@ export const PreviewZoomProvider: React.FC<PreviewZoomProviderProps> = ({
   onScaleChange,
   minScale = 0.25,
   maxScale = 5,
-  zoomStep = 0.25,
+  zoomStep = 0.05,
   initialScale = 1,
   resetSignal,
   onAvailabilityChange,
@@ -52,11 +52,11 @@ export const PreviewZoomProvider: React.FC<PreviewZoomProviderProps> = ({
   }, [maxScale, minScale, onScaleChange]);
 
   const zoomIn = useCallback(() => {
-    setScale(clampedScale * (1 + zoomStep));
+    setScale(clampedScale + zoomStep);
   }, [clampedScale, setScale, zoomStep]);
 
   const zoomOut = useCallback(() => {
-    setScale(clampedScale / (1 + zoomStep));
+    setScale(clampedScale - zoomStep);
   }, [clampedScale, setScale, zoomStep]);
 
   const reset = useCallback(() => {