ffrgb / meshviewer

  'use strict';

  return function (config, linkScale, sidebar) {

    var self = this;

    var el;

    var canvas;

    var ctx;

    var force;

    var forceLink;

    var scale = 1;

    var translateX = sidebar();

    var translateY = 0;

    // var highlight;

    var intNodes = [];

    var dictNodes = {};

    var intLinks = [];

    /*

    var unknownColor = '#D10E2A';

    var uplinkColor = '#5BAAEB';

    var highlightColor = 'rgba(252, 227, 198, 0.15)';

    var nodeRadius = 6;

    var unseenColor = '#FFA726';

    */

    var nonUplinkColor = '#F2E3C6';

    var locationColor = '#00ff00';

    var noLocationColor = '#0000ff';

    var clientColor = 'rgba(230, 50, 75, 1.0)';

    var cableColor = '#50B0F0';

    function resizeCanvas() {

      var r = window.devicePixelRatio;

      canvas.width = el.offsetWidth * r;

      canvas.height = el.offsetHeight * r;

      canvas.style.width = el.offsetWidth + 'px';

      canvas.style.height = el.offsetHeight + 'px';

      ctx.setTransform(1, 0, 0, 1, 0, 0);

      ctx.scale(r, r);

    }

    function drawLink(d) {

      ctx.beginPath();

      ctx.moveTo(d.source.x, d.source.y);

      ctx.lineTo(d.target.x, d.target.y);

      ctx.strokeStyle = d.o.type === 'Kabel' ? cableColor : d.color;

      ctx.globalAlpha = d.o.type === 'fastd' || d.o.type === 'L2TP' ? 0.2 : 0.8;

      ctx.lineWidth = d.o.type === 'fastd' || d.o.type === 'L2TP' ? 1.5 : 2.5;

      ctx.stroke();

    }

    function drawNode(d) {

      ctx.beginPath();

      ctx.moveTo(d.x + 3, d.y);

      ctx.arc(d.x, d.y, 6, 0, 2 * Math.PI);

      ctx.fillStyle = d.o.node.nodeinfo.location ? locationColor : noLocationColor;

      ctx.strokeStyle = nonUplinkColor;

      ctx.lineWidth = 5;

      ctx.globalAlpha = 1;

      ctx.fill();

      ctx.stroke();

      if (scale > 1) {

        ctx.beginPath();

        helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, 15);

        ctx.fillStyle = clientColor;

        ctx.fill();

        ctx.beginPath();

        var name = d.o.node_id;

        if (d.o.node && d.o.node.nodeinfo) {

          name = d.o.node.nodeinfo.hostname;

        }

        ctx.textAlign = 'center';

        ctx.fillStyle = '#fff';

        ctx.fillText(name, d.x, d.y + 20);

      }

    }

    function redraw() {

      ctx.save();

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.translate(translateX, translateY);

      ctx.scale(scale, scale);

      intLinks.forEach(drawLink);

      intNodes.forEach(drawNode);

      ctx.restore();

    }

    el = document.createElement('div');

    el.classList.add('graph');

    forceLink = d3.forceLink()

     .distance(function (d) {

       if (d.o.type === 'fastd' || d.o.type === 'L2TP') {

         return 0;

       }

       return 75;

     })

    var zoom = d3.zoom()

         .scaleExtent([1 / 3, 3])

         .on('zoom', function () {

           scale = d3.event.transform.k;

           translateX = d3.event.transform.x;

           translateY = d3.event.transform.y;

           redraw();

         });

    force = d3.forceSimulation()

      .force('link', forceLink)

      .force('charge', d3.forceManyBody())

      .force('center', d3.forceCenter())

      .on('tick', redraw);

    canvas = d3.select(el)

      .call(zoom)

      .append('canvas')

      .node();

    ctx = canvas.getContext('2d');

    window.addEventListener('resize', function () {

      resizeCanvas();

      redraw();

    });

    self.setData = function setData(data) {

      intNodes = data.graph.nodes.map(function (d) {

        var e;

        if (d.id in dictNodes) {

          e = dictNodes[d.id];

        } else {

          e = {};

          dictNodes[d.id] = e;

        }

        e.o = d;

        return e;

      });

      intLinks = data.graph.links.map(function (d) {

        var e = {};

        e.o = d;

        e.source = dictNodes[d.source.id];

        e.target = dictNodes[d.target.id];

        e.color = linkScale(d.tq).hex();

        return e;

      });

      force.nodes(intNodes);

      forceLink.links(intLinks);

      force.restart();

      resizeCanvas();

    };

    self.resetView = function resetView() {

    };

    self.gotoNode = function gotoNode(d) {

    };

    self.gotoLink = function gotoLink(d) {

    };

    self.destroy = function destroy() {

      force.stop();

      canvas.remove();

      force = null;

      if (el.parentNode) {

        el.parentNode.removeChild(el);

      }

    };

    self.render = function render(d) {

      d.appendChild(el);

      resizeCanvas();

    };

    return self;

  };

});