Example diff for cleaner style tags
diff --git a/src/exporter.ts b/src/exporter.ts
index 7ceb3e1..c435492 100644
--- a/src/exporter.ts
+++ b/src/exporter.ts
@@ -151,6 +151,14 @@ export class ELKExporterModel extends WidgetModel {
this._update_timeout = setTimeout(() => this._on_layout_updated(), 1000);
}
+ makeStyleTag(style: string) {
+ return !style.trim().length ? "" : `<style type="text/css">
+ <![CDATA[
+ ${style}
+ ]]>
+ </style>`;
+ }
+
async _on_layout_updated() {
if (!this.enabled) {
return;
@@ -166,17 +174,13 @@ export class ELKExporterModel extends WidgetModel {
const strip_ids = this.get('strip_ids');
const add_xml_header = this.get('add_xml_header');
const raw_app_css = this.app_raw_css;
- const rawStyle = `
- ${STANDALONE_CSS}
- ${raw_app_css.join('\n')}
- ${this.get('extra_css') || ''}
- `;
- const style = `
- <style type="text/css">
- <![CDATA[
- ${rawStyle}
- ]]>
- </style>`;
+ const rawStyle = [
+ STANDALONE_CSS,
+ raw_app_css.join('\n'),
+ this.get('extra_css') || '',
+ ]
+
+ const style = rawStyle.map(this.makeStyleTag).join("\n");
const g: SVGGElement = svg.querySelector('g');
const transform = g.attributes['transform'].value;
let scaleFactor = 1.0;
@@ -189,13 +193,17 @@ export class ELKExporterModel extends WidgetModel {
let withCSS = outerHTML
.replace(
/<svg([^>]+)>/,
- `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width / scaleFactor +
- padding} ${height / scaleFactor + padding}" $1>
+ `<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 ${width / scaleFactor + padding} ${height / scaleFactor + padding}"
+ $1>
Example diff for cleaner style tags
diff --git a/src/exporter.ts b/src/exporter.ts index 7ceb3e1..c435492 100644 --- a/src/exporter.ts +++ b/src/exporter.ts @@ -151,6 +151,14 @@ export class ELKExporterModel extends WidgetModel { this._update_timeout = setTimeout(() => this._on_layout_updated(), 1000); } + makeStyleTag(style: string) { + return !style.trim().length ? "" : `<style type="text/css"> + <![CDATA[ + ${style} + ]]> + </style>`; + } + async _on_layout_updated() { if (!this.enabled) { return; @@ -166,17 +174,13 @@ export class ELKExporterModel extends WidgetModel { const strip_ids = this.get('strip_ids'); const add_xml_header = this.get('add_xml_header'); const raw_app_css = this.app_raw_css; - const rawStyle = ` - ${STANDALONE_CSS} - ${raw_app_css.join('\n')} - ${this.get('extra_css') || ''} - `; - const style = ` - <style type="text/css"> - <![CDATA[ - ${rawStyle} - ]]> - </style>`; + const rawStyle = [ + STANDALONE_CSS, + raw_app_css.join('\n'), + this.get('extra_css') || '', + ] + + const style = rawStyle.map(this.makeStyleTag).join("\n"); const g: SVGGElement = svg.querySelector('g'); const transform = g.attributes['transform'].value; let scaleFactor = 1.0; @@ -189,13 +193,17 @@ export class ELKExporterModel extends WidgetModel { let withCSS = outerHTML .replace( /<svg([^>]+)>/, - `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width / scaleFactor + - padding} ${height / scaleFactor + padding}" $1> + `<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + viewBox="0 0 ${width / scaleFactor + padding} ${height / scaleFactor + padding}" + $1>