diff --git a/src/index.html b/src/index.html
index f21654c..1355e6b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -68,7 +68,7 @@
font-size: 10px;
}
- .subexp .subexp-outline {
+ .subexp .subexp-box {
stroke: #a0a0a0;
stroke-dasharray: 6,2;
stroke-width: 2px;
diff --git a/src/js/parser/javascript/base.js b/src/js/parser/javascript/base.js
index 23fb0ed..1461e50 100644
--- a/src/js/parser/javascript/base.js
+++ b/src/js/parser/javascript/base.js
@@ -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));
}
};
diff --git a/src/js/parser/javascript/charset.js b/src/js/parser/javascript/charset.js
index a88bf91..c8d6da2 100644
--- a/src/js/parser/javascript/charset.js
+++ b/src/js/parser/javascript/charset.js
@@ -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
});
},
diff --git a/src/js/parser/javascript/subexp.js b/src/js/parser/javascript/subexp.js
index 94f014d..ab812f7 100644
--- a/src/js/parser/javascript/subexp.js
+++ b/src/js/parser/javascript/subexp.js
@@ -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
+ });
}
},