diff --git a/css/app.css b/css/app.css index abb12d03c..0bde54b31 100644 --- a/css/app.css +++ b/css/app.css @@ -59,6 +59,13 @@ path { cursor: pointer; } +circle.handle { + cursor: move; + stroke-width: 1; + stroke:#222; + fill:#eee; +} + path.casing { stroke: #111; stroke-width: 3; diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js index 824af96ac..d97e355b8 100755 --- a/js/iD/renderer/Map.js +++ b/js/iD/renderer/Map.js @@ -120,6 +120,10 @@ iD.renderer.Map.prototype = { return a.entityType === 'way' && a.isClosed(); }); + var active_entity = all.filter(function(a) { + return a.active; + }); + var fills = this.layers[0].fill.selectAll('path.area') .data(areas, key); @@ -161,10 +165,26 @@ iD.renderer.Map.prototype = { strokes.attr("d", function(d) { return linegen(d.nodes); - }) - .attr('class', function(d) { + }).attr('class', function(d) { return 'stroke ' + classes(d); }); + + var handles = this.layers[0].hit.selectAll('circle.handle') + .data(active_entity.length ? active_entity[0].nodes : [], key); + + handles.enter().append('circle') + .attr('class', 'handle') + .attr('r', 5) + .on('click', _.bind(function(d) { + this.updateUIs(); + }, this)); + + handles.exit().remove(); + + var proj = this.projection; + handles.attr('transform', function(d) { + return 'translate(' + proj(d) + ')'; + }); }, // -------------