Adding horizontal connecting lines

src/js/parser/javascript/match.js

@@ -27,10 +27,29 @@ export default _.extend({}, Base, {
 
       return Q.all(_([start, partPromises, end]).flatten().compact().value())
         .then(((items) => {
+          var prev, next, paths;
+
           this.items = items;
           this.spaceHorizontally(items, {
             padding: 10
           });
+
+          prev = this.normalizeBBox(_.first(items).getBBox());
+          paths = _.map(items.slice(1), (item => {
+            var path;
+
+            next = this.normalizeBBox(item.getBBox());
+            path = Snap.format('M{prev.ax2},{prev.ay}H{next.ax}', {
+              prev,
+              next
+            });
+            prev = next;
+
+            return path;
+          }).bind(this));
+
+          this.container.prepend(
+            this.container.path(paths.join('')));
         }).bind(this));
     } else {
       return this.proxy(parts[0]);

src/js/parser/javascript/regexp.js

@@ -36,6 +36,14 @@ export default _.extend({}, Base, {
 
           this.container.prepend(
             this.container.path(paths.join('')));
+
+          matchContainer.prepend(
+            matchContainer.path(_.map(matches, match => {
+              return Snap.format('M0,{box.ay}h{box.ax}M{box.ax2},{box.ay}H{container.width}', {
+                box: match.getBBox(),
+                container: matchContainer.getBBox()
+              });
+            }).join('')));
         }).bind(this));
     }
   },

src/js/parser/javascript/root.js

@@ -25,6 +25,11 @@ export default _.extend({}, Base, {
           .translate(0, contentBox.ay));
         this.end.transform(Snap.matrix()
           .translate(contentBox.x2 + 10, contentBox.ay));
+
+        this.container.prepend(
+          this.container.path(Snap.format('M{box.ax},{box.ay}H0M{box.ax2},{box.ay}H{box.x2}h10', {
+            box: contentBox
+          })));
       }).bind(this));
   },