Updating renderLabel to be promise based
This commit is contained in:
parent
773fd5c1a6
commit
29316bb2aa
@ -5,7 +5,6 @@ export default _.extend({}, Base, {
|
||||
type: 'any-character',
|
||||
|
||||
_render() {
|
||||
this.renderLabel('any character');
|
||||
return this.terminalRender();
|
||||
return this.renderLabel('any character');
|
||||
}
|
||||
});
|
||||
|
@ -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() {},
|
||||
|
@ -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
|
||||
|
@ -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();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -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
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user