Folding labeled box positioning into rendering

This commit is contained in:
Jeff Avallone 2014-12-13 13:26:43 -05:00
parent b9f1cfae55
commit 407167a4ae
3 changed files with 39 additions and 43 deletions

View File

@ -120,43 +120,47 @@ export default {
});
},
renderLabeledBox(label) {
this.label = this.container.text()
.addClass([this.type, 'label'].join('-'))
.attr({
text: label
});
this.box = this.container.rect()
.addClass([this.type, 'box'].join('-'))
.attr({
rx: 3,
ry: 3
});
},
positionLabeledBox(content, options) {
var labelBox, contentBox;
renderLabeledBox(label, content, options) {
var deferred = Q.defer(),
label = this.container.text()
.addClass([this.type, 'label'].join('-'))
.attr({
text: label
}),
box = this.container.rect()
.addClass([this.type, 'box'].join('-'))
.attr({
rx: 3,
ry: 3
});
_.defaults(options, {
padding: 0
});
labelBox = this.label.getBBox();
contentBox = content.getBBox();
this.container.prepend(label);
this.container.prepend(box);
this.label.transform(Snap.matrix()
.translate(0, labelBox.height));
setTimeout(deferred.resolve);
deferred.promise.then(() => {
var labelBox = label.getBBox(),
contentBox = content.getBBox();
this.box
.transform(Snap.matrix()
.translate(0, labelBox.height))
.attr({
width: Math.max(contentBox.width + options.padding * 2, labelBox.width),
height: contentBox.height + options.padding * 2
});
label.transform(Snap.matrix()
.translate(0, labelBox.height));
content.transform(Snap.matrix()
.translate(this.box.getBBox().cx - contentBox.cx, labelBox.height + options.padding));
box
.transform(Snap.matrix()
.translate(0, labelBox.height))
.attr({
width: Math.max(contentBox.width + options.padding * 2, labelBox.width),
height: contentBox.height + options.padding * 2
});
content.transform(Snap.matrix()
.translate(box.getBBox().cx - contentBox.cx, labelBox.height + options.padding));
});
return deferred.promise;
}
};

View File

@ -6,11 +6,7 @@ export default _.extend({}, Base, {
type: 'charset',
_render() {
var partContainer;
this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:');
partContainer = this.container.group();
var partContainer = this.container.group();
return Q.all(_.map(this.parts.elements, part => {
return part.render(partContainer.group());
@ -20,7 +16,7 @@ export default _.extend({}, Base, {
padding: 5
});
this.positionLabeledBox(partContainer, {
return this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:', partContainer, {
padding: 5
});
}).bind(this));

View File

@ -16,14 +16,10 @@ export default _.extend({}, Base, {
var label = this.groupLabel();
if (label) {
this.renderLabeledBox(label);
return this.regexp.render(this.container.group())
.then((() => {
this.positionLabeledBox(this.regexp, {
padding: 10
});
}).bind(this));
.then(this.renderLabeledBox.bind(this, label, this.regexp, {
padding: 10
}));
} else {
return this.proxy(this.regexp);
}