De-duplicating code to render subexp and charset containers

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;

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

src/js/parser/javascript/charset.js

@@ -5,18 +5,7 @@ export default _.extend({}, Base, {
   type: 'charset',
 
   render() {
-    this.label = this.container.text()
+    this.renderLabeledBox(this.invert() ? 'None of:' : 'One of:');
-      .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.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.positionLabeledBox(this.partContainer, {
-
+      padding: 5
-    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
     });
   },
 

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()
+      this.renderLabeledBox(label);
-        .addClass('subexp-label')
-        .attr({
-          text: label
-        });
-
-      this.outline = this.container.rect()
-        .addClass('subexp-outline')
-        .attr({
-          rx: 3,
-          ry: 3
-        });
 
       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) {
+    if (this.groupLabel()) {
-      box = this.label.getBBox();
+      this.positionLabeledBox(this.regexp.container, {
-
+        padding: 10
-      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
-        });
     }
   },