Removing use of notify to update progress bar

spec/parser/javascript/node_spec.js

@@ -131,18 +131,6 @@ describe('parser/javascript/node.js', function() {
         .done();
     });
 
-    it('notifies of the progress when the render is not canceled', function(done) {
-      this.node.state.renderCounter = 116;
-      this.node.state.maxCounter = 200;
-
-      this.node.deferredStep('result')
-        .then(null, null, progress => {
-          expect(Math.round(100 * progress)).toEqual(42);
-        })
-        .finally(done)
-        .done();
-    });
-
     it('rejects the returned promise when the render is canceled', function(done) {
       var resolve = jasmine.createSpy('resolve'),
           reject = jasmine.createSpy('reject');
@@ -243,16 +231,6 @@ describe('parser/javascript/node.js', function() {
       expect(this.node.state.renderCounter).toEqual(1);
     });
 
-    it('sets the maxCounter', function() {
-      this.node.state.renderCounter = 42;
-      this.node.state.maxCounter = 0;
-      this.node.startRender();
-      expect(this.node.state.maxCounter).toEqual(43);
-      this.node.state.maxCounter = 50;
-      this.node.startRender();
-      expect(this.node.state.maxCounter).toEqual(50);
-    });
-
   });
 
   describe('#doneRender', function() {

spec/parser/javascript/parser_state_spec.js

@@ -0,0 +1,30 @@
+import ParserState from 'src/js/parser/javascript/parser_state.js';
+
+describe('parser/javascript/parser_state.js', function() {
+
+  beforeEach(function() {
+    this.progress = { style: {} };
+    this.state = new ParserState(this.progress);
+  });
+
+  describe('renderCounter property', function() {
+
+    it('sets the width of the progress element to the percent of completed steps', function() {
+      this.state.renderCounter = 50;
+      expect(this.progress.style.width).toEqual('0.00%');
+      this.state.renderCounter = 10;
+      expect(this.progress.style.width).toEqual('80.00%');
+    });
+
+    it('does not change the width of the progress element when rendering has been cancelled', function() {
+      this.state.renderCounter = 50;
+      this.state.renderCounter = 40;
+      expect(this.progress.style.width).toEqual('20.00%');
+      this.state.cancelRender = true;
+      this.state.renderCounter = 10;
+      expect(this.progress.style.width).toEqual('20.00%');
+    });
+
+  });
+
+});

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,12 +65,10 @@ 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 => {
+      .then(result => {
         var box = result.getBBox();
 
         result.transform(Snap.matrix()
@@ -84,12 +77,7 @@ export default class Parser {
           width: box.width + 20,
           height: box.height + 20
         });
-        },
-        null,
-        percent => {
-          progress.style.width = percent * 100 + '%';
-        }
-      )
+      })
       .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) + '%';
+    }
+  }
+}