Allow setting {currentPositionX, currentPositionY}
midzelis opened this issue · comments
Description of the problem
I'm implementing a photo viewer. You start with the image fully zoomed out. This image is a low-resolution thumbnail. As you zoom in, this triggers a load of the original high-resolution image. Of course, the new image has different dimensions.
I preserve the old state of image-zoom, then I dispose the old image-zoom bound to the old img element, and replace it with a new image element and re-initialize image-zoom.
Then, I update the old state by turning the old currentPositionX/Y into a percentage. I then calculate the new values for the the new image dimensions that are an equivalent to the old image position. I try to set new state on image-zoom, but image-zoom ignores the currentPositionX/Y values.
Could image-zoom be enhanced to allow me to set the currentPositionX/Y values? Or better yet, allow me to read/write the values using percentages?
Hi Min, thanks for your contribution to the project. I would like to ask if it's possible for you to reproduce an issue in a dedicated repo and share it to me to have a look? I then will able to provide my expertise on that. Thanks :)
Hi. I did manage to create a demo of the problem. In fact, in creating this demo the problem manifests a bit worse than in the actual app. Load up this URL, and then click 'Problem'
You'll see an image of a bird load. Then zoom in to the bottom right corner of the image. This will trigger a background load of a higher rez image. After the image is loaded, the x/y position of the bird is lost, even if i did the calculations to convert the old x/y position based on the higher rez image dimensions.
Additionally, I'm limiting the height/width of the image element here, so that when the new image loads in, it doesn't rescale/reflow the entire layout. But even with the height/width constrained, there is a very noticeable reflow/layout while the zoom-image lib initializes.
I've added a delay to the high-rez image load, to give you a change to zoom deeply before the image is replaced.
I was able to find a workaround, since I also included. In the workaround, I basically only replace the img element with the new data - and do not destroy/recreate the container div. This ends up working great. I'm not sure why this is working.
However, I do think it would be a nice addition if the library supported an ability to initialize itself to a previous state including the x/y positions - ZoomImageWheelStateUpdate only allow you to set zoom level and rotation. This would be important if you were to start with an image that has been already zoomed into the bottom right corner of the image, for example.
Alternatively, maybe add a function to re-read the image height/width from the element - and adjust itself to fit that.
Repro case is here: https://stackblitz.com/edit/vitejs-vite-neurej?file=src%2FApp.svelte
I wonder why you needed key to reset things on image's src change. The DOM is good to preserve in this case I believe 😄
I removed that and it works as I expected https://stackblitz.com/edit/vitejs-vite-hie4ux?file=src%2Flib%2Fproblem.svelte
However, I do think it would be a nice addition if the library supported an ability to initialize itself to a previous state including the x/y positions - ZoomImageWheelStateUpdate only allow you to set zoom level and rotation
Yeah. I think it's a nice feature to have and it's quite doable. I will find sometimes to implement this. Thanks 😊
Hi there, after some thinking I conclude that we should go on and stick to the minimal option for now which is having support for initialState - this should be enough to restore previous zooming position. The more code we add, the bigger the bundle size. Whether or not to expose currentPositionX and currentPositionY can be waited until we have more valid use cases 😉
Hi there, I closed an issue as it should be now possible to initialize state on load with initialState option already :)