Merge pull request #406 from eclipse-sprotty/dh/svg-export-149

Fix SVG export of styles
eclipse-sprotty · Dec 6, 2023 · 446c62d · 446c62d
2 parents 781c032 + 058d849
commit 446c62d
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 18 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
@@ -50,12 +50,20 @@ export class SvgExporter {
 
     export(root: SModelRootImpl, request?: RequestAction<ExportSvgAction>): void {
         if (typeof document !== 'undefined') {
-            const div = document.getElementById(this.options.hiddenDiv);
-            if (div !== null && div.firstElementChild && div.firstElementChild.tagName === 'svg') {
-                const svgElement = div.firstElementChild as SVGSVGElement;
-                const svg = this.createSvg(svgElement, root);
-                this.actionDispatcher.dispatch(ExportSvgAction.create(svg, request ? request.requestId : ''));
+            const hiddenDiv = document.getElementById(this.options.hiddenDiv);
+            if (hiddenDiv === null) {
+                this.log.warn(this, `Element with id ${this.options.hiddenDiv} not found. Nothing to export.`);
+                return;
+
+            }
+
+            const svgElement = hiddenDiv.querySelector('svg');
+            if (svgElement === null) {
+                this.log.warn(this, `No svg element found in ${this.options.hiddenDiv} div. Nothing to export.`);
+                return;
             }
+            const svg = this.createSvg(svgElement, root);
+            this.actionDispatcher.dispatch(ExportSvgAction.create(svg, request ? request.requestId : ''));
         }
     }
 
@@ -70,9 +78,10 @@ export class SvgExporter {
         docCopy.open();
         docCopy.write(svgCopy);
         docCopy.close();
-        const svgElementNew = docCopy.getElementById(svgElementOrig.id)!;
+        const svgElementNew = docCopy.querySelector('svg')!;
         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}`);
@@ -81,13 +90,13 @@ export class SvgExporter {
         return svgCode;
     }
 
-    protected copyStyles(source: Element, target: Element, skipedProperties: string[]) {
+    protected copyStyles(source: Element, target: Element, skippedProperties: string[]) {
         const sourceStyle = getComputedStyle(source);
         const targetStyle = getComputedStyle(target);
         let diffStyle = '';
         for (let i = 0; i < sourceStyle.length; i++) {
             const key = sourceStyle[i];
-            if (skipedProperties.indexOf(key) === -1) {
+            if (skippedProperties.indexOf(key) === -1) {
                 const value = sourceStyle.getPropertyValue(key);
                 if (targetStyle.getPropertyValue(key) !== value) {
                     diffStyle += key + ":" + value + ";";
@@ -96,7 +105,7 @@ export class SvgExporter {
         }
         if (diffStyle !== '')
             target.setAttribute('style', diffStyle);
-        // IE doesn't retrun anything on source.children
+        // IE doesn't return anything on source.children
         for (let i = 0; i < source.childNodes.length; ++i) {
             const sourceChild = source.childNodes[i];
             const targetChild = target.childNodes[i];