Auto-conneting trees and stuff

tree.slim

scss:
  .node_top {
    display: block;
    border: 1px dotted black;
    margin: auto;
  }

  .node {
    display: table-cell;
    vertical-align: top;
  }
  .node_org {
    width: 100%;
    display: table;
    position: relative;
  }

  .node_box {
    display: table-caption !important;
    display: block;
    width: 50px;
    height: 50px;
    margin: auto;
    border: 1px solid black;
    margin-bottom: 30px;
  }

  .red {
    background: red;
  }

  .green {
    background: green;
  }

  .blue {
    background: blue;
  }
  #canvas{
    position:absolute;
    width:100%;height:100%;
    z-index: -1000;
    top: 0px;
  }

coffee:
  $.fn.initialize_trees = () ->
    $(this).each () ->
      container = $(this)
      $canvas = container.find('canvas:first')
      canvas = $canvas.get(0)
      parent = $canvas.parent()

      ctx = canvas.getContext("2d");
      canvas.width = parent.width()
      canvas.height = parent.height()
      ctx.lineWidth = 1;

      container.find('.node_box').connect_boxes(ctx)

  $.fn.connect_boxes = (ctx) ->
    $(this).each () ->

      from_box = $(this)
      
      to_orgs = from_box.siblings().find('.node_org:first')
      to_boxes = to_orgs.find('.node_box:first')

      to_boxes.each () ->
        to_box = $(this)

        pos1 = from_box.offset();
        pos2 = to_box.offset();
        size1 = from_box.size();
        size2 = to_box.size();

        ctx.beginPath();
        ctx.moveTo(pos1.left + from_box.width() / 2, pos1.top + from_box.height() + 1);
        ctx.lineTo(pos2.left + to_box.width() / 2, pos2.top - 1);
        ctx.stroke();
  $ () ->
    $('.node_top').initialize_trees()


.node_top: .node_org
  canvas#canvas
  .node_box.red

  .node: .node_org
    .node_box.green

    .node: .node_org
      .node_box.blue
      .node: .node_org
        .node_box
      .node: .node_org
        .node_box

    .node: .node_org
      .node_box.blue
      .node: .node_org
        .node_box
      .node: .node_org
        .node_box

  .node: .node_org
    .node_box.green