Folding labeled box positioning into rendering
This commit is contained in:
parent
b9f1cfae55
commit
407167a4ae
@ -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;
|
||||
}
|
||||
};
|
||||
|
@ -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));
|
||||
|
@ -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);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user