Simplifying code related to passing rendering through to nested node

src/js/parser/javascript/any_character.js

@@ -4,7 +4,7 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'any-character',
 
-  render() {
+  _render() {
     this.label = this.renderLabel(this.container, 'any character');
   }
 });

src/js/parser/javascript/base.js

@@ -39,6 +39,24 @@ export default {
   },
 
   render() {
+    this._render();
+  },
+
+  position() {
+    if (this._proxy) {
+      this._proxy.position();
+    } else {
+      this._position();
+    }
+  },
+
+  proxy(node) {
+    this._proxy = node;
+    this._proxy.setContainer(this.container);
+    this._proxy.render();
+  },
+
+  _render() {
     console.log(this);
 
     this.container.addClass('placeholder');
@@ -51,7 +69,7 @@ export default {
     });
   },
 
-  position() {
+  _position() {
     this.positionLabel(this.label);
   },
 

src/js/parser/javascript/charset.js

@@ -4,7 +4,7 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'charset',
 
-  render() {
+  _render() {
     this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:');
 
     this.partContainer = this.container.group();
@@ -15,7 +15,7 @@ export default _.extend({}, Base, {
     }).bind(this));
   },
 
-  position() {
+  _position() {
     _.invoke(this.parts.elements, 'position');
 
     this.spaceVertically(this.parts.elements, {

src/js/parser/javascript/charset_range.js

@@ -4,7 +4,7 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'charset-range',
 
-  render() {
+  _render() {
     this.first.setContainer(this.container.group());
     this.first.render();
 
@@ -17,7 +17,7 @@ export default _.extend({}, Base, {
       });
   },
 
-  position() {
+  _position() {
     var box;
 
     this.first.position();

src/js/parser/javascript/escape.js

@@ -12,7 +12,7 @@ export default _.extend({}, Base, {
     return this.esc.arg.textValue;
   },
 
-  render() {
+  _render() {
     this.label = this.renderLabel(this.container, _.result(this, this.code()));
 
     this.label.select('rect').attr({

src/js/parser/javascript/literal.js

@@ -4,7 +4,7 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'literal',
 
-  render() {
+  _render() {
     this.label = this.renderLabel(this.container, '"' + this.literal.textValue + '"');
 
     this.label.select('rect').attr({

src/js/parser/javascript/match.js

@@ -4,7 +4,7 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'match',
 
-  render() {
+  _render() {
     var parts = this.parts();
 
     if (this.anchorStart() || this.anchorEnd() || parts.length !== 1) {
@@ -26,33 +26,27 @@ export default _.extend({}, Base, {
           .addClass('anchor');
       }
     } else {
-      this.content = parts[0];
+      this.proxy(parts[0]);
-      this.content.setContainer(this.container);
-      this.content.render();
     }
   },
 
-  position() {
+  _position() {
     var items;
 
-    if (this.contents) {
+    if (this.contents.anchor_start) {
-      if (this.contents.anchor_start) {
+      this.positionLabel(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.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
+    });
   },
 
   anchorStart() {

src/js/parser/javascript/match_fragment.js

@@ -4,41 +4,38 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'match-fragment',
 
-  render() {
+  _render() {
     if (this._repeat.textValue === '') {
-      this._content.setContainer(this.container);
+      this.proxy(this._content);
     } else {
       this._content.setContainer(this.container.group());
+      this._content.render();
     }
-    this._content.render();
   },
 
-  position() {
+  _position() {
     var box, paths = [];
 
     this._content.position();
+    this._content.container.transform(this._repeat.contentPosition());
 
-    if (this._repeat.textValue !== '') {
+    box = this._content.getBBox();
-      this._content.container.transform(this._repeat.contentPosition());
 
-      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({
+        vert: box.height / 2 - 10,
+        horiz: box.width - 10
+      }, box)));
+    }
 
-      if (this._repeat.hasSkip()) {
+    if (this._repeat.hasLoop()) {
-        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({
+      paths.push(Snap.format('M{x},{cy}q-10,0 -10,10v{vert}q0,10 10,10h{width}q10,0 10,-10v-{vert}q0,-10 -10,-10', _.extend({
-          vert: box.height / 2 - 10,
+        vert: box.height / 2 - 10
-          horiz: box.width - 10
+      }, box)));
-        }, box)));
+    }
-      }
 
-      if (this._repeat.hasLoop()) {
+    if (paths.length) {
-        paths.push(Snap.format('M{x},{cy}q-10,0 -10,10v{vert}q0,10 10,10h{width}q10,0 10,-10v-{vert}q0,-10 -10,-10', _.extend({
+      this.container.path(paths.join(''));
-          vert: box.height / 2 - 10
-        }, box)));
-      }
-
-      if (paths.length) {
-        this.container.path(paths.join(''));
-      }
     }
   }
 });

src/js/parser/javascript/regexp.js

@@ -4,12 +4,11 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'regexp',
 
-  render() {
+  _render() {
     var matches = this.matches();
 
     if (matches.length === 1) {
-      matches[0].setContainer(this.container);
+      this.proxy(matches[0]);
-      matches[0].render();
     } else {
       this.matchContainer = this.container.group()
         .addClass('regexp-matches');
@@ -22,66 +21,63 @@ export default _.extend({}, Base, {
     }
   },
 
-  position() {
+  _position() {
     var matches = this.matches(),
-        includeLines = (matches.length > 1),
         containerBox,
         paths;
 
     _.invoke(matches, 'position');
 
-    if (includeLines) {
+    this.spaceVertically(matches, {
-      this.spaceVertically(matches, {
+      padding: 5
-        padding: 5
+    });
-      });
 
-      this.matchContainer.transform(Snap.matrix()
+    this.matchContainer.transform(Snap.matrix()
-        .translate(20, 0));
+      .translate(20, 0));
 
-      containerBox = this.getBBox();
+    containerBox = this.getBBox();
-      paths = _.map(matches, match => {
+    paths = _.map(matches, match => {
-        var box = match.getBBox(),
+      var box = match.getBBox(),
-            direction = box.cy > containerBox.cy ? 1 : -1,
+          direction = box.cy > containerBox.cy ? 1 : -1,
-            distance = Math.abs(box.cy - containerBox.cy),
+          distance = Math.abs(box.cy - containerBox.cy),
-            pathStr;
+          pathStr;
 
-        if (distance >= 15) {
+      if (distance >= 15) {
-          pathStr = [
+        pathStr = [
-            'M10,{box.cy}m0,{shift}q0,{curve} 10,{curve}',
+          'M10,{box.cy}m0,{shift}q0,{curve} 10,{curve}',
-            'M{containerBox.width},{box.cy}m30,{shift}q0,{curve} -10,{curve}'
+          'M{containerBox.width},{box.cy}m30,{shift}q0,{curve} -10,{curve}'
-          ].join('');
+        ].join('');
-        } else {
+      } else {
-          pathStr = [
+        pathStr = [
-            'M0,{containerBox.cy}c10,0 10,{anchor.y} 20,{anchor.y}',
+          'M0,{containerBox.cy}c10,0 10,{anchor.y} 20,{anchor.y}',
-            'M{containerBox.width},{containerBox.cy}m40,0c-10,0 -10,{anchor.y} -20,{anchor.y}'
+          'M{containerBox.width},{containerBox.cy}m40,0c-10,0 -10,{anchor.y} -20,{anchor.y}'
-          ].join('');
+        ].join('');
+      }
+
+      return Snap.format(pathStr, {
+        containerBox,
+        box,
+        shift: -10 * direction,
+        curve: 10 * direction,
+        anchor: {
+          x: box.x + 20,
+          y: box.cy - containerBox.cy
         }
-
-        return Snap.format(pathStr, {
-          containerBox,
-          box,
-          shift: -10 * direction,
-          curve: 10 * direction,
-          anchor: {
-            x: box.x + 20,
-            y: box.cy - containerBox.cy
-          }
-        });
       });
+    });
 
-      paths.push(Snap.format([
+    paths.push(Snap.format([
-        'M0,{box.cy}q10,0 10,-10V{top}',
+      'M0,{box.cy}q10,0 10,-10V{top}',
-        'M0,{box.cy}q10,0 10,10V{bottom}',
+      'M0,{box.cy}q10,0 10,10V{bottom}',
-        'M{box.width},{box.cy}m40,0q-10,0 -10,-10V{top}',
+      'M{box.width},{box.cy}m40,0q-10,0 -10,-10V{top}',
-        'M{box.width},{box.cy}m40,0q-10,0 -10,10V{bottom}'
+      'M{box.width},{box.cy}m40,0q-10,0 -10,10V{bottom}'
-      ].join(''), {
+    ].join(''), {
-        box: containerBox,
+      box: containerBox,
-        top: _.first(matches).getBBox().cy + 10,
+      top: _.first(matches).getBBox().cy + 10,
-        bottom: _.last(matches).getBBox().cy - 10
+      bottom: _.last(matches).getBBox().cy - 10
-      }));
+    }));
 
-      this.container.prepend(this.container.path(paths.join('')));
+    this.container.prepend(this.container.path(paths.join('')));
-    }
   },
 
   matches() {

src/js/parser/javascript/root.js

@@ -4,7 +4,7 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'root',
 
-  render() {
+  _render() {
     this.regexp.setContainer(this.container.group().transform(Snap.matrix()
       .translate(10, 0)));
     this.regexp.render();
@@ -17,7 +17,7 @@ export default _.extend({}, Base, {
       .attr({ r: 5 });
   },
 
-  position() {
+  _position() {
     var contentBox;
 
     this.regexp.position();

src/js/parser/javascript/subexp.js

@@ -12,7 +12,7 @@ export default _.extend({}, Base, {
     '?!': 'negative lookahead'
   },
 
-  render() {
+  _render() {
     var label = this.groupLabel();
 
     if (label) {
@@ -21,19 +21,16 @@ export default _.extend({}, Base, {
       this.regexp.setContainer(this.container.group());
       this.regexp.render();
     } else {
-      this.regexp.setContainer(this.container);
+      this.proxy(this.regexp);
-      this.regexp.render();
     }
   },
 
-  position() {
+  _position() {
     this.regexp.position();
 
-    if (this.groupLabel()) {
+    this.positionLabeledBox(this.regexp.container, {
-      this.positionLabeledBox(this.regexp.container, {
+      padding: 10
-        padding: 10
+    });
-      });
-    }
   },
 
   groupLabel() {