No zooming buttons in codesandbox examples (Desktop mode)

[ta1986]

I'm comparing examples from netlify and codesandbox:

https://uv-v4.netlify.app/#?manifest=&c=&m=&cv=&xywh=-2409%2C-197%2C7385%2C3936

https://codesandbox.io/s/uv-simple-example-s0czy -> Make the browser area wider -> Click on refresh button so the UV loads in Desktop mode.

When I hover my mouse on images in the first example, I see zoom in / zoom out / rotate buttons on the top left. When I do the same in the second example, there is no button at all. Could you explain why it happens and how to enable those buttons in the second example?

[demiankatz]

@ta1986, I'm not very familiar with Code Sandbox, but I wonder if part of the problem has to do with the way UV is being embedded within the Code Sandbox environment. I notice that if I go to your second example link and shrink the code area of the screen, the missing controls appear after a certain point. I think this has to do with UV's responsive features -- I think it may not be correctly detecting the available screen width in this environment for some reason.

Also note that the example you shared is using a very old version of UV4 (4.0.0 -- we're currently up to 4.0.25). It's possible the problem is being made worse by bugs that have been subsequently fixed. It may be worth updating to a newer release to see if that helps.

[ta1986]

Thanks @demiankatz. I got the netlify example from UV homepage and the codesandbox example from UV examples wiki page. I have just noticed that control buttons also disappear in the first example if I shrink the browser width. Issue still exists when I switch to v4.0.25. Yes, width cutoff of responsive design is the root cause.
This was not an issue in UV 3.x though.

[demiankatz]

@ta1986, it seems likely that the responsive cut-offs were revised sometime after UV3. I feel like there has been recent work/discussion about responsive breakpoints, but if upgrading to 4.0.25 doesn't change anything, it's possible that there are still issues that need to be addressed. I don't see anything in open PRs that would change this. If you have ideas on how things should be improved, feel free to open a PR. If you're not sure, or need help finding the relevant styles, let me know, and I'll see if I can point you in the right direction. (I'm not too familiar with the code, but I think I could find it with a bit of digging...)

[ta1986]

@demiankatz Those buttons belong to viewportNavButtonsContainer. I think this container should have the same cutoffs as the LeftPanel OR it should only be hidden in mobile. In UV4, this panel is currently not available on anything between mobile and desktop fullscreen.
I'm not familiar with UV code, so I don't know where the right place to fix it is.

[demiankatz]

@ta1986, it looks like styles for viewportNavButtonsContainer are only defined in the OpenSeadragon center panel module, so that module's LESS files would probably be the most appropriate place for styles to be added or changed... but please take my advice with a grain of salt, since I haven't done much work with UV styling myself. :-)

[ta1986]

@demiankatz Neither of the LESS files contains the cutoff width. We also use the public UV hosted at https://cdn.jsdelivr.net/npm/[email protected]/dist/ instead of building it ourselves. Since our use case is primarily for desktops, our temporary workaround is to set the iframe width to 102% to force the zoom buttons to appear.

.uv-iframe { position: absolute; top: 0; left: 0; width: 102%; height: 100%; border: 0; }

[demiankatz]

I'm glad you've found a workaround for the moment, @ta1986 -- I have tracked this issue on the UV community board to ensure that it is discussed further at a future steering group meeting or community call, so hopefully we'll come up with a better solution eventually!