Fix for: SVG export of styles in Firefox is broken. #149

eclipse-sprotty · Dec 4, 2023 · 3b613cd · 3b613cd
1 parent 781c032
commit 3b613cd
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 9 deletions.
diff --git a/examples/circlegraph/circlegraph.html b/examples/circlegraph/circlegraph.html
@@ -37,7 +37,7 @@ <h1>Sprotty Circles Example</h1>
                 <div id="sprotty" class="sprotty" />
             </div>
             <div class="copyright">
-                &copy; 2017 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
+                &copy; 2023 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
             </div>
         </div>
     </div>

diff --git a/examples/classdiagram/class-diagram.html b/examples/classdiagram/class-diagram.html
@@ -10,6 +10,20 @@
     <link rel="stylesheet" href="css/page.css">
     <!-- support Microsoft browsers -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dom4/3.0.0/dom4.js">
+    <script>
+        document.addEventListener("DOMContentLoaded", function toggleShortcuts(){
+            var isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
+            var mac = document.getElementById('mac');
+            var other = document.getElementById('other');
+            if (isMac) {
+                mac.style.display = 'block';
+                other.style.display = 'none';
+            } else {
+                mac.style.display = 'none';
+                other.style.display = 'block';
+            }
+        });
+    </script>
 </head>
 <body>
     <div class="container">
@@ -25,8 +39,16 @@ <h1>Sprotty Class Diagram Example</h1>
             <div class="col-md-12">
                 <div id="sprotty" class="sprotty"/>
             </div>
-            <div class="copyright">
-                &copy; 2023 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
+            <div class="footer">
+                <div id="mac" class="shortcuts">
+                    <b>Fit to screen:</b> Cmd+Shift+F, <b>Center selected:</b> Cmd+Shift+C, <b>Export SVG:</b> Cmd+Shift+E
+                </div>
+                <div id="other" class="shortcuts" style="display: none;">
+                    <b>Fit to screen:</b> Ctrl+Shift+F, <b>Center selected:</b> Ctrl+Shift+C, <b>Export SVG:</b> Ctrl+Shift+E
+                </div>
+                <div class="copyright">
+                    &copy; 2023 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
+                </div>
             </div>
         </div>
     </div>

diff --git a/examples/classdiagram/css/page.css b/examples/classdiagram/css/page.css
@@ -14,11 +14,23 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-.copyright {
+
+.footer {
     margin-top: 10px;
     text-align: right;
     font-size: 10px;
     color: #888;
+
+    display: flex;
+    justify-content: space-between;
+}
+
+.shortcuts {
+    text-align: left;
+}
+
+.copyright {
+    text-align: right;
 }
 
 .help {

diff --git a/examples/multicore/multicore.html b/examples/multicore/multicore.html
@@ -25,7 +25,7 @@ <h1>Sprotty Multicore Example</h1>
             </div>
             <div class="col-md-12">
                 <div class="copyright">
-                    &copy; 2017 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
+                    &copy; 2023 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
                 </div>
             </div>
         </div>

diff --git a/examples/random-graph-distributed/random-graph.html b/examples/random-graph-distributed/random-graph.html
@@ -24,7 +24,7 @@ <h1>Sprotty Random Graph Example</h1>
                 <div id="sprotty" class="sprotty"/>
             </div>
             <div class="copyright">
-                &copy; 2022 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
+                &copy; 2023 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
             </div>
             If no diagram shows up here, you probably haven't started the elk-server yet.
             Please follow the steps below:

diff --git a/examples/random-graph/random-graph.html b/examples/random-graph/random-graph.html
@@ -33,7 +33,7 @@ <h1>Sprotty Random Graph Example</h1>
                 <div id="sprotty" class="sprotty"/>
             </div>
             <div class="copyright">
-                &copy; 2021 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
+                &copy; 2023 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
             </div>
         </div>
     </div>

diff --git a/examples/svg/svg-prerendered.html b/examples/svg/svg-prerendered.html
@@ -25,7 +25,7 @@ <h1>Sprotty Prerendered SVG / HTML Example</h1>
             </div>
             <div class="col-md-12">
                 <div class="copyright">
-                    &copy; 2017 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
+                    &copy; 2023 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
                     SVG Logo &copy; 2006 <a href="https://www.w3.org/Graphics/SVG/">W3C</a> (<a href="http://creativecommons.org/licenses/by/2.5">CC BY 2.5</a>).
                     Tiger &copy; 2002 <a href="https://ghostscript.com">Ghostscript</a> (<a href="https://www.gnu.org/copyleft/gpl-3.0.html">GPL</a>)
                 </div>

diff --git a/packages/sprotty/src/features/export/svg-exporter.ts b/packages/sprotty/src/features/export/svg-exporter.ts
@@ -72,7 +72,8 @@ export class SvgExporter {
         docCopy.close();
         const svgElementNew = docCopy.getElementById(svgElementOrig.id)!;
         svgElementNew.removeAttribute('opacity');
-        this.copyStyles(svgElementOrig, svgElementNew, ['width', 'height', 'opacity']);
+        // inline-size copied from sprotty-hidden svg shrinks the svg so it is not visible.
+        this.copyStyles(svgElementOrig, svgElementNew, ['width', 'height', 'opacity', 'inline-size']);
         svgElementNew.setAttribute('version', '1.1');
         const bounds = this.getBounds(root);
         svgElementNew.setAttribute('viewBox', `${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}`);