From 39702243028927b7c4095ded705ef82909b3907a Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sat, 14 Mar 2015 14:01:25 -0400 Subject: [PATCH] Removing use of notify to update progress bar --- spec/parser/javascript/node_spec.js | 22 ------------ spec/parser/javascript/parser_state_spec.js | 30 ++++++++++++++++ src/js/parser/javascript.js | 38 +++++++-------------- src/js/parser/javascript/node.js | 3 -- src/js/parser/javascript/parser_state.js | 26 ++++++++++++++ 5 files changed, 69 insertions(+), 50 deletions(-) create mode 100644 spec/parser/javascript/parser_state_spec.js create mode 100644 src/js/parser/javascript/parser_state.js diff --git a/spec/parser/javascript/node_spec.js b/spec/parser/javascript/node_spec.js index 50fd3c5..338513b 100644 --- a/spec/parser/javascript/node_spec.js +++ b/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() { diff --git a/spec/parser/javascript/parser_state_spec.js b/spec/parser/javascript/parser_state_spec.js new file mode 100644 index 0000000..6467433 --- /dev/null +++ b/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%'); + }); + + }); + +}); diff --git a/src/js/parser/javascript.js b/src/js/parser/javascript.js index 101478b..8988207 100644 --- a/src/js/parser/javascript.js +++ b/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')); diff --git a/src/js/parser/javascript/node.js b/src/js/parser/javascript/node.js index b88ffa6..a274546 100644 --- a/src/js/parser/javascript/node.js +++ b/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() { diff --git a/src/js/parser/javascript/parser_state.js b/src/js/parser/javascript/parser_state.js new file mode 100644 index 0000000..3904a0c --- /dev/null +++ b/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) + '%'; + } + } +}