Updating renderLabel to be promise based

src/js/parser/javascript/any_character.js

@@ -5,7 +5,6 @@ export default _.extend({}, Base, {
   type: 'any-character',
 
   _render() {
-    this.renderLabel('any character');
+    return this.renderLabel('any character');
-    return this.terminalRender();
   }
 });

src/js/parser/javascript/base.js

@@ -16,33 +16,29 @@ export default {
   },
 
   renderLabel(text) {
-    var group = this.container.group()
+    var deferred = Q.defer(),
-      .addClass('label');
+        group = this.container.group()
+          .addClass('label'),
+        rect = group.rect(),
+        text = group.text().attr({
+          text: text
+        });
 
-    group.rect();
+    setTimeout(deferred.resolve.bind(deferred, group));
+    deferred.promise.then(() => {
+      var box = text.getBBox(),
+          margin = 5;
 
-    group.text().attr({
+      text.transform(Snap.matrix()
-      text: text
+        .translate(margin, box.height + margin));
+
+      rect.attr({
+        width: box.width + 2 * margin,
+        height: box.height + 2 * margin
+      });
     });
 
-    this._labelGroups.push(group);
+    return deferred.promise;
-
-    return group;
-  },
-
-  positionLabel(group) {
-    var text = group.select('text'),
-        rect = group.select('rect'),
-        box = text.getBBox(),
-        margin = 5;
-
-    text.transform(Snap.matrix()
-      .translate(margin, box.height + margin));
-
-    rect.attr({
-      width: box.width + 2 * margin,
-      height: box.height + 2 * margin
-    });
   },
 
   render(container) {
@@ -50,15 +46,11 @@ export default {
       this.setContainer(container);
     }
 
-    this._labelGroups = [];
+    var promise = this._render();
-    return this._render().then((function() {
+    if (!this._proxy) {
-      if (!this._proxy) {
+      promise = promise.then(this._position.bind(this));
-        _.each(this._labelGroups, this.positionLabel.bind(this));
+    }
-        this._position();
+    return promise.then(_.constant(this));
-      }
-
-      return this;
-    }).bind(this));
   },
 
   proxy(node) {
@@ -66,25 +58,17 @@ export default {
     return this._proxy.render(this.container);
   },
 
-  terminalRender() {
-    var deferred = Q.defer();
-
-    setTimeout(() => { deferred.resolve() });
-    return deferred.promise;
-  },
-
   _render() {
     console.log(this.type, this);
 
     this.container.addClass('placeholder');
 
-    this.renderLabel(this.type + ': ' + this.textValue)
+    return this.renderLabel(this.type + ': ' + this.textValue).then(label => {
-      .select('rect').attr({
+      label.select('rect').attr({
         rx: 10,
         ry: 10
       });
-
+    });
-    return this.terminalRender();
   },
 
   _position() {},

src/js/parser/javascript/escape.js

@@ -13,13 +13,12 @@ export default _.extend({}, Base, {
   },
 
   _render() {
-    this.renderLabel(_.result(this, this.code()))
+    return this.renderLabel(_.result(this, this.code())).then(label => {
-      .select('rect').attr({
+      label.select('rect').attr({
         rx: 3,
         ry: 3
       });
-
+    });
-    return this.terminalRender();
   },
 
   // Escape code mappings

src/js/parser/javascript/literal.js

@@ -5,12 +5,11 @@ export default _.extend({}, Base, {
   type: 'literal',
 
   _render() {
-    this.renderLabel('"' + this.literal.textValue + '"')
+    return this.renderLabel('"' + this.literal.textValue + '"').then(label => {
-      .select('rect').attr({
+      label.select('rect').attr({
         rx: 3,
         ry: 3
       });
-
+    });
-    return this.terminalRender();
   }
 });

src/js/parser/javascript/match.js

@@ -6,30 +6,34 @@ export default _.extend({}, Base, {
   type: 'match',
 
   _render() {
-    this.contents = { parts: this.parts() };
+    var start, end,
+        parts = this.parts(),
+        partPromises;
 
     if (this.anchorStart()) {
-      this.contents.anchor_start = this.renderLabel('Start of line')
+      start = this.renderLabel('Start of line').then(label => {
-        .addClass('anchor');
+        return label.addClass('anchor');
+      });
     }
 
     if (this.anchorEnd()) {
-      this.contents.anchor_end = this.renderLabel('End of line')
+      end = this.renderLabel('End of line').then(label => {
-        .addClass('anchor');
+        return label.addClass('anchor');
+      });
     }
 
-    if (this.contents.anchor_start || this.contents.anchor_end || this.contents.parts.length !== 1) {
+    if (start || end || parts.length !== 1) {
-      return Q.all(_.map(this.contents.parts, (function(part) {
+      partPromises = _.map(parts, (function(part) {
         return part.render(this.container.group());
-      }).bind(this)));
+      }).bind(this));
+
+      return Q.all(_([start, partPromises, end]).flatten().compact().value());
     } else {
-      return this.proxy(this.contents.parts[0]);
+      return this.proxy(parts[0]);
     }
   },
 
-  _position() {
+  _position(items) {
-    var items = _(this.contents).at('anchor_start', 'parts', 'anchor_end').flatten().compact().value();
-
     this.spaceHorizontally(items, {
       padding: 10
     });