diff --git a/css/map.css b/css/map.css index 22b998f9f..db8862224 100644 --- a/css/map.css +++ b/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; diff --git a/js/iD/actions/actions.js b/js/iD/actions/actions.js index a00acdf3c..156cd532c 100644 --- a/js/iD/actions/actions.js +++ b/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); diff --git a/js/iD/graph/Graph.js b/js/iD/graph/Graph.js index 4af25954e..faef664bd 100644 --- a/js/iD/graph/Graph.js +++ b/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; } }; diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js index 8c9ab1d76..e0f976edf 100755 --- a/js/iD/renderer/Map.js +++ b/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, diff --git a/js/iD/renderer/tiles.js b/js/iD/renderer/tiles.js index 4402953ee..db4a71261 100644 --- a/js/iD/renderer/tiles.js +++ b/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(' +