Add zoom capability for bubbles

Itheum / explorer-dapp

Itheum Explorer enables for the exploration of the Itheum protocol

GNU General Public License v3.0

455 stars 3 forks source link

Add zoom capability for bubbles #89

Closed damienen closed 1 year ago

damienen commented 1 year ago

References: https://www.npmjs.com/package/react-svg-pan-zoom https://blog.logrocket.com/using-dangerouslysetinnerhtml-in-a-react-application/ https://npm.io/package/dompurify

newbreedofgeek commented 1 year ago

Hi @icegriffinguru

I'll give this to you.

this is the SVG app for MultiversX Bubbles - https://stg.explorer.itheum.io/multiversx-bubbles
You built the SVG viewer for this and I made some updates to it to make links open in new window.
We now want to try and implement a "pan and zoom" feature like you see here : https://www.npmjs.com/package/react-svg-pan-zoom
This pan and zoom feature should ONLY be in the multiversx-bubbles app and NOT on other SVG file viewer (my wallet)

Have a look and ask me any questions.

icegriffinguru commented 1 year ago

Mobile-friendly.

Also for SVG stuff https://www.npmjs.com/package/react-zoom-pan-pinch Based on npm trends and downloads / maintain looks good and it's light it's minzipped and have 9.4 kb https://npmtrends.com/pan-zoom-vs-panzoom-vs-react-svg-pan-zoom-vs-react-zoom-pan-pinch-vs-svg-pan-zoom And also found the storybook to test this library which is nice https://prc5.github.io/react-zoom-pan-pinch/?path=/story/examples-rerendering-content--rerendering-content

newbreedofgeek commented 1 year ago

@vmradulescu test link - https://github.com/Itheum/explorer-dapp/pull/130

CC @fuzzyduke @damienen

vmradulescu commented 1 year ago

https://www.loom.com/share/1c6db298a9b344f3aedc1d0e3e5364c1?sid=e26ff09c-22f7-4d9a-a3fb-c65810a71b86

@icegriffinguru

Above my feedback for the implementation on desktop. Thanks @Enciusan for the tips as well.

newbreedofgeek commented 1 year ago

@icegriffinguru I agree with @vmradulescu 's recommendations above.

In Summary, let's do the following>

Contain the "Image to the height of the visible Model". Centre it (margin: auto). Maintain aspect ratio

See example in image.. i.e.

    width: auto;
    aspect-ratio: 1 / 1;
    height: 475px; // you may need a way to dynamically detect and set this based on actual screen (desktop, mobile etc)
    margin: auto;

Make Icons bigger and make move them more towards the inside so it's more visible. Also, remove the scroll bar from the model body so user does not try and scroll and ONLY used the pan and zoom tools.

Test on Desktop, Tablet and Mobile view to make sure UX works the same for all.

newbreedofgeek commented 1 year ago

Only issue I just saw, is that we may end up with this when we do the above and do "pan and zoom"

Need to think of a better UX... give me some time

newbreedofgeek commented 1 year ago

I think this solves it: https://www.loom.com/share/ee46c55f7c244fcbacc67f20b20d3356

Set some initial zoom level and zoom into the "centre of image". This way the image takes the full canvas.
Make the icons bigger so the user sees them and knows that they need to interact with the image via the icons
Maybe hide the overflow on the body? so that the scroll bar is not used
Reset should go to the initial zoom level again

See video above.

@icegriffinguru @vmradulescu

vmradulescu commented 1 year ago

When initially opening the bubble map, it does not fit the screen, its around 60-70% of the bubble map. Reproduceable both on desktop and mobile. When clicking the fit to screen button, it is the same behaviour.

Expected: When opening the bubble map, it should completely fit the screen. Same with clicking the fit to screen button.