Reimplement fetch

css/map.css

@@ -15,6 +15,12 @@ circle.handle {
     fill:#D3F5FF;
 }
 
+circle.teaser-point {
+    stroke-width: 2;
+    stroke:#1DCAFF;
+    fill:#D3F5FF;
+}
+
 .casing {
     stroke: #111;
     stroke-linecap:round;

js/iD/actions/actions.js

@@ -1,8 +1,9 @@
 iD.actions = {};
 
 iD.actions.AddPlace = {
-    bind: function(controller) {
+    bind: function(controller, map) {
         this.controller = controller;
+        this.map = map;
         d3.selectAll('button#place').on('click', function() {
             iD.actions.AddPlace.enter();
         });
@@ -11,17 +12,40 @@ iD.actions.AddPlace = {
         d3.selectAll('button').classed('active', false);
         d3.selectAll('button#place').classed('active', true);
 
+        var surface = this.map.surface;
+        var teaser = surface.selectAll('g#temp-g')
+            .append('g').attr('id', 'teaser-g');
+
+        teaser.append('circle')
+            .attr('class', 'teaser-point')
+            .attr('r', 10);
+
+        surface.on('mousemove.shift', function() {
+            teaser.attr('transform', function() {
+                var off = d3.mouse(surface.node());
+                return 'translate(' + off + ')';
+            });
+        });
+
+        surface.on('click', function() {
+            var off = d3.mouse(surface.node());
+            this.exit();
+        }.bind(this));
+
         // Bind clicks to the map to 'add a place' and
         // add little floaty place
     },
     exit: function() {
+        this.map.surface.on('mousemove.shift', null);
+        d3.selectAll('#teaser-g').remove();
         d3.selectAll('button#place').classed('active', false);
     }
 };
 
 iD.actions.AddRoad = {
-    bind: function(controller) {
+    bind: function(controller, map) {
         this.controller = controller;
+        this.map = map;
         d3.selectAll('button#road').on('click', function() {
             iD.actions.AddRoad.enter();
         });
@@ -39,8 +63,9 @@ iD.actions.AddRoad = {
 };
 
 iD.actions.AddArea = {
-    bind: function(controller) {
+    bind: function(controller, map) {
         this.controller = controller;
+        this.map = map;
         d3.selectAll('button#area').on('click', function() {
             iD.actions.AddArea.enter();
         });
@@ -58,8 +83,9 @@ iD.actions.AddArea = {
 };
 
 iD.actions.Move = {
-    bind: function(controller) {
+    bind: function(controller, map) {
         this.controller = controller;
+        this.map = map;
     },
     enter: function() {
         d3.selectAll('button').classed('active', false);
@@ -68,17 +94,16 @@ iD.actions.Move = {
 };
 
 iD.controller = function(map) {
-    var controller = {},
-        action;
+    var controller = { action: null };
 
-    for (var a in iD.actions) iD.actions[a].bind(controller);
+    for (var a in iD.actions) iD.actions[a].bind(controller, map);
 
     controller.go = function(x) {
-        if (action) {
-            action.exit();
+        if (controller.action) {
+            controller.action.exit();
         }
         x.enter();
-        action = x;
+        controller.action = x;
     };
 
     controller.go(iD.actions.Move);

js/iD/graph/Graph.js

@@ -45,5 +45,15 @@ iD.Graph.prototype = {
             }
         }
         return items;
+    },
+
+    fetch: function(object) {
+        var o = this.index[object][0];
+        var f = _.clone(o);
+        if (!f.children || !f.children.length) return f;
+        f.children = f.children.map(function(c) {
+            return this.fetch(c);
+        }.bind(this));
+        return f;
     }
 };

js/iD/renderer/Map.js

@@ -80,12 +80,12 @@ iD.Map = function(elem) {
         r = surface.append('g')
             .attr('clip-path', 'url(#clip)');
 
-    var fill_g = r.append('g'),
-        casing_g =  r.append('g'),
-        stroke_g = r.append('g'),
-        text_g = r.append('g'),
-        hit_g = r.append('g'),
-        elastic = r.append('g');
+    var fill_g = r.append('g').attr('id', 'fill-g'),
+        casing_g =  r.append('g').attr('id', 'casing-g'),
+        stroke_g = r.append('g').attr('id', 'stroke-g'),
+        text_g = r.append('g').attr('id', 'text-g'),
+        hit_g = r.append('g').attr('id', 'hit-g'),
+        temp = r.append('g').attr('id', 'temp-g');
 
     var class_stroke = augmentSelect(iD.Style.styleClasses('stroke')),
         class_fill = augmentSelect(iD.Style.styleClasses('stroke')),
@@ -315,6 +315,7 @@ iD.Map = function(elem) {
     map.setSize = setSize;
 
     map.graph = graph;
+    map.surface = surface;
 
     setSize(
         parent.node().offsetWidth,

js/iD/renderer/tiles.js

@@ -39,9 +39,11 @@ iD.Tiles = function(selection, projection, width, height) {
             .data(coords, function(d) { return d[3]; });
 
         tiles.exit().remove();
+
         tiles.enter().append('image')
             .attr('class', 'tile')
             .attr('xlink:href', tileUrl);
+
         tiles.attr({ width: Math.ceil(ts), height: Math.ceil(ts) })
             .attr('transform', function(d) {
                 return 'translate(' +