diff --git a/lib/forcegraph.js b/lib/forcegraph.js index df70766..d5a2baf 100644 --- a/lib/forcegraph.js +++ b/lib/forcegraph.js @@ -17,6 +17,8 @@ define(["d3"], function (d3) { var highlightedNodes = [] var highlightedLinks = [] var nodes = [] + var uplinkNodes = [] + var nonUplinkNodes = [] var unknownNodes = [] var savedPanZoom @@ -251,6 +253,48 @@ define(["d3"], function (d3) { d.y + margin > screenRect.top && d.y - margin < screenRect.bottom } + function drawNode(color, radius, scale, r) { + var node = document.createElement("canvas") + node.width = scale * radius * 8 * r + node.height = node.width + + var nctx = node.getContext("2d") + nctx.scale(scale * r, scale * r) + nctx.save() + + nctx.translate(-node.width / scale, -node.height / scale) + nctx.lineWidth = radius + + nctx.beginPath() + nctx.moveTo(radius, 0) + nctx.arc(0, 0, radius, 0, 2 * Math.PI) + + nctx.strokeStyle = "rgba(255, 0, 0, 1)" + nctx.shadowOffsetX = node.width * 1.5 + 0 + nctx.shadowOffsetY = node.height * 1.5 + 3 + nctx.shadowBlur = 12 + nctx.shadowColor = "rgba(0, 0, 0, 0.16)" + nctx.stroke() + nctx.shadowOffsetX = node.width * 1.5 + 0 + nctx.shadowOffsetY = node.height * 1.5 + 3 + nctx.shadowBlur = 12 + nctx.shadowColor = "rgba(0, 0, 0, 0.23)" + nctx.stroke() + + nctx.restore() + nctx.translate(node.width / 2 / scale / r, node.height / 2 / scale / r) + + nctx.beginPath() + nctx.moveTo(radius, 0) + nctx.arc(0, 0, radius, 0, 2 * Math.PI) + + nctx.strokeStyle = color + nctx.lineWidth = radius + nctx.stroke() + + return node + } + function redraw() { var r = window.devicePixelRatio var translate = zoomBehavior.translate() @@ -268,7 +312,8 @@ define(["d3"], function (d3) { var clientColor = "rgba(230, 50, 75, 1.0)" var unknownColor = "#D10E2A" - var nodeColor = "#F2E3C6" + var nonUplinkColor = "#F2E3C6" + var uplinkColor = "#5BAAEB" var highlightColor = "rgba(252, 227, 198, 0.15)" var nodeRadius = 6 @@ -306,50 +351,19 @@ define(["d3"], function (d3) { // -- draw nodes -- - - var node = document.createElement("canvas") - node.width = scale * nodeRadius * 8 * r - node.height = node.width - - var nctx = node.getContext("2d") - nctx.scale(scale * r, scale * r) - nctx.save() - - nctx.translate(-node.width / scale, -node.height / scale) - nctx.lineWidth = nodeRadius - - nctx.beginPath() - nctx.moveTo(nodeRadius, 0) - nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI) - - nctx.strokeStyle = "rgba(255, 0, 0, 1)" - nctx.shadowOffsetX = node.width * 1.5 + 0 - nctx.shadowOffsetY = node.height * 1.5 + 3 - nctx.shadowBlur = 12 - nctx.shadowColor = "rgba(0, 0, 0, 0.16)" - nctx.stroke() - nctx.shadowOffsetX = node.width * 1.5 + 0 - nctx.shadowOffsetY = node.height * 1.5 + 3 - nctx.shadowBlur = 12 - nctx.shadowColor = "rgba(0, 0, 0, 0.23)" - nctx.stroke() - - nctx.restore() - nctx.translate(node.width / 2 / scale / r, node.height / 2 / scale / r) - - nctx.beginPath() - nctx.moveTo(nodeRadius, 0) - nctx.arc(0, 0, nodeRadius, 0, 2 * Math.PI) - - nctx.strokeStyle = nodeColor - nctx.lineWidth = nodeRadius - nctx.stroke() - ctx.save() ctx.scale(1 / scale / r, 1 / scale / r) - nodes.filter(visibleNodes).forEach(function (d) { - ctx.drawImage(node, scale * r * d.x - node.width / 2, scale * r * d.y - node.height / 2) + + var nonUplinkNode = drawNode(nonUplinkColor, nodeRadius, scale, r) + nonUplinkNodes.filter(visibleNodes).forEach(function (d) { + ctx.drawImage(nonUplinkNode, scale * r * d.x - nonUplinkNode.width / 2, scale * r * d.y - nonUplinkNode.height / 2) }) + + var uplinkNode = drawNode(uplinkColor, nodeRadius, scale, r) + uplinkNodes.filter(visibleNodes).forEach(function (d) { + ctx.drawImage(uplinkNode, scale * r * d.x - uplinkNode.width / 2, scale * r * d.y - uplinkNode.height / 2) + }) + ctx.restore() // -- draw clients -- @@ -682,6 +696,8 @@ define(["d3"], function (d3) { }) nodes = intNodes.filter(function (d) { return d.o.node }) + uplinkNodes = nodes.filter(function (d) { return d.o.node.flags.uplink }) + nonUplinkNodes = nodes.filter(function (d) { return !d.o.node.flags.uplink }) unknownNodes = intNodes.filter(function (d) { return !d.o.node }) if (localStorageTest()) {