From ff7525a6e443a991007446362f1254b84812233b Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Wed, 10 Dec 2014 18:27:07 -0500
Subject: [PATCH] De-duplicating code to render subexp and charset containers

---
 src/index.html                      |  2 +-
 src/js/parser/javascript/base.js    | 40 +++++++++++++++++++++++++++++
 src/js/parser/javascript/charset.js | 33 +++---------------------
 src/js/parser/javascript/subexp.js  | 37 ++++----------------------
 4 files changed, 49 insertions(+), 63 deletions(-)

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