arc.js

// Generated by LiveScript 1.2.0
(function(){
  var _, width, height, compNames, compNamePairs, pathSrc, pathDst, newId, svg, newHop, newLink, i$, ref$, len$, ref1$, c, id, x, y, r, g, b, filt, m, infoSvg, index, svgTranslate, svgMoveArc, out$ = typeof exports != 'undefined' && exports || this;
  _ = require('prelude-ls');
  out$.width = width = 0.9 * document.width - 10;
  out$.height = height = document.height - 220;
  this.nodes = [];
  this.links = [];
  out$.compNames = compNames = ['A', 'B', 'C'];
  compNamePairs = _.zip(compNames, _.tail(compNames.concat(_.head(compNames))));
  pathSrc = function(path){
    return path != null ? path[0] : void 8;
  };
  pathDst = function(path){
    return path != null ? path[1] : void 8;
  };
  this.pathHops = function(src, dst){
    return _.filter(function(n){
      return deepEq$([src, dst], [pathSrc(n.path), pathDst(n.path)], '===');
    }, nodes);
  };
  this.pathNodes = function(src, dst){
    return [src].concat(pathHops(src, dst), [dst]);
  };
  this.computers = Config.computers;
  this.currentConfiguration = function(){
    var a, b;
    return function(it){
      return {
        'pair_map': it
      };
    }(
    _.pairsToObj(
    _.concat(
    (function(){
      var i$, ref$, len$, lresult$, j$, ref1$, len1$, results$ = [];
      for (i$ = 0, len$ = (ref$ = [1, 2, 3]).length; i$ < len$; ++i$) {
        a = ref$[i$];
        lresult$ = [];
        for (j$ = 0, len1$ = (ref1$ = [1, 2, 3]).length; j$ < len1$; ++j$) {
          b = ref1$[j$];
          if (!deepEq$(a, b, '===')) {
            lresult$.push([a + ", " + b, pathNodes(computers[a - 1].id, computers[b - 1].id).length]);
          }
        }
        results$.push(lresult$);
      }
      return results$;
    }()))));
  };
  newId = function(){
    var id;
    id = 1000;
    return function(){
      return 'e' + id++;
    };
  }();
  this.force = d3.layout.force().nodes(nodes).links(links).charge(Config.hopCharge).linkDistance(function(d){
    return Config.linkDistance(d, width);
  }).size([width, height]).gravity(0.02).on('tick', tick).linkStrength(0.9).friction(0.9);
  svg = d3.selectAll('.canvas').append('svg:svg').attr('class', 'well').attr('width', width).attr('height', height);
  svg.append('g').classed('z-map', true);
  svg.append('g').classed('z-links', true);
  svg.append('g').classed('z-nodes', true);
  svg.append('g').classed('z-infos', true);
  this.node = svg.select('.z-nodes').selectAll('g.node');
  this.link = svg.select('.z-links').selectAll('.link');
  newHop = function(path, x, y, id){
    x == null && (x = null);
    y == null && (y = null);
    id == null && (id = newId());
    return {
      id: id,
      path: path,
      x: x,
      y: y,
      xxx: Math.random()
    };
  };
  newLink = function(src, dst, path){
    return {
      source: src,
      target: dst,
      path: path,
      count: path[2]
    };
  };
  this.computersByName = {};
  for (i$ = 0, len$ = (ref$ = _.zip(computers, compNames)).length; i$ < len$; ++i$) {
    ref1$ = ref$[i$], c = ref1$[0], id = ref1$[1];
    c.fixed = true;
    c.computer = true;
    ref1$ = c.xy, x = ref1$[0], y = ref1$[1];
    c.x = x * width;
    c.y = y * height;
    c.id = id;
    computersByName[c.id] = c;
    c.xxx = Math.random();
  }
  (function(){
    var add, cfg, ref$, ab, ba, bc, cb, ca, ac, i$, len$, aB, ref1$, fromc, toc, results$ = [];
    add = function(src, dst, n, k){
      var path, ns, res$, i$, i, nsa;
      path = [src.id, dst.id, k];
      res$ = [];
      for (i$ = 1; i$ <= n; ++i$) {
        i = i$;
        res$.push(newHop(path));
      }
      ns = res$;
      nsa = [src].concat(ns, [dst]);
      _.each(function(x){
        return nodes.push(x);
      }, ns);
      return _.zipWith(function(x, y){
        return links.push(newLink(x, y, path));
      }, nsa, _.tail(nsa));
    };
    cfg = Config.startingConfig;
    ref$ = cfg['A-B'], ab = ref$[0], ba = ref$[1], ref$ = cfg['B-C'], bc = ref$[0], cb = ref$[1], ref$ = cfg['C-A'], ca = ref$[0], ac = ref$[1];
    for (i$ = 0, len$ = (ref$ = _.keys(cfg)).length; i$ < len$; ++i$) {
      aB = ref$[i$];
      ref1$ = aB.match(/(\w)-(\w)/), fromc = ref1$[1], toc = ref1$[2];
      ref1$ = cfg[aB], ab = ref1$[0], ba = ref1$[1];
      add(computersByName[fromc], computersByName[toc], ab, 1);
      results$.push(add(computersByName[toc], computersByName[fromc], ba, 2));
    }
    return results$;
  })();
  for (i$ = 0, len$ = (ref$ = computers).length; i$ < len$; ++i$) {
    c = ref$[i$];
    nodes.push(c);
  }
  for (i$ = 0, len$ = (ref$ = computers).length; i$ < len$; ++i$) {
    c = ref$[i$];
    svg.append('svg:defs').append('svg:marker').attr('id', "arrow-" + c.id).attr('viewBox', '0 -5 15 10').attr('refX', 20).attr('orient', 'auto').append('svg:path').attr('d', 'M0,-5 L15,0L0,5').attr('stroke', c.color).attr('stroke-width', '6px').attr('fill', 'transparent');
  }
  for (i$ = 0, len$ = (ref$ = computers).length; i$ < len$; ++i$) {
    c = ref$[i$];
    ref1$ = _.map(fn$)(_.tail(c.color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/))), r = ref1$[0], g = ref1$[1], b = ref1$[2];
    filt = svg.append('svg:defs').append('filter').attr('id', "colorize-" + c.id);
    m = [[0, 0, 0, 0, r], [0, 0, 0, 0, g], [0, 0, 0, 0, b], [0, 0, 0, 1, 0]];
    filt.append('feColorMatrix').attr('color-interpolation-filters', 'sRGB').attr('type', 'matrix').attr('values', _.unwords(
    _.concat(
    m)));
  }
  BG.addMap(svg.select('.z-map'));
  BG.addQR(svg.select('.z-map'));
  redraw({});
  setTimeout(function(){
    return post('quiet');
  }, 0);
  infoSvg = null;
  (function(){
    var e, div;
    e = svg.select('.z-infos').selectAll('.info').data(computers, function(d){
      return "info-" + d.id;
    }).enter().append('g').attr('data-id', function(d){
      return d.id;
    }).attr('class', 'info').append('svg:foreignObject').attr('width', 300).attr('height', 80);
    infoSvg = e;
    div = e.append('xhtml:div').classed('btn', true);
    div.append('p').classed('name', true).text(function(it){
      return it.name + "";
    });
    return div.append('p').classed('ip', true).text(function(it){
      return it.addr + "";
    });
  })();
  index = function(xs, f){
    var i$, ref$, len$, i;
    for (i$ = 0, len$ = (ref$ = (fn$())).length; i$ < len$; ++i$) {
      i = ref$[i$];
      if (f(xs[i])) {
        return i;
      }
    }
    return -1;
    function fn$(){
      var i$, to$, results$ = [];
      for (i$ = 0, to$ = xs.length; i$ <= to$; ++i$) {
        results$.push(i$);
      }
      return results$;
    }
  };
  function addHop(d){
    var ref$, x, y;
    console.log('ADD', d.path);
    ref$ = d3.mouse(this), x = ref$[0], y = ref$[1];
    nodes.unshift(newHop(d.path, x, y));
    console.log(d.path);
    links.splice(index(links, (function(it){
      return it === d;
    })), 1);
    return links.push(newLink(d.source, nodes[0], d.path), newLink(nodes[0], d.target, d.path));
  }
  function hipHop(d, ev){
    var hs, i, a, to, b, from;
    if (d.computer) {
      return;
    }
    hs = pathHops(pathSrc(d.path), pathDst(d.path));
    if (hs.length === 1) {
      return;
    }
    console.log('HIP', d.path);
    i = index(nodes, (function(it){
      return it === d;
    }));
    nodes.splice(i, 1);
    a = index(links, function(it){
      return it.source.id === d.id;
    });
    to = links[a].target;
    links.splice(a, 1);
    b = index(links, function(it){
      return it.target.id === d.id;
    });
    from = links[b].source;
    links.splice(b, 1);
    return links.push(newLink(from, to, d.path));
  }
  function redraw(ev){
    var enter, computer, csize;
    console.log('redraw');
    svg.select('.table').remove();
    BG.addTable(svg.select('.z-map'));
    this.link = link.data(force.links(), function(d){
      return d.source.id + "-" + d.target.id + "-" + d.count;
    });
    link.enter().insert('line', '.node').attr('class', 'link').style('marker-end', function(d){
      return "url(#arrow-" + pathSrc(d.path) + ")";
    }).style('stroke', function(d){
      return computersByName[pathSrc(d.path)].color;
    }).on('mouseup', function(d){
      addHop.call(this, d, ev);
      redraw(ev);
      return true;
    });
    link.exit().remove();
    this.node = node.data(force.nodes(), function(it){
      return it.id;
    });
    enter = node.enter().append('g').classed('node', true).classed('computer', function(it){
      return it.computer;
    });
    enter.filter(function(d){
      return !d.computer;
    }).attr('width', 32).attr('height', 32).append('circle').attr('r', 9);
    computer = enter.filter(function(it){
      return it.computer;
    });
    csize = Config.computerSize;
    computer.append('circle').attr('r', csize / 1.2).classed('undercomp', true).attr('fill', function(it){
      return it.color;
    });
    computer.append('image').attr('xlink:href', 'server.png').attr('x', -csize).attr('y', -csize).attr('width', csize * 2).attr('height', csize * 2).attr('filter', function(c){
      return "url(#colorize-" + c.id + ")";
    });
    computer.call(force.drag);
    node.on('click', function(d){
      hipHop.call(this, d, ev);
      return redraw(ev);
    });
    node.exit().remove();
    return force.start();
  }
  function hypot(x, y){
    return Math.sqrt(x * x, y * y);
  }
  svgTranslate = function(x, y){
    return "translate(" + x + ", " + y + ")";
  };
  svgMoveArc = function(x1, y1, x2, y2, r, sweep){
    return "M" + x1 + "," + y1 + " A" + r + "," + r + " 0 0," + sweep + " " + x2 + "," + y2;
  };
  function tick(){
    var margin, bounded, xBounded, yBounded;
    margin = 10;
    bounded = curry$(function(max, x){
      return _.min(max - margin - 1)(_.max(margin)(x));
    });
    xBounded = bounded(width);
    yBounded = bounded(height);
    node.attr('ignore', function(d){
      var ds;
      ds = Config.infoBoxOffsets;
      d3.select(".info[data-id=" + d.id + "]").attr('transform', function(d){
        return (function(arg$){
          var dx, dy;
          dx = arg$[0], dy = arg$[1];
          return svgTranslate(d.x - dx, d.y - dy);
        }.call(this, ds[d.id]));
      });
      return null;
    });
    link.attr('x1', function(d){
      return xBounded(d.source.x);
    }).attr('y1', function(d){
      return yBounded(d.source.y);
    }).attr('x2', function(d){
      return xBounded(d.target.x);
    }).attr('y2', function(d){
      return yBounded(d.target.y);
    });
    return node.attr('transform', function(it){
      return svgTranslate(xBounded(it.x), yBounded(it.y));
    });
  }
  function deepEq$(x, y, type){
    var toString = {}.toString, hasOwnProperty = {}.hasOwnProperty,
        has = function (obj, key) { return hasOwnProperty.call(obj, key); };
    var first = true;
    return eq(x, y, []);
    function eq(a, b, stack) {
      var className, length, size, result, alength, blength, r, key, ref, sizeB;
      if (a == null || b == null) { return a === b; }
      if (a.__placeholder__ || b.__placeholder__) { return true; }
      if (a === b) { return a !== 0 || 1 / a == 1 / b; }
      className = toString.call(a);
      if (toString.call(b) != className) { return false; }
      switch (className) {
        case '[object String]': return a == String(b);
        case '[object Number]':
          return a != +a ? b != +b : (a == 0 ? 1 / a == 1 / b : a == +b);
        case '[object Date]':
        case '[object Boolean]':
          return +a == +b;
        case '[object RegExp]':
          return a.source == b.source &&
                 a.global == b.global &&
                 a.multiline == b.multiline &&
                 a.ignoreCase == b.ignoreCase;
      }
      if (typeof a != 'object' || typeof b != 'object') { return false; }
      length = stack.length;
      while (length--) { if (stack[length] == a) { return true; } }
      stack.push(a);
      size = 0;
      result = true;
      if (className == '[object Array]') {
        alength = a.length;
        blength = b.length;
        if (first) { 
          switch (type) {
          case '===': result = alength === blength; break;
          case '<==': result = alength <= blength; break;
          case '<<=': result = alength < blength; break;
          }
          size = alength;
          first = false;
        } else {
          result = alength === blength;
          size = alength;
        }
        if (result) {
          while (size--) {
            if (!(result = size in a == size in b && eq(a[size], b[size], stack))){ break; }
          }
        }
      } else {
        if ('constructor' in a != 'constructor' in b || a.constructor != b.constructor) {
          return false;
        }
        for (key in a) {
          if (has(a, key)) {
            size++;
            if (!(result = has(b, key) && eq(a[key], b[key], stack))) { break; }
          }
        }
        if (result) {
          sizeB = 0;
          for (key in b) {
            if (has(b, key)) { ++sizeB; }
          }
          if (first) {
            if (type === '<<=') {
              result = size < sizeB;
            } else if (type === '<==') {
              result = size <= sizeB
            } else {
              result = size === sizeB;
            }
          } else {
            first = false;
            result = size === sizeB;
          }
        }
      }
      stack.pop();
      return result;
    }
  }
  function fn$(it){
    return parseInt(it) / 255;
  }
  function curry$(f, bound){
    var context,
    _curry = function(args) {
      return f.length > 1 ? function(){
        var params = args ? args.concat() : [];
        context = bound ? context || this : this;
        return params.push.apply(params, arguments) <
            f.length && arguments.length ?
          _curry.call(context, params) : f.apply(context, params);
      } : f;
    };
    return _curry();
  }
}).call(this);