react-zoom-pan-pinch
react-zoom-pan-pinch copied to clipboard
BetterTyped
'centerOnInit' not working properly
The image starts from the center instead of being centered. It needs to be clicked to get centered. Works with div containing text.
Steps to reproduce the behavior:
- Create a full-screen container
- Add an image bigger than the viewport (1920x1080)
- pass
centerOnInitas true
Expected behavior The image should be centered horizontally and vertically
Expected:
Actual:
- OS: Windows 11
- Chrome v114.0.5735.199
- Version 3.1.0
App.tsx
<div className="container">
<TransformWrapper
centerOnInit
maxScale={5}
disablePadding
minScale={1.15}
initialScale={1.15}
initialPositionX={0}
ref={wrapperRef}
pinch={{ disabled: true }}
doubleClick={{ disabled: true }}
wheel={{ disabled: true, touchPadDisabled: true }}
>
<TransformComponent wrapperClass="wrapper" contentClass="content">
<div>
<img src={cat} alt="cat" className="cat-img" />
</div>
</TransformComponent>
</TransformWrapper>
</div>
App.css
.container {
width: 100%;
height: 100vh;
}
.wrapper {
height: 100%;
width: 100%;
}
.cat-img {
z-index: 1;
height: 100vh;
pointer-events: auto !important;
}
I found a slightly odd solution, but it worked for me. If you don't care about the edges of your image (as in my case), you can set the container and image to 100vh, 100vw, and objectFit: cover for the image.
@umeeridrees @joe-akers-douglas-otm I find it possibly a bug with centerOnInit. Instead, I was able to manually center the content image by dropping centerOnInit and only using initialPositionX, initialPositionY and InitialScale.
The idea is based on https://github.com/BetterTyped/react-zoom-pan-pinch/blob/master/src/stories/examples/image-responsive/example.tsx#L22-L41.
I passed in initialPositionX and initialPositionY to TransferWrapper as
const [initPosition, setInitPosition] = useState({x: 0, y: 0});
....
const imageScale = useMemo(() => {
if (containerWidth === 0 || containerHeight === 0 || imageNaturalWidth === 0 || imageNaturalHeight === 0) {
return 0;
}
const wScale = containerWidth / imageNaturalWidth;
const hScale = containerHeight / imageNaturalHeight;
const scale = Math.min(containerWidth / imageNaturalWidth, containerHeight / imageNaturalHeight);
if (wScale > hScale) {
setInitPosition({
x: (containerWidth - imageNaturalWidth * scale) / 2,
y: 0
});
} else if (wScale < hScale) {
setInitPosition({
x: 0,
y: (containerHeight - imageNaturalHeight * scale) / 2
});
}
return scaleUp ? scale : Math.max(scale, 1);
}, [scaleUp, containerWidth, containerHeight, imageNaturalWidth, imageNaturalHeight]);
<TransferWrapper
initialPositionX={initPosition.x}
initialPositionY={initPosition.y}
// make sure turn off `centerOnInit
...
>
....
</TransferWrapper>
There can be some math tweaks to do. But thats the idea worked for me.
Hey ! I have the same issue but the last solution doesn't seem to work for my project.
The code looks like this :
<div className={styles.reset}>
<TransformWrapper initialScale={0.4} minScale={0.4} smooth centerOnInit>
{(utils) => (
<div style={{ backgroundColor: 'rgb(22, 20, 36)' }}>
<TransformComponent wrapperStyle={{ maxWidth: '100vw', maxHeight: '100vh' }}>
<Captions floor={currentFloor} model={model} />
<img src={floorPlans[currentFloor]} alt="" />
</TransformComponent>
</div>
)}
</TransformWrapper>
</div>
The styles.reset className only contains position: relative; z-index: -2;.
Since we started using the lib, I had the image centered once, after refresh it went away and the image was back in the top left corner. As soon as I click on the image, it gets centered.
When I tried with the solution above, the image was not even appearing on the page.
If anyone has a solution to suggest, I would be really happy to try it !
Hey ! I have the same issue but the last solution doesn't seem to work for my project.
The code looks like this :
<div className={styles.reset}> <TransformWrapper initialScale={0.4} minScale={0.4} smooth centerOnInit> {(utils) => ( <div style={{ backgroundColor: 'rgb(22, 20, 36)' }}> <TransformComponent wrapperStyle={{ maxWidth: '100vw', maxHeight: '100vh' }}> <Captions floor={currentFloor} model={model} /> <img src={floorPlans[currentFloor]} alt="" /> </TransformComponent> </div> )} </TransformWrapper> </div>The styles.reset className only contains
position: relative; z-index: -2;.Since we started using the lib, I had the image centered once, after refresh it went away and the image was back in the top left corner. As soon as I click on the image, it gets centered.
When I tried with the solution above, the image was not even appearing on the page.
If anyone has a solution to suggest, I would be really happy to try it !
I found a solution that worked for me :
<TransformComponent
wrapperStyle={{
maxWidth: '100vw',
maxHeight: '100vh',
}}
>
{!isVRMode && model ? <Captions floor={currentFloor} plan={floorPlans[currentFloor]} /> : null}
</TransformComponent>
In my <Captions /> I display the image as a backgroundImage and I set a defined height on the Captions container. I don't know exactly why it changed the behavior of the centerOnInit but it did.
If it can help anyone :)
I believe this may be due to the code centering the image before the image is actually loaded.
I believe this may be due to the code centering the image before the image is actually loaded.
It would make sense ! Any idea of a solution to this ?
I believe this may be due to the code centering the image before the image is actually loaded.
It would make sense ! Any idea of a solution to this ?
Turned out to be something a bit different but this PR fixed the issue for me: https://github.com/BetterTyped/react-zoom-pan-pinch/pull/468