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..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, centerZoomedOut, zoomAnimation, alignmentAnimation } = - contextInstance.setup; + const { + alignmentAnimation, + centerZoomedOut, + disablePadding, + limitToBounds, + zoomAnimation, + } = contextInstance.setup; const { disabled, size } = zoomAnimation; // if one finger starts from outside of wrapper @@ -82,7 +87,13 @@ export const handlePinchZoom = ( const bounds = handleCalculateBounds(contextInstance, newScale); - const isPaddingDisabled = disabled || size === 0 || centerZoomedOut; + const isPaddingDisabled = + disabled || + size === 0 || + disablePadding || + centerZoomedOut || + 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..2f39f2f7 100644 --- a/src/core/wheel/wheel.logic.ts +++ b/src/core/wheel/wheel.logic.ts @@ -39,12 +39,12 @@ export const handleWheelZoom = ( const { contentComponent, setup, transformState } = contextInstance; const { scale } = transformState; const { - limitToBounds, centerZoomedOut, - zoomAnimation, - wheel, disablePadding, + limitToBounds, smooth, + wheel, + zoomAnimation, } = setup; const { size, disabled } = zoomAnimation; const { step, smoothStep } = wheel; @@ -73,7 +73,12 @@ export const handleWheelZoom = ( const mousePosition = getMousePosition(event, contentComponent, scale); const isPaddingDisabled = - disabled || size === 0 || centerZoomedOut || disablePadding; + disabled || + size === 0 || + disablePadding || + centerZoomedOut || + bounds.maxPositionX === 0 || + bounds.maxPositionY === 0; const isLimitedToBounds = limitToBounds && isPaddingDisabled; const { x, y } = handleCalculateZoomPositions( 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) => (