From e9bf073e4962013ca59b4e124a3b0ce552b011c8 Mon Sep 17 00:00:00 2001
From: Xaver Maierhofer <xaver.maierhofer@xwissen.info>
Date: Sun, 19 Jun 2016 13:35:35 +0200
Subject: [PATCH] [TASK] Read canvas font from css Easier to adjust

---
 lib/forcegraph.js             | 7 +++++--
 lib/map/labelslayer.js        | 6 +++---
 scss/modules/_forcegraph.scss | 1 +
 scss/modules/_variables.scss  | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/lib/forcegraph.js b/lib/forcegraph.js
index 3a8c44c..33ab21b 100644
--- a/lib/forcegraph.js
+++ b/lib/forcegraph.js
@@ -12,6 +12,7 @@ define(["d3", "helper"], function (d3, helper) {
     var zoomBehavior;
     var force;
     var el;
+    var font;
     var doAnimation = false;
     var intNodes = [];
     var intLinks = [];
@@ -591,6 +592,8 @@ define(["d3", "helper"], function (d3, helper) {
     el = document.createElement("div");
     el.classList.add("graph");
 
+    font = window.getComputedStyle(el).fontSize + " " + window.getComputedStyle(el).fontFamily;
+
     zoomBehavior = d3.behavior.zoom()
       .scaleExtent([1 / 3, 3])
       .on("zoom", onPanZoom)
@@ -696,12 +699,12 @@ define(["d3", "helper"], function (d3, helper) {
         var buffer = document.createElement("canvas");
         var r = window.devicePixelRatio;
         var bctx = buffer.getContext("2d");
-        bctx.font = "11px Assistant, sans-serif";
+        bctx.font = font;
         var width = bctx.measureText(name).width;
         var scale = zoomBehavior.scaleExtent()[1] * r;
         buffer.width = (width + 2 * lineWidth) * scale;
         buffer.height = (16 + 2 * lineWidth) * scale;
-        bctx.font = "11px Assistant, sans-serif";
+        bctx.font = font;
         bctx.scale(scale, scale);
         bctx.textBaseline = "middle";
         bctx.textAlign = "center";
diff --git a/lib/map/labelslayer.js b/lib/map/labelslayer.js
index 73fdb97..ac8b7e8 100644
--- a/lib/map/labelslayer.js
+++ b/lib/map/labelslayer.js
@@ -11,7 +11,7 @@ define(["leaflet", "rbush"],
       ["center", "ideographic", 2 / 8],
       ["right", "ideographic", 3 / 8]];
 
-    var fontFamily = "Assistant, sans-serif";
+    var fontFamily = window.getComputedStyle(document.querySelector('body')).fontFamily;
     var nodeRadius = 4;
 
     var ctx = document.createElement("canvas").getContext("2d");
@@ -99,7 +99,7 @@ define(["leaflet", "rbush"],
         // - label (string)
         // - color (string)
 
-        var labelsOnline = d.online.map(prepareLabel("rgba(0, 0, 0, 0.9)", 10, 8, true, 13));
+        var labelsOnline = d.online.map(prepareLabel("rgba(0, 0, 0, 0.9)", 11, 8, true, 13));
         var labelsOffline = d.offline.map(prepareLabel("rgba(212, 62, 42, 0.9)", 9, 5, false, 16));
         var labelsNew = d.new.map(prepareLabel("rgba(48, 99, 20, 0.9)", 11, 8, true, 0));
         var labelsLost = d.lost.map(prepareLabel("rgba(212, 62, 42, 0.9)", 11, 8, true, 0));
@@ -216,7 +216,7 @@ define(["leaflet", "rbush"],
         var ctx = canvas.getContext("2d");
 
         ctx.lineWidth = 5;
-        ctx.strokeStyle = "rgba(255, 255, 255, 0.8)";
+        ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
         ctx.miterLimit = 2;
 
         function drawLabel(d) {
diff --git a/scss/modules/_forcegraph.scss b/scss/modules/_forcegraph.scss
index 9815ea6..01ebe62 100644
--- a/scss/modules/_forcegraph.scss
+++ b/scss/modules/_forcegraph.scss
@@ -1,5 +1,6 @@
 .graph {
   background: $color-gray-dark;
+  font: $font-size-small $font-family;
   height: 100%;
   width: 100%;
 
diff --git a/scss/modules/_variables.scss b/scss/modules/_variables.scss
index 874a846..6b30dbc 100644
--- a/scss/modules/_variables.scss
+++ b/scss/modules/_variables.scss
@@ -15,7 +15,7 @@ $font-family: Assistant, sans-serif !default;
 $font-family-icons: ionicons !default;
 $font-family-monospace: monospace !default;
 $font-size: 15px !default;
-$font-size-small: $font-size / 1.4 !default;
+$font-size-small: 11px !default;
 
 $button-font-size: 1.6rem !default;
 $button-distance: 16px !default;