Provide (or replace the current viewer) a viewer that uses SVG instead of png/jpg #116
Comments
|
This is something to consider. A very simple solution is to provide a web-based viewer in an embedded browser component, that can show the svg. I've made a prototype and it works very well, but unfortunately the browser component does not support zoom. I guess it should be possible to implement zoom in and out in javascript e.g. by wrapping the svg code in some html+javascript that offers controls that changes the svg scaling. I currently just wrap the svg from plantuml in html+body, but it's easy to add a something more useful. It would be of great help if you could prototype that for me. |
|
The example below seems to work well. I've tested this with the internal Eclipse web browser, which is hopefully what you'll get in the browser component. The inlined SVG is produced by PlantUML. |
|
I couldn't make this work in the internal SWT browser widget, not the internal web browser. For these, double-clicking selected text in the diagram. It did however work in Safari. It might be this is platform-dependent. |
|
You could try enabling the control icons: This produces a plus and minus button directly in the graphic, which can be used to zoom in and out. That should certainly work for the internal web browser. What can I provide as support? A minimal program where this works with the internal SWT browser widget? I just tried and it doesn't work directly - I think one has to somehow enable support for javascript. |
|
It works now! I needed to enable javascript and use https for the js source url. Only remaining problem is that the browser control won't grow with the view, it resizes to be just the size of the contents. So if you zoom the contents is clipped, even though the view itself is big enough. |
|
After some debug output I don't think it's the browser that is the problem, it may be the viewBox attribute of the svg tag that does the clipping and that isn't adjusted by the zoom function. |
Can we take the size of the PlantUML window as the viewBox attribute? Cheers, |
|
Hi, how can I further support and push this forward? Especially in recent times I’ve been sharing my screen a lot and have to constantly change my screen resolution when showing PlantUML diagrams. Having SVG would be amazing 👍 Cheers, |
|
The SVG view prototype uses an embedded browser, which supports executing "arbitrary" javascript. One possible solution is to implement a small javascript API in the web page, in such a way it can be easily called from the view container. E.g. the view container can build the HTML (e.g. from a web template that could even be part of the workspace), load the HTML into the embedded web browser, execute "setViewBox(400, 800)" and the web page will update the SVG accordingly. This will make the web template pretty self contained and easier to experiment with. |
Can this be added in the next release? What can I do to make this happen? :) |
|
If you could make a prototype of the template including what javascript to execute from "outside" to handle zooming (and perhaps also panning). |
|
Hi, after some experimenting, I've found out that adding some CSS to With that the generated SVG now fits perfectly into the complete window, I can also pan and zoom as expected. What is still missing:
|
|
Does my fix above work for you? Cheers and thanks, |
|
The fix didn't work, unfortunately. Note, I'm on MacOS. |
|
Ok - I’ll try it out on Windows. |
|
So I’ve tried it out now on a Mac and on Windows. Works in both cases like a charm. I can zoom in and out either using gestures on my trackpad, or via CTRL+-, CTRL++. I can pan by clicking and pulling as usual. The view takes all available space without clipping. Could this be a Linux problem? I’m afraid I can’t easily test that. |
|
I'll have to try again... |
|
Note that you have to use the class as I pasted it in #116 (comment) The important part is the CSS styling paragraph to force the width and height. |
|
Any hope on making some progress here? I'm suffering without being able to zoom properly. As far as I can see the feature here is ready-to-go as an additional view. |
|
Hi @hallvard, thanks for including the SVG view! I've tried it out and noticed the following problems:
Below is an updated snippet for |
|
I've implemented this as the default, but have also added support for jmustache and a preference for setting the template URL. You can select a resource from the workspace and use the corresponding platform:/resource URL. Currently, the template only supports using {{{svg}}} as the placeholder for the generated svg to insert, but this may be extended later, e.g. with a title etc. |
|
I notice that the diagram is zoomed to fill the whole view, which makes small (simple) diagrams very big. Otherwise it seems to work well. I've also added (copied from a another project of mine) an action for opening the diagram in an external browser. |
As already discussed in #94 the current zoom in/out functionality is almost completely useless. I often share my screen and would love to be able to zoom in and out as required.
PlantUML itself can generate beautiful SVG graphics...
Are there already plans to provide an SVG-based viewer for the PlantUML plugin?
I would be happy to support this.
Cheers and thanks,
Tony
The text was updated successfully, but these errors were encountered: