Removing use of notify to update progress bar

This commit is contained in:
Jeff Avallone 2015-03-14 14:01:25 -04:00
parent ef11adb67c
commit 3970224302
5 changed files with 69 additions and 50 deletions

View File

@ -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() {

View File

@ -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%');
});
});
});

View File

@ -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'));

View File

@ -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() {

View File

@ -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) + '%';
}
}
}