From 13e3f1fc34a9d50388312ebd6c0a93f759853a48 Mon Sep 17 00:00:00 2001 From: Thierry61 Date: Sat, 29 Jun 2024 23:52:03 +0200 Subject: [PATCH 1/5] One correction and 2 cosmetic modifications - change patroon regexp to handle optional port name in edge name - remove "font-size: 20px;" in ".text-highlight-nodes text" and ".text-highlight-edges text" styles to not change shapes footprint - change "stroke-width: 10;" to "stroke-width: 2;" in all highlight styles (previous width was too large) --- svg-script | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/svg-script b/svg-script index e02c375..392c6cd 100644 --- a/svg-script +++ b/svg-script @@ -10,43 +10,41 @@ }--> .text-highlight-nodes text{ opacity: 1 !important; - stroke-width: 10; - font-size: 20px; + stroke-width: 2; font-weight: bold; fill: black; } .text-highlight-edges text{ opacity: 1 !important; - stroke-width: 10; - font-size: 20px; + stroke-width: 2; font-weight: bold; fill: Indigo; } .edge-highlight path{ opacity: 1; - stroke-width: 10; + stroke-width: 2; stroke: crimson; } .edge-highlight polygon{ opacity: 1; - stroke-width: 10; + stroke-width: 2; stroke: crimson; } .node-highlight polygon{ opacity: 1; - stroke-width: 10; + stroke-width: 2; stroke: crimson; z-index:99999; } .node-highlight ellipse{ opacity: 1; - stroke-width: 10; + stroke-width: 2; stroke: crimson; z-index:99999; } .node-highlight path{ opacity: 1; - stroke-width: 10; + stroke-width: 2; stroke: crimson; z-index:99999; } @@ -178,7 +176,7 @@ function clickNode() { // Escape special characters in the node name var nodeNameEscaped = nodeName.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&'); - var patroon = new RegExp('^' + nodeNameEscaped + '->|->' + nodeNameEscaped + '$|' + nodeNameEscaped + '--|--' + nodeNameEscaped + '$') + var patroon = new RegExp('^' + nodeNameEscaped + '(:\\w+)?->|->' + nodeNameEscaped + '(:\\w+)?$|^' + nodeNameEscaped + '(:\\w+)?--|--' + nodeNameEscaped + '(:\\w+)?$') if (this.classList.contains("node-highlight")) { this.classList.remove("node-highlight"); From 52a6f281d61a46d81e8202ac7e093fa0acb9bb81 Mon Sep 17 00:00:00 2001 From: Thierry61 Date: Sun, 30 Jun 2024 15:09:11 +0200 Subject: [PATCH 2/5] Prevent opening a possible URL attached to the node Note that the URL can still be opened with browser contextual menu (right-click) --- svg-script | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/svg-script b/svg-script index 392c6cd..96099d1 100644 --- a/svg-script +++ b/svg-script @@ -170,7 +170,7 @@ function addInteractivity(evt) { } } } -function clickNode() { +function clickNode(event) { if (nodrag) { var nodeName = this.childNodes[1].textContent; // Escape special characters in the node name @@ -200,6 +200,9 @@ function clickNode() { } } } + // Prevent opening a possible URL attached to the node + // Note that the URL can still be opened with browser contextual menu (right-click) + event.preventDefault() } } function animateEdge(edge){ From 12bf5cd1fb5a1b659e75bed5003f8c8f3f31a590 Mon Sep 17 00:00:00 2001 From: Thierry61 Date: Sun, 30 Jun 2024 15:26:41 +0200 Subject: [PATCH 3/5] Added script example that updates a dot generated svg file --- update-svg.sh | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 update-svg.sh diff --git a/update-svg.sh b/update-svg.sh new file mode 100644 index 0000000..ea22f2c --- /dev/null +++ b/update-svg.sh @@ -0,0 +1,20 @@ +# Update svg file inplace. +# To be invoked like this: +# dot -Tsvg -otransactions.svg transactions.dot && ../../dynamic-SVG-from-Graphviz/update-svg.sh transactions.svg + +if [ $# -ne 1 ] +then + echo "Usage: update-svg " + exit 1 +fi + +echo "Updating $1" + +# Insert onload handler in tag and remove terminating tag +sed -i -e 's/> $1 + +# Putback terminating tag +echo "" >> $1 From afd687e9601bd9419ebde265ed6697bafb563c1b Mon Sep 17 00:00:00 2001 From: Thierry61 Date: Wed, 10 Jul 2024 15:09:15 +0200 Subject: [PATCH 4/5] Allow several ':' separators in patroon regexp --- svg-script | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/svg-script b/svg-script index 96099d1..ac7ed17 100644 --- a/svg-script +++ b/svg-script @@ -176,7 +176,7 @@ function clickNode(event) { // Escape special characters in the node name var nodeNameEscaped = nodeName.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&'); - var patroon = new RegExp('^' + nodeNameEscaped + '(:\\w+)?->|->' + nodeNameEscaped + '(:\\w+)?$|^' + nodeNameEscaped + '(:\\w+)?--|--' + nodeNameEscaped + '(:\\w+)?$') + var patroon = new RegExp('^' + nodeNameEscaped + '(:\\w+)*->|->' + nodeNameEscaped + '(:\\w+)*$|^' + nodeNameEscaped + '(:\\w+)*--|--' + nodeNameEscaped + '(:\\w+)*$') if (this.classList.contains("node-highlight")) { this.classList.remove("node-highlight"); From 3f986cd3a004923d10ee96759bf4143287c28085 Mon Sep 17 00:00:00 2001 From: Thierry61 Date: Sat, 13 Jul 2024 21:17:29 +0200 Subject: [PATCH 5/5] Animate all paths of an edge (and not just the first one) --- svg-script | 52 ++++++++++++++++++++++++++++------------------------ 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/svg-script b/svg-script index ac7ed17..165e26d 100644 --- a/svg-script +++ b/svg-script @@ -69,7 +69,7 @@ }