Adding basic code to render stand and end indicators

src/index.html

@@ -28,6 +28,12 @@
           dominant-baseline: text-after-edge;
         }
 
+        circle.anchor {
+          fill: #6b6659;
+          stroke-width: 2px;
+          stroke: #000;
+        }
+
         .placeholder text {
           fill: #fff;
           font-weight: bold;

src/js/main.js

@@ -19,20 +19,12 @@ import Snap from 'snapsvg';
       result.position();
 
       container.transform(Snap.matrix()
-        .translate(5, 5));
+        .translate(10, 10));
 
       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
+        width: box.width + 20,
+        height: box.height + 20
       });
     });
   }

src/js/parser/javascript/base.js

@@ -29,6 +29,17 @@ export default {
     });
   },
 
+  render_bbox(container, box) {
+    container.rect()
+      .attr({
+        'class': 'bounding-box',
+        width: box.width,
+        height: box.height
+      })
+      .transform(Snap.matrix()
+        .translate(box.x, box.y));
+  },
+
   render(container) {
     container.attr({ 'class': 'placeholder' });
 

src/js/parser/javascript/grammar.peg

@@ -1,5 +1,5 @@
 grammar JavascriptRegexp
-  root <- ( ( "/" regexp "/" fl:[igm]* ) / regexp ) <Root>
+  root <- ( ( "/" regexp "/" fl:[igm]* ) / regexp ""? ) <Root>
   regexp <- match ( "|" match )* <Regexp>
   match <- anchor_start? ( ( subexp / charset / terminal ) repeat? )* anchor_end?
   anchor_start <- "^"

src/js/parser/javascript/root.js

@@ -2,6 +2,34 @@ import _ from 'lodash';
 import Base from './base.js';
 
 export default _.extend({}, Base, {
+  render(container) {
+    this.contents = container.group();
+
+    this.regexp.render(this.contents);
+
+    this.start = container.circle().attr({
+      r: 5,
+      'class': 'anchor'
+    });
+    this.end = container.circle().attr({
+      r: 5,
+      'class': 'anchor'
+    });
+  },
+
+  position() {
+    var contentBox;
+
+    this.regexp.position();
+
+    contentBox = this.contents.getBBox();
+
+    this.start.transform(Snap.matrix()
+      .translate(contentBox.x, contentBox.cy));
+    this.end.transform(Snap.matrix()
+      .translate(contentBox.x2, contentBox.cy));
+  },
+
   flags() {
     var flags;
 
@@ -16,13 +44,5 @@ export default _.extend({}, Base, {
       ignore_case: /i/.test(flags),
       multiline: /m/.test(flags)
     };
-  },
-
-  expression() {
-    if (this.regexp) {
-      return this.regexp;
-    } else {
-      return this;
-    }
   }
 });