From d1a058768e0de38b600bfda6b44df56d64727128 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Wed, 3 Dec 2014 20:02:56 -0500
Subject: [PATCH] Adding some styling to start and end anchors

---
 src/index.html                    | 10 +++++++++-
 src/js/parser/javascript/base.js  | 10 ++++++----
 src/js/parser/javascript/match.js |  6 ++++--
 src/js/parser/javascript/root.js  |  4 ++--
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/index.html b/src/index.html
index fa61e57..846318e 100644
--- a/src/index.html
+++ b/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;
diff --git a/src/js/parser/javascript/base.js b/src/js/parser/javascript/base.js
index 13b1545..c51fd8b 100644
--- a/src/js/parser/javascript/base.js
+++ b/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() {
diff --git a/src/js/parser/javascript/match.js b/src/js/parser/javascript/match.js
index 895f6d9..a43eb18 100644
--- a/src/js/parser/javascript/match.js
+++ b/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' });
     }
   },
 
diff --git a/src/js/parser/javascript/root.js b/src/js/parser/javascript/root.js
index c2ac73b..b7d77c2 100644
--- a/src/js/parser/javascript/root.js
+++ b/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'
     });
   },