From 7751fc05a8c3c44082bf97a6bbe77dfca34c8063 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Wed, 28 Apr 2021 10:24:07 +0200
Subject: [PATCH] Dynamic font size for node titles

---
 www/graph.css |  4 ++--
 www/graph.js  | 46 ++++++++++++++++++++++++++++++++++++----------
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/www/graph.css b/www/graph.css
index 8af3e5e..3c110ad 100644
--- a/www/graph.css
+++ b/www/graph.css
@@ -117,7 +117,7 @@ svg #header text#subtitle {
     text-anchor: start;
     dominant-baseline: hanging;
     /*achieves a 'text-anchor: top'*/
-    font-size: 16pt;
+    /* font-size: 16pt; */ /*Set this in JS*/
     transition: font-size .4s, opacity 1s;
     fill: white;
     opacity: 1;
@@ -130,7 +130,7 @@ svg #header text#subtitle {
 }
 
 svg.zoomed .node text.nodeTitle {
-    font-size: 6pt;
+    /* font-size: 6pt; */
 }
 
 svg.zoomed.zoomed2 .node text.nodeTitle {
diff --git a/www/graph.js b/www/graph.js
index df6faa4..62743d1 100644
--- a/www/graph.js
+++ b/www/graph.js
@@ -226,7 +226,24 @@ class NodeMap {
 
     render() {
         this.svg = this.root.append('svg')
-        this.svg.append('defs').html('<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHead" fill="#f3722c"><path d="M0,-3L8,0L0,3"></path></marker><marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelected"><path d="M0,-3L8,0L0,3" fill="white"></path></marker>');
+        this.svg.append('defs').html(`<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHead" fill="#f3722c"><path d="M0,-3L8,0L0,3"></path></marker><marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelected"><path d="M0,-3L8,0L0,3" fill="white"></path></marker>
+        <!--Sketching:-->
+        <defs>
+          <filter id="tint">
+            <feColorMatrix values="1.1 0 0 0 0  0 1.1 0 0 0  0 0 0.9 0 0  0 0 0 1 0" />
+          </filter>
+          <filter id="splotch">
+            <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4" />
+            <feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2" result="texture" />
+            <feComposite in="SourceGraphic" in2="texture" operator="in" />
+            <feGaussianBlur stdDeviation="3.5" />
+          </filter>
+          <filter id="pencil">
+            <feTurbulence baseFrequency="0.03" numOctaves="6" type="fractalNoise" />
+            <feDisplacementMap scale="4" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" />
+            <feGaussianBlur stdDeviation="0.5" />
+          </filter>
+        </defs>`);
 
         this.resize();
 
@@ -276,6 +293,7 @@ class NodeMap {
             .attr("class", "borders")
             .attr("d", this.proj(this.borders))
 
+        let zoomTimeout = null;
         const zoom = d3.zoom().scaleExtent([0.2, 10]).on("start", () => {
             this.svg.node().classList.add("dragging");
         }).on("end", () => {
@@ -284,18 +302,20 @@ class NodeMap {
             this.container.attr("transform", transform);
             const oldZoom = this.svg.classed('zoomed');
             const newZoom = transform.k > 2.0;
-            if (oldZoom != newZoom) {
-                this.svg.classed('zoomed', newZoom);
-
+            if(zoomTimeout) {
+                clearTimeout(zoomTimeout)
+            }
+            zoomTimeout = setTimeout(() => {
+                this.g_nodes.attr('style', `font-size:${22000 / this.height / transform.k}pt`)
                 setTimeout(() => {
                     this.calculateLabels();
                 }, 500);
+            }, 500);
+            if (oldZoom != newZoom) {
+                this.svg.classed('zoomed', newZoom);
+
             }
         });
-        this.svg
-            .call(zoom)
-            .call(zoom.transform, d3.zoomIdentity.scale(.5, .5));
-
         this.title = this.container.append('g').attr('id', 'header');
 
         const titleFeature = {
@@ -342,8 +362,9 @@ class NodeMap {
         this.link = this.container.append("g")
             .attr('class', 'links')
             .selectAll(".link");
-        this.node = this.container.append("g")
-            .attr('class', 'nodes')
+        this.g_nodes = this.container.append("g")
+            .attr('class', 'nodes');
+        this.node = this.g_nodes
             .selectAll(".node");
 
 
@@ -405,6 +426,11 @@ class NodeMap {
             // .force("posY", d3.forceY(n => n.targetY || 0).strength(n => n.targetY ? 1 : 0))
             ;
 
+        this.svg
+            .call(zoom)
+            .call(zoom.transform, d3.zoomIdentity.scale(.5, .5));
+
+
         this.update();
 
         setTimeout(() => this.calculateLabels(), 1000);