From a6ad9f928a410949ca8bc1b9f54af66ed13ea33f Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils@nilsschneider.net>
Date: Sat, 11 Apr 2015 00:30:36 +0200
Subject: [PATCH] forcegraph: pre-render label

---
 lib/forcegraph.js | 42 ++++++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/lib/forcegraph.js b/lib/forcegraph.js
index 95b6332..1d71ce8 100644
--- a/lib/forcegraph.js
+++ b/lib/forcegraph.js
@@ -230,10 +230,13 @@ define(["d3"], function (d3) {
       var cos = Math.cos(angle)
       var sin = Math.sin(angle)
 
-      var x = d.x + d.labelA * Math.pow(Math.abs(cos), 2 / 5) * Math.sign(cos)
-      var y = d.y + d.labelB * Math.pow(Math.abs(sin), 2 / 5) * Math.sign(sin)
+      var width = d.labelWidth
+      var height = d.labelHeight
 
-      ctx.fillText(d.label, x, y)
+      var x = d.x + d.labelA * Math.pow(Math.abs(cos), 2 / 5) * Math.sign(cos) - width / 2
+      var y = d.y + d.labelB * Math.pow(Math.abs(sin), 2 / 5) * Math.sign(sin) - height / 2
+
+      ctx.drawImage(d.label, x, y, width, height)
     }
 
     function visibleLinks(d) {
@@ -256,8 +259,6 @@ define(["d3"], function (d3) {
       var xExtent = d3.extent(intNodes, function (d) { return d.px })
       var yExtent = d3.extent(intNodes, function (d) { return d.py })
 
-      ctx.font = "11px Roboto"
-
       if (translateP) {
         ctx.save()
         ctx.translate(translateP[0], translateP[1])
@@ -302,11 +303,8 @@ define(["d3"], function (d3) {
         ctx.stroke()
       })
 
-      ctx.textAlign = "center"
-      ctx.textBaseline = "middle"
-      ctx.fillStyle = "rgba(0, 0, 0, 0.6)"
-
-      intNodes.filter(visibleNodes).forEach(drawLabel)
+      if (scale > 0.9)
+        intNodes.filter(visibleNodes).forEach(drawLabel, scale)
 
       ctx.beginPath()
 
@@ -464,14 +462,30 @@ define(["d3"], function (d3) {
         if (d.o.node)
           nodesDict[d.o.node.nodeinfo.node_id] = d
 
-        d.label = nodeName(d)
+        var name = nodeName(d)
 
         ctx.font = "11px Roboto"
         var offset = 10
-        var width = ctx.measureText(d.label).width
+        var width = ctx.measureText(name).width
+        var buffer = document.createElement("canvas")
+        var bctx = buffer.getContext("2d")
+        var scale = zoomBehavior.scaleExtent()[1]
+        bctx.lineWidth = 2.5
+        buffer.width = (width + 2 * bctx.lineWidth) * scale
+        buffer.height = (14 + 2 * bctx.lineWidth) * scale
+        bctx.textBaseline = "top"
+        bctx.font = ctx.font
+        bctx.strokeStyle = "rgba(255, 255, 255, 0.6)"
+        bctx.fillStyle = "rgba(0, 0, 0, 0.6)"
+        bctx.scale(scale, scale)
+        bctx.strokeText(name, bctx.lineWidth, bctx.lineWidth)
+        bctx.fillText(name, bctx.lineWidth * scale, bctx.lineWidth * scale)
 
-        d.labelA = offset + width / 2
-        d.labelB = offset + 11 / 2
+        d.label = buffer
+        d.labelWidth = buffer.width / scale
+        d.labelHeight = buffer.height / scale
+        d.labelA = offset + buffer.width / (2 * scale)
+        d.labelB = offset + buffer.height / (2 * scale)
       })
 
       intLinks.forEach(function (d) {