Updating renderLabel to be promise based

This commit is contained in:
Jeff Avallone 2014-12-13 12:28:16 -05:00
parent 773fd5c1a6
commit 29316bb2aa
5 changed files with 50 additions and 65 deletions

View File

@ -5,7 +5,6 @@ export default _.extend({}, Base, {
type: 'any-character',
_render() {
this.renderLabel('any character');
return this.terminalRender();
return this.renderLabel('any character');
}
});

View File

@ -16,33 +16,29 @@ export default {
},
renderLabel(text) {
var group = this.container.group()
.addClass('label');
var deferred = Q.defer(),
group = this.container.group()
.addClass('label'),
rect = group.rect(),
text = group.text().attr({
text: text
});
group.rect();
setTimeout(deferred.resolve.bind(deferred, group));
deferred.promise.then(() => {
var box = text.getBBox(),
margin = 5;
group.text().attr({
text: text
text.transform(Snap.matrix()
.translate(margin, box.height + margin));
rect.attr({
width: box.width + 2 * margin,
height: box.height + 2 * margin
});
});
this._labelGroups.push(group);
return group;
},
positionLabel(group) {
var text = group.select('text'),
rect = group.select('rect'),
box = text.getBBox(),
margin = 5;
text.transform(Snap.matrix()
.translate(margin, box.height + margin));
rect.attr({
width: box.width + 2 * margin,
height: box.height + 2 * margin
});
return deferred.promise;
},
render(container) {
@ -50,15 +46,11 @@ export default {
this.setContainer(container);
}
this._labelGroups = [];
return this._render().then((function() {
if (!this._proxy) {
_.each(this._labelGroups, this.positionLabel.bind(this));
this._position();
}
return this;
}).bind(this));
var promise = this._render();
if (!this._proxy) {
promise = promise.then(this._position.bind(this));
}
return promise.then(_.constant(this));
},
proxy(node) {
@ -66,25 +58,17 @@ export default {
return this._proxy.render(this.container);
},
terminalRender() {
var deferred = Q.defer();
setTimeout(() => { deferred.resolve() });
return deferred.promise;
},
_render() {
console.log(this.type, this);
this.container.addClass('placeholder');
this.renderLabel(this.type + ': ' + this.textValue)
.select('rect').attr({
return this.renderLabel(this.type + ': ' + this.textValue).then(label => {
label.select('rect').attr({
rx: 10,
ry: 10
});
return this.terminalRender();
});
},
_position() {},

View File

@ -13,13 +13,12 @@ export default _.extend({}, Base, {
},
_render() {
this.renderLabel(_.result(this, this.code()))
.select('rect').attr({
return this.renderLabel(_.result(this, this.code())).then(label => {
label.select('rect').attr({
rx: 3,
ry: 3
});
return this.terminalRender();
});
},
// Escape code mappings

View File

@ -5,12 +5,11 @@ export default _.extend({}, Base, {
type: 'literal',
_render() {
this.renderLabel('"' + this.literal.textValue + '"')
.select('rect').attr({
return this.renderLabel('"' + this.literal.textValue + '"').then(label => {
label.select('rect').attr({
rx: 3,
ry: 3
});
return this.terminalRender();
});
}
});

View File

@ -6,30 +6,34 @@ export default _.extend({}, Base, {
type: 'match',
_render() {
this.contents = { parts: this.parts() };
var start, end,
parts = this.parts(),
partPromises;
if (this.anchorStart()) {
this.contents.anchor_start = this.renderLabel('Start of line')
.addClass('anchor');
start = this.renderLabel('Start of line').then(label => {
return label.addClass('anchor');
});
}
if (this.anchorEnd()) {
this.contents.anchor_end = this.renderLabel('End of line')
.addClass('anchor');
end = this.renderLabel('End of line').then(label => {
return label.addClass('anchor');
});
}
if (this.contents.anchor_start || this.contents.anchor_end || this.contents.parts.length !== 1) {
return Q.all(_.map(this.contents.parts, (function(part) {
if (start || end || parts.length !== 1) {
partPromises = _.map(parts, (function(part) {
return part.render(this.container.group());
}).bind(this)));
}).bind(this));
return Q.all(_([start, partPromises, end]).flatten().compact().value());
} else {
return this.proxy(this.contents.parts[0]);
return this.proxy(parts[0]);
}
},
_position() {
var items = _(this.contents).at('anchor_start', 'parts', 'anchor_end').flatten().compact().value();
_position(items) {
this.spaceHorizontally(items, {
padding: 10
});