search

hallvard / plantuml

Embed UML diagrams in files and view them in Eclipse
http://plantuml.sourceforge.net/
209 stars 57 forks source link

Provide (or replace the current viewer) a viewer that uses SVG instead of png/jpg #116

Open anthonyanjorin opened 3 years ago

anthonyanjorin commented 3 years ago

As already discussed in https://github.com/hallvard/plantuml/issues/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

hallvard commented 3 years ago

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.

hallvard commented 3 years ago

Links:

anthonyanjorin commented 3 years ago

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.

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>
  </head>
  <body>
    <h1>Demo for svg-pan-zoom</h1>
    <svg id="demo-plantuml" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="175px" preserveAspectRatio="none" style="width:547px;height:175px;" version="1.1" viewBox="0 0 547 175" width="547px" zoomAndPan="magnify"><defs><filter height="300%" id="f1s0d3ee1u0uek" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><!--MD5=[b2f23c4a06b9bc4c947f037f864aea3c]
        class Class01--><rect fill="#FEFECE" filter="url(#f1s0d3ee1u0uek)" height="48" id="Class01" style="stroke: #A80036; stroke-width: 1.5;" width="78" x="6" y="8"/><ellipse cx="21" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M23.4731,30.1431 Q22.8921,30.4419 22.2529,30.5913 Q21.6138,30.7407 20.9082,30.7407 Q18.4014,30.7407 17.0815,29.0889 Q15.7617,27.437 15.7617,24.3159 Q15.7617,21.1865 17.0815,19.5347 Q18.4014,17.8828 20.9082,17.8828 Q21.6138,17.8828 22.2612,18.0322 Q22.9087,18.1816 23.4731,18.4805 L23.4731,21.2031 Q22.8423,20.6221 22.2488,20.3523 Q21.6553,20.0825 21.0244,20.0825 Q19.6797,20.0825 18.9949,21.1492 Q18.3101,22.2158 18.3101,24.3159 Q18.3101,26.4077 18.9949,27.4744 Q19.6797,28.541 21.0244,28.541 Q21.6553,28.541 22.2488,28.2712 Q22.8423,28.0015 23.4731,27.4204 Z "/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="35" y="28.5352">Class01</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="83" y1="40" y2="40"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="83" y1="48" y2="48"/><!--MD5=[67b7f66b9c6b27d60ed6d0424460c06c]
        class Class02--><rect fill="#FEFECE" filter="url(#f1s0d3ee1u0uek)" height="48" id="Class02" style="stroke: #A80036; stroke-width: 1.5;" width="78" x="6" y="116"/><ellipse cx="21" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M23.4731,138.1431 Q22.8921,138.4419 22.2529,138.5913 Q21.6138,138.7407 20.9082,138.7407 Q18.4014,138.7407 17.0815,137.0889 Q15.7617,135.437 15.7617,132.3159 Q15.7617,129.1865 17.0815,127.5347 Q18.4014,125.8828 20.9082,125.8828 Q21.6138,125.8828 22.2612,126.0322 Q22.9087,126.1816 23.4731,126.4805 L23.4731,129.2031 Q22.8423,128.6221 22.2488,128.3523 Q21.6553,128.0825 21.0244,128.0825 Q19.6797,128.0825 18.9949,129.1492 Q18.3101,130.2158 18.3101,132.3159 Q18.3101,134.4077 18.9949,135.4744 Q19.6797,136.541 21.0244,136.541 Q21.6553,136.541 22.2488,136.2712 Q22.8423,136.0015 23.4731,135.4204 Z "/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="35" y="136.5352">Class02</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="83" y1="148" y2="148"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="7" x2="83" y1="156" y2="156"/><!--MD5=[e34eefe962fcadefcbf83660cc436420]
        class Class03--><rect fill="#FEFECE" filter="url(#f1s0d3ee1u0uek)" height="48" id="Class03" style="stroke: #A80036; stroke-width: 1.5;" width="78" x="119" y="8"/><ellipse cx="134" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M136.4731,30.1431 Q135.8921,30.4419 135.2529,30.5913 Q134.6138,30.7407 133.9082,30.7407 Q131.4014,30.7407 130.0815,29.0889 Q128.7617,27.437 128.7617,24.3159 Q128.7617,21.1865 130.0815,19.5347 Q131.4014,17.8828 133.9082,17.8828 Q134.6138,17.8828 135.2612,18.0322 Q135.9087,18.1816 136.4731,18.4805 L136.4731,21.2031 Q135.8423,20.6221 135.2488,20.3523 Q134.6553,20.0825 134.0244,20.0825 Q132.6797,20.0825 131.9949,21.1492 Q131.3101,22.2158 131.3101,24.3159 Q131.3101,26.4077 131.9949,27.4744 Q132.6797,28.541 134.0244,28.541 Q134.6553,28.541 135.2488,28.2712 Q135.8423,28.0015 136.4731,27.4204 Z "/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="148" y="28.5352">Class03</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="120" x2="196" y1="40" y2="40"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="120" x2="196" y1="48" y2="48"/><!--MD5=[d53a23475d458e69a9e37a48405189e2]
        class Class04--><rect fill="#FEFECE" filter="url(#f1s0d3ee1u0uek)" height="48" id="Class04" style="stroke: #A80036; stroke-width: 1.5;" width="78" x="119" y="116"/><ellipse cx="134" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M136.4731,138.1431 Q135.8921,138.4419 135.2529,138.5913 Q134.6138,138.7407 133.9082,138.7407 Q131.4014,138.7407 130.0815,137.0889 Q128.7617,135.437 128.7617,132.3159 Q128.7617,129.1865 130.0815,127.5347 Q131.4014,125.8828 133.9082,125.8828 Q134.6138,125.8828 135.2612,126.0322 Q135.9087,126.1816 136.4731,126.4805 L136.4731,129.2031 Q135.8423,128.6221 135.2488,128.3523 Q134.6553,128.0825 134.0244,128.0825 Q132.6797,128.0825 131.9949,129.1492 Q131.3101,130.2158 131.3101,132.3159 Q131.3101,134.4077 131.9949,135.4744 Q132.6797,136.541 134.0244,136.541 Q134.6553,136.541 135.2488,136.2712 Q135.8423,136.0015 136.4731,135.4204 Z "/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="148" y="136.5352">Class04</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="120" x2="196" y1="148" y2="148"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="120" x2="196" y1="156" y2="156"/><!--MD5=[21c802bf509ebb275d96eccffaf3e0b6]
        class Class05--><rect fill="#FEFECE" filter="url(#f1s0d3ee1u0uek)" height="48" id="Class05" style="stroke: #A80036; stroke-width: 1.5;" width="78" x="232" y="8"/><ellipse cx="247" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M249.4731,30.1431 Q248.8921,30.4419 248.2529,30.5913 Q247.6138,30.7407 246.9082,30.7407 Q244.4014,30.7407 243.0815,29.0889 Q241.7617,27.437 241.7617,24.3159 Q241.7617,21.1865 243.0815,19.5347 Q244.4014,17.8828 246.9082,17.8828 Q247.6138,17.8828 248.2612,18.0322 Q248.9087,18.1816 249.4731,18.4805 L249.4731,21.2031 Q248.8423,20.6221 248.2488,20.3523 Q247.6553,20.0825 247.0244,20.0825 Q245.6797,20.0825 244.9949,21.1492 Q244.3101,22.2158 244.3101,24.3159 Q244.3101,26.4077 244.9949,27.4744 Q245.6797,28.541 247.0244,28.541 Q247.6553,28.541 248.2488,28.2712 Q248.8423,28.0015 249.4731,27.4204 Z "/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="261" y="28.5352">Class05</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="233" x2="309" y1="40" y2="40"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="233" x2="309" y1="48" y2="48"/><!--MD5=[247dd373b5711b206209116e093ec52c]
        class Class06--><rect fill="#FEFECE" filter="url(#f1s0d3ee1u0uek)" height="48" id="Class06" style="stroke: #A80036; stroke-width: 1.5;" width="78" x="232" y="116"/><ellipse cx="247" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M249.4731,138.1431 Q248.8921,138.4419 248.2529,138.5913 Q247.6138,138.7407 246.9082,138.7407 Q244.4014,138.7407 243.0815,137.0889 Q241.7617,135.437 241.7617,132.3159 Q241.7617,129.1865 243.0815,127.5347 Q244.4014,125.8828 246.9082,125.8828 Q247.6138,125.8828 248.2612,126.0322 Q248.9087,126.1816 249.4731,126.4805 L249.4731,129.2031 Q248.8423,128.6221 248.2488,128.3523 Q247.6553,128.0825 247.0244,128.0825 Q245.6797,128.0825 244.9949,129.1492 Q244.3101,130.2158 244.3101,132.3159 Q244.3101,134.4077 244.9949,135.4744 Q245.6797,136.541 247.0244,136.541 Q247.6553,136.541 248.2488,136.2712 Q248.8423,136.0015 249.4731,135.4204 Z "/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="261" y="136.5352">Class06</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="233" x2="309" y1="148" y2="148"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="233" x2="309" y1="156" y2="156"/><!--MD5=[83017deacfdfe1c29bd0eb2a2cc9c723]
        class Class07--><rect fill="#FEFECE" filter="url(#f1s0d3ee1u0uek)" height="48" id="Class07" style="stroke: #A80036; stroke-width: 1.5;" width="78" x="345" y="8"/><ellipse cx="360" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M362.4731,30.1431 Q361.8921,30.4419 361.2529,30.5913 Q360.6138,30.7407 359.9082,30.7407 Q357.4014,30.7407 356.0815,29.0889 Q354.7617,27.437 354.7617,24.3159 Q354.7617,21.1865 356.0815,19.5347 Q357.4014,17.8828 359.9082,17.8828 Q360.6138,17.8828 361.2612,18.0322 Q361.9087,18.1816 362.4731,18.4805 L362.4731,21.2031 Q361.8423,20.6221 361.2488,20.3523 Q360.6553,20.0825 360.0244,20.0825 Q358.6797,20.0825 357.9949,21.1492 Q357.3101,22.2158 357.3101,24.3159 Q357.3101,26.4077 357.9949,27.4744 Q358.6797,28.541 360.0244,28.541 Q360.6553,28.541 361.2488,28.2712 Q361.8423,28.0015 362.4731,27.4204 Z "/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="374" y="28.5352">Class07</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="346" x2="422" y1="40" y2="40"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="346" x2="422" y1="48" y2="48"/><!--MD5=[0e75c8574cc137f0f93c5ac687b4b98c]
        class Class08--><rect fill="#FEFECE" filter="url(#f1s0d3ee1u0uek)" height="48" id="Class08" style="stroke: #A80036; stroke-width: 1.5;" width="78" x="345" y="116"/><ellipse cx="360" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M362.4731,138.1431 Q361.8921,138.4419 361.2529,138.5913 Q360.6138,138.7407 359.9082,138.7407 Q357.4014,138.7407 356.0815,137.0889 Q354.7617,135.437 354.7617,132.3159 Q354.7617,129.1865 356.0815,127.5347 Q357.4014,125.8828 359.9082,125.8828 Q360.6138,125.8828 361.2612,126.0322 Q361.9087,126.1816 362.4731,126.4805 L362.4731,129.2031 Q361.8423,128.6221 361.2488,128.3523 Q360.6553,128.0825 360.0244,128.0825 Q358.6797,128.0825 357.9949,129.1492 Q357.3101,130.2158 357.3101,132.3159 Q357.3101,134.4077 357.9949,135.4744 Q358.6797,136.541 360.0244,136.541 Q360.6553,136.541 361.2488,136.2712 Q361.8423,136.0015 362.4731,135.4204 Z "/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="374" y="136.5352">Class08</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="346" x2="422" y1="148" y2="148"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="346" x2="422" y1="156" y2="156"/><!--MD5=[11c0341282256c64706f32de960d439a]
        class Class09--><rect fill="#FEFECE" filter="url(#f1s0d3ee1u0uek)" height="48" id="Class09" style="stroke: #A80036; stroke-width: 1.5;" width="78" x="458" y="8"/><ellipse cx="473" cy="24" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M475.4731,30.1431 Q474.8921,30.4419 474.2529,30.5913 Q473.6138,30.7407 472.9082,30.7407 Q470.4014,30.7407 469.0815,29.0889 Q467.7617,27.437 467.7617,24.3159 Q467.7617,21.1865 469.0815,19.5347 Q470.4014,17.8828 472.9082,17.8828 Q473.6138,17.8828 474.2612,18.0322 Q474.9087,18.1816 475.4731,18.4805 L475.4731,21.2031 Q474.8423,20.6221 474.2488,20.3523 Q473.6553,20.0825 473.0244,20.0825 Q471.6797,20.0825 470.9949,21.1492 Q470.3101,22.2158 470.3101,24.3159 Q470.3101,26.4077 470.9949,27.4744 Q471.6797,28.541 473.0244,28.541 Q473.6553,28.541 474.2488,28.2712 Q474.8423,28.0015 475.4731,27.4204 Z "/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="487" y="28.5352">Class09</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="459" x2="535" y1="40" y2="40"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="459" x2="535" y1="48" y2="48"/><!--MD5=[f0780a43e5c0af3c52b439b7f3f3994e]
        class Class10--><rect fill="#FEFECE" filter="url(#f1s0d3ee1u0uek)" height="48" id="Class10" style="stroke: #A80036; stroke-width: 1.5;" width="78" x="458" y="116"/><ellipse cx="473" cy="132" fill="#ADD1B2" rx="11" ry="11" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M475.4731,138.1431 Q474.8921,138.4419 474.2529,138.5913 Q473.6138,138.7407 472.9082,138.7407 Q470.4014,138.7407 469.0815,137.0889 Q467.7617,135.437 467.7617,132.3159 Q467.7617,129.1865 469.0815,127.5347 Q470.4014,125.8828 472.9082,125.8828 Q473.6138,125.8828 474.2612,126.0322 Q474.9087,126.1816 475.4731,126.4805 L475.4731,129.2031 Q474.8423,128.6221 474.2488,128.3523 Q473.6553,128.0825 473.0244,128.0825 Q471.6797,128.0825 470.9949,129.1492 Q470.3101,130.2158 470.3101,132.3159 Q470.3101,134.4077 470.9949,135.4744 Q471.6797,136.541 473.0244,136.541 Q473.6553,136.541 474.2488,136.2712 Q474.8423,136.0015 475.4731,135.4204 Z "/><text fill="#000000" font-family="sans-serif" font-size="12" lengthAdjust="spacingAndGlyphs" textLength="46" x="487" y="136.5352">Class10</text><line style="stroke: #A80036; stroke-width: 1.5;" x1="459" x2="535" y1="148" y2="148"/><line style="stroke: #A80036; stroke-width: 1.5;" x1="459" x2="535" y1="156" y2="156"/><!--MD5=[3ab52052fd7925c5f64fca5d41d6866e]
        reverse link Class01 to Class02--><path d="M45,76.2911 C45,89.8171 45,104.1835 45,115.8436 " fill="none" id="Class01&lt;-Class02" style="stroke: #A80036; stroke-width: 1.0;"/><polygon fill="none" points="38.0001,76.2373,45,56.2373,52.0001,76.2373,38.0001,76.2373" style="stroke: #A80036; stroke-width: 1.0;"/><!--MD5=[0815ca07f8d628dc1a46a48ef0cd4c01]
        reverse link Class03 to Class04--><path d="M158,69.6145 C158,84.9531 158,102.2402 158,115.8436 " fill="none" id="Class03&lt;-Class04" style="stroke: #A80036; stroke-width: 1.0;"/><polygon fill="#A80036" points="158,56.2373,154,62.2373,158,68.2373,162,62.2373,158,56.2373" style="stroke: #A80036; stroke-width: 1.0;"/><!--MD5=[07ec844cc9d193d99f69abe09e63aa9e]
        reverse link Class05 to Class06--><path d="M271,69.6145 C271,84.9531 271,102.2402 271,115.8436 " fill="none" id="Class05&lt;-Class06" style="stroke: #A80036; stroke-width: 1.0;"/><polygon fill="#FFFFFF" points="271,56.2373,267,62.2373,271,68.2373,275,62.2373,271,56.2373" style="stroke: #A80036; stroke-width: 1.0;"/><!--MD5=[cd6c6022d9f7be31b268d5c573778c45]
        link Class07 to Class08--><path d="M384,56.2373 C384,74.024 384,98.0759 384,115.8436 " fill="none" id="Class07-Class08" style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 7.0,7.0;"/><!--MD5=[012abb55b9b004b4a603a60db8edb83a]
        link Class09 to Class10--><path d="M497,56.2373 C497,74.024 497,98.0759 497,115.8436 " fill="none" id="Class09-Class10" style="stroke: #A80036; stroke-width: 1.0;"/><!--MD5=[1fcdb698eea41232521a10902c7d5e1b]
        @startuml
        Class01 <|- - Class02
        Class03 *- - Class04
        Class05 o- - Class06
        Class07 .. Class08
        Class09 - - Class10
        @enduml

        PlantUML version 1.2019.11(Sun Sep 22 12:02:15 CEST 2019)
        (EPL source distribution)
        Java Runtime: OpenJDK Runtime Environment
        JVM: OpenJDK 64-Bit Server VM
        Java Version: 14.0.2+12-46
        Operating System: Mac OS X
        Default Encoding: UTF-8
        Language: en
        Country: DE
        --></g>
    </svg>
    <script>
      window.onload = function() {
        window.zoomPlantuml = svgPanZoom('#demo-plantuml', {
          zoomEnabled: true,
          controlIconsEnabled: false,
          fit: true,
          center: true,
        });
      };
    </script>
  </body>
</html>
hallvard commented 3 years ago

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.

anthonyanjorin commented 3 years ago

You could try enabling the control icons:

...
controlIconsEnabled: true,
...

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.

hallvard commented 3 years ago

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.

hallvard commented 3 years ago

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.

anthonyanjorin commented 3 years ago

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, Tony

anthonyanjorin commented 3 years ago

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, Tony

hallvard commented 3 years ago

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.

anthonyanjorin commented 3 years ago

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? :)

hallvard commented 3 years ago

If you could make a prototype of the template including what javascript to execute from "outside" to handle zooming (and perhaps also panning).

anthonyanjorin commented 3 years ago

Hi,

after some experimenting, I've found out that adding some CSS to Svg2InteractiveHtmlConverter.java seems to do the trick for me (at least on a Mac):

package net.sourceforge.plantuml.eclipse.svg;

public class Svg2InteractiveHtmlConverter extends SimpleSvg2HtmlConverter {

    public Svg2InteractiveHtmlConverter() {
        super("<html>\n" +
                "  <head>\n" +
                "    <script src=\"https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js\"></script>\n" +
                "    <style type=\"text/css\" media=\"screen\">\n" +
                "      svg {\n" +
                "        display:block; border:1px; position:absolute;\n" +
                "        width:100% !important; height:100% !important;\n" +
                "      }\n" +
                "    </style>\n" +
                "  </head>\n" +
                "  <body>\n",
                "\n    <script>\n" +
                        "      window.onload = function() {\n" +
                        "        window.zoomPlantuml = svgPanZoom('#plantuml', {\n" +
                        "          zoomEnabled: true,\n" +
                        "          controlIconsEnabled: false,\n" +
                        "          fit: true,\n" +
                        "          center: true,\n" +
                        "        });\n" +
                        "      };\n" +
                        "    </script>\n" +
                        "  </body>\n" +
                "</html>");
    }
}

With that the generated SVG now fits perfectly into the complete window, I can also pan and zoom as expected.

What is still missing:

anthonyanjorin commented 3 years ago

Does my fix above work for you? Could we release the view soon (it would be great to have it and it can always be further improved)?

Cheers and thanks, Tony

hallvard commented 3 years ago

The fix didn't work, unfortunately. Note, I'm on MacOS.

anthonyanjorin commented 3 years ago

Ok - I’ll try it out on Windows.

anthonyanjorin commented 3 years ago

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.

hallvard commented 3 years ago

I'll have to try again...

anthonyanjorin commented 3 years ago

Note that you have to use the class as I pasted it in https://github.com/hallvard/plantuml/issues/116#issuecomment-753657126

The important part is the CSS styling paragraph to force the width and height.

anthonyanjorin commented 3 years ago

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.

anthonyanjorin commented 2 years ago

Hi @hallvard,

thanks for including the SVG view!

I've tried it out and noticed the following problems:

  1. The previous URL has now become invalid :( It was https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js but is now https://bumbu.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js. This change is troublesome - perhaps you should consider making a copy of the required .js file and hosting it on the PlantUML GitHub pages?
  2. I see that you removed the !important directives in the svg block (... width:100% !important; height:100% !important; ...). These are important, however, as the binding box does not work correctly otherwise.
  3. Now that I've used the view a bit, I think it might be better to enable the control icons per default controlIconsEnabled: true.

Below is an updated snippet for Svg2InteractiveHtmlConverter with all suggested changes included:

package net.sourceforge.plantuml.eclipse.svg;

public class Svg2InteractiveHtmlConverter extends SimpleSvg2HtmlConverter {

    public Svg2InteractiveHtmlConverter() {
        super("<html>\n" +
                "  <head>\n" +
                "    <script src=\"https://bumbu.github.io/svg-pan-zoom/dist/svg-pan-zoom.min.js\"></script>\n" +
                "    <style type=\"text/css\" media=\"screen\">\n" +
                "      svg {\n" +
                "        display:block; border:1px; position:absolute;\n" +
                "        width:100% !important; height:100% !important;\n" +
                "      }\n" +
                "    </style>\n" +
                "  </head>\n" +
                "  <body>\n",
                "\n    <script>\n" +
                        "      window.onload = function() {\n" +
                        "        window.zoomPlantuml = svgPanZoom('#plantuml', {\n" +
                        "          zoomEnabled: true,\n" +
                        "          controlIconsEnabled: true,\n" +
                        "          fit: true,\n" +
                        "          center: true,\n" +
                        "        });\n" +
                        "      };\n" +
                        "    </script>\n" +
                        "  </body>\n" +
                "</html>");
    }
}
hallvard commented 2 years ago

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.

hallvard commented 2 years ago

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.