Updating progress using the promise notify feature

src/js/parser/javascript/node.js

@@ -66,6 +66,7 @@ export default class Node {
       if (this.state.cancelRender) {
         deferred.reject('Render cancelled');
       } else {
+        deferred.notify(1 - this.state.renderCounter / this.state.maxCounter);
         deferred.resolve.apply(this, result);
       }
     }, 1);
@@ -98,20 +99,12 @@ export default class Node {
 
   startRender() {
     this.state.renderCounter++;
+
+    this.state.maxCounter = Math.max(this.state.maxCounter, this.state.renderCounter);
   }
 
   doneRender() {
-    if (this.state.maxCounter === 0) {
-      this.state.maxCounter = this.state.renderCounter;
-    }
-
     this.state.renderCounter--;
-
-    document.body.dispatchEvent(util.customEvent('updateStatus', {
-      percentage: (this.state.maxCounter - this.state.renderCounter) / this.state.maxCounter
-    }));
-
-    return this.deferredStep();
   }
 
   render(container) {
@@ -124,8 +117,20 @@ export default class Node {
     } else {
       this.startRender();
       return this._render()
-        .then(this.doneRender.bind(this))
-        .then(_.constant(this));
+        .then(
+          () => {
+            this.doneRender();
+            return this;
+          },
+          null,
+          progress => {
+            if (typeof progress.value !== 'undefined') {
+              return progress.value;
+            } else {
+              return progress;
+            }
+          }
+        );
     }
   }
 

src/js/regexper.js

@@ -56,14 +56,9 @@ export default class Regexper {
     this.showExpression(this._getHash());
   }
 
-  updatePercentage(event) {
-    this.percentage.style.width = event.detail.percentage * 100 + '%';
-  }
-
   bindListeners() {
     this.field.addEventListener('keypress', this.keypressListener.bind(this));
     this.form.addEventListener('submit', this.submitListener.bind(this));
-    this.root.addEventListener('updateStatus', this.updatePercentage.bind(this));
     this.root.addEventListener('keyup', this.documentKeypressListener.bind(this));
     window.addEventListener('hashchange', this.hashchangeListener.bind(this));
   }
@@ -157,12 +152,18 @@ export default class Regexper {
         throw message;
       })
       .invoke('render', this.svgContainer, this.svgBase)
-      .then(() => {
-        this.state = 'has-results';
-        this.updateLinks();
-        this.displayWarnings(this.runningParser.warnings);
-        this._trackEvent('visualization', 'complete');
-      })
+      .then(
+        () => {
+          this.state = 'has-results';
+          this.updateLinks();
+          this.displayWarnings(this.runningParser.warnings);
+          this._trackEvent('visualization', 'complete');
+        },
+        null,
+        percentage => {
+          this.percentage.style.width = percentage * 100 + '%';
+        }
+      )
       .then(null, message => {
         if (message === 'Render cancelled') {
           this._trackEvent('visualization', 'cancelled');