Cleanup of initial SVG rendering

src/index.html

@@ -21,6 +21,28 @@
   <div id="error"></div>
 
   <div id="regexp-render">
-    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+      <style type="text/css">
+        text {
+          font: 12px Arial;
+          dominant-baseline: text-after-edge;
+        }
+
+        .placeholder text {
+          fill: #fff;
+          font-weight: bold;
+        }
+
+        .placeholder rect {
+          fill: #f00;
+        }
+
+        rect.bounding-box {
+          fill: transparent;
+          stroke: #000;
+          stroke-dasharray: 5,2;
+        }
+      </style>
+    </svg>
   </div>
 </div>

src/js/main.js

@@ -4,14 +4,36 @@ import Snap from 'snapsvg';
 // Testing code
 (function() {
   var result = parser.parse('test expr'),
-      container = Snap('#regexp-render svg');
+      svg = Snap('#regexp-render svg'),
+      container;
+
+  if (svg) {
+    container = svg.group();
 
-  if (container) {
     document.body.className = 'has-results';
     result.render(container);
 
     setTimeout(() => {
+      var box;
+
       result.position();
+
+      container.transform(Snap.matrix()
+        .translate(5, 5));
+
+      box = container.getBBox();
+      svg.attr({
+        width: box.width + 10,
+        height: box.height + 10
+      });
+
+      svg.rect().attr({
+        'class': 'bounding-box',
+        x: box.x,
+        y: box.y,
+        width: box.width,
+        height: box.height
+      });
     });
   }
 }());

src/js/parser/javascript/root.js

@@ -1,35 +1,27 @@
 export default {
   render(container) {
-    this.container = container;
+    container.attr({ 'class': 'placeholder' });
-    this.rect = this.container.rect().attr({
+
-      x: 5,
+    this.rect = container.rect().attr({
-      y: 5,
       rx: 10,
-      ry: 10,
+      ry: 10
-      fill: '#f00'
     });
-    this.text = this.container.text(0, 0, this.textValue).attr({
+
-      fill: '#fff',
+    this.text = container.text().attr({
-      fontWeight: 'bold'
+      text: this.textValue
     });
   },
 
   position() {
-    var box = this.text.getBBox();
+    var box = this.text.getBBox(),
+        margin = 5;
 
-    this.container.attr({
+    this.text.transform(Snap.matrix()
-      width: box.width + 20,
+      .translate(margin, box.height + margin));
-      height: box.height + 20
-    });
-
-    this.text.attr({
-      x: 10,
-      y: box.height + 5
-    });
 
     this.rect.attr({
-      width: box.width + 10,
+      width: box.width + 2 * margin,
-      height: box.height + 10
+      height: box.height + 2 * margin
     });
   },