Adding some styling to start and end anchors

src/index.html

@@ -34,12 +34,20 @@
           stroke: #000;
         }
 
-        circle.anchor {
+        circle.pin {
           fill: #6b6659;
           stroke-width: 2px;
           stroke: #000;
         }
 
+        .anchor text {
+          fill: #fff;
+        }
+
+        .anchor rect {
+          fill: #6b6659;
+        }
+
         .placeholder text {
           fill: #fff;
           font-weight: bold;

src/js/parser/javascript/base.js

@@ -2,10 +2,7 @@ export default {
   render_label(container, text) {
     var group = container.group();
 
-    group.rect().attr({
-      rx: 10,
-      ry: 10
-    });
+    group.rect();
 
     group.text().attr({
       text: text
@@ -40,6 +37,11 @@ export default {
     this.container.attr({ 'class': 'placeholder' });
 
     this.label = this.render_label(this.container, this.textValue);
+
+    this.label.select('rect').attr({
+      rx: 10,
+      ry: 10
+    });
   },
 
   position() {

src/js/parser/javascript/match.js

@@ -10,7 +10,8 @@ export default _.extend({}, Base, {
     this.contents = {};
 
     if (this.anchor_start()) {
-      this.contents.anchor_start = this.render_label(this.container, 'Start of line');
+      this.contents.anchor_start = this.render_label(this.container, 'Start of line')
+        .attr({ 'class': 'anchor' });
     }
 
     this.contents.parts = _.map(this.parts(), function(part) {
@@ -20,7 +21,8 @@ export default _.extend({}, Base, {
     });
 
     if (this.anchor_end()) {
-      this.contents.anchor_end = this.render_label(this.container, 'End of line');
+      this.contents.anchor_end = this.render_label(this.container, 'End of line')
+        .attr({ 'class': 'anchor' });
     }
   },
 

src/js/parser/javascript/root.js

@@ -10,11 +10,11 @@ export default _.extend({}, Base, {
 
     this.start = this.container.circle().attr({
       r: 5,
-      'class': 'anchor'
+      'class': 'pin'
     });
     this.end = this.container.circle().attr({
       r: 5,
-      'class': 'anchor'
+      'class': 'pin'
     });
   },