Refactoring to remove the container argument to render methods

A reference was being kept generally, so it was more useful to keep it
connected to the node

src/js/main.js

@@ -4,23 +4,21 @@ import Snap from 'snapsvg';
 // Testing code
 (function() {
   var result = parser.parse('^test?(foo)[a-z]asdf$'),
-      svg = Snap('#regexp-render svg'),
+      svg = Snap('#regexp-render svg');
-      container;
 
   if (svg) {
-    container = svg.group().transform(Snap.matrix()
-      .translate(10, 10));
-
-
     document.body.className = 'has-results';
-    result.render(container);
+
+    result.container = svg.group().transform(Snap.matrix()
+      .translate(10, 10));
+    result.render();
 
     setTimeout(() => {
       var box;
 
       result.position();
 
-      box = container.getBBox();
+      box = result.container.getBBox();
       svg.attr({
         width: box.width + 20,
         height: box.height + 20

src/js/parser/javascript/base.js

@@ -36,10 +36,10 @@ export default {
       });
   },
 
-  render(container) {
+  render() {
-    container.attr({ 'class': 'placeholder' });
+    this.container.attr({ 'class': 'placeholder' });
 
-    this.label = this.render_label(container, this.textValue);
+    this.label = this.render_label(this.container, this.textValue);
   },
 
   position() {

src/js/parser/javascript/match.js

@@ -4,21 +4,23 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'match',
 
-  render(container) {
+  render() {
+    var self = this;
+
     this.contents = {};
 
     if (this.anchor_start()) {
-      this.contents.anchor_start = this.render_label(container, 'Start of line');
+      this.contents.anchor_start = this.render_label(this.container, 'Start of line');
     }
 
     this.contents.parts = _.map(this.parts(), function(part) {
-      var content = container.group();
+      part.container = self.container.group();
-      part.render(content);
+      part.render();
-      return { content, part };
+      return part;
     });
 
     if (this.anchor_end()) {
-      this.contents.anchor_end = this.render_label(container, 'End of line');
+      this.contents.anchor_end = this.render_label(this.container, 'End of line');
     }
   },
 
@@ -30,11 +32,11 @@ export default _.extend({}, Base, {
       offset += this.contents.anchor_start.getBBox().width;
     }
 
-    _.each(this.contents.parts, function(thing) {
+    _.each(this.contents.parts, function(part) {
-      thing.part.position();
+      part.position();
-      thing.content.transform(Snap.matrix()
+      part.container.transform(Snap.matrix()
         .translate(offset, 0));
-      offset += thing.content.getBBox().width;
+      offset += part.container.getBBox().width;
     });
 
     if (this.anchor_end()) {

src/js/parser/javascript/regexp.js

@@ -4,28 +4,33 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'regexp',
 
-  render(container) {
+  render() {
-    this.container = container;
+    var self = this;
-    this.contents = _.map(this.matches(), match => {
+
-      var content = container.group();
+    _.each(this.matches(), match => {
-      match.render(content);
+      match.container = self.container.group();
-      return content;
+      match.render();
+      return match.container;
     });
   },
 
   position() {
-    var center,
+    var self = this,
+        center,
         positions,
-        container = this.container,
         totalHeight,
         verticalCenter,
-        includeLines = (this.matches().length > 1);
+        matches = this.matches(),
+        includeLines = (matches.length > 1);
 
-    _.invoke(this.matches(), 'position');
+    _.invoke(matches, 'position');
 
-    positions = _.chain(this.contents)
+    positions = _.chain(matches)
-      .map(content => {
+      .map(match => {
-        return { box: content.getBBox(), content };
+        return {
+          box: match.container.getBBox(),
+          content: match.container
+        };
       });
     center = positions.reduce((center, pos) => {
       return Math.max(center, pos.box.cx);
@@ -51,7 +56,7 @@ export default _.extend({}, Base, {
           'M0,{center}H{side}' :
           'M0,{center}q10,0 10,{d}V{target}q0,{d} 10,{d}H{side}';
 
-        path = container.path(Snap.format(pathStr, {
+        path = self.container.path(Snap.format(pathStr, {
           center: verticalCenter,
           target: box.cy - 10 * direction,
           side: box.x,

src/js/parser/javascript/root.js

@@ -4,16 +4,15 @@ import Base from './base.js';
 export default _.extend({}, Base, {
   type: 'root',
 
-  render(container) {
+  render() {
-    this.contents = container.group();
+    this.regexp.container = this.container.group();
+    this.regexp.render();
 
-    this.regexp.render(this.contents);
+    this.start = this.container.circle().attr({
-
-    this.start = container.circle().attr({
       r: 5,
       'class': 'anchor'
     });
-    this.end = container.circle().attr({
+    this.end = this.container.circle().attr({
       r: 5,
       'class': 'anchor'
     });
@@ -24,7 +23,7 @@ export default _.extend({}, Base, {
 
     this.regexp.position();
 
-    contentBox = this.contents.getBBox();
+    contentBox = this.regexp.container.getBBox();
 
     this.start.transform(Snap.matrix()
       .translate(contentBox.x, contentBox.cy));