Extract Select behavior

index.html

@@ -94,6 +94,7 @@
         <script src='js/id/behavior/draw.js'></script>
         <script src='js/id/behavior/draw_way.js'></script>
         <script src='js/id/behavior/hover.js'></script>
+        <script src='js/id/behavior/select.js'></script>
 
         <script src='js/id/modes.js'></script>
         <script src='js/id/modes/add_area.js'></script>

js/id/behavior/select.js

@@ -0,0 +1,22 @@
+iD.behavior.Select = function(mode) {
+    var controller = mode.controller;
+
+    function click() {
+        var datum = d3.select(d3.event.target).datum();
+        if (datum instanceof iD.Entity) {
+            controller.enter(iD.modes.Select([datum.id]));
+        } else {
+            controller.enter(iD.modes.Browse());
+        }
+    }
+
+    var behavior = function(selection) {
+        selection.on('click.select', click);
+    };
+
+    behavior.off = function(selection) {
+        selection.on('click.select', null);
+    };
+
+    return behavior;
+};

js/id/modes/browse.js

@@ -14,19 +14,13 @@ iD.modes.Browse = function() {
 
         behaviors = [
             iD.behavior.Hover(),
+            iD.behavior.Select(mode),
             iD.behavior.DragNode(mode),
             iD.behavior.DragMidpoint(mode)];
 
         behaviors.forEach(function(behavior) {
             behavior(surface);
         });
-
-        surface.on('click.browse', function () {
-            var datum = d3.select(d3.event.target).datum();
-            if (datum instanceof iD.Entity) {
-                mode.controller.enter(iD.modes.Select([datum.id]));
-            }
-        });
     };
 
     mode.exit = function() {
@@ -35,8 +29,6 @@ iD.modes.Browse = function() {
         behaviors.forEach(function(behavior) {
             behavior.off(surface);
         });
-
-        surface.on('click.browse', null);
     };
 
     return mode;

js/id/modes/select.js

@@ -36,6 +36,7 @@ iD.modes.Select = function(selection, initial) {
 
         behaviors = [
             iD.behavior.Hover(),
+            iD.behavior.Select(mode),
             iD.behavior.DragNode(mode),
             iD.behavior.DragMidpoint(mode)];
 
@@ -106,15 +107,6 @@ iD.modes.Select = function(selection, initial) {
             surface.call(radialMenu.close);
         });
 
-        function click() {
-            var datum = d3.select(d3.event.target).datum();
-            if (datum instanceof iD.Entity) {
-                mode.controller.enter(iD.modes.Select([datum.id]));
-            } else {
-                mode.controller.enter(iD.modes.Browse());
-            }
-        }
-
         function dblclick() {
             var target = d3.select(d3.event.target),
                 datum = target.datum();
@@ -134,13 +126,11 @@ iD.modes.Select = function(selection, initial) {
             }
         }
 
-        surface.on('click.select', click)
-            .on('dblclick.select', dblclick);
-
         d3.select(document)
             .call(keybinding);
 
-        surface.selectAll("*")
+        surface.on('dblclick.select', dblclick)
+            .selectAll("*")
             .filter(function (d) { return d && selection.indexOf(d.id) >= 0; })
             .classed('selected', true);
 
@@ -182,12 +172,10 @@ iD.modes.Select = function(selection, initial) {
 
         keybinding.off();
 
-        surface.on('click.select', null)
-            .on('dblclick.select', null);
-
         history.on('change.select', null);
 
-        surface.selectAll(".selected")
+        surface.on('dblclick.select', null)
+            .selectAll(".selected")
             .classed('selected', false);
 
         surface.call(radialMenu.close);

test/index.html

@@ -90,6 +90,7 @@
     <script src='../js/id/behavior/draw.js'></script>
     <script src='../js/id/behavior/draw_way.js'></script>
     <script src='../js/id/behavior/hover.js'></script>
+    <script src='../js/id/behavior/select.js'></script>
 
     <script src='../js/id/modes.js'></script>
     <script src='../js/id/modes/add_area.js'></script>