Folding labeled box positioning into rendering

src/js/parser/javascript/base.js

@@ -120,35 +120,36 @@ export default {
     });
   },
 
-  renderLabeledBox(label) {
-    this.label = this.container.text()
+  renderLabeledBox(label, content, options) {
+    var deferred = Q.defer(),
+        label = this.container.text()
           .addClass([this.type, 'label'].join('-'))
           .attr({
             text: label
-      });
-
-    this.box = this.container.rect()
+          }),
+        box = this.container.rect()
           .addClass([this.type, 'box'].join('-'))
           .attr({
             rx: 3,
             ry: 3
           });
-  },
-
-  positionLabeledBox(content, options) {
-    var labelBox, contentBox;
 
     _.defaults(options, {
       padding: 0
     });
 
-    labelBox = this.label.getBBox();
+    this.container.prepend(label);
+    this.container.prepend(box);
+
+    setTimeout(deferred.resolve);
+    deferred.promise.then(() => {
+      var labelBox = label.getBBox(),
           contentBox = content.getBBox();
 
-    this.label.transform(Snap.matrix()
+      label.transform(Snap.matrix()
         .translate(0, labelBox.height));
 
-    this.box
+      box
         .transform(Snap.matrix()
           .translate(0, labelBox.height))
         .attr({
@@ -157,6 +158,9 @@ export default {
         });
 
       content.transform(Snap.matrix()
-      .translate(this.box.getBBox().cx - contentBox.cx, labelBox.height + options.padding));
+        .translate(box.getBBox().cx - contentBox.cx, labelBox.height + options.padding));
+    });
+
+    return deferred.promise;
   }
 };

src/js/parser/javascript/charset.js

@@ -6,11 +6,7 @@ export default _.extend({}, Base, {
   type: 'charset',
 
   _render() {
-    var partContainer;
-
-    this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:');
-
-    partContainer = this.container.group();
+    var partContainer = this.container.group();
 
     return Q.all(_.map(this.parts.elements, part => {
       return part.render(partContainer.group());
@@ -20,7 +16,7 @@ export default _.extend({}, Base, {
           padding: 5
         });
 
-        this.positionLabeledBox(partContainer, {
+        return this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:', partContainer, {
           padding: 5
         });
       }).bind(this));

src/js/parser/javascript/subexp.js

@@ -16,14 +16,10 @@ export default _.extend({}, Base, {
     var label = this.groupLabel();
 
     if (label) {
-      this.renderLabeledBox(label);
-
       return this.regexp.render(this.container.group())
-        .then((() => {
-          this.positionLabeledBox(this.regexp, {
+        .then(this.renderLabeledBox.bind(this, label, this.regexp, {
           padding: 10
-          });
-        }).bind(this));
+        }));
     } else {
       return this.proxy(this.regexp);
     }