SVJ stuff

by rgendron

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.2/svg.min.js"></script>
<xscript src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></xscript>
<xscript type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.2/svg.min.js"></xscript>
<div id="mc">
  <div id='divc' data-title="Div C">
    <div id='div1' data-title="Div One">
      Div one
    </div>
    <div id='div2' data-title="Div Two">
      Div two
    </div>
    <div id='div3' data-title="Div Three">
      Div three
    </div>
    <div id='div4' data-title="Div Four">
      Div four
    </div>
  </div>
  <div id="drawing1"></div>
  <div id="drawing2"></div>
</div>

CSS

#drawing1 {
  float: left;
  width: 100px;
}

#drawing2 {
  float: right;
  width: 100px;
}

#mc {
  width: 408px
}

#divc {
  display: inline-block;
  xmargin-left: 111px;
  margin-top: 14px;
  border: 1px solid;
  width: 206px
}

#divc>div {
  width: 200px;
  height: 50px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 4px 3px;
  margin: 4px 0
}

JavaScript

var mc = $('#mc')
var drawing1 = SVG('drawing1').size(100, mc.outerHeight());
var drawing2 = SVG('drawing2').size(100, mc.outerHeight());

console.log(drawing1.id())
console.log($('#' + drawing1.id()).outerWidth());


function arrow_marker(draw) {
  var marker = draw.marker(8, 6, function(add) {
    add.viewbox({
      x: 0,
      y: 0,
      width: 10,
      height: 10
    });
    add.path("M 0 0 L 10 5 L 0 10 Z");
  })
  marker.ref(10, 5);
  return marker;
}

function dl(draw, x1, y1, x2, y2) {
  var line = draw.line(x1, y1, x2, y2).stroke({
    width: 1
  });
  return line;
}

var dc= $('#divc');
var d1= $('#div1');
var d2= $('#div2');
var d3= $('#div3');
var d4= $('#div4');
var con_width = 100;

el_con(dc,d1, d2, 'c1', 'right')
el_con(dc,d2, d4, 'c2', 'left')
function el_con(dc, d1, d2, id, dir) {
  var x = dir == 'right' ? 0 : $('#' + drawing1.id()).outerWidth();
  var top = midy(d1);
  var height = midy(d2) - midy(d1) - 1;
  con(x, top, height, dir);
}
function con(x, top, height, dir) {
  var draw = dir == 'right' ? drawing2 : drawing1;
  var l1 = dl(draw, x, top, dir == 'right' ? x + con_width : x - con_width, top);
  var l1_x2 = l1.array().value[1][0];
  var l2 = dl(draw, l1_x2, top, l1_x2, top + height)
  var l3 = dl(draw, l1_x2, top + height, x, top + height);
  l3.marker('end', arrow_marker(draw))
}
con(0, 200, 20, 'right')



function midy(el){
	return el.position().top + el.outerHeight()/2;
}
/*console.log(line.attr('marker-end'))*/
/*var line = dl(10, 10, 100, 150);*/
/*
dl(10, 10, 100, 10)
dl(100, 100, 10, 100)
dl(10, 10, 10, 100)
dl(100, 100, 100, 10)
*/
/*line.marker('mid', 10, 10, function(add) {
  add.rect(10, 10)
})*/