Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix SVG export of styles #406

Merged
merged 2 commits into from
Dec 6, 2023
Merged

Fix SVG export of styles #406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b613cd
Fix for: SVG export of styles in Firefox is broken. #149
dhuebner Dec 4, 2023
058d849
SVG export doesn't work when ProjectedViewport is used #407
dhuebner Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/circlegraph/circlegraph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
26 changes: 24 additions & 2 deletions examples/classdiagram/class-diagram.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
14 changes: 13 additions & 1 deletion examples/classdiagram/css/page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion examples/multicore/multicore.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/random-graph-distributed/random-graph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion examples/random-graph/random-graph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/svg/svg-prerendered.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
29 changes: 19 additions & 10 deletions packages/sprotty/src/features/export/svg-exporter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 : ''));
}
}

Expand All @@ -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}`);
Expand All @@ -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 + ";";
Expand All @@ -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];
Expand Down