Adding first cut of code to render alternations

Still need to implement lines to the individual parts

src/js/main.js

@@ -3,12 +3,14 @@ import Snap from 'snapsvg';
 
 // Testing code
 (function() {
-  var result = parser.parse('test expr'),
+  var result = parser.parse('test expr|other expr'),
       svg = Snap('#regexp-render svg'),
       container;
 
   if (svg) {
-    container = svg.group();
+    container = svg.group().transform(Snap.matrix()
+      .translate(10, 10));
+
 
     document.body.className = 'has-results';
     result.render(container);
@@ -18,9 +20,6 @@ import Snap from 'snapsvg';
 
       result.position();
 
-      container.transform(Snap.matrix()
-        .translate(10, 10));
-
       box = container.getBBox();
       svg.attr({
         width: box.width + 20,

src/js/parser/javascript.js

@@ -2,8 +2,10 @@ import parser from './javascript/grammar.peg';
 
 import Root from './javascript/root.js';
 import Regexp from './javascript/regexp.js';
+import Match from './javascript/match.js';
 
 parser.Parser.Root = Root;
 parser.Parser.Regexp = Regexp;
+parser.Parser.Match = Match;
 
 export default parser;

src/js/parser/javascript/grammar.peg

@@ -1,7 +1,7 @@
 grammar JavascriptRegexp
   root <- ( ( "/" regexp "/" fl:[igm]* ) / regexp ""? ) <Root>
-  regexp <- match ( "|" match )* <Regexp>
-  match <- anchor_start? ( ( subexp / charset / terminal ) repeat? )* anchor_end?
+  regexp <- match alternates:( "|" match )* <Regexp>
+  match <- anchor_start? ( ( subexp / charset / terminal ) repeat? )* anchor_end? <Match>
   anchor_start <- "^"
   anchor_end <- "$"
   repeat <- ( repeat_any / repeat_required / repeat_optional / repeat_spec ) repeat_greedy?

src/js/parser/javascript/match.js

@@ -0,0 +1,5 @@
+import _ from 'lodash';
+import Base from './base.js';
+
+export default _.extend({}, Base, {
+});

src/js/parser/javascript/regexp.js

@@ -2,11 +2,37 @@ import _ from 'lodash';
 import Base from './base.js';
 
 export default _.extend({}, Base, {
+  render(container) {
+    this.contents = _.map(this.matches(), match => {
+      var content = container.group();
+      match.render(content);
+      return content;
+    });
+  },
+
+  position() {
+    var center,
+        positions;
+
+    _.invoke(this.matches(), 'position');
+
+    positions = _.chain(this.contents)
+      .map(content => {
+        return { box: content.getBBox(), content };
+      });
+    center = positions.reduce((center, pos) => {
+      return Math.max(center, pos.box.cx);
+    }, 0).value();
+
+    positions.reduce((offset, pos) => {
+      pos.content.transform(Snap.matrix()
+        .translate(center - pos.box.cx, offset));
+
+      return offset + pos.box.height + 5;
+    }, 0);
+  },
+
   matches() {
-    if (this.elements[1].regexp) {
-      return [this.match].concat(this.elements[1].regexp.matches());
-    } else {
-      return [this.match];
-    }
+    return [this.match].concat(_.map(this.alternates.elements, _.property('match')));
   }
 });