De-duplicating code to render subexp and charset containers

This commit is contained in:
Jeff Avallone 2014-12-10 18:27:07 -05:00
parent fc7032241f
commit ff7525a6e4
4 changed files with 49 additions and 63 deletions

View File

@ -68,7 +68,7 @@
font-size: 10px;
}
.subexp .subexp-outline {
.subexp .subexp-box {
stroke: #a0a0a0;
stroke-dasharray: 6,2;
stroke-width: 2px;

View File

@ -113,5 +113,45 @@ export default {
.add(element.transform().localMatrix)
.translate(horizontalCenter - item.getBBox().cx, 0));
});
},
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;
_.defaults(options, {
padding: 0
});
labelBox = this.label.getBBox();
contentBox = content.getBBox();
this.label.transform(Snap.matrix()
.translate(0, labelBox.height));
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
});
content.transform(Snap.matrix()
.translate(this.box.getBBox().cx - contentBox.cx, labelBox.height + options.padding));
}
};

View File

@ -5,18 +5,7 @@ export default _.extend({}, Base, {
type: 'charset',
render() {
this.label = this.container.text()
.addClass('charset-label')
.attr({
text: this.invert() ? 'None of:' : 'One of:'
});
this.box = this.container.rect()
.addClass('charset-box')
.attr({
rx: 3,
ry: 3
});
this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:');
this.partContainer = this.container.group();
@ -27,30 +16,14 @@ export default _.extend({}, Base, {
},
position() {
var box;
_.invoke(this.parts.elements, 'position');
this.spaceVertically(this.parts.elements, {
padding: 5
});
box = this.label.getBBox();
this.label.transform(Snap.matrix()
.translate(0, box.height));
this.partContainer.transform(Snap.matrix()
.translate(5, 5 + box.height));
this.box.transform(Snap.matrix()
.translate(0, box.height));
box = this.partContainer.getBBox();
this.box.attr({
width: box.width + 10,
height: box.height + 10
this.positionLabeledBox(this.partContainer, {
padding: 5
});
},

View File

@ -16,18 +16,7 @@ export default _.extend({}, Base, {
var label = this.groupLabel();
if (label) {
this.label = this.container.text()
.addClass('subexp-label')
.attr({
text: label
});
this.outline = this.container.rect()
.addClass('subexp-outline')
.attr({
rx: 3,
ry: 3
});
this.renderLabeledBox(label);
this.regexp.setContainer(this.container.group());
this.regexp.render();
@ -38,28 +27,12 @@ export default _.extend({}, Base, {
},
position() {
var box;
this.regexp.position();
if (this.outline) {
box = this.label.getBBox();
this.label.transform(Snap.matrix()
.translate(0, box.height));
this.regexp.container.transform(Snap.matrix()
.translate(10, 10 + box.height));
box = this.regexp.getBBox();
this.outline
.transform(Snap.matrix()
.translate(box.x - 10, box.y - 10))
.attr({
width: box.width + 20,
height: box.height + 20
});
if (this.groupLabel()) {
this.positionLabeledBox(this.regexp.container, {
padding: 10
});
}
},