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 + }); } },