De-duplicating code to render subexp and charset containers
This commit is contained in:
parent
fc7032241f
commit
ff7525a6e4
@ -68,7 +68,7 @@
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.subexp .subexp-outline {
|
||||
.subexp .subexp-box {
|
||||
stroke: #a0a0a0;
|
||||
stroke-dasharray: 6,2;
|
||||
stroke-width: 2px;
|
||||
|
@ -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));
|
||||
}
|
||||
};
|
||||
|
@ -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
|
||||
});
|
||||
},
|
||||
|
||||
|
@ -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
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user