From d63430e66a9ff8df7dd09e6227911172222f654e Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Thu, 14 Feb 2019 09:40:17 -0500
Subject: [PATCH] Line preset icons: - Render vertices with SVG - Add viewBox
 to SVG - Don't reload static parts of the SVG on every update - Use
 dimensions that are friendly for low-res displays - Use nicer-looking stroke
 dash patterns for ferry routes and railways

---
 css/40_railways.css       |  4 +++-
 css/50_misc.css           |  3 ++-
 css/80_app.css            | 31 ++++++--------------------
 modules/ui/preset_icon.js | 47 ++++++++++++++++++++++++---------------
 4 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/css/40_railways.css b/css/40_railways.css
index 549f5c62d..dbaf2d602 100644
--- a/css/40_railways.css
+++ b/css/40_railways.css
@@ -33,7 +33,9 @@ path.line.stroke.tag-railway {
     stroke-width: 2;
     stroke-dasharray: 6,6;
 }
-
+.preset-icon-line path.line.stroke.tag-railway:not(.tag-status) {
+    stroke-dasharray: 6;
+}
 
 /* styles */
 path.line.casing.tag-railway {
diff --git a/css/50_misc.css b/css/50_misc.css
index 8d36f87df..b827f3f09 100644
--- a/css/50_misc.css
+++ b/css/50_misc.css
@@ -73,7 +73,8 @@ path.line.stroke.tag-route-ferry {
 .low-zoom path.line.shadow.tag-route-ferry {
     stroke-width: 12;
 }
-.low-zoom path.line.stroke.tag-route-ferry {
+.low-zoom path.line.stroke.tag-route-ferry,
+.preset-icon-line path.line.stroke.tag-route-ferry {
     stroke-width: 2;
     stroke-dasharray: 6,4;
 }
diff --git a/css/80_app.css b/css/80_app.css
index 7f92de993..13302f685 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -951,39 +951,22 @@ a.hide-toggle {
 .preset-icon-line {
     margin: auto;
     position: absolute;
-    left: 8px;
-    top: 30px;
-    width: 44px;
-}
-.preset-icon-line svg {
-    left: 2px;
-    right: 2px;
+    left: 0;
+    top: 0;
 }
 .preset-icon-line path.line {
     cursor: inherit;
 }
-
+.preset-icon-line circle.vertex {
+    fill: #fff;
+    stroke: rgba(0, 0, 0, 0.25);
+}
 /* use a consistent stroke width */
 .preset-icon-line path.line.stroke {
     stroke-width: 2 !important;
 }
 .preset-icon-line path.line.casing {
-    stroke-width: 3.5 !important;
-}
-.preset-icon-line .vertex {
-    width: 6px;
-    height: 6px;
-    background: #fff;
-    border-radius: 50%;
-    border: 1px solid rgba(0, 0, 0, 0.25);
-    position: absolute;
-    top: 10.5px;
-}
-.preset-icon-line .vertex.vertex-left {
-    left: 0;
-}
-.preset-icon-line .vertex.vertex-right {
-    right: 0;
+    stroke-width: 4 !important;
 }
 
 .preset-icon-fill-area {
diff --git a/modules/ui/preset_icon.js b/modules/ui/preset_icon.js
index db716e5a0..e2134cbde 100644
--- a/modules/ui/preset_icon.js
+++ b/modules/ui/preset_icon.js
@@ -63,29 +63,40 @@ export function uiPresetIcon() {
         line.exit()
             .remove();
 
-        line = line.enter()
-            .append('div')
+        // draw the line parametrically
+        var w = 60, h = 60, y = 43, l = 38, r = 3;
+        var x1 = (w - l)/2, x2 = x1 + l;
+
+        var lineEnter = line.enter()
+            .append('svg')
             .attr('class', 'preset-icon-line')
-            .merge(line);
+            .attr('width', w)
+            .attr('height', h)
+            .attr('viewBox', '0 0 ' + w + ' ' + h);
 
-        line.html('');
+        lineEnter.append('path')
+            .attr('d', 'M' + x1 + ' ' + y + ' L' + x2 + ' ' + y)
+            .attr('class', 'line casing');
+        lineEnter.append('path')
+            .attr('d', 'M' + x1 + ' ' + y + ' L' + x2 + ' ' + y)
+            .attr('class', 'line stroke');
+        lineEnter.append('circle')
+            .attr('class', 'vertex')
+            .attr('cx', x1)
+            .attr('cy', y)
+            .attr('r', r);
+        lineEnter.append('circle')
+            .attr('class', 'vertex')
+            .attr('cx', x2)
+            .attr('cy', y)
+            .attr('r', r);
 
-        line.append('div')
-            .attr('class', 'vertex vertex-left');
-        line.append('div')
-            .attr('class', 'vertex vertex-right');
+        line = lineEnter.merge(line);
 
-        var lineSvg = line.append('svg')
-            .attr('width', 40)
-            .attr('height', 20)
-            .merge(line);
-
-        lineSvg.append('path')
-            .attr('d', 'M0 13.5 L40 13.5')
-            .attr('class', 'line casing ' + tagClasses);
-        lineSvg.append('path')
-            .attr('d', 'M0 13.5 L40 13.5')
+        line.selectAll('path.stroke')
             .attr('class', 'line stroke ' + tagClasses);
+        line.selectAll('path.casing')
+            .attr('class', 'line casing ' + tagClasses);
 
 
         var areaFrame = selection.selectAll('.preset-icon-frame')