From 0cec7f205f4bb2d8494f052fb0b64ca07ab4e623 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 17 Oct 2025 12:47:52 +0200
Subject: [PATCH] feat: implement zoom state management in ZoomablePage
 component to enhance zoom functionality and control panning behavior

---
 src/components/reader/components/ZoomablePage.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/reader/components/ZoomablePage.tsx b/src/components/reader/components/ZoomablePage.tsx
index d9a4d0c..782fcd1 100644
--- a/src/components/reader/components/ZoomablePage.tsx
+++ b/src/components/reader/components/ZoomablePage.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import { cn } from "@/lib/utils";
 
@@ -22,9 +23,14 @@ export const ZoomablePage = ({
   order = "first",
   onZoomChange,
 }: ZoomablePageProps) => {
+  const [isZoomed, setIsZoomed] = useState(false);
+  
   const handleTransform = (ref: any, state: { scale: number; positionX: number; positionY: number }) => {
-    onZoomChange?.(state.scale > 1.1);
+    const zoomed = state.scale > 1.1;
+    setIsZoomed(zoomed);
+    onZoomChange?.(zoomed);
   };
+  
   return (
     <div
       className={cn(
@@ -57,7 +63,10 @@ export const ZoomablePage = ({
             animationTime: 200,
             animationType: "easeOut"
           }}
-          panning={{ disabled: false }}
+          panning={{ 
+            disabled: false,
+            lockAxisX: !isZoomed
+          }}
           limitToBounds={true}
           centerZoomedOut={false}
           onTransformed={handleTransform}