First pass for getting flow lines in place

This could use some refactoring

src/index.html

@@ -28,6 +28,12 @@
           dominant-baseline: text-after-edge;
         }
 
+        path {
+          fill: transparent;
+          stroke-width: 2px;
+          stroke: #000;
+        }
+
         circle.anchor {
           fill: #6b6659;
           stroke-width: 2px;

src/js/main.js

@@ -3,7 +3,7 @@ import Snap from 'snapsvg';
 
 // Testing code
 (function() {
-  var result = parser.parse('test expr|other expr'),
+  var result = parser.parse('test expr|other expr|foo'),
       svg = Snap('#regexp-render svg'),
       container;
 

src/js/parser/javascript/regexp.js

@@ -3,6 +3,7 @@ import Base from './base.js';
 
 export default _.extend({}, Base, {
   render(container) {
+    this.container = container;
     this.contents = _.map(this.matches(), match => {
       var content = container.group();
       match.render(content);
@@ -12,7 +13,10 @@ export default _.extend({}, Base, {
 
   position() {
     var center,
-        positions;
+        positions,
+        container = this.container,
+        totalHeight,
+        verticalCenter;
 
     _.invoke(this.matches(), 'position');
 
@@ -24,12 +28,35 @@ export default _.extend({}, Base, {
       return Math.max(center, pos.box.cx);
     }, 0).value();
 
-    positions.reduce((offset, pos) => {
+    totalHeight = positions.reduce((offset, pos) => {
       pos.content.transform(Snap.matrix()
-        .translate(center - pos.box.cx, offset));
+        .translate(center - pos.box.cx + 20, offset));
 
       return offset + pos.box.height + 5;
-    }, 0);
+    }, 0).value() - 5;
+
+    verticalCenter = totalHeight / 2
+
+    positions.each(pos => {
+      var box = pos.content.getBBox(),
+          direction = box.cy > verticalCenter ? 1 : -1,
+          pathStr,
+          path;
+
+      pathStr = (verticalCenter === box.cy) ?
+        'M0,{center}H{side}' :
+        'M0,{center}q10,0 10,{d}V{target}q0,{d} 10,{d}H{side}';
+
+      path = container.path(Snap.format(pathStr, {
+        center: verticalCenter,
+        target: box.cy - 10 * direction,
+        side: box.x,
+        d: 10 * direction
+      }));
+
+      path.clone().transform(Snap.matrix()
+        .scale(-1, 1, center + 20, 0));
+    });
   },
 
   matches() {