From af31cf5eb55b17093f125e46c15f758a6440f8be Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Wed, 26 Apr 2017 16:37:15 -0400
Subject: [PATCH] Fix spacedraw drawing, make clicking less touchy (closes
 #3986)

Root cause was the vertex shadow strokes were too big, esp on endpoints.
For normal lines 16px stroke width centers on the line, but for vertices
it extends beyond the vertex radius, stealing clicks.

Also switched some "globals" to module variables in draw.js
---
 css/20_map.css           |  2 +-
 modules/behavior/draw.js | 29 ++++++++++++++---------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/css/20_map.css b/css/20_map.css
index 931d2625c..4a66b00df 100644
--- a/css/20_map.css
+++ b/css/20_map.css
@@ -83,7 +83,7 @@ g.midpoint .fill {
 
 g.vertex .shadow,
 g.midpoint .shadow {
-    stroke-width: 16;
+    stroke-width: 6;
     fill: #f6634f;
     fill-opacity: 0;
 }
diff --git a/modules/behavior/draw.js b/modules/behavior/draw.js
index da54427b2..7549309b9 100644
--- a/modules/behavior/draw.js
+++ b/modules/behavior/draw.js
@@ -7,9 +7,9 @@ import { geoChooseEdge, geoEuclideanDistance } from '../geo/index';
 import { utilRebind } from '../util/rebind';
 
 
-behaviorDraw.usedTails = {};
-behaviorDraw.disableSpace = false;
-behaviorDraw.lastSpace = null;
+var usedTails = {};
+var disableSpace = false;
+var lastSpace = null;
 
 
 export function behaviorDraw(context) {
@@ -24,8 +24,7 @@ export function behaviorDraw(context) {
         closeTolerance = 4,
         tolerance = 12,
         mouseLeave = false,
-        lastMouse = null,
-        cached = behaviorDraw;
+        lastMouse = null;
 
 
     function datum() {
@@ -126,21 +125,21 @@ export function behaviorDraw(context) {
 
     function space() {
         var currSpace = context.mouse();
-        if (cached.disableSpace && cached.lastSpace) {
-            var dist = geoEuclideanDistance(cached.lastSpace, currSpace);
+        if (disableSpace && lastSpace) {
+            var dist = geoEuclideanDistance(lastSpace, currSpace);
             if (dist > tolerance) {
-                cached.disableSpace = false;
+                disableSpace = false;
             }
         }
 
-        if (cached.disableSpace || mouseLeave || !lastMouse) return;
+        if (disableSpace || mouseLeave || !lastMouse) return;
 
         // user must move mouse or release space bar to allow another click
-        cached.lastSpace = currSpace;
-        cached.disableSpace = true;
+        lastSpace = currSpace;
+        disableSpace = true;
 
         d3.select(window).on('keyup.space-block', function() {
-            cached.disableSpace = false;
+            disableSpace = false;
             d3.select(window).on('keyup.space-block', null);
         });
 
@@ -171,7 +170,7 @@ export function behaviorDraw(context) {
         context.install(hover);
         context.install(edit);
 
-        if (!context.inIntro() && !cached.usedTails[tail.text()]) {
+        if (!context.inIntro() && !usedTails[tail.text()]) {
             context.install(tail);
         }
 
@@ -201,9 +200,9 @@ export function behaviorDraw(context) {
         context.uninstall(hover);
         context.uninstall(edit);
 
-        if (!context.inIntro() && !cached.usedTails[tail.text()]) {
+        if (!context.inIntro() && !usedTails[tail.text()]) {
             context.uninstall(tail);
-            cached.usedTails[tail.text()] = true;
+            usedTails[tail.text()] = true;
         }
 
         selection