Freifunk-Troisdorf/meshviewer
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[TASK] Read canvas font from css

Browse Source 
Easier to adjust
This commit is contained in:
Xaver Maierhofer 2016-06-19 13:35:35 +02:00
parent 83f457fb75
commit e9bf073e49
4 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/forcegraph.js
View File

@ -12,6 +12,7 @@ define(["d3", "helper"], function (d3, helper) {
var zoomBehavior; var zoomBehavior;
var force; var force;
var el; var el;
var font;
var doAnimation = false; var doAnimation = false;
var intNodes = []; var intNodes = [];
var intLinks = []; var intLinks = [];
@ -591,6 +592,8 @@ define(["d3", "helper"], function (d3, helper) {
el = document.createElement("div"); el = document.createElement("div");
el.classList.add("graph"); el.classList.add("graph");
font = window.getComputedStyle(el).fontSize + " " + window.getComputedStyle(el).fontFamily;
zoomBehavior = d3.behavior.zoom() zoomBehavior = d3.behavior.zoom()
.scaleExtent([1 / 3, 3]) .scaleExtent([1 / 3, 3])
.on("zoom", onPanZoom) .on("zoom", onPanZoom)
@ -696,12 +699,12 @@ define(["d3", "helper"], function (d3, helper) {
var buffer = document.createElement("canvas"); var buffer = document.createElement("canvas");
var r = window.devicePixelRatio; var r = window.devicePixelRatio;
var bctx = buffer.getContext("2d"); var bctx = buffer.getContext("2d");
bctx.font = "11px Assistant, sans-serif"; bctx.font = font;
var width = bctx.measureText(name).width; var width = bctx.measureText(name).width;
var scale = zoomBehavior.scaleExtent()[1] * r; var scale = zoomBehavior.scaleExtent()[1] * r;
buffer.width = (width + 2 * lineWidth) * scale; buffer.width = (width + 2 * lineWidth) * scale;
buffer.height = (16 + 2 * lineWidth) * scale; buffer.height = (16 + 2 * lineWidth) * scale;
bctx.font = "11px Assistant, sans-serif"; bctx.font = font;
bctx.scale(scale, scale); bctx.scale(scale, scale);
bctx.textBaseline = "middle"; bctx.textBaseline = "middle";
bctx.textAlign = "center"; bctx.textAlign = "center";

6
lib/map/labelslayer.js
View File

@ -11,7 +11,7 @@ define(["leaflet", "rbush"],
["center", "ideographic", 2 / 8], ["center", "ideographic", 2 / 8],
["right", "ideographic", 3 / 8]]; ["right", "ideographic", 3 / 8]];
var fontFamily = "Assistant, sans-serif"; var fontFamily = window.getComputedStyle(document.querySelector('body')).fontFamily;
var nodeRadius = 4; var nodeRadius = 4;
var ctx = document.createElement("canvas").getContext("2d"); var ctx = document.createElement("canvas").getContext("2d");
@ -99,7 +99,7 @@ define(["leaflet", "rbush"],
// - label (string) // - label (string)
// - color (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 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 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)); 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"); var ctx = canvas.getContext("2d");
ctx.lineWidth = 5; ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(255, 255, 255, 0.8)"; ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
ctx.miterLimit = 2; ctx.miterLimit = 2;
function drawLabel(d) { function drawLabel(d) {

1
scss/modules/_forcegraph.scss
View File

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

2
scss/modules/_variables.scss
View File

@ -15,7 +15,7 @@ $font-family: Assistant, sans-serif !default;
$font-family-icons: ionicons !default; $font-family-icons: ionicons !default;
$font-family-monospace: monospace !default; $font-family-monospace: monospace !default;
$font-size: 15px !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-font-size: 1.6rem !default;
$button-distance: 16px !default; $button-distance: 16px !default;