BetterTyped/react-zoom-pan-pinch

Minimap not working when content is larger than one screen?

lucasmoeskops opened this issue · 3 comments

Describe the bug
I just tried to use the MiniMap feature, of which I really like that it's supported. Basically it works directly, which is really nice. There seems to be a bug with it however for my specific case. My content takes up about 5 screens horizontally and 2 screens vertically. However, the MiniMap seems to assume the content width is at most until the end of the screen. The red-bordered area is correct on the top and on the left area, but on the bottom and the right it always stretches to the very end of the minimap, even though I'm only seeing a small part of the content.

Is it maybe not suited for content that is bigger than 1 screen?

To Reproduce
Steps to reproduce the behavior:

  1. Create a transformwrapper and transformcomponent of a html component that is bigger than 1 screen width
  2. Use the minimap
  3. Notice that it stretches to the very end, even though not all content is visible.

Expected behavior
The Minimap visible bordered area should show the right area compared to the whole size of the html element, and not just to the end of the screen.

I am trying to use the MiniMap feature as well and I have a noticed that while the fix provided by @nuintun made the red area better by highlighting what the user is seeing, however it does not take into account the whole width of the content as @lucasmoeskops mentioned(I have not checked for height). If width of the content is "2560px" and width of the element where the content is shown is "800px" then the MiniMap shows only the minified content till "800px" mark. It would be nice if MiniMap shows the entire content till "2560px" in the minified version and not cut off the content. I am using the following image with dimensions 2560*1600 : https://www.wallpaperflare.com/tom-and-jerry-greatests-chases-wallpaper-hd-for-desktop-full-screen-2560%C3%971600-wallpaper-bspmn/
PFA the screenshot of what I see on the screen when completely zoomed out with minScale = 0.3(done so that the entire image is visible). I also noticed that the red border is missing in the MiniMap on the right and bottom when scale < 1.
MiniMap_example

@PankajKanjani Yes, this is a known issue, and I considered this issue when I fixed it, because there was too much logic to change, but I didn't have much time, so I just did a simple fix.

@nuintun Thank you for the fix that you did. @prc5 I think the package is amazing with all the functionalities that it provides. I would also like to use the minimap feature so can someone please tell if there is an open issue as this one is marked closed and it is not completely resolved. That would help to keep track of things. Many thanks.