Fix preset list and icons

modules/ui/inspector.js

@@ -3,6 +3,7 @@ import { EntityEditor } from './entity_editor';
 import { PresetList } from './preset_list';
 import { ViewOnOSM } from './view_on_osm';
 
+
 export function Inspector(context) {
     var presetList = PresetList(context),
         entityEditor = EntityEditor(context),
@@ -21,20 +22,24 @@ export function Inspector(context) {
             .entityID(entityID)
             .on('choose', showList);
 
-        var $wrap = selection.selectAll('.panewrap')
+        var wrap = selection.selectAll('.panewrap')
             .data([0]);
 
-        var $enter = $wrap.enter().append('div')
+        var enter = wrap.enter()
+            .append('div')
             .attr('class', 'panewrap');
 
-        $enter.append('div')
+        enter
+            .append('div')
             .attr('class', 'preset-list-pane pane');
 
-        $enter.append('div')
+        enter
+            .append('div')
             .attr('class', 'entity-editor-pane pane');
 
-        var $presetPane = $wrap.select('.preset-list-pane');
-        var $editorPane = $wrap.select('.entity-editor-pane');
+        wrap = wrap.merge(enter);
+        var presetPane = wrap.selectAll('.preset-list-pane');
+        var editorPane = wrap.selectAll('.entity-editor-pane');
 
         var graph = context.graph(),
             entity = context.entity(entityID),
@@ -43,41 +48,43 @@ export function Inspector(context) {
                 entity.isHighwayIntersection(graph);
 
         if (showEditor) {
-            $wrap.style('right', '0%');
-            $editorPane.call(entityEditor);
+            wrap.style('right', '0%');
+            editorPane.call(entityEditor);
         } else {
-            $wrap.style('right', '-100%');
-            $presetPane.call(presetList);
+            wrap.style('right', '-100%');
+            presetPane.call(presetList);
         }
 
-        var $footer = selection.selectAll('.footer')
+        var footer = selection.selectAll('.footer')
             .data([0]);
 
-        $footer.enter().append('div')
+        footer.enter()
+            .append('div')
             .attr('class', 'footer');
 
-        selection.select('.footer')
-            .call(ViewOnOSM(context)
-                .entityID(entityID));
+        selection.selectAll('.footer')
+            .call(ViewOnOSM(context).entityID(entityID));
+
 
         function showList(preset) {
-            $wrap.transition()
+            wrap.transition()
                 .styleTween('right', function() { return d3.interpolate('0%', '-100%'); });
 
-            $presetPane.call(presetList
-                .preset(preset)
-                .autofocus(true));
+            presetPane
+                .call(presetList.preset(preset).autofocus(true));
         }
 
+
         function setPreset(preset) {
-            $wrap.transition()
+            wrap.transition()
                 .styleTween('right', function() { return d3.interpolate('-100%', '0%'); });
 
-            $editorPane.call(entityEditor
-                .preset(preset));
+            editorPane
+                .call(entityEditor.preset(preset));
         }
     }
 
+
     inspector.state = function(_) {
         if (!arguments.length) return state;
         state = _;
@@ -85,12 +92,14 @@ export function Inspector(context) {
         return inspector;
     };
 
+
     inspector.entityID = function(_) {
         if (!arguments.length) return entityID;
         entityID = _;
         return inspector;
     };
 
+
     inspector.newFeature = function(_) {
         if (!arguments.length) return newFeature;
         newFeature = _;

modules/ui/preset_icon.js

@@ -3,6 +3,7 @@ import { functor } from '../util/index';
 import { Icon } from '../svg/index';
 import { featureIcons } from '../../data/index';
 
+
 export function PresetIcon() {
     var preset, geometry;
 
@@ -14,10 +15,12 @@ export function PresetIcon() {
         var selection = d3.select(this),
             p = preset.apply(this, arguments),
             geom = geometry.apply(this, arguments),
-            icon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'),
-            maki = featureIcons.hasOwnProperty(icon + '-24');
+            picon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'),
+            isMaki = featureIcons.hasOwnProperty(picon + '-24');
 
-        if (icon === 'dentist') maki = true;  // workaround for dentist icon missing in `maki-sprite.json`
+        if (picon === 'dentist') {
+            isMaki = true;  // workaround for dentist icon missing in `maki-sprite.json`
+        }
 
         function tag_classes(p) {
             var s = '';
@@ -30,53 +33,61 @@ export function PresetIcon() {
             return s;
         }
 
-        var $fill = selection.selectAll('.preset-icon-fill')
+        var fill = selection.selectAll('.preset-icon-fill')
             .data([0]);
 
-        $fill.enter().append('div');
-
-        $fill.attr('class', function() {
-            return 'preset-icon-fill preset-icon-fill-' + geom + tag_classes(p);
-        });
-
-        var $frame = selection.selectAll('.preset-icon-frame')
-            .data([0]);
-
-        $frame.enter()
+        fill = fill.enter()
             .append('div')
-            .call(Icon('#preset-icon-frame'));
+            .merge(fill);
 
-        $frame.attr('class', function() {
-            return 'preset-icon-frame ' + (geom === 'area' ? '' : 'hide');
-        });
-
-
-        var $icon = selection.selectAll('.preset-icon')
-            .data([0]);
-
-        $icon.enter()
-            .append('div')
-            .attr('class', 'preset-icon')
-            .call(Icon(''));
-
-        $icon
-            .attr('class', 'preset-icon preset-icon-' + (maki ? '32' : (geom === 'area' ? '44' : '60')));
-
-        $icon.selectAll('svg')
+        fill
             .attr('class', function() {
-                return 'icon ' + icon + tag_classes(p);
+                return 'preset-icon-fill preset-icon-fill-' + geom + tag_classes(p);
             });
 
-        $icon.selectAll('use')       // workaround: maki parking-24 broken?
-            .attr('href', '#' + icon + (maki ? ( icon === 'parking' ? '-18' : '-24') : ''));
+        var frame = selection.selectAll('.preset-icon-frame')
+            .data([0]);
+
+        frame = frame.enter()
+            .append('div')
+            .call(Icon('#preset-icon-frame'))
+            .merge(frame);
+
+        frame
+            .attr('class', function() {
+                return 'preset-icon-frame ' + (geom === 'area' ? '' : 'hide');
+            });
+
+
+        var icon = selection.selectAll('.preset-icon')
+            .data([0]);
+
+        icon = icon.enter()
+            .append('div')
+            .attr('class', 'preset-icon')
+            .call(Icon(''))
+            .merge(icon);
+
+        icon
+            .attr('class', 'preset-icon preset-icon-' + (isMaki ? '32' : (geom === 'area' ? '44' : '60')));
+
+        icon.selectAll('svg')
+            .attr('class', function() {
+                return 'icon ' + picon + tag_classes(p);
+            });
+
+        icon.selectAll('use')       // workaround: maki parking-24 broken?
+            .attr('href', '#' + picon + (isMaki ? (picon === 'parking' ? '-18' : '-24') : ''));
     }
 
+
     presetIcon.preset = function(_) {
         if (!arguments.length) return preset;
         preset = functor(_);
         return presetIcon;
     };
 
+
     presetIcon.geometry = function(_) {
         if (!arguments.length) return geometry;
         geometry = functor(_);

modules/ui/preset_list.js

@@ -9,12 +9,14 @@ import { Icon } from '../svg/index';
 import { PresetIcon } from './preset_icon';
 import { TagReference } from './tag_reference';
 
+
 export function PresetList(context) {
     var dispatch = d3.dispatch('choose'),
         id,
         currentPreset,
         autofocus = false;
 
+
     function presetList(selection) {
         var entity = context.entity(id),
             geometry = context.geometry(id);
@@ -118,6 +120,7 @@ export function PresetList(context) {
             .call(drawList, context.presets().defaults(geometry, 36));
     }
 
+
     function drawList(list, presets) {
         var collection = presets.collection.map(function(preset) {
             return preset.members ? CategoryItem(preset) : PresetItem(preset);
@@ -126,22 +129,22 @@ export function PresetList(context) {
         var items = list.selectAll('.preset-list-item')
             .data(collection, function(d) { return d.preset.id; });
 
-        items.enter().append('div')
-            .attr('class', function(item) { return 'preset-list-item preset-' + item.preset.id.replace('/', '-'); })
-            .classed('current', function(item) { return item.preset === currentPreset; })
-            .each(function(item) {
-                d3.select(this).call(item);
-            })
-            .style('opacity', 0)
-            .transition()
-            .style('opacity', 1);
-
         items.order();
 
         items.exit()
             .remove();
+
+        items.enter()
+            .append('div')
+            .attr('class', function(item) { return 'preset-list-item preset-' + item.preset.id.replace('/', '-'); })
+            .classed('current', function(item) { return item.preset === currentPreset; })
+            .each(function(item) { d3.select(this).call(item); })
+            .style('opacity', 0)
+            .transition()
+            .style('opacity', 1);
     }
 
+
     function CategoryItem(preset) {
         var box, sublist, shown = false;
 
@@ -206,6 +209,7 @@ export function PresetList(context) {
         return item;
     }
 
+
     function PresetItem(preset) {
         function item(selection) {
             var wrap = selection.append('div')
@@ -246,12 +250,14 @@ export function PresetList(context) {
         return item;
     }
 
+
     presetList.autofocus = function(_) {
         if (!arguments.length) return autofocus;
         autofocus = _;
         return presetList;
     };
 
+
     presetList.entityID = function(_) {
         if (!arguments.length) return id;
         id = _;
@@ -259,6 +265,7 @@ export function PresetList(context) {
         return presetList;
     };
 
+
     presetList.preset = function(_) {
         if (!arguments.length) return currentPreset;
         currentPreset = _;