Extract select behavior to mode

While here, use a more appropriate class (.selected).

API.md

@@ -51,7 +51,7 @@ TODO: elaborate.
 
 ### Special classes
 
-A node that is a member of two or more ways shall have the `.shared` class. (TODO)
+A node that is a member of two or more ways shall have the `.shared` class.
 
 Two or more nodes at identical coordinates shall each have an `.overlapped` class. (TODO)
 
@@ -60,6 +60,6 @@ Elements comprising the entity currently under the cursor shall have the `.hover
 of several elements, only one of which can be `:hover`ed.)
 
 Elements that are currently active (being clicked or dragged) shall have the `.active`
-class.
+class. (TODO)
 
 Elements that are currently selected shall have the `.selected` class.

css/map.css

@@ -21,7 +21,7 @@ g.marker circle {
 }
 
 g.marker.hover circle,
-g.marker.active circle {
+g.marker.selected circle {
     fill:#ffff00;
     stroke-width:4;
     stroke:#fff
@@ -48,7 +48,7 @@ circle.handle.shared {
 circle.handle.hover {
 }
 
-circle.handle.active {
+circle.handle.selected {
     fill: #ffff00;
 }
 
@@ -83,7 +83,7 @@ path.casing.hover {
     opacity:0.8;
 }
 
-path.casing.active {
+path.casing.selected {
     stroke:#E96666 !important;
     opacity:1 !important;
     stroke-width:10 !important;
@@ -120,14 +120,11 @@ path.area {
     cursor: url(../img/cursor-select-area.png), pointer;
 }
 
-.mode-select g.marker.active,
-.mode-select path.active,
-.mode-select circle.handle.active,
-.mode-select path.area.active {
+.mode-select .selected {
     cursor: url(../img/cursor-select-acting.png), pointer;
 }
 
-path.area.active {
+path.area.selected {
     stroke-width:3 !important;
 }
 

js/id/modes/select.js

@@ -80,7 +80,9 @@ iD.modes.Select = function (entity) {
             e.preventDefault();
         });
 
-        mode.map.selection(entity.id);
+        surface.selectAll("*")
+            .filter(function (d) { return d === entity; })
+            .classed('selected', true);
     };
 
     mode.exit = function () {
@@ -95,7 +97,9 @@ iD.modes.Select = function (entity) {
 
         surface.on("click.browse", null);
         mode.map.keybinding().on('⌫.browse', null);
-        mode.map.selection(null);
+
+        surface.selectAll(".selected")
+            .classed('selected', false);
     };
 
     return mode;

js/id/renderer/map.js

@@ -2,7 +2,7 @@ iD.Map = function() {
     var connection, history,
         dimensions = [],
         dispatch = d3.dispatch('move'),
-        selection = null, hover = null,
+        hover = null,
         translateStart,
         keybinding = d3.keybinding(),
         projection = d3.geo.mercator().scale(1024),
@@ -68,7 +68,6 @@ iD.Map = function() {
 
     function pxCenter() { return [dimensions[0] / 2, dimensions[1] / 2]; }
     function classHover(d) { return d.id === hover; }
-    function classActive(d) { return d.id === selection; }
     function getline(d) { return d._line; }
     function key(d) { return d.id; }
     function nodeline(d) {
@@ -159,7 +158,6 @@ iD.Map = function() {
                 return 'translate(' + [~~p[0], ~~p[1]] +
                     ')';
             })
-            .classed('active', classActive)
             .classed('shared', shared)
             .classed('hover', classHover);
 
@@ -178,7 +176,7 @@ iD.Map = function() {
         handles.attr('transform', function(entity) {
             var p = projection(entity.loc);
             return 'translate(' + [~~p[0], ~~p[1]] + ')';
-        }).classed('active', classActive);
+        });
     }
 
     function editOff() {
@@ -196,14 +194,12 @@ iD.Map = function() {
             .data(data, key);
         lines.exit().remove();
         lines.enter().append('path')
-            .classed('hover', classHover)
-            .classed('active', classActive);
+            .classed('hover', classHover);
         lines
             .order()
             .attr('d', getline)
             .attr('class', class_gen)
-            .classed('hover', classHover)
-            .classed('active', classActive);
+            .classed('hover', classHover);
         return lines;
     }
 
@@ -229,8 +225,7 @@ iD.Map = function() {
         markers.attr('transform', function(d) {
                 var pt = projection(d.loc);
                 return 'translate(' + [~~pt[0], ~~pt[1]] + ') translate(-8, -8)';
-            })
-            .classed('active', classActive);
+            });
         markers.classed('hover', classHover);
         markers.select('image').attr('xlink:href', iD.Style.markerimage);
     }
@@ -467,12 +462,6 @@ iD.Map = function() {
         return map;
     };
 
-    map.selection = function (_) {
-        if (!arguments.length) return selection;
-        selection = _;
-        return redraw();
-    };
-
     map.background = background;
     map.projection = projection;
     map.redraw = redraw;