Removing use of notify to update progress bar
This commit is contained in:
parent
ef11adb67c
commit
3970224302
@ -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() {
|
||||
|
30
spec/parser/javascript/parser_state_spec.js
Normal file
30
spec/parser/javascript/parser_state_spec.js
Normal 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%');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
@ -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'));
|
||||
|
@ -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() {
|
||||
|
26
src/js/parser/javascript/parser_state.js
Normal file
26
src/js/parser/javascript/parser_state.js
Normal 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) + '%';
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user