Centralizing some of the layout code

src/js/parser/javascript/base.js

@@ -1,4 +1,10 @@
+import _ from 'lodash';
+
 export default {
+  getBBox() {
+    return this.container.getBBox();
+  },
+
   renderLabel(container, text) {
     var group = container.group();
 
@@ -46,5 +52,35 @@ export default {
 
   position() {
     this.positionLabel(this.label);
+  },
+
+  spaceHorizontally(items, options) {
+    var verticalCenter = 0;
+
+    _.defaults(options, {
+      padding: 0
+    });
+
+    _.reduce(items, (offset, item) => {
+      var element = item.container || item,
+          box;
+
+      element.transform(Snap.matrix()
+        .translate(offset, 0));
+
+      box = item.getBBox();
+
+      verticalCenter = Math.max(verticalCenter, box.cy);
+
+      return offset + options.padding + box.width;
+    }, 0);
+
+    _.each(items, item => {
+      var element = item.container || item;
+
+      element.transform(Snap.matrix()
+        .add(element.transform().localMatrix)
+        .translate(0, verticalCenter - item.getBBox().cy));
+    });
   }
 };

src/js/parser/javascript/charset.js

@@ -38,7 +38,7 @@ export default _.extend({}, Base, {
       part.container.transform(Snap.matrix()
         .translate(0, offset));
 
-      box = part.container.getBBox();
+      box = part.getBBox();
 
       offset += box.height + 5;
     }).bind(this));
@@ -46,7 +46,7 @@ export default _.extend({}, Base, {
     box = this.partContainer.getBBox();
 
     _.each(this.parts.elements, (part => {
-      var partBox = part.container.getBBox();
+      var partBox = part.getBBox();
 
       part.container.transform(Snap.matrix()
         .add(part.container.transform().localMatrix)

src/js/parser/javascript/charset_range.js

@@ -23,12 +23,8 @@ export default _.extend({}, Base, {
     this.first.position();
     this.last.position();
 
-    box = this.first.container.getBBox();
+    this.spaceHorizontally([this.first, this.hyphen, this.last], {
-    this.hyphen.transform(Snap.matrix()
+      padding: 5
-      .translate(box.x2 + 5, box.cy - this.hyphen.getBBox().cy));
+    });
-
-    box = this.hyphen.getBBox();
-    this.last.container.transform(Snap.matrix()
-      .translate(box.x2 + 5, 0));
   }
 });

src/js/parser/javascript/match.js

@@ -27,34 +27,34 @@ export default _.extend({}, Base, {
   },
 
   position() {
-    var offset = 0,
+    var items, paths;
-        path = [];
 
     if (this.anchorStart()) {
       this.positionLabel(this.contents.anchor_start);
-      offset += this.contents.anchor_start.getBBox().width + 10;
-      path.push(Snap.format('M{x2},{cy}h10', this.contents.anchor_start.getBBox()));
     }
 
-    _.each(this.contents.parts, function(part) {
-      part.position();
-      part.container.transform(Snap.matrix()
-        .translate(offset, 0));
-      offset += part.container.getBBox().width + 10;
-      path.push(Snap.format('M{x2},{cy}h10', part.container.getBBox()));
-    });
-
     if (this.anchorEnd()) {
       this.positionLabel(this.contents.anchor_end);
-      this.contents.anchor_end.transform(Snap.matrix()
-        .translate(offset, 0));
-    } else {
-      path.pop();
     }
 
-    this.container.prepend(
+    _.invoke(this.contents.parts, 'position');
-      this.container.path(path.join(''))
+
-    );
+    items = _(this.contents).values().flatten().value();
+    this.spaceHorizontally(items, {
+      padding: 10
+    });
+
+    // NOTE:
+    // item.cy won't work for this in the long run once vertical centers can be
+    // offset.
+    paths = _.map(items, item => {
+      return Snap.format('M{item.x2},{item.cy}h10', {
+        item: item.getBBox()
+      });
+    });
+    paths.pop();
+
+    this.container.prepend(this.container.path(paths.join('')));
   },
 
   anchorStart() {

src/js/parser/javascript/match_fragment.js

@@ -17,7 +17,7 @@ export default _.extend({}, Base, {
     if (this._repeat.textValue !== '') {
       this._content.container.transform(this._repeat.contentPosition());
 
-      box = this._content.container.getBBox();
+      box = this._content.getBBox();
 
       if (this._repeat.hasSkip()) {
         paths.push(Snap.format('M0,{cy}q10,0 10,-10v-{vert}q0,-10 10,-10h{horiz}q10,0 10,10v{vert}q0,10 10,10', _.extend({

src/js/parser/javascript/regexp.js

@@ -29,8 +29,8 @@ export default _.extend({}, Base, {
     positions = _.chain(matches)
       .map(match => {
         return {
-          box: match.container.getBBox(),
+          match,
-          content: match.container
+          box: match.getBBox()
         };
       });
     center = positions.reduce((center, pos) => {
@@ -38,7 +38,7 @@ export default _.extend({}, Base, {
     }, 0).value();
 
     totalHeight = positions.reduce((offset, pos) => {
-      pos.content.transform(Snap.matrix()
+      pos.match.container.transform(Snap.matrix()
         .translate(center - pos.box.cx + (includeLines ? 20 : 0), offset));
 
       return offset + pos.box.height + 5;
@@ -48,7 +48,7 @@ export default _.extend({}, Base, {
 
     if (includeLines) {
       positions.each(pos => {
-        var box = pos.content.getBBox(),
+        var box = pos.match.getBBox(),
             direction = box.cy > verticalCenter ? 1 : -1,
             pathStr;
 

src/js/parser/javascript/root.js

@@ -22,7 +22,7 @@ export default _.extend({}, Base, {
 
     this.regexp.position();
 
-    contentBox = this.regexp.container.getBBox();
+    contentBox = this.regexp.getBBox();
 
     this.container.prepend(
       this.container.path(Snap.format('M0,{cy}h10M{x2},{cy}h10', contentBox))

src/js/parser/javascript/subexp.js

@@ -44,7 +44,7 @@ export default _.extend({}, Base, {
     this.regexp.position();
 
     if (this.outline) {
-      box = this.regexp.container.getBBox();
+      box = this.regexp.getBBox();
 
       this.outline.attr({
         width: box.width + 20,
@@ -52,7 +52,7 @@ export default _.extend({}, Base, {
       });
 
       this.container.path(Snap.format('M0,{content.cy}h10M{content.x2},{content.cy}H{container.x2}', {
-        container: this.container.getBBox(),
+        container: this.getBBox(),
         content: box
       }));
     }

src/js/regexper.js

@@ -98,7 +98,7 @@ export default class Regexper {
 
         result.position();
 
-        box = result.container.getBBox();
+        box = result.getBBox();
         result.container.transform(Snap.matrix()
           .translate(padding - box.x, padding - box.y));
         snap.attr({