From 5e99f3cbacaadd3cf6566614a4389d8f9b6bd080 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Sat, 16 Dec 2017 11:32:26 -0500
Subject: [PATCH] CSS pointer-events cleanup, also round linejoins

---
 css/20_map.css   | 41 ++++++++++++++++++++---------------------
 css/70_fills.css | 13 -------------
 2 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/css/20_map.css b/css/20_map.css
index dc01e7a64..9f399ce4e 100644
--- a/css/20_map.css
+++ b/css/20_map.css
@@ -1,34 +1,36 @@
-
-use { pointer-events: none; }
-
 /* base styles */
 .layer-osm path:not(.oneway) { fill: none; }     /* IE needs :not(.oneway) */
 
 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
 .layer-osm use.icon path { fill: #333; }                       /* FF svg Maki icons */
 .layer-osm .turn use path { fill: #000; }                      /* FF turn restriction icons */
-#turn-only-shape2, #turn-only-u-shape2 { fill: #7092ff; }  /* FF turn-only, turn-only-u */
-#turn-no-shape2, #turn-no-u-shape2     { fill: #e06d5f; }  /* FF turn-no, turn-no-u */
-#turn-yes-shape2, #turn-yes-u-shape2   { fill: #8cd05f; }  /* FF turn-yes, turn-yes-u */
+#turn-only-shape2, #turn-only-u-shape2 { fill: #7092ff; }      /* FF turn-only, turn-only-u */
+#turn-no-shape2, #turn-no-u-shape2     { fill: #e06d5f; }      /* FF turn-no, turn-no-u */
+#turn-yes-shape2, #turn-yes-u-shape2   { fill: #8cd05f; }      /* FF turn-yes, turn-yes-u */
 
-.layer-points-group * {
-    pointer-events: none;
-}
-.layer-points-group.layer-points-targets * {
-    pointer-events: all;
-}
 
-/*.mode-draw-line .active,
-.mode-draw-area .active,
-*/
-.mode-drag-node .active {
+/* No interactivity except what we specifically allow */
+.layer-osm * {
     pointer-events: none;
 }
 
+/* Line/Area shadows and point/vertex targets are interactive */
+/* They can be picked up, clicked, hovered, or things can connect to them */
 .layer-areas path.shadow,
 .layer-lines path.shadow {
     pointer-events: stroke;
 }
+.layer-points-targets * {
+    pointer-events: all;
+}
+
+/* .active objects (currently being drawn or dragged) are not interactive */
+/* This is important to allow the events to drop through to whatever is */
+/* below them on the map, so you can still hover and connect to other things. */
+.layer-osm .active {
+    pointer-events: none !important;
+}
+
 
 /* points */
 
@@ -120,7 +122,7 @@ g.vertex.selected .shadow {
 
 path.line {
     stroke-linecap: round;
-    stroke-linejoin: bevel;
+    stroke-linejoin: round;
 }
 
 path.stroke {
@@ -152,8 +154,7 @@ path.line.stroke {
 /* Labels / Markers */
 
 text {
-    font-size:10px;
-    pointer-events: none;
+    font-size: 10px;
     color: #222;
     opacity: 1;
 }
@@ -178,7 +179,6 @@ text.pointlabel {
     font-size: 12px;
     font-weight: bold;
     fill: #333;
-    pointer-events: none;
     -webkit-transition: opacity 100ms linear;
     transition: opacity 100ms linear;
     -moz-transition: opacity 100ms linear;
@@ -229,7 +229,6 @@ g.turn circle {
 }
 
 .form-field-restrictions .vertex {
-    pointer-events: none;
     cursor: auto !important;
 }
 
diff --git a/css/70_fills.css b/css/70_fills.css
index ec8f78d82..34947b232 100644
--- a/css/70_fills.css
+++ b/css/70_fills.css
@@ -33,17 +33,4 @@
 .fill-partial path.area.fill {
     fill-opacity: 0;
     stroke-width: 60px;
-    pointer-events: visibleStroke;
-}
-
-/* Modes */
-
-/* Ensure drawing doesn't interact with area fills. */
-.mode-add-point path.area.fill,
-.mode-draw-line path.area.fill,
-.mode-draw-area path.area.fill,
-.mode-add-line path.area.fill,
-.mode-add-area path.area.fill,
-.mode-drag-node path.area.fill {
-    pointer-events: none;
 }