[TASK] Read canvas font from css

Easier to adjust

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";

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) {

scss/modules/_forcegraph.scss

 .graph {
   background: $color-gray-dark;
+  font: $font-size-small $font-family;
   height: 100%;
   width: 100%;
 

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;