Incorrect position on first render of the elements in the view

[a-fortunato]

Describe the bug
The first time the view with the zoom wrapper is rendered, the element to zoom&scroll shows on the left side (instead of in the center), and when interacting with it, or clicking anywhere in the view, the layout goes to the center by itself.

I have a code sample here:
https://codesandbox.io/p/sandbox/epic-thunder-6749c2
(I am using a modal there because I was trying to replicate the usage I need, but if the modal wrapper is removed, the same behavior can still be reproduced)

To Reproduce
Steps to reproduce the behavior:

1. Go to the sandbox link
2. Click on "open modal"
3. See that the element inside shows aligned to the left side
4. Click anywhere in the viewport
5. See that the element in the view moves to the center and stays there

Expected behavior
I would expect that the view shows in the center right away and doesn't wait until there is an interaction with the view to center it.

Screenshots

Screen.Recording.2024-06-29.at.00.15.47.mov

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome / Firefox
• Version 126.0.6478.127 / 127.0.2

[nuintun]

Use centerOnInit

https://codesandbox.io/p/sandbox/issue-zoom-library-forked-qg6lkh

[a-fortunato]

Use centerOnInit

https://codesandbox.io/p/sandbox/issue-zoom-library-forked-qg6lkh

hey @nuintun, thank you for your reply. I tried that already, but that doesn't work for me.

centerOnInit centers both X and Y coordinates, and I need it to be centered on X but to stay top on Y.

Using initialPositionX could work, but my width depends on device, so I was trying to avoid calculating dynamically the width of the parent to send a correct X to start on...

My other point is that it would seem that the expected behavior is that it's centered all the time, just because after interacting with the map, there is no way of positioning the view on the left side again.

[nuintun]

You can see new demo.

This is the only solution for the current version before #349

centerZoomedOut
initialPositionX={171}

Calc initialPositionX = (TransformWrapperSize - TransformComponentSize) / 2

Dynamic calculation cannot be avoided, and internal implementation also requires dynamic calculation.

[a-fortunato]

@nuintun why does it move & relocate when clicking anywhere, but it's not already in that position on the first render?

I raised this as a bug 🐛 because it would seem that it's missing some initial calculations that are fixed when the interaction calculations are done.

[JeremyRichert]

I have the same issue than @a-fortunato and centerOnInit is not working (wrong X centering), but after zooming it is being centered automatically and correctly.

[m1Ck1-pypy]

I solved this problem by adding additional styles to the TransformComponent attribute contentStyle. This also stretches the inner content to the entire container (aspect-ratio: 1).

<TransformComponent
    key={imageUrl}
    wrapperStyle={{ width: '100%', height: '100% }}
    contentStyle={{ width: '100%', height: '100%' }}
>
    <Image url={imageUrl} />
</TransformComponent>

Image component:

type Props = {
  url: string;
};
const Image = styled(Box)<Props>`
  width: 100%;
  height: 100%;
  background-image: ${({ url }) => `url(${url})`};
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1;
`;

export default Image;

[SurajMillicent]

You can use the centerOnInit property to ensure the correct positioning of elements on their initial render within the view. It resolves my issue in this scenario.

[jennyfofenny]

The centerOnInit property is not working correctly for me. I have set it to true, but on some images that are wider than they are tall, it moves the top left corner to the middle, rather than correctly centering. On clicking once, it centers correctly. Additionally, some too long images should have the y position of the image at the top, rather than the center.