// Generated by CoffeeScript 1.10.0
(function() {
  var R;

  R = 18;

  window.NodeLink = Backbone.D3View.extend({
    tagName: 'svg',
    events: {
      'click .link': function(evt, d) {
        return this.model.select(d.id);
      }
    },
    initialize: function() {
      var defs, zoom, zoomable_layer;
      this.d3el.classed('node_link', true);
      defs = this.d3el.append('defs');
      defs.append('marker').attr({
        id: 'end-arrow',
        viewBox: '0 0 10 10',
        refX: 4 + R,
        refY: 5,
        orient: 'auto'
      }).append('path').attr({
        d: 'M0,0 L0,10 L10,5 z'
      });
      zoomable_layer = this.d3el.append('g');
      zoom = d3.behavior.zoom().scaleExtent([-Infinity, Infinity]).on('zoom', function() {
        return zoomable_layer.attr({
          transform: "translate(" + (zoom.translate()) + ")scale(" + (zoom.scale()) + ")"
        });
      });
      this.d3el.call(zoom);
      this.links_layer = zoomable_layer.append('g');
      this.nodes_layer = zoomable_layer.append('g');
      this.listenTo(this.model, 'change:graph', this.render);
      return this.listenTo(this.model, 'change:selected', this.focus);
    },
    render: function() {
      var d3cola, drag, enter_nodes, graph, height, links, nodes, width;
      width = this.el.getBoundingClientRect().width;
      height = this.el.getBoundingClientRect().height;
      graph = this.model.get('graph');
      nodes = this.nodes_layer.selectAll('.node').data(graph.nodes, function(d) {
        return d.id;
      });
      enter_nodes = nodes.enter().append('g').attr({
        "class": 'node'
      });
      enter_nodes.append('circle').attr({
        r: R
      });
      enter_nodes.append('text').text(function(d) {
        return d.id;
      }).attr({
        dy: '0.35em'
      });
      nodes.exit().remove();
      links = this.links_layer.selectAll('.link').data(graph.links, function(d) {
        return d.id;
      });
      links.enter().append('line').attr({
        "class": 'link'
      });
      links.classed('directed', function(d) {
        return d.directed;
      });
      links.exit().remove();

      /* cola layout */
      graph.nodes.forEach(function(v) {
        v.width = 3 * R;
        return v.height = 3 * R;
      });
      d3cola = cola.d3adaptor().size([width, height]).linkDistance(100).avoidOverlaps(true).nodes(graph.nodes).links(graph.links).on('tick', function() {
        nodes.attr('transform', function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        });
        return links.attr('x1', function(d) {
          return d.source.x;
        }).attr('y1', function(d) {
          return d.source.y;
        }).attr('x2', function(d) {
          return d.target.x;
        }).attr('y2', function(d) {
          return d.target.y;
        });
      });
      drag = d3cola.drag();
      drag.on('dragstart', function() {
        return d3.event.sourceEvent.stopPropagation();
      });
      nodes.call(drag);
      return d3cola.start(30, 30, 30);
    },
    focus: function() {
      var id;
      id = this.model.get('selected');
      return this.links_layer.selectAll('.link').classed('selected', function(d) {
        return d.id === id;
      }).classed('unselected', function(d) {
        if (id === null) {
          return null;
        } else {
          return d.id !== id;
        }
      });
    }
  });

}).call(this);