From 4a084a8b890f29d4cb8e540ffc2d70fb905f2d72 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Sun, 20 Jan 2013 12:01:19 -0800
Subject: [PATCH] Improve midpoints rendering

---
 css/map.css            | 25 +++++++++++++++++++++----
 js/id/svg/midpoints.js | 20 ++++++++++++++------
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/css/map.css b/css/map.css
index 93be2bd19..7985d78a4 100644
--- a/css/map.css
+++ b/css/map.css
@@ -84,7 +84,6 @@ svg[data-zoom="17"] g.vertex.shared .stroke {
     transform:scale(0.9, 0.9);
 }
 
-
 g.vertex.shared .fill {
     fill:#aaa;
 }
@@ -106,12 +105,30 @@ g.vertex.selected .shadow {
     fill-opacity: 0.7;
 }
 
-circle.midpoint {
+/* midpoints */
+
+g.midpoint .fill {
     fill:#aaa;
-    stroke:#333;
-    stroke-width:1;
+}
+g.midpoint .fill.hover {
+    fill:#fff;
+    stroke:#000;
 }
 
+g.midpoint .shadow {
+    fill: none;
+    pointer-events: all;
+    stroke-width: 10;
+    -webkit-transition: -webkit-transform 100ms linear;
+    transition: transform 100ms linear;
+    -moz-transition: fill 100ms linear;
+}
+g.midpoint .shadow.hover {
+    fill:#E96666;
+    fill-opacity: 0.3;
+}
+
+/* lines */
 
 path.line {
     stroke-linecap: round;
diff --git a/js/id/svg/midpoints.js b/js/id/svg/midpoints.js
index 321e75c8e..7c7c7a0c3 100644
--- a/js/id/svg/midpoints.js
+++ b/js/id/svg/midpoints.js
@@ -22,17 +22,25 @@ iD.svg.Midpoints = function(projection) {
             }
         }
 
-        var handles = surface.select('.layer-hit').selectAll('circle.midpoint')
+        var groups = surface.select('.layer-hit').selectAll('g.midpoint')
             .filter(filter)
             .data(midpoints, function (d) { return [d.way, d.index].join(","); });
 
-        handles.enter()
-            .append('circle')
-            .attr({ r: 3, 'class': 'midpoint' });
+        var group = groups.enter()
+            .insert('g', ':first-child')
+            .attr('class', 'midpoint');
 
-        handles.attr('transform', iD.svg.PointTransform(projection));
+        group.append('circle')
+            .attr('r', 7)
+            .attr('class', 'shadow');
 
-        handles.exit()
+        group.append('circle')
+            .attr('r', 3)
+            .attr('class', 'fill');
+
+        groups.attr('transform', iD.svg.PointTransform(projection));
+
+        groups.exit()
             .remove();
     };
 };