From eafc2b43009db57ef75e2883501e2ca5706b23c2 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Mon, 18 Dec 2017 17:00:47 -0500
Subject: [PATCH] Adjust touch target radii

---
 modules/svg/midpoints.js |  4 ++--
 modules/svg/vertices.js  | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/modules/svg/midpoints.js b/modules/svg/midpoints.js
index 60ff03de8..ed629c6c6 100644
--- a/modules/svg/midpoints.js
+++ b/modules/svg/midpoints.js
@@ -14,7 +14,7 @@ import {
 
 
 export function svgMidpoints(projection, context) {
-
+    var targetRadius = 8;
 
     function drawTargets(selection, graph, entities, filter) {
         var fillClass = context.getDebug('target') ? 'pink ' : 'nocolor ';
@@ -29,7 +29,7 @@ export function svgMidpoints(projection, context) {
         // enter/update
         targets.enter()
             .append('circle')
-            .attr('r', 12)
+            .attr('r', targetRadius)
             .merge(targets)
             .attr('class', function(d) { return 'node midpoint target ' + fillClass + d.id; })
             .attr('transform', svgPointTransform(projection));
diff --git a/modules/svg/vertices.js b/modules/svg/vertices.js
index a6bc3ca7d..4b066cb59 100644
--- a/modules/svg/vertices.js
+++ b/modules/svg/vertices.js
@@ -23,6 +23,7 @@ export function svgVertices(projection, context) {
     var _prevHover = {};
     var _currSelected = {};
     var _prevSelected = {};
+    var _radii = {};
 
 
     function sortY(a, b) {
@@ -40,6 +41,7 @@ export function svgVertices(projection, context) {
 
     function draw(selection, graph, vertices, sets, filter) {
         sets = sets || { selected: {}, important: {}, hovered: {} };
+
         var icons = {};
         var directions = {};
         var wireframe = context.surface().classed('fill-wireframe');
@@ -80,9 +82,13 @@ export function svgVertices(projection, context) {
                             r += 1.5;
                         }
 
+                        if (klass === 'shadow') {   // remember this value, so we don't need to
+                            _radii[entity.id] = r;  // recompute it when we draw the touch targets
+                        }
+
                         d3_select(this)
                             .attr('r', r)
-                            .attr('visibility', ((i && klass === 'fill') ? 'hidden' : null));
+                            .attr('visibility', (i && klass === 'fill') ? 'hidden' : null);
                     });
             });
 
@@ -188,7 +194,7 @@ export function svgVertices(projection, context) {
         // enter/update
         targets.enter()
             .append('circle')
-            .attr('r', radiuses.shadow[3])  // just use the biggest one for now
+            .attr('r', function(d) { return _radii[d.id] || radiuses.shadow[3]; })
             .merge(targets)
             .attr('class', function(d) { return 'node vertex target ' + fillClass + d.id; })
             .attr('transform', svgPointTransform(projection));
@@ -259,12 +265,13 @@ export function svgVertices(projection, context) {
         var mode = context.mode();
         var isMoving = mode && /^(add|draw|drag|move|rotate)/.test(mode.id);
 
-        // Collect important vertices from the `entities` list..
-        // (during a paritial redraw, it will not contain everything)
         if (fullRedraw) {
             _currPersistent = {};
+            _radii = {};
         }
 
+        // Collect important vertices from the `entities` list..
+        // (during a paritial redraw, it will not contain everything)
         for (var i = 0; i < entities.length; i++) {
             var entity = entities[i];
             var geometry = entity.geometry(graph);
@@ -282,7 +289,7 @@ export function svgVertices(projection, context) {
                     keep = true;
                 }
                 // partial redraw in select mode - probably because the user double clicked a way.
-                if (!fullRedraw && mode.id === 'select') {
+                if (!fullRedraw && mode && mode.id === 'select') {
                     _currSelected[entity.id] = entity;
                 }
             }