Double click to add detail to lines. Fixes #298

js/id/modes/select.js

@@ -66,14 +66,35 @@ iD.modes.Select = function (entity) {
             mode.controller.exit();
         });
 
-        surface.on('click.select', function () {
+        function click() {
             var datum = d3.select(d3.event.target).datum();
             if (datum instanceof iD.Entity) {
                 mode.controller.enter(iD.modes.Select(datum));
             } else {
                 mode.controller.enter(iD.modes.Browse());
             }
-        });
+        }
+
+        function dblclick() {
+            var datum = d3.select(d3.event.target).datum();
+            if (datum instanceof iD.Entity &&
+                (datum.geometry() === 'area' || datum.geometry() === 'line')) {
+                var choice = iD.util.geo.chooseIndex(datum,
+                        d3.mouse(mode.map.surface.node()), mode.map),
+                    node = iD.Node({ loc: choice.loc });
+
+                mode.history.perform(
+                    iD.actions.AddNode(node),
+                    iD.actions.AddWayNode(datum.id, node.id, choice.index),
+                    'added a point to a road');
+
+                d3.event.preventDefault();
+                d3.event.stopPropagation();
+            }
+        }
+
+        surface.on('click.select', click)
+            .on('dblclick.browse', dblclick);
 
         mode.map.keybinding().on('⌫.select', function(e) {
             remove();

js/id/renderer/background.js

@@ -27,6 +27,10 @@ iD.Background = function() {
         return tiles;
     }
 
+    function tileSize(d, z) {
+        return Math.ceil(256 * Math.pow(2, z - d[2])) / 256;
+    }
+
     // derive the tiles onscreen, remove those offscreen and position tiles
     // correctly for the currentstate of `projection`
     function background() {
@@ -82,13 +86,9 @@ iD.Background = function() {
             .on('error', error)
             .on('load', load);
 
-        function tileSize(d) {
-            return Math.ceil(256 * Math.pow(2, z - d[2])) / 256;
-        }
-
         image.style(transformProp, function(d) {
             var _ts = 256 * Math.pow(2, z - d[2]);
-            var scale = tileSize(d);
+            var scale = tileSize(d, z);
             return 'translate(' +
                 Math.round((d[0] * _ts) - tile_origin[0]) + 'px,' +
                 Math.round((d[1] * _ts) - tile_origin[1]) + 'px) scale(' + scale + ',' + scale + ')';