Short-circuiting the render of nodes.

This will reduce the depth of nesting of elements (and hopefully make
final positioning easier)

src/js/parser/javascript/match.js

@@ -5,42 +5,54 @@ export default _.extend({}, Base, {
   type: 'match',
 
   render() {
-    this.contents = {};
+    var parts = this.parts();
 
-    if (this.anchorStart()) {
+    if (this.anchorStart() || this.anchorEnd() || parts.length !== 1) {
-      this.contents.anchor_start = this.renderLabel(this.container, 'Start of line')
+      this.contents = {};
-        .addClass('anchor');
-    }
 
-    this.contents.parts = _.map(this.parts(), (function(part) {
+      if (this.anchorStart()) {
-      part.setContainer(this.container.group());
+        this.contents.anchor_start = this.renderLabel(this.container, 'Start of line')
-      part.render();
+          .addClass('anchor');
-      return part;
+      }
-    }).bind(this));
 
-    if (this.anchorEnd()) {
+      this.contents.parts = _.map(parts, (function(part) {
-      this.contents.anchor_end = this.renderLabel(this.container, 'End of line')
+        part.setContainer(this.container.group());
-        .addClass('anchor');
+        part.render();
+        return part;
+      }).bind(this));
+
+      if (this.anchorEnd()) {
+        this.contents.anchor_end = this.renderLabel(this.container, 'End of line')
+          .addClass('anchor');
+      }
+    } else {
+      this.content = parts[0];
+      this.content.setContainer(this.container);
+      this.content.render();
     }
   },
 
   position() {
     var items;
 
-    if (this.anchorStart()) {
+    if (this.contents) {
-      this.positionLabel(this.contents.anchor_start);
+      if (this.contents.anchor_start) {
+        this.positionLabel(this.contents.anchor_start);
+      }
+
+      if (this.contents.anchor_end) {
+        this.positionLabel(this.contents.anchor_end);
+      }
+
+      _.invoke(this.contents.parts, 'position');
+
+      items = _(this.contents).values().flatten().value();
+      this.spaceHorizontally(items, {
+        padding: 10
+      });
+    } else {
+      this.content.position();
     }
-
-    if (this.anchorEnd()) {
-      this.positionLabel(this.contents.anchor_end);
-    }
-
-    _.invoke(this.contents.parts, 'position');
-
-    items = _(this.contents).values().flatten().value();
-    this.spaceHorizontally(items, {
-      padding: 10
-    });
   },
 
   anchorStart() {

src/js/parser/javascript/match_fragment.js

@@ -5,7 +5,11 @@ export default _.extend({}, Base, {
   type: 'match-fragment',
 
   render() {
-    this._content.setContainer(this.container.group());
+    if (this._repeat.textValue === '') {
+      this._content.setContainer(this.container);
+    } else {
+      this._content.setContainer(this.container.group());
+    }
     this._content.render();
   },
 

src/js/parser/javascript/regexp.js

@@ -5,13 +5,21 @@ export default _.extend({}, Base, {
   type: 'regexp',
 
   render() {
-    this.matchContainer = this.container.group();
+    var matches = this.matches();
 
-    _.each(this.matches(), (match => {
+    if (matches.length === 1) {
-      match.setContainer(this.matchContainer.group());
+      matches[0].setContainer(this.container);
-      match.render();
+      matches[0].render();
-      return match.container;
+    } else {
-    }).bind(this));
+      this.matchContainer = this.container.group()
+        .addClass('regexp-matches');
+
+      _.each(matches, (match => {
+        match.setContainer(this.matchContainer.group());
+        match.render();
+        return match.container;
+      }).bind(this));
+    }
   },
 
   position() {
@@ -22,11 +30,11 @@ export default _.extend({}, Base, {
 
     _.invoke(matches, 'position');
 
-    this.spaceVertically(matches, {
-      padding: 5
-    });
-
     if (includeLines) {
+      this.spaceVertically(matches, {
+        padding: 5
+      });
+
       this.matchContainer.transform(Snap.matrix()
         .translate(20, 0));