From fd0edc0d3f82990834e529dcbf326aaafce67390 Mon Sep 17 00:00:00 2001
From: nuintun <nuintun@qq.com>
Date: Fri, 5 Jul 2024 16:48:17 +0800
Subject: [PATCH 1/2] fix: Align centerZoomedOut functionality with
 documentation

---
 src/core/bounds/bounds.utils.ts |  4 ++--
 src/core/pinch/pinch.logic.ts   |  8 ++++++--
 src/core/wheel/wheel.logic.ts   | 15 ++++++---------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/core/bounds/bounds.utils.ts b/src/core/bounds/bounds.utils.ts
index aa4e2b9a..ec1a1924 100644
--- a/src/core/bounds/bounds.utils.ts
+++ b/src/core/bounds/bounds.utils.ts
@@ -44,11 +44,11 @@ export const getBounds = (
 ): BoundsType => {
   const scaleWidthFactor =
     wrapperWidth > newContentWidth
-      ? diffWidth * (centerZoomedOut ? 1 : 0.5)
+      ? diffWidth * (centerZoomedOut ? 0.5 : 1)
       : 0;
   const scaleHeightFactor =
     wrapperHeight > newContentHeight
-      ? diffHeight * (centerZoomedOut ? 1 : 0.5)
+      ? diffHeight * (centerZoomedOut ? 0.5 : 1)
       : 0;
 
   const minPositionX = wrapperWidth - newContentWidth - scaleWidthFactor;
diff --git a/src/core/pinch/pinch.logic.ts b/src/core/pinch/pinch.logic.ts
index 4b48c7b6..c9c78432 100644
--- a/src/core/pinch/pinch.logic.ts
+++ b/src/core/pinch/pinch.logic.ts
@@ -55,7 +55,7 @@ export const handlePinchZoom = (
   const { contentComponent, pinchStartDistance, wrapperComponent } =
     contextInstance;
   const { scale } = contextInstance.transformState;
-  const { limitToBounds, centerZoomedOut, zoomAnimation, alignmentAnimation } =
+  const { limitToBounds, zoomAnimation, alignmentAnimation } =
     contextInstance.setup;
   const { disabled, size } = zoomAnimation;
 
@@ -82,7 +82,11 @@ export const handlePinchZoom = (
 
   const bounds = handleCalculateBounds(contextInstance, newScale);
 
-  const isPaddingDisabled = disabled || size === 0 || centerZoomedOut;
+  const isPaddingDisabled =
+    disabled ||
+    size === 0 ||
+    bounds.maxPositionX === 0 ||
+    bounds.maxPositionY === 0;
   const isLimitedToBounds = limitToBounds && isPaddingDisabled;
 
   const { x, y } = handleCalculateZoomPositions(
diff --git a/src/core/wheel/wheel.logic.ts b/src/core/wheel/wheel.logic.ts
index d4703b71..5c06d89c 100644
--- a/src/core/wheel/wheel.logic.ts
+++ b/src/core/wheel/wheel.logic.ts
@@ -38,14 +38,7 @@ export const handleWheelZoom = (
 
   const { contentComponent, setup, transformState } = contextInstance;
   const { scale } = transformState;
-  const {
-    limitToBounds,
-    centerZoomedOut,
-    zoomAnimation,
-    wheel,
-    disablePadding,
-    smooth,
-  } = setup;
+  const { limitToBounds, zoomAnimation, wheel, disablePadding, smooth } = setup;
   const { size, disabled } = zoomAnimation;
   const { step, smoothStep } = wheel;
 
@@ -73,7 +66,11 @@ export const handleWheelZoom = (
   const mousePosition = getMousePosition(event, contentComponent, scale);
 
   const isPaddingDisabled =
-    disabled || size === 0 || centerZoomedOut || disablePadding;
+    disabled ||
+    size === 0 ||
+    disablePadding ||
+    bounds.maxPositionX === 0 ||
+    bounds.maxPositionY === 0;
   const isLimitedToBounds = limitToBounds && isPaddingDisabled;
 
   const { x, y } = handleCalculateZoomPositions(

From 3f0fd7fd2822258ec9bc75c0563ebf0ad482ddb0 Mon Sep 17 00:00:00 2001
From: nuintun <nuintun@qq.com>
Date: Fri, 5 Jul 2024 17:17:48 +0800
Subject: [PATCH 2/2] feat: Optimize zoom logic

---
 src/core/pinch/pinch.logic.ts                         | 11 +++++++++--
 src/core/wheel/wheel.logic.ts                         | 10 +++++++++-
 .../image-zoomed-out/image-zoomed-out.stories.mdx     |  1 +
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/core/pinch/pinch.logic.ts b/src/core/pinch/pinch.logic.ts
index c9c78432..16a2f2ee 100644
--- a/src/core/pinch/pinch.logic.ts
+++ b/src/core/pinch/pinch.logic.ts
@@ -55,8 +55,13 @@ export const handlePinchZoom = (
   const { contentComponent, pinchStartDistance, wrapperComponent } =
     contextInstance;
   const { scale } = contextInstance.transformState;
-  const { limitToBounds, zoomAnimation, alignmentAnimation } =
-    contextInstance.setup;
+  const {
+    alignmentAnimation,
+    centerZoomedOut,
+    disablePadding,
+    limitToBounds,
+    zoomAnimation,
+  } = contextInstance.setup;
   const { disabled, size } = zoomAnimation;
 
   // if one finger starts from outside of wrapper
@@ -85,6 +90,8 @@ export const handlePinchZoom = (
   const isPaddingDisabled =
     disabled ||
     size === 0 ||
+    disablePadding ||
+    centerZoomedOut ||
     bounds.maxPositionX === 0 ||
     bounds.maxPositionY === 0;
   const isLimitedToBounds = limitToBounds && isPaddingDisabled;
diff --git a/src/core/wheel/wheel.logic.ts b/src/core/wheel/wheel.logic.ts
index 5c06d89c..2f39f2f7 100644
--- a/src/core/wheel/wheel.logic.ts
+++ b/src/core/wheel/wheel.logic.ts
@@ -38,7 +38,14 @@ export const handleWheelZoom = (
 
   const { contentComponent, setup, transformState } = contextInstance;
   const { scale } = transformState;
-  const { limitToBounds, zoomAnimation, wheel, disablePadding, smooth } = setup;
+  const {
+    centerZoomedOut,
+    disablePadding,
+    limitToBounds,
+    smooth,
+    wheel,
+    zoomAnimation,
+  } = setup;
   const { size, disabled } = zoomAnimation;
   const { step, smoothStep } = wheel;
 
@@ -69,6 +76,7 @@ export const handleWheelZoom = (
     disabled ||
     size === 0 ||
     disablePadding ||
+    centerZoomedOut ||
     bounds.maxPositionX === 0 ||
     bounds.maxPositionY === 0;
   const isLimitedToBounds = limitToBounds && isPaddingDisabled;
diff --git a/src/stories/examples/image-zoomed-out/image-zoomed-out.stories.mdx b/src/stories/examples/image-zoomed-out/image-zoomed-out.stories.mdx
index 8adcd7b1..40e2bad7 100644
--- a/src/stories/examples/image-zoomed-out/image-zoomed-out.stories.mdx
+++ b/src/stories/examples/image-zoomed-out/image-zoomed-out.stories.mdx
@@ -9,6 +9,7 @@ import exampleImg from "../../assets/medium-image.jpg";
 
 export const Template = (args) => (
   <TransformWrapper
+    centerZoomedOut
     {...normalizeArgs(args)}
     initialScale={0.4}
     minScale={0.2}