Pan and zoom the SVG preview

[ping13]

For complex diagrams and/or landscape-focused diagrams, it is hard to read details.

A simple JS-based zoom-and-pan solution would help, like https://github.com/luncheon/svg-pan-zoom-container.

[gissehel]

Usually, it's not a good idea to mix react (like niolesk use) and javascript code that doesn't use react. But I'll try to see if I can include react-svg-pan-zoom ( https://chrvadala.github.io/react-svg-pan-zoom/ ) (I don't know when I'll have time to do that).

[ping13]

Yes, thanks for acknowledging this! The linked JS solution was just for inspiration. Thank you for looking into it, I appreciate it and I sure am respectful of your time. Thank you for developing and publishing niolesk!

[ping13]

Just thinking about it, maybe a simpler solution to small diagrams could be that the editor pane and the viewing pane would be resizable: I'm thinking of a handle on the horizontal line between the two panes that can be moved left and right to increase one view and decrease the other.

[gissehel]

I've tried to integrate Pan&Zoom component react-svg-pan-zoom, and it's a failure.

First html-copy of "diagram + link" (for wiki that support html paste like notion.so or confluence) doesn't work anymore. I've workaround that by disabling by default pan&zoom and creating a button like "zen mode" to enable it.

But the component is responding weirdly. Sometimes it works, sometimes that are CORS errors when loading the svg, while everything seems to be exactly the same. The component doesn't seems to be able to read the width/height of the image inside the svg, but seems to require me to provide it explicitly, which I can't. I've tried various workaround, but I'll stop trying with this component.

Next time I'll work on it, I'll try to use react-pan-zoom-pinch : https://prc5.github.io/react-zoom-pan-pinch/?path=/story/examples-big-image--big-image

[gissehel]

You can try the "buggy" version if you want by using the docker image ghcr.io/webgiss/niolesk:panzoom instead of ghcr.io/webgiss/niolesk

[gissehel]

Hello, sorry for delay, I've implemented again the feature, this time with the lib react-pan-zoom-pinch.

Integration had much less problems than with the previous lib.

I haven't added any buttons, so it requires to use either mouse wheel or pan on mobile. It does seems to add caveates to classical usage. It's currently compiling on github actions CI. Once finished, I'll probably merge and release a new version (thus it will deploy it on niolesk.top)

[gissehel]

docker image is accessible with name ghcr.io/webgiss/niolesk:29-pan-zoom

[gissehel]

The new version has been merged and released under v1.5.30.

It's now accessible under https://niolesk.top/

Does this new version solves your problem ?

[gissehel]

I'll consider the issue closed, and reopen it if it doesn't solve your problem.

[ping13]

Sorry for my very late response. This looks great, thank you!