Removing use of notify to update progress bar

src/js/parser/javascript.js

@@ -3,23 +3,18 @@ import Snap from 'snapsvg';
 import _ from 'lodash';
 
 import javascript from './javascript/parser.js';
+import ParserState from './javascript/parser_state.js';
 
 export default class Parser {
   constructor(container, options) {
-    this.state = {
-      groupCounter: 1,
-      renderCounter: 0,
-      maxCounter: 0,
-      cancelRender: false,
-      warnings: []
-    };
-
     this.options = options || {};
     _.defaults(this.options, {
       keepContent: false
     });
 
     this.container = container;
+
+    this.state = new ParserState(this.container.querySelector('.progress div'));
   }
 
   set container(cont) {
@@ -70,26 +65,19 @@ export default class Parser {
   }
 
   render() {
-    var svg = Snap(this.container.querySelector('svg')),
-        progress = this.container.querySelector('.progress div');
+    var svg = Snap(this.container.querySelector('svg'));
 
     return this.parsed.render(svg.group())
-      .then(
-        result => {
-          var box = result.getBBox();
+      .then(result => {
+        var box = result.getBBox();
 
-          result.transform(Snap.matrix()
-            .translate(10 - box.x, 10 - box.y));
-          svg.attr({
-            width: box.width + 20,
-            height: box.height + 20
-          });
-        },
-        null,
-        percent => {
-          progress.style.width = percent * 100 + '%';
-        }
-      )
+        result.transform(Snap.matrix()
+          .translate(10 - box.x, 10 - box.y));
+        svg.attr({
+          width: box.width + 20,
+          height: box.height + 20
+        });
+      })
       .finally(() => {
         this._removeClass('loading');
         this.container.removeChild(this.container.querySelector('.progress'));

src/js/parser/javascript/node.js

@@ -66,7 +66,6 @@ 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);
@@ -99,8 +98,6 @@ export default class Node {
 
   startRender() {
     this.state.renderCounter++;
-
-    this.state.maxCounter = Math.max(this.state.maxCounter, this.state.renderCounter);
   }
 
   doneRender() {

src/js/parser/javascript/parser_state.js

@@ -0,0 +1,26 @@
+export default class ParserState {
+  constructor(progress) {
+    this.groupCounter = 1;
+    this.cancelRender = false;
+    this.warnings = [];
+    this._renderCounter = 0;
+    this._maxCounter = 0;
+    this._progress = progress;
+  }
+
+  get renderCounter() {
+    return this._renderCounter;
+  }
+
+  set renderCounter(value) {
+    if (value > this.renderCounter) {
+      this._maxCounter = value;
+    }
+
+    this._renderCounter = value;
+
+    if (this._maxCounter && !this.cancelRender) {
+      this._progress.style.width = ((1 - this.renderCounter / this._maxCounter) * 100).toFixed(2) + '%';
+    }
+  }
+}