Feature Request: Allow for zooming of images generated

[compiaffe]

As some UML diagrams can be very big it would be great if this plugin would allow for easy zooming on the images. Currently a right-click and Show Image can be used in conjunction with the browser in-built zooming.

It would be great to have something like the thumbnails and a lightbox as per this plugin: https://pythonhosted.org/sphinxcontrib-images/#examples

[yuja]

Patches are welcome. Perhaps it will need a trick to make UML images compatible with the images extension since we wouldn't want to duplicate codes to support a modern zooming feature.

For now, :scale: can be used to provide zooming of 90s (i.e. click to open the original image.)

[vermeeren]

I am thinking to maybe default <a href"..."> wrap all images. So by default clicking on a diagram, for all output types, will open the original PNG/SVG in browser. What do you think?

[yuja]

Isn't it annoying that you find exactly the same image of the same size is displayed by clicking it?

[vermeeren]

For all diagrams that go inside a <img/> the browser auto-downscales to the container the <img/> is in. So on the example pictures on #7 the top picture could be svg_obj and the bottom svg_img.

In that case clicking on a auto-downscaled image will make browser open it, this time in 100% size because the restricting container does not exist in that context. But as you say, clicking on images that fitted in the first place there will be no difference.

Another use case is that when SVG in inside <img/> you cannot select text inside the SVG, unlike with <object/>. However, when you open that SVG directly in browser you can select text from the SVG.

Unfortunately there is no way to know if the diagram will fit inside the container, it depends on HTML theme but also browser DPI and other things I think.

I think it does not hurt to always wrap in <a/> element, right now user must right click -> view image. Indeed opening like this is old-style, but it is a simple solution that will always work.

[yuja]

I didn't know max-width: 100% is set by the default style. That's why I thought inserting <a> is useless.

That said, neither the Sphinx core nor the graphviz extension appears to put hyperlink on images, and I don't want to make the plantuml extension diverged from them.

So, instead of inserting <a> statically, how about rewriting <img> nodes by a user-provided .js? Perhaps, it's easy if image nodes had class="plantuml".

[vermeeren]

Yeah I think that makes sense. So the extension just marks <img class="plantuml" .../> and then it is up to the documentation developer or theme to provide any fancy zooming.

[compiaffe]

That sounds like a good approach to me.

[mtnpke]

This is a possible JS custom script to use it with sphinxcontrib-images' lightbox when using the svg_img output format that does not include an <a> tag currently:

document.addEventListener('DOMContentLoaded', () => {
    const imgs = document.querySelectorAll("p.plantuml > img");
    let plantumlNo = 1;
    for (const img of imgs) {
        // Prepare link+lightbox
        const link = document.createElement("a");
        link.href = img.src;
        link.dataset["lightbox"] = "plantuml-" + plantumlNo;
        plantumlNo++;
        // Reparent img tag
        img.replaceWith(link);
        link.append(img);
    }
});

For me, however, this was not quite fitting since the lightbox does not have a zoom function. I found it more worthwhile to have the figure open in a new browser tab so it can be zoomed and panned with native browser functions:

document.addEventListener('DOMContentLoaded', () => {
    const imgs = document.querySelectorAll("p.plantuml > img");
    for (const img of imgs) {
        // Prepare link
        const link = document.createElement("a");
        link.href = img.src;
        link.target = "_blank";
        // Reparent img tag
        img.replaceWith(link);
        link.append(img);
    }
});