jupyrdf / ipyelk

Jupyter Widgets for interactive graphs powered by the Eclipse Layout Kernel (ELK)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

svg exporter style for use's href

dfreeman06 opened this issue · comments

  • Make reading of the collected svg styles easier
  • Build new ids for hrefs so more robust when exporting

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>