Style vertices in the preset list with circular frame

(closes #3569)

css/20_map.css

@@ -82,6 +82,18 @@ g.vertex.vertex-hover {
     display: none;
 }
 
+.preset-icon-fill-vertex {
+    height: 40px;
+    width: 40px;
+    margin: auto;
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    border: 1.5px solid #333;
+    border-radius: 20px;
+    background-color: #efefef;
+}
+
 .mode-draw-area g.vertex.vertex-hover,
 .mode-draw-line g.vertex.vertex-hover,
 .mode-add-area  g.vertex.vertex-hover,

modules/ui/preset_icon.js

@@ -13,13 +13,27 @@ export function uiPresetIcon() {
     }
 
 
+    function getIcon(p, geom) {
+        if (p.icon)
+            return p.icon;
+        else if (geom === 'line')
+            return 'other-line';
+        else if (geom === 'vertex')
+            return p.isFallback() ? '' : 'poi-vertex';
+        else
+            return 'marker-stroked';
+    }
+
+
     function render() {
         var selection = d3.select(this),
             p = preset.apply(this, arguments),
             geom = geometry.apply(this, arguments),
-            picon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'),
+            picon = getIcon(p, geom),
             isPoi = picon.match(/^poi-/) !== null,
-            isMaki = dataFeatureIcons.indexOf(picon) !== -1;
+            isMaki = dataFeatureIcons.indexOf(picon) !== -1,
+            isFramed = (geom === 'area' || geom === 'verex');
+
 
         function tag_classes(p) {
             var s = '';
@@ -32,6 +46,7 @@ export function uiPresetIcon() {
             return s;
         }
 
+
         var fill = selection.selectAll('.preset-icon-fill')
             .data([0]);
 
@@ -44,18 +59,17 @@ export function uiPresetIcon() {
                 return 'preset-icon-fill preset-icon-fill-' + geom + tag_classes(p);
             });
 
-        var frame = selection.selectAll('.preset-icon-frame')
-            .data([0]);
 
-        frame = frame.enter()
+        var areaFrame = selection.selectAll('.preset-icon-frame')
+            .data((geom === 'area') ? [0] : []);
+
+        areaFrame.exit()
+            .remove();
+
+        areaFrame = areaFrame.enter()
             .append('div')
-            .call(svgIcon('#preset-icon-frame'))
-            .merge(frame);
-
-        frame
-            .attr('class', function() {
-                return 'preset-icon-frame ' + (geom === 'area' ? '' : 'hide');
-            });
+            .attr('class', 'preset-icon-frame')
+            .call(svgIcon('#preset-icon-frame'));
 
 
         var icon = selection.selectAll('.preset-icon')
@@ -69,7 +83,7 @@ export function uiPresetIcon() {
 
         icon
             .attr('class', 'preset-icon preset-icon-' +
-                ((isMaki || isPoi) ? (geom === 'area' ? '24' : '28') : (geom === 'area' ? '44' : '60'))
+                ((isMaki || isPoi) ? (isFramed ? '24' : '28') : (isFramed ? '44' : '60'))
             );
 
         icon.selectAll('svg')

svg/iD-sprite.json

@@ -312,6 +312,10 @@
     "poi-bowling-shape":           { "fill": "currentColor" },
     "poi-binoculars-shape":        { "fill": "currentColor" },
 
+    "poi-vertex":               { "viewBox": "400 350 15 15" },
+
+    "poi-vertex-shape":         { "fill": "currentColor" },
+
     "turn-yes":                 { "viewBox": "200 320 44 24" },
     "turn-no":                  { "viewBox": "244 320 44 24" },
     "turn-only":                { "viewBox": "288 320 44 24" },

svg/iD-sprite.src.svg

@@ -232,6 +232,9 @@
     </g>
   </g>
   <g id="poi">
+    <g id="poi-vertex">
+      <path d="M407.5,354.5 C409.157,354.5 410.5,355.843 410.5,357.5 C410.5,359.157 409.157,360.5 407.5,360.5 C405.843,360.5 404.5,359.157 404.5,357.5 C404.5,355.843 405.843,354.5 407.5,354.5 z" fill="#000000" id="poi-vertex-shape"/>
+    </g>
     <g id="poi-binoculars">
       <path d="M591,337.5 C592,339 592,339 592.5,340.344 C593,341.344 593,344.5 593,345.5 C593,346 589,346 589,345.5 C589,344.5 589,344.844 589,344.344 C589,343.844 588.5,343.5 588.5,343 L588.5,342.5 L586.5,342.5 L586.5,343 C586.5,343.5 586,343.844 586,344.344 L586,345.5 C586,346 582,346 582,345.5 C582,344.5 582,341.344 582.5,340.344 C583,339 583,339 584,337.5 C584,337 586,337 586,337.5 L586,338.5 L589,338.5 C589,338.5 589,338 589,337.5 C589,337 591,337 591,337.5 z M582.5,346.5 C581.948,346.5 581.5,347.06 581.5,347.75 L581.5,347.75 C581.5,348.44 581.948,349 582.5,349 L585.5,349 C586.052,349 586.5,348.44 586.5,347.75 L586.5,347.75 C586.5,347.06 586.052,346.5 585.5,346.5 L582.5,346.5 z M589.5,346.5 C588.948,346.5 588.5,347.06 588.5,347.75 L588.5,347.75 C588.5,348.44 588.948,349 589.5,349 L592.5,349 C593.052,349 593.5,348.44 593.5,347.75 L593.5,347.75 C593.5,347.06 593.052,346.5 592.5,346.5 L589.5,346.5 z M584.5,336 C584.224,336 584,336.224 584,336.5 L584,336.5 C584,336.776 584.224,337 584.5,337 L585.5,337 C585.776,337 586,336.776 586,336.5 L586,336.5 C586,336.224 585.776,336 585.5,336 L584.5,336 z M589.5,336 C589.224,336 589,336.224 589,336.5 L589,336.5 C589,336.776 589.224,337 589.5,337 L590.5,337 C590.776,337 591,336.776 591,336.5 L591,336.5 C591,336.224 590.776,336 590.5,336 L589.5,336 z" fill="#000000" id="poi-binoculars-shape"/>
     </g>