From 78569a5ef3b4410af585c202ea381f58f45f83a2 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Sat, 22 Dec 2012 15:05:50 -0800
Subject: [PATCH] Extract select behavior to mode

While here, use a more appropriate class (.selected).
---
 API.md                |  4 ++--
 css/map.css           | 13 +++++--------
 js/id/modes/select.js |  8 ++++++--
 js/id/renderer/map.js | 21 +++++----------------
 4 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/API.md b/API.md
index 61fd57477..fcc2c89ec 100644
--- a/API.md
+++ b/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.
\ No newline at end of file
diff --git a/css/map.css b/css/map.css
index f152ab462..03d9678be 100644
--- a/css/map.css
+++ b/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;
 }
 
diff --git a/js/id/modes/select.js b/js/id/modes/select.js
index e91c0d4a8..3259db847 100644
--- a/js/id/modes/select.js
+++ b/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;
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 3346e9c9f..059361438 100644
--- a/js/id/renderer/map.js
+++ b/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;