Folding labeled box positioning into rendering

src/js/parser/javascript/base.js

@@ -120,43 +120,47 @@ export default {
     });
   },
 
-  renderLabeledBox(label) {
+  renderLabeledBox(label, content, options) {
-    this.label = this.container.text()
+    var deferred = Q.defer(),
-      .addClass([this.type, 'label'].join('-'))
+        label = this.container.text()
-      .attr({
+          .addClass([this.type, 'label'].join('-'))
-        text: label
+          .attr({
-      });
+            text: label
-
+          }),
-    this.box = this.container.rect()
+        box = this.container.rect()
-      .addClass([this.type, 'box'].join('-'))
+          .addClass([this.type, 'box'].join('-'))
-      .attr({
+          .attr({
-        rx: 3,
+            rx: 3,
-        ry: 3
+            ry: 3
-      });
+          });
-  },
-
-  positionLabeledBox(content, options) {
-    var labelBox, contentBox;
 
     _.defaults(options, {
       padding: 0
     });
 
-    labelBox = this.label.getBBox();
+    this.container.prepend(label);
-    contentBox = content.getBBox();
+    this.container.prepend(box);
 
-    this.label.transform(Snap.matrix()
+    setTimeout(deferred.resolve);
-      .translate(0, labelBox.height));
+    deferred.promise.then(() => {
+      var labelBox = label.getBBox(),
+          contentBox = content.getBBox();
 
-    this.box
+      label.transform(Snap.matrix()
-      .transform(Snap.matrix()
+        .translate(0, labelBox.height));
-        .translate(0, labelBox.height))
-      .attr({
-        width: Math.max(contentBox.width + options.padding * 2, labelBox.width),
-        height: contentBox.height + options.padding * 2
-      });
 
-    content.transform(Snap.matrix()
+      box
-      .translate(this.box.getBBox().cx - contentBox.cx, labelBox.height + options.padding));
+        .transform(Snap.matrix()
+          .translate(0, labelBox.height))
+        .attr({
+          width: Math.max(contentBox.width + options.padding * 2, labelBox.width),
+          height: contentBox.height + options.padding * 2
+        });
+
+      content.transform(Snap.matrix()
+        .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;
+    var partContainer = this.container.group();
-
-    this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:');
-
-    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((() => {
+        .then(this.renderLabeledBox.bind(this, label, this.regexp, {
-          this.positionLabeledBox(this.regexp, {
+          padding: 10
-            padding: 10
+        }));
-          });
-        }).bind(this));
     } else {
       return this.proxy(this.regexp);
     }