From eecc6b14fb7ded90c9ed79127ab7dc88fcecedf7 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Wed, 16 Jan 2013 18:39:12 -0500 Subject: [PATCH 01/33] First shot at tooltips cc @samanbb --- css/app.css | 15 ++++++++++--- index.html | 1 + js/id/modes/add_point.js | 2 +- js/id/renderer/map.js | 10 ++++++++- js/lib/d3.tooltip.js | 46 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 69 insertions(+), 5 deletions(-) create mode 100644 js/lib/d3.tooltip.js diff --git a/css/app.css b/css/app.css index 4aba98318..cafe19774 100644 --- a/css/app.css +++ b/css/app.css @@ -1044,7 +1044,16 @@ div.typeahead a:first-child { } .Browse .tooltip .tooltip-arrow { - left: 30px; - } - + left: 30px; +} +.mouse-tooltip { + opacity:0.5; + background :#fff; + margin-left: 20px; + margin-top: -15px; + padding:5px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} diff --git a/index.html b/index.html index b106c35b7..08c23a46b 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@ + diff --git a/js/id/modes/add_point.js b/js/id/modes/add_point.js index 37767f3de..4936f1578 100644 --- a/js/id/modes/add_point.js +++ b/js/id/modes/add_point.js @@ -10,7 +10,7 @@ iD.modes.AddPoint = function() { history = mode.history, controller = mode.controller; - map.hint('Click on the map to add a point.'); + map.tooltip('Click on the map to add a point.'); map.surface.on('click.addpoint', function() { var node = iD.Node({loc: map.mouseCoordinates(), _poi: true}); diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 9bb695747..7d3bd8a2a 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -21,6 +21,7 @@ iD.Map = function() { lines = iD.svg.Lines(), areas = iD.svg.Areas(), midpoints = iD.svg.Midpoints(), + tooltip = d3.tooltip(), surface, tilegroup; function map(selection) { @@ -32,7 +33,8 @@ iD.Map = function() { .on('mousedown.drag', function() { translateStart = projection.translate(); }) - .call(zoom); + .call(zoom) + .call(tooltip); surface = supersurface.append('svg') .on('mouseup.reset-transform', resetTransform) @@ -281,6 +283,12 @@ iD.Map = function() { return map; }; + map.tooltip = function (_) { + if (_ === false) tooltip.off(); + else tooltip.text(_); + return map; + }; + map.hint = function (_) { if (_ === false) { d3.select('div.inspector-wrap') diff --git a/js/lib/d3.tooltip.js b/js/lib/d3.tooltip.js new file mode 100644 index 000000000..1be658038 --- /dev/null +++ b/js/lib/d3.tooltip.js @@ -0,0 +1,46 @@ +d3.tooltip = function() { + var text, on = false, container, tooltip_size, container_size, + transformProp = iD.util.prefixCSSProperty('Transform'); + + var tooltip = function(selection) { + function setup() { + var rect = selection.node().getBoundingClientRect(); + container = d3.select(document.body) + .append('div').attr('class', 'mouse-tooltip') + .style({ + position: 'absolute' + }); + + selection + .on('mousemove.tooltip', mousemove); + + container_size = container.size(); + } + + function mousemove() { + if (!on) return; + container.style(transformProp, 'translate(' + + ~~d3.event.x + 'px,' + + ~~d3.event.y + 'px)'); + } + + if (!container) setup(); + }; + + tooltip.text = function(_) { + if (_ === false) { + on = false; + container.style('display', 'none'); + return tooltip; + } else if (container.style('display') == 'none') { + container.style('display', 'block'); + } + on = true; + text = _; + container.text(text); + size = container.size(); + return tooltip; + }; + + return tooltip; +}; From fd2ef2a78b48c36ce2c5d49ed46e12cd5500b729 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 12:07:26 -0500 Subject: [PATCH 02/33] Rename tooltip to tail, use tail in modes. --- css/app.css | 9 +++--- index.html | 2 +- js/id/id.js | 4 +-- js/id/modes/add_area.js | 4 +-- js/id/modes/add_line.js | 4 +-- js/id/modes/add_point.js | 4 +-- js/id/modes/draw_area.js | 5 ++-- js/id/modes/draw_line.js | 4 +-- js/id/renderer/map.js | 14 +++++---- js/lib/d3.tail.js | 65 ++++++++++++++++++++++++++++++++++++++++ js/lib/d3.tooltip.js | 46 ---------------------------- 11 files changed, 90 insertions(+), 71 deletions(-) create mode 100644 js/lib/d3.tail.js delete mode 100644 js/lib/d3.tooltip.js diff --git a/css/app.css b/css/app.css index cafe19774..b54ac70f1 100644 --- a/css/app.css +++ b/css/app.css @@ -1047,12 +1047,11 @@ div.typeahead a:first-child { left: 30px; } -.mouse-tooltip { - opacity:0.5; - background :#fff; - margin-left: 20px; +.tail { + position: absolute; + background: rgba(255, 255, 255, 0.7); margin-top: -15px; - padding:5px; + padding: 5px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; diff --git a/index.html b/index.html index 08c23a46b..9db659489 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@ - + diff --git a/js/id/id.js b/js/id/id.js index 712656cd6..96f4d09d5 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -180,9 +180,9 @@ window.iD = function(container) { .call(redo ? refreshTooltip : undo_tooltip.hide); }); - window.onresize = function() { + d3.select(window).on('resize.map-size', function() { map.size(m.size()); - }; + }); map.keybinding() .on('a', function(evt, mods) { diff --git a/js/id/modes/add_area.js b/js/id/modes/add_area.js index 6977f2e15..a9fcb830e 100644 --- a/js/id/modes/add_area.js +++ b/js/id/modes/add_area.js @@ -12,7 +12,7 @@ iD.modes.AddArea = function() { controller = mode.controller; map.dblclickEnable(false) - .hint('Click on the map to start drawing an area, like a park, lake, or building.'); + .tail('Click on the map to start drawing an area, like a park, lake, or building.'); map.surface.on('click.addarea', function() { var datum = d3.select(d3.event.target).datum() || {}, @@ -47,7 +47,7 @@ iD.modes.AddArea = function() { window.setTimeout(function() { mode.map.dblclickEnable(true); }, 1000); - mode.map.hint(false); + mode.map.tail(false); mode.map.surface.on('click.addarea', null); mode.map.keybinding().on('⎋.addarea', null); }; diff --git a/js/id/modes/add_line.js b/js/id/modes/add_line.js index 60f376181..b83202097 100644 --- a/js/id/modes/add_line.js +++ b/js/id/modes/add_line.js @@ -13,7 +13,7 @@ iD.modes.AddLine = function() { controller = mode.controller; map.dblclickEnable(false) - .hint('Click on the map to start drawing an road, path, or route.'); + .tail('Click on the map to start drawing an road, path, or route.'); map.surface.on('click.addline', function() { var datum = d3.select(d3.event.target).datum() || {}, @@ -67,7 +67,7 @@ iD.modes.AddLine = function() { mode.exit = function() { mode.map.dblclickEnable(true); - mode.map.hint(false); + mode.map.tail(false); mode.map.surface.on('click.addline', null); mode.map.keybinding().on('⎋.addline', null); }; diff --git a/js/id/modes/add_point.js b/js/id/modes/add_point.js index 4936f1578..21d6343e0 100644 --- a/js/id/modes/add_point.js +++ b/js/id/modes/add_point.js @@ -10,7 +10,7 @@ iD.modes.AddPoint = function() { history = mode.history, controller = mode.controller; - map.tooltip('Click on the map to add a point.'); + map.tail('Click on the map to add a point.'); map.surface.on('click.addpoint', function() { var node = iD.Node({loc: map.mouseCoordinates(), _poi: true}); @@ -28,7 +28,7 @@ iD.modes.AddPoint = function() { }; mode.exit = function() { - mode.map.hint(false); + mode.map.tail(false); mode.map.surface.on('click.addpoint', null); mode.map.keybinding().on('⎋.addpoint', null); }; diff --git a/js/id/modes/draw_area.js b/js/id/modes/draw_area.js index 88d61d323..cdb966351 100644 --- a/js/id/modes/draw_area.js +++ b/js/id/modes/draw_area.js @@ -18,8 +18,7 @@ iD.modes.DrawArea = function(wayId) { map.dblclickEnable(false) .fastEnable(false); - map.hint('Click on the map to add points to your area. Finish the ' + - 'area by clicking on your first point'); + map.tail('Click to add points to your area. Click the first point to finish the area.'); history.perform( iD.actions.AddNode(node), @@ -116,7 +115,7 @@ iD.modes.DrawArea = function(wayId) { surface.selectAll('.way, .node') .classed('active', false); - mode.map.hint(false); + mode.map.tail(false); mode.map.fastEnable(true); surface diff --git a/js/id/modes/draw_line.js b/js/id/modes/draw_line.js index a59e3a7e9..68130d7b8 100644 --- a/js/id/modes/draw_line.js +++ b/js/id/modes/draw_line.js @@ -19,7 +19,7 @@ iD.modes.DrawLine = function(wayId, direction) { map.dblclickEnable(false) .fastEnable(false) - .hint('Click to add more points to the line. ' + + .tail('Click to add more points to the line. ' + 'Click on other lines to connect to them, and double-click to ' + 'end the line.'); @@ -152,7 +152,7 @@ iD.modes.DrawLine = function(wayId, direction) { surface.selectAll('.way, .node') .classed('active', false); - mode.map.hint(false); + mode.map.tail(false); mode.map.fastEnable(true); mode.map.minzoom(0); diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index a2f2acfd9..9edb347e4 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -21,7 +21,7 @@ iD.Map = function() { lines = iD.svg.Lines(), areas = iD.svg.Areas(), midpoints = iD.svg.Midpoints(), - tooltip = d3.tooltip(), + tail = d3.tail(), surface, tilegroup; function map(selection) { @@ -33,8 +33,7 @@ iD.Map = function() { .on('mousedown.drag', function() { translateStart = projection.translate(); }) - .call(zoom) - .call(tooltip); + .call(zoom); surface = supersurface.append('svg') .on('mouseup.reset-transform', resetTransform) @@ -46,9 +45,13 @@ iD.Map = function() { }) .call(iD.svg.Surface()); + map.size(selection.size()); map.surface = surface; + supersurface + .call(tail); + d3.select(document).call(keybinding); } @@ -286,9 +289,8 @@ iD.Map = function() { return map; }; - map.tooltip = function (_) { - if (_ === false) tooltip.off(); - else tooltip.text(_); + map.tail = function (_) { + tail.text(_); return map; }; diff --git a/js/lib/d3.tail.js b/js/lib/d3.tail.js new file mode 100644 index 000000000..00627de0a --- /dev/null +++ b/js/lib/d3.tail.js @@ -0,0 +1,65 @@ +d3.tail = function() { + var text = false, + container, + xmargin = 20, + tooltip_size = [0, 0], + selection_size = [0, 0], + transformProp = iD.util.prefixCSSProperty('Transform'); + + var tail = function(selection) { + + d3.select(window).on('resize.tail-size', function() { + selection_size = selection.size(); + }); + + function setup() { + + container = d3.select(document.body) + .append('div').attr('class', 'tail'); + + selection + .on('mousemove.tail', mousemove) + .on('mouseover.tail', mouseover) + .on('mouseout.tail', mouseout); + + selection_size = selection.size(); + + } + + function mousemove() { + if (text === false) return; + var xoffset = ((d3.event.x + tooltip_size[0] + xmargin) > selection_size[0]) ? + -tooltip_size[0] - xmargin : xoffset = xmargin; + container.style(transformProp, 'translate(' + + (~~d3.event.x + xoffset) + 'px,' + + ~~d3.event.y + 'px)'); + } + + function mouseout() { + if (text !== false) container.style('display', 'none'); + } + + function mouseover() { + if (text !== false) container.style('display', 'block'); + } + + if (!container) setup(); + + }; + + tail.text = function(_) { + if (_ === false) { + text = _; + container.style('display', 'none'); + return tail; + } else if (container.style('display') == 'none') { + container.style('display', 'block'); + } + text = _; + container.text(text); + tooltip_size = container.size(); + return tail; + }; + + return tail; +}; diff --git a/js/lib/d3.tooltip.js b/js/lib/d3.tooltip.js deleted file mode 100644 index 1be658038..000000000 --- a/js/lib/d3.tooltip.js +++ /dev/null @@ -1,46 +0,0 @@ -d3.tooltip = function() { - var text, on = false, container, tooltip_size, container_size, - transformProp = iD.util.prefixCSSProperty('Transform'); - - var tooltip = function(selection) { - function setup() { - var rect = selection.node().getBoundingClientRect(); - container = d3.select(document.body) - .append('div').attr('class', 'mouse-tooltip') - .style({ - position: 'absolute' - }); - - selection - .on('mousemove.tooltip', mousemove); - - container_size = container.size(); - } - - function mousemove() { - if (!on) return; - container.style(transformProp, 'translate(' + - ~~d3.event.x + 'px,' + - ~~d3.event.y + 'px)'); - } - - if (!container) setup(); - }; - - tooltip.text = function(_) { - if (_ === false) { - on = false; - container.style('display', 'none'); - return tooltip; - } else if (container.style('display') == 'none') { - container.style('display', 'block'); - } - on = true; - text = _; - container.text(text); - size = container.size(); - return tooltip; - }; - - return tooltip; -}; From d550eda4432ff011500262b426c2bd71aee1e670 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 12:17:45 -0500 Subject: [PATCH 03/33] Remove pointer-events from tooltips to keep them from disappearing. --- css/app.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css/app.css b/css/app.css index b54ac70f1..932ca3b52 100644 --- a/css/app.css +++ b/css/app.css @@ -1048,8 +1048,10 @@ div.typeahead a:first-child { } .tail { + pointer-events:none; position: absolute; background: rgba(255, 255, 255, 0.7); + max-width: 250px; margin-top: -15px; padding: 5px; -webkit-border-radius: 4px; From e111ea2aa5e4f587cf7f39a15290069e920b080c Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 12:22:11 -0500 Subject: [PATCH 04/33] Gracefully handle Opera, which does not support pointer-events --- js/lib/d3.tail.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/js/lib/d3.tail.js b/js/lib/d3.tail.js index 00627de0a..8046e4a96 100644 --- a/js/lib/d3.tail.js +++ b/js/lib/d3.tail.js @@ -22,6 +22,9 @@ d3.tail = function() { .on('mouseover.tail', mouseover) .on('mouseout.tail', mouseout); + container + .on('mousemove.tail', mousemove); + selection_size = selection.size(); } @@ -36,11 +39,13 @@ d3.tail = function() { } function mouseout() { - if (text !== false) container.style('display', 'none'); + if (d3.event.relatedTarget !== container.node() && + text !== false) container.style('display', 'none'); } function mouseover() { - if (text !== false) container.style('display', 'block'); + if (d3.event.relatedTarget !== container.node() && + text !== false) container.style('display', 'block'); } if (!container) setup(); From 87c8fbdb2fe7a2b56f2d77ec00deb54b5eea0c55 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 12:49:43 -0500 Subject: [PATCH 05/33] Remove unreachable code in connection. This unfortunately prevents loadFromURL from sharing the queue and cancelling functionality of bboxes --- js/id/connection.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/js/id/connection.js b/js/id/connection.js index 71f11e23d..003750ff2 100644 --- a/js/id/connection.js +++ b/js/id/connection.js @@ -27,8 +27,6 @@ iD.Connection = function() { return callback(null, parse(dom)); } return d3.xml(url).get().on('load', done); - inflight.push(d3.xml(url).get() - .on('load', done)); } function getNodes(obj) { From f66535f06816ca23aaa838811fa21fe16e39ef7c Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 13:14:46 -0500 Subject: [PATCH 06/33] Fix tests --- test/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/test/index.html b/test/index.html index f8d570f36..36fe00755 100644 --- a/test/index.html +++ b/test/index.html @@ -25,6 +25,7 @@ + From 1a81a8508a3a48ea10710d935fc20833489d5bf1 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 13:21:03 -0500 Subject: [PATCH 07/33] Fix mocha globals for window event listener --- test/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/test/index.html b/test/index.html index 36fe00755..195b459f6 100644 --- a/test/index.html +++ b/test/index.html @@ -108,7 +108,10 @@ From f0e6ec66596de7d8bad6d76d5491b4441195a90b Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 13:53:52 -0500 Subject: [PATCH 08/33] Finish tests for new geo functionality --- test/spec/util.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/test/spec/util.js b/test/spec/util.js index 3ac1cdda2..2cfa8dc16 100644 --- a/test/spec/util.js +++ b/test/spec/util.js @@ -92,5 +92,25 @@ describe('Util', function() { expect(iD.util.geo.polygonContainsPolygon(outer, inner)).to.be.false; }); }); + + describe('#polygonIntersectsPolygon', function() { + it('says a polygon in a polygon intersects it', function() { + var outer = [[0, 0], [0, 3], [3, 3], [3, 0], [0, 0]]; + var inner = [[1, 1], [1, 2], [2, 2], [2, 1], [1, 1]]; + expect(iD.util.geo.polygonIntersectsPolygon(outer, inner)).to.be.true; + }); + + it('says a polygon that partially intersects does', function() { + var outer = [[0, 0], [0, 3], [3, 3], [3, 0], [0, 0]]; + var inner = [[-1, -1], [1, 2], [2, 2], [2, 1], [1, 1]]; + expect(iD.util.geo.polygonIntersectsPolygon(outer, inner)).to.be.true; + }); + + it('says totally disjoint polygons do not intersect', function() { + var outer = [[0, 0], [0, 3], [3, 3], [3, 0], [0, 0]]; + var inner = [[-1, -1], [-1, -2], [-2, -2], [-2, -1], [-1, -1]]; + expect(iD.util.geo.polygonIntersectsPolygon(outer, inner)).to.be.false; + }); + }); }); }); From feea5065e22a924e7f64fc33611d167c05ec0fc8 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 14:18:49 -0500 Subject: [PATCH 09/33] Do not permit values longer than 255 chars in the inspector --- js/id/ui/inspector.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js index 3af39c1b7..600538e4c 100644 --- a/js/id/ui/inspector.js +++ b/js/id/ui/inspector.js @@ -114,12 +114,14 @@ iD.ui.inspector = function() { inputs.append('input') .property('type', 'text') .attr('class', 'key') + .attr('maxlength', 255) .property('value', function(d) { return d.key; }) .on('change', function(d) { d.key = this.value; }); inputs.append('input') .property('type', 'text') .attr('class', 'value') + .attr('maxlength', 255) .property('value', function(d) { return d.value; }) .on('change', function(d) { d.value = this.value; }) .on('keydown.push-more', pushMore); @@ -271,7 +273,7 @@ iD.ui.inspector = function() { inspector.tags = function (tags) { if (!arguments.length) { - var tags = {}; + tags = {}; tagList.selectAll('li').each(function() { var row = d3.select(this), key = row.selectAll('.key').property('value'), From 9b21fae8cbaf24e0f78c85b8c115f85803d1d0d2 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 14:46:39 -0500 Subject: [PATCH 10/33] Validation. This adds basic validation and display to commits Included is * Untagged POIs, ways, areas * Tags that suggest that lines should be areas --- index.html | 1 + js/id/graph/validate.js | 47 +++++++++++++++++++++++++++++++++++++++++ js/id/id.js | 2 +- js/id/ui/commit.js | 41 +++++++++++++++++++++++++++++------ js/id/ui/save.js | 15 ++++++++++++- 5 files changed, 97 insertions(+), 9 deletions(-) create mode 100644 js/id/graph/validate.js diff --git a/index.html b/index.html index 9db659489..2d42c9f1c 100644 --- a/index.html +++ b/index.html @@ -108,6 +108,7 @@ + diff --git a/js/id/graph/validate.js b/js/id/graph/validate.js new file mode 100644 index 000000000..addb774ca --- /dev/null +++ b/js/id/graph/validate.js @@ -0,0 +1,47 @@ +iD.validate = function(changes) { + var warnings = [], change; + + // https://github.com/openstreetmap/josm/blob/mirror/src/org/ + // openstreetmap/josm/data/validation/tests/UnclosedWays.java#L80 + function tagSuggestsArea(change) { + if (_.isEmpty(change.tags)) return false; + var tags = change.tags; + var presence = ['landuse', 'amenities', 'tourism', 'shop']; + for (var i = 0; i < presence.length; i++) { + if (tags[presence[i]] !== undefined) { + return presence[i] + '=' + tags[presence[i]]; + } + } + if (tags.building && tags.building === 'yes') return 'building=yes'; + } + + if (changes.created.length) { + for (var i = 0; i < changes.created.length; i++) { + change = changes.created[i]; + + if (change.geometry() === 'point' && _.isEmpty(change.tags)) { + warnings.push({ + message: 'Untagged point which is not part of a line or area', + entity: change + }); + } + + if (change.geometry() === 'line' && _.isEmpty(change.tags)) { + warnings.push({ message: 'Untagged line', entity: change }); + } + + if (change.geometry() === 'area' && _.isEmpty(change.tags)) { + warnings.push({ message: 'Untagged area', entity: change }); + } + + if (change.geometry() === 'line' && tagSuggestsArea(change)) { + warnings.push({ + message: 'The tag ' + tagSuggestsArea(change) + ' suggests line should be area, but it is not and area', + entity: change + }); + } + } + } + + return warnings.length ? [warnings] : []; +}; diff --git a/js/id/id.js b/js/id/id.js index 96f4d09d5..e22a77ca6 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -96,7 +96,7 @@ window.iD = function(container) { var save_button = bar.append('button') .attr('class', 'save action wide') - .call(iD.ui.save().map(map)); + .call(iD.ui.save().map(map).controller(controller)); history.on('change.warn-unload', function() { var changes = history.changes(), diff --git a/js/id/ui/commit.js b/js/id/ui/commit.js index 547f4505f..06d072275 100644 --- a/js/id/ui/commit.js +++ b/js/id/ui/commit.js @@ -1,5 +1,5 @@ iD.ui.commit = function() { - var event = d3.dispatch('cancel', 'save'); + var event = d3.dispatch('cancel', 'save', 'fix'); function zipSame(d) { var c = [], n = -1; @@ -58,12 +58,12 @@ iD.ui.commit = function() { header.append('p').text('The changes you upload will be visible on all maps that use OpenStreetMap data.'); - var commit = body.append('div').attr('class','modal-section'); - commit.append('textarea') - .attr('class', 'changeset-comment') - .attr('placeholder', 'Brief Description of your contributions'); + var comment_section = body.append('div').attr('class','modal-section'); + comment_section.append('textarea') + .attr('class', 'changeset-comment') + .attr('placeholder', 'Brief Description of your contributions'); - var buttonwrap = commit.append('div') + var buttonwrap = comment_section.append('div') .attr('class', 'buttons'); var savebutton = buttonwrap.append('button') @@ -84,12 +84,39 @@ iD.ui.commit = function() { cancelbutton.append('span').attr('class','icon close icon-pre-text'); cancelbutton.append('span').attr('class','label').text('Cancel'); + var warnings = body.selectAll('div.warning-section') + .data(iD.validate(changes)) + .enter() + .append('div').attr('class', 'modal-section warning-section'); + + warnings.append('h3') + .text('Warnings'); + + var warning_li = warnings.append('ul') + .attr('class', 'changeset-list') + .selectAll('li') + .data(function(d) { return d; }) + .enter() + .append('li'); + + warning_li.append('button') + .attr('class', 'minor') + .on('click', event.fix) + .append('span') + .attr('class', 'icon inspect'); + + warning_li.append('strong').text(function(d) { + return d.message; + }); + var section = body.selectAll('div.commit-section') .data(['modified', 'deleted', 'created'].filter(changesLength)) .enter() .append('div').attr('class', 'commit-section modal-section fillL2'); - section.append('h3').text(String) + section.append('h3').text(function(d) { + return d.charAt(0).toUpperCase() + d.slice(1); + }) .append('small') .attr('class', 'count') .text(changesLength); diff --git a/js/id/ui/save.js b/js/id/ui/save.js index 27d6ef1e5..e40125e71 100644 --- a/js/id/ui/save.js +++ b/js/id/ui/save.js @@ -1,6 +1,6 @@ iD.ui.save = function() { - var map; + var map, controller; function save(selection) { @@ -59,6 +59,13 @@ iD.ui.save = function() { .on('cancel', function() { modal.remove(); }) + .on('fix', function(d) { + var ext = d.entity.extent(map.history().graph()); + map.extent(ext[0], ext[1]); + if (map.zoom() > 19) map.zoom(19); + controller.enter(iD.modes.Select(d.entity)); + modal.remove(); + }) .on('save', commit)); }); } else { @@ -91,5 +98,11 @@ iD.ui.save = function() { return save; }; + save.controller = function(_) { + if (!arguments.length) return controller; + controller = _; + return save; + }; + return save; }; From 9f1506af5e755b755231b6f3e8799b3fd475b315 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 09:48:21 -0800 Subject: [PATCH 11/33] Always use rounded projection --- js/id/renderer/map.js | 21 +++++++++++---------- js/id/svg.js | 1 - js/id/svg/areas.js | 6 +++--- js/id/svg/lines.js | 6 +++--- js/id/svg/midpoints.js | 4 ++-- js/id/svg/points.js | 4 ++-- js/id/svg/vertices.js | 4 ++-- test/spec/svg/areas.js | 2 +- test/spec/svg/points.js | 2 +- test/spec/svg/vertices.js | 4 ++-- 10 files changed, 27 insertions(+), 27 deletions(-) diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 9edb347e4..467f7f351 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -5,6 +5,7 @@ iD.Map = function() { translateStart, keybinding = d3.keybinding(), projection = d3.geo.mercator().scale(1024), + roundedProjection = iD.svg.RoundProjection(projection), zoom = d3.behavior.zoom() .translate(projection.translate()) .scale(projection.scale()) @@ -16,11 +17,11 @@ iD.Map = function() { background = iD.Background() .projection(projection), transformProp = iD.util.prefixCSSProperty('Transform'), - points = iD.svg.Points(), - vertices = iD.svg.Vertices(), - lines = iD.svg.Lines(), - areas = iD.svg.Areas(), - midpoints = iD.svg.Midpoints(), + points = iD.svg.Points(roundedProjection), + vertices = iD.svg.Vertices(roundedProjection), + lines = iD.svg.Lines(roundedProjection), + areas = iD.svg.Areas(roundedProjection), + midpoints = iD.svg.Midpoints(roundedProjection), tail = d3.tail(), surface, tilegroup; @@ -97,11 +98,11 @@ iD.Map = function() { } surface - .call(points, graph, all, filter, projection) - .call(vertices, graph, all, filter, projection) - .call(lines, graph, all, filter, projection) - .call(areas, graph, all, filter, projection) - .call(midpoints, graph, all, filter, projection); + .call(points, graph, all, filter) + .call(vertices, graph, all, filter) + .call(lines, graph, all, filter) + .call(areas, graph, all, filter) + .call(midpoints, graph, all, filter); } function editOff() { diff --git a/js/id/svg.js b/js/id/svg.js index 5860126e9..e1d26e058 100644 --- a/js/id/svg.js +++ b/js/id/svg.js @@ -6,7 +6,6 @@ iD.svg = { }, PointTransform: function (projection) { - projection = iD.svg.RoundProjection(projection); return function (entity) { return 'translate(' + projection(entity.loc) + ')'; }; diff --git a/js/id/svg/areas.js b/js/id/svg/areas.js index ff24afecc..4fe06ba92 100644 --- a/js/id/svg/areas.js +++ b/js/id/svg/areas.js @@ -1,4 +1,4 @@ -iD.svg.Areas = function() { +iD.svg.Areas = function(projection) { var area_stack = { building: 0, @@ -26,7 +26,7 @@ iD.svg.Areas = function() { return as - bs; } - return function drawAreas(surface, graph, entities, filter, projection) { + return function drawAreas(surface, graph, entities, filter) { var areas = []; for (var i = 0; i < entities.length; i++) { @@ -47,7 +47,7 @@ iD.svg.Areas = function() { var nodes = _.pluck(entity.nodes, 'loc'); if (nodes.length === 0) return (lineStrings[entity.id] = ''); else return (lineStrings[entity.id] = - 'M' + nodes.map(iD.svg.RoundProjection(projection)).join('L')); + 'M' + nodes.map(projection).join('L')); } function drawPaths(group, areas, filter, classes) { diff --git a/js/id/svg/lines.js b/js/id/svg/lines.js index 3f1b634d7..4a2acfe38 100644 --- a/js/id/svg/lines.js +++ b/js/id/svg/lines.js @@ -1,4 +1,4 @@ -iD.svg.Lines = function() { +iD.svg.Lines = function(projection) { var arrowtext = '►\u3000\u3000', alength; @@ -53,7 +53,7 @@ iD.svg.Lines = function() { return paths; } - return function drawLines(surface, graph, entities, filter, projection) { + return function drawLines(surface, graph, entities, filter) { if (!alength) { var arrow = surface.append('text').text(arrowtext); @@ -80,7 +80,7 @@ iD.svg.Lines = function() { var nodes = _.pluck(entity.nodes, 'loc'); if (nodes.length === 0) return (lineStrings[entity.id] = ''); else return (lineStrings[entity.id] = - 'M' + nodes.map(iD.svg.RoundProjection(projection)).join('L')); + 'M' + nodes.map(projection).join('L')); } var casing = surface.select('.layer-casing'), diff --git a/js/id/svg/midpoints.js b/js/id/svg/midpoints.js index 9c060ea3b..321e75c8e 100644 --- a/js/id/svg/midpoints.js +++ b/js/id/svg/midpoints.js @@ -1,5 +1,5 @@ -iD.svg.Midpoints = function() { - return function drawMidpoints(surface, graph, entities, filter, projection) { +iD.svg.Midpoints = function(projection) { + return function drawMidpoints(surface, graph, entities, filter) { var midpoints = []; for (var i = 0; i < entities.length; i++) { diff --git a/js/id/svg/points.js b/js/id/svg/points.js index 7a2600814..37c4bbf91 100644 --- a/js/id/svg/points.js +++ b/js/id/svg/points.js @@ -1,4 +1,4 @@ -iD.svg.Points = function() { +iD.svg.Points = function(projection) { function imageHref(d) { // TODO: optimize for (var k in d.tags) { @@ -10,7 +10,7 @@ iD.svg.Points = function() { return 'icons/unknown.png'; } - return function drawPoints(surface, graph, entities, filter, projection) { + return function drawPoints(surface, graph, entities, filter) { var points = []; for (var i = 0; i < entities.length; i++) { diff --git a/js/id/svg/vertices.js b/js/id/svg/vertices.js index 700ef5538..ff775fa3e 100644 --- a/js/id/svg/vertices.js +++ b/js/id/svg/vertices.js @@ -1,5 +1,5 @@ -iD.svg.Vertices = function() { - return function drawVertices(surface, graph, entities, filter, projection) { +iD.svg.Vertices = function(projection) { + return function drawVertices(surface, graph, entities, filter) { var vertices = []; for (var i = 0; i < entities.length; i++) { diff --git a/test/spec/svg/areas.js b/test/spec/svg/areas.js index 54a7c1d35..5e910dbfc 100644 --- a/test/spec/svg/areas.js +++ b/test/spec/svg/areas.js @@ -12,7 +12,7 @@ describe("iD.svg.Areas", function () { var area = iD.Way({tags: {area: 'yes', building: 'yes'}}), graph = iD.Graph([area]); - surface.call(iD.svg.Areas(), graph, [area], filter, projection); + surface.call(iD.svg.Areas(projection), graph, [area], filter); expect(surface.select('.area')).to.be.classed('tag-building'); expect(surface.select('.area')).to.be.classed('tag-building-yes'); diff --git a/test/spec/svg/points.js b/test/spec/svg/points.js index 664f88a80..be06ae487 100644 --- a/test/spec/svg/points.js +++ b/test/spec/svg/points.js @@ -12,7 +12,7 @@ describe("iD.svg.Points", function () { var node = iD.Node({tags: {amenity: "cafe"}, loc: [0, 0], _poi: true}), graph = iD.Graph([node]); - surface.call(iD.svg.Points(), graph, [node], filter, projection); + surface.call(iD.svg.Points(projection), graph, [node], filter); expect(surface.select('.point')).to.be.classed('tag-amenity'); expect(surface.select('.point')).to.be.classed('tag-amenity-cafe'); diff --git a/test/spec/svg/vertices.js b/test/spec/svg/vertices.js index 760734053..dccdf80a0 100644 --- a/test/spec/svg/vertices.js +++ b/test/spec/svg/vertices.js @@ -12,7 +12,7 @@ describe("iD.svg.Vertices", function () { var node = iD.Node({tags: {highway: "traffic_signals"}, loc: [0, 0]}), graph = iD.Graph([node]); - surface.call(iD.svg.Vertices(), graph, [node], filter, projection); + surface.call(iD.svg.Vertices(projection), graph, [node], filter); expect(surface.select('.vertex')).to.be.classed('tag-highway'); expect(surface.select('.vertex')).to.be.classed('tag-highway-traffic_signals'); @@ -24,7 +24,7 @@ describe("iD.svg.Vertices", function () { way2 = iD.Way({nodes: [node.id]}), graph = iD.Graph([node, way1, way2]); - surface.call(iD.svg.Vertices(), graph, [node], filter, projection); + surface.call(iD.svg.Vertices(projection), graph, [node], filter); expect(surface.select('.vertex')).to.be.classed('shared'); }); From e24b22b518b35778c0e9344d6470bc0858637e9a Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 09:57:22 -0800 Subject: [PATCH 12/33] Extract iD.svg.LineString --- js/id/svg.js | 16 ++++++++++++++++ js/id/svg/areas.js | 12 +----------- js/id/svg/lines.js | 10 +--------- test/index.html | 1 + test/index_packaged.html | 1 + test/spec/svg.js | 10 ++++++++++ 6 files changed, 30 insertions(+), 20 deletions(-) create mode 100644 test/spec/svg.js diff --git a/js/id/svg.js b/js/id/svg.js index e1d26e058..bf73f32b8 100644 --- a/js/id/svg.js +++ b/js/id/svg.js @@ -9,5 +9,21 @@ iD.svg = { return function (entity) { return 'translate(' + projection(entity.loc) + ')'; }; + }, + + LineString: function (projection) { + var cache = {}; + return function (entity) { + if (cache[entity.id] !== undefined) { + return cache[entity.id]; + } + + if (entity.nodes.length === 0) { + return (cache[entity.id] = ''); + } + + return (cache[entity.id] = + 'M' + entity.nodes.map(function (n) { return projection(n.loc); }).join('L')); + } } }; diff --git a/js/id/svg/areas.js b/js/id/svg/areas.js index 4fe06ba92..3862aca0c 100644 --- a/js/id/svg/areas.js +++ b/js/id/svg/areas.js @@ -38,17 +38,7 @@ iD.svg.Areas = function(projection) { areas.sort(areastack); - var lineStrings = {}; - - function lineString(entity) { - if (lineStrings[entity.id] !== undefined) { - return lineStrings[entity.id]; - } - var nodes = _.pluck(entity.nodes, 'loc'); - if (nodes.length === 0) return (lineStrings[entity.id] = ''); - else return (lineStrings[entity.id] = - 'M' + nodes.map(projection).join('L')); - } + var lineString = iD.svg.LineString(projection); function drawPaths(group, areas, filter, classes) { var paths = group.selectAll('path') diff --git a/js/id/svg/lines.js b/js/id/svg/lines.js index 4a2acfe38..167a9e75e 100644 --- a/js/id/svg/lines.js +++ b/js/id/svg/lines.js @@ -73,15 +73,7 @@ iD.svg.Lines = function(projection) { lines.sort(waystack); - function lineString(entity) { - if (lineStrings[entity.id] !== undefined) { - return lineStrings[entity.id]; - } - var nodes = _.pluck(entity.nodes, 'loc'); - if (nodes.length === 0) return (lineStrings[entity.id] = ''); - else return (lineStrings[entity.id] = - 'M' + nodes.map(projection).join('L')); - } + var lineString = iD.svg.LineString(projection); var casing = surface.select('.layer-casing'), stroke = surface.select('.layer-stroke'), diff --git a/test/index.html b/test/index.html index 195b459f6..96095a244 100644 --- a/test/index.html +++ b/test/index.html @@ -151,6 +151,7 @@ + diff --git a/test/index_packaged.html b/test/index_packaged.html index 92c61df79..cf333b416 100644 --- a/test/index_packaged.html +++ b/test/index_packaged.html @@ -60,6 +60,7 @@ + diff --git a/test/spec/svg.js b/test/spec/svg.js new file mode 100644 index 000000000..bbb78c990 --- /dev/null +++ b/test/spec/svg.js @@ -0,0 +1,10 @@ +describe("iD.svg.LineString", function () { + it("returns an SVG path description for the entity's nodes", function () { + var a = iD.Node({loc: [0, 0]}), + b = iD.Node({loc: [2, 3]}), + way = iD.Way({nodes: [a, b]}), + projection = Object; + + expect(iD.svg.LineString(projection)(way)).to.equal("M0,0L2,3"); + }); +}); From f64c2df17ff81421eb9e9f9ccf2339c0153f2e52 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 10:40:14 -0800 Subject: [PATCH 13/33] Return null rather than empty string Empty string still generates the error 'Problem parsing d=""', while null results in no 'd' attribute at all. --- js/id/svg.js | 2 +- test/spec/svg.js | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/js/id/svg.js b/js/id/svg.js index bf73f32b8..e2b1dc2ad 100644 --- a/js/id/svg.js +++ b/js/id/svg.js @@ -19,7 +19,7 @@ iD.svg = { } if (entity.nodes.length === 0) { - return (cache[entity.id] = ''); + return (cache[entity.id] = null); } return (cache[entity.id] = diff --git a/test/spec/svg.js b/test/spec/svg.js index bbb78c990..265562071 100644 --- a/test/spec/svg.js +++ b/test/spec/svg.js @@ -7,4 +7,11 @@ describe("iD.svg.LineString", function () { expect(iD.svg.LineString(projection)(way)).to.equal("M0,0L2,3"); }); + + it("returns null for an entity with no nodes", function () { + var way = iD.Way(), + projection = Object; + + expect(iD.svg.LineString(projection)(way)).to.be.null; + }); }); From 8564279926257f48ef93273373a554da1a932ffc Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 10:43:04 -0800 Subject: [PATCH 14/33] Use identity projection in tests --- test/spec/svg/areas.js | 2 +- test/spec/svg/points.js | 2 +- test/spec/svg/vertices.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/spec/svg/areas.js b/test/spec/svg/areas.js index 5e910dbfc..d978e81c6 100644 --- a/test/spec/svg/areas.js +++ b/test/spec/svg/areas.js @@ -1,6 +1,6 @@ describe("iD.svg.Areas", function () { var surface, - projection = d3.geo.mercator(), + projection = Object, filter = d3.functor(true); beforeEach(function () { diff --git a/test/spec/svg/points.js b/test/spec/svg/points.js index be06ae487..6e991962c 100644 --- a/test/spec/svg/points.js +++ b/test/spec/svg/points.js @@ -1,6 +1,6 @@ describe("iD.svg.Points", function () { var surface, - projection = d3.geo.mercator(), + projection = Object, filter = d3.functor(true); beforeEach(function () { diff --git a/test/spec/svg/vertices.js b/test/spec/svg/vertices.js index dccdf80a0..8ce5e3a80 100644 --- a/test/spec/svg/vertices.js +++ b/test/spec/svg/vertices.js @@ -1,6 +1,6 @@ describe("iD.svg.Vertices", function () { var surface, - projection = d3.geo.mercator(), + projection = Object, filter = d3.functor(true); beforeEach(function () { From 545789efcc64daeaa83b2ca0821dcde74e092e50 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 10:51:51 -0800 Subject: [PATCH 15/33] More area tests --- js/id/svg/areas.js | 2 +- test/spec/svg/areas.js | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/js/id/svg/areas.js b/js/id/svg/areas.js index 3862aca0c..e77fe8a4d 100644 --- a/js/id/svg/areas.js +++ b/js/id/svg/areas.js @@ -41,7 +41,7 @@ iD.svg.Areas = function(projection) { var lineString = iD.svg.LineString(projection); function drawPaths(group, areas, filter, classes) { - var paths = group.selectAll('path') + var paths = group.selectAll('path.area') .filter(filter) .data(areas, iD.Entity.key); diff --git a/test/spec/svg/areas.js b/test/spec/svg/areas.js index d978e81c6..112e25d03 100644 --- a/test/spec/svg/areas.js +++ b/test/spec/svg/areas.js @@ -8,6 +8,16 @@ describe("iD.svg.Areas", function () { .call(iD.svg.Surface()); }); + it("adds way and area classes", function () { + var area = iD.Way({tags: {area: 'yes'}}), + graph = iD.Graph([area]); + + surface.call(iD.svg.Areas(projection), graph, [area], filter); + + expect(surface.select('path')).to.be.classed('way'); + expect(surface.select('path')).to.be.classed('area'); + }); + it("adds tag classes", function () { var area = iD.Way({tags: {area: 'yes', building: 'yes'}}), graph = iD.Graph([area]); @@ -17,4 +27,17 @@ describe("iD.svg.Areas", function () { expect(surface.select('.area')).to.be.classed('tag-building'); expect(surface.select('.area')).to.be.classed('tag-building-yes'); }); + + it("preserves non-area paths", function () { + var area = iD.Way({tags: {area: 'yes'}}), + graph = iD.Graph([area]); + + surface.select('.layer-fill') + .append('path') + .attr('class', 'other'); + + surface.call(iD.svg.Areas(projection), graph, [area], filter); + + expect(surface.selectAll('.other')[0].length).to.equal(1); + }); }); From 9a76b81125368c3380d1616d56bbdc825c7a89b7 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 11:01:20 -0800 Subject: [PATCH 16/33] First cut on multipolygon rendering --- css/map.css | 22 ++++++++++---- index.html | 1 + js/id/renderer/map.js | 2 ++ js/id/svg/multipolygons.js | 54 ++++++++++++++++++++++++++++++++++ js/id/svg/tag_classes.js | 2 +- test/index.html | 2 ++ test/index_packaged.html | 1 + test/spec/svg/multipolygons.js | 43 +++++++++++++++++++++++++++ 8 files changed, 121 insertions(+), 6 deletions(-) create mode 100644 js/id/svg/multipolygons.js create mode 100644 test/spec/svg/multipolygons.js diff --git a/css/map.css b/css/map.css index b2929f149..fc54d7499 100644 --- a/css/map.css +++ b/css/map.css @@ -142,29 +142,37 @@ path.stroke.tag-railway-subway { stroke-dasharray: 8,8; } -path.area { +path.area, +path.multipolygon { stroke-width:2; stroke:#fff; fill:#fff; fill-opacity:0.3; } +path.multipolygon { + fill-rule: evenodd; +} + path.area.selected { stroke-width:4 !important; } -path.area.tag-natural { +path.area.tag-natural, +path.multipolygon.tag-natural { stroke: #ADD6A5; fill: #ADD6A5; stroke-width:1; } -path.area.tag-natural-water { +path.area.tag-natural-water, +path.multipolygon.tag-natural-water { stroke: #6382FF; fill: #ADBEFF; } -path.area.tag-building { +path.area.tag-building, +path.multipolygon.tag-building { stroke: #9E176A; stroke-width: 1; fill: #ff6ec7; @@ -173,7 +181,11 @@ path.area.tag-building { path.area.tag-landuse, path.area.tag-natural-wood, path.area.tag-natural-tree, -path.area.tag-natural-grassland { +path.area.tag-natural-grassland, +path.multipolygon.tag-landuse, +path.multipolygon.tag-natural-wood, +path.multipolygon.tag-natural-tree, +path.multipolygon.tag-natural-grassland { stroke: #006B34; stroke-width: 1; fill: #189E59; diff --git a/index.html b/index.html index 2d42c9f1c..4e42441f7 100644 --- a/index.html +++ b/index.html @@ -41,6 +41,7 @@ + diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 467f7f351..ec232d542 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -21,6 +21,7 @@ iD.Map = function() { vertices = iD.svg.Vertices(roundedProjection), lines = iD.svg.Lines(roundedProjection), areas = iD.svg.Areas(roundedProjection), + multipolygons = iD.svg.Multipolygons(roundedProjection), midpoints = iD.svg.Midpoints(roundedProjection), tail = d3.tail(), surface, tilegroup; @@ -102,6 +103,7 @@ iD.Map = function() { .call(vertices, graph, all, filter) .call(lines, graph, all, filter) .call(areas, graph, all, filter) + .call(multipolygons, graph, all, filter) .call(midpoints, graph, all, filter); } diff --git a/js/id/svg/multipolygons.js b/js/id/svg/multipolygons.js new file mode 100644 index 000000000..bad07ff41 --- /dev/null +++ b/js/id/svg/multipolygons.js @@ -0,0 +1,54 @@ +iD.svg.Multipolygons = function(projection) { + return function(surface, graph, entities, filter) { + var multipolygons = []; + + for (var i = 0; i < entities.length; i++) { + var entity = entities[i]; + if (entity.geometry() === 'relation' && entity.tags.type === 'multipolygon') { + multipolygons.push(entity); + } + } + + var lineStrings = {}; + + function lineString(entity) { + if (lineStrings[entity.id] !== undefined) { + return lineStrings[entity.id]; + } + + var multipolygon = entity.multipolygon(graph); + if (entity.members.length == 0 || !multipolygon) { + return (lineStrings[entity.id] = null); + } + + multipolygon = _.flatten(multipolygon, true); + return (lineStrings[entity.id] = + multipolygon.map(function (ring) { + return 'M' + ring.map(function (node) { return projection(node.loc); }).join('L'); + }).join("")); + } + + function drawPaths(group, multipolygons, filter, classes) { + var paths = group.selectAll('path.multipolygon') + .filter(filter) + .data(multipolygons, iD.Entity.key); + + paths.enter() + .append('path') + .attr('class', classes); + + paths + .order() + .attr('d', lineString) + .call(iD.svg.TagClasses()); + + paths.exit() + .remove(); + + return paths; + } + + var fill = surface.select('.layer-fill'), + paths = drawPaths(fill, multipolygons, filter, 'relation multipolygon'); + }; +}; diff --git a/js/id/svg/tag_classes.js b/js/id/svg/tag_classes.js index 43562fd5c..0295ca7e6 100644 --- a/js/id/svg/tag_classes.js +++ b/js/id/svg/tag_classes.js @@ -1,7 +1,7 @@ iD.svg.TagClasses = function() { var keys = iD.util.trueObj([ 'highway', 'railway', 'motorway', 'amenity', 'natural', - 'landuse', 'building', 'oneway', 'bridge' + 'landuse', 'building', 'oneway', 'bridge', 'boundary' ]), tagClassRe = /^tag-/; return function tagClassesSelection(selection) { diff --git a/test/index.html b/test/index.html index 96095a244..ab7b521cd 100644 --- a/test/index.html +++ b/test/index.html @@ -43,6 +43,7 @@ + @@ -153,6 +154,7 @@ + diff --git a/test/index_packaged.html b/test/index_packaged.html index cf333b416..9044adf66 100644 --- a/test/index_packaged.html +++ b/test/index_packaged.html @@ -62,6 +62,7 @@ + diff --git a/test/spec/svg/multipolygons.js b/test/spec/svg/multipolygons.js new file mode 100644 index 000000000..67f44ebae --- /dev/null +++ b/test/spec/svg/multipolygons.js @@ -0,0 +1,43 @@ +describe("iD.svg.Multipolygons", function () { + var surface, + projection = Object, + filter = d3.functor(true); + + beforeEach(function () { + surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) + .call(iD.svg.Surface()); + }); + + it("adds relation and multipolygon classes", function () { + var relation = iD.Relation({tags: {type: 'multipolygon'}}), + graph = iD.Graph([relation]); + + surface.call(iD.svg.Multipolygons(projection), graph, [relation], filter); + + expect(surface.select('path')).to.be.classed('relation'); + expect(surface.select('path')).to.be.classed('multipolygon'); + }); + + it("adds tag classes", function () { + var relation = iD.Relation({tags: {type: 'multipolygon', boundary: "administrative"}}), + graph = iD.Graph([relation]); + + surface.call(iD.svg.Multipolygons(projection), graph, [relation], filter); + + expect(surface.select('.relation')).to.be.classed('tag-boundary'); + expect(surface.select('.relation')).to.be.classed('tag-boundary-administrative'); + }); + + it("preserves non-multipolygon paths", function () { + var relation = iD.Relation({tags: {type: 'multipolygon'}}), + graph = iD.Graph([relation]); + + surface.select('.layer-fill') + .append('path') + .attr('class', 'other'); + + surface.call(iD.svg.Multipolygons(projection), graph, [relation], filter); + + expect(surface.selectAll('.other')[0].length).to.equal(1); + }); +}); From 81d4036322c0faefabc1db389a5b0cb8a0f980b0 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 15:20:16 -0500 Subject: [PATCH 17/33] Smarter contributors box, links to history when truncated. Fixes #306 --- js/id/id.js | 6 +++++- js/id/ui/contributors.js | 40 +++++++++++++++++++++++++++++++++------- 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/js/id/id.js b/js/id/id.js index e22a77ca6..828aa45f9 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -156,8 +156,12 @@ window.iD = function(container) { .attr('class','about-block fillD pad1'); contributors.append('span') .attr('class', 'icon nearby icon-pre-text'); - contributors.append('pan') + contributors.append('span') .text('Viewing contributions by '); + contributors.append('span') + .attr('class', 'contributor-list'); + contributors.append('span') + .attr('class', 'contributor-count'); history.on('change.buttons', function() { var undo = history.undoAnnotation(), diff --git a/js/id/ui/contributors.js b/js/id/ui/contributors.js index 72dedf1d1..36d1cf432 100644 --- a/js/id/ui/contributors.js +++ b/js/id/ui/contributors.js @@ -3,22 +3,48 @@ iD.ui.contributors = function(map) { function contributors(selection) { var users = {}, + limit = 3, entities = map.history().graph().intersects(map.extent()); + for (var i in entities) { - if (entities[i].user) { - users[entities[i].user] = true; - if (Object.keys(users).length > 10) break; - } + if (entities[i].user) users[entities[i].user] = true; } - var u = Object.keys(users); - var l = selection.selectAll('a.user-link').data(u); + + var u = Object.keys(users), + subset = u.slice(0, limit); + + var l = selection + .select('.contributor-list') + .selectAll('a.user-link') + .data(subset); + + l.enter().append('a') .attr('class', 'user-link') - .attr('href', function(d) { return map.connection().userUrl(d); }) + .attr('href', function(d) { console.log(d); return map.connection().userUrl(d); }) .attr('target', '_blank') .text(String); + l.exit().remove(); + selection + .select('.contributor-count') + .html(''); + + if (u.length > limit) { + selection + .select('.contributor-count') + .append('a') + .attr('target', '_blank') + .attr('href', function() { + var ext = map.extent(); + return 'http://www.openstreetmap.org/browse/changesets?bbox=' + [ + ext[0][0], ext[1][1], + ext[1][0], ext[0][1]]; + }) + .text(' and ' + (u.length - limit) + ' others'); + } + if (!u.length) { selection.transition().style('opacity', 0); } else if (selection.style('opacity') === '0') { From 65946992768b5f1912c88e7df13ce3324e9964b7 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 15:24:22 -0500 Subject: [PATCH 18/33] Stray console --- js/id/ui/contributors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/id/ui/contributors.js b/js/id/ui/contributors.js index 36d1cf432..3dc5a4014 100644 --- a/js/id/ui/contributors.js +++ b/js/id/ui/contributors.js @@ -21,7 +21,7 @@ iD.ui.contributors = function(map) { l.enter().append('a') .attr('class', 'user-link') - .attr('href', function(d) { console.log(d); return map.connection().userUrl(d); }) + .attr('href', function(d) { return map.connection().userUrl(d); }) .attr('target', '_blank') .text(String); From 5a2444b55185b08bc220f4448575e907f659bc3e Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 13:44:30 -0800 Subject: [PATCH 19/33] Extract and fix extent/intersection calculations Extents are now [[min x, min y], [max x, max y]]. --- Makefile | 2 + index.html | 3 ++ js/id/geo.js | 1 + js/id/geo/extent.js | 37 ++++++++++++++ js/id/graph/entity.js | 6 +-- js/id/graph/node.js | 2 +- js/id/graph/way.js | 7 +-- js/id/modes/select.js | 4 +- js/id/renderer/map.js | 21 ++++---- js/id/ui/geocoder.js | 2 +- js/id/ui/save.js | 3 +- test/index.html | 5 ++ test/index_packaged.html | 2 + test/spec/geo/extent.js | 100 ++++++++++++++++++++++++++++++++++++++ test/spec/graph/node.js | 4 +- test/spec/graph/way.js | 8 +-- test/spec/renderer/map.js | 13 ++--- 17 files changed, 180 insertions(+), 40 deletions(-) create mode 100644 js/id/geo.js create mode 100644 js/id/geo/extent.js create mode 100644 test/spec/geo/extent.js diff --git a/Makefile b/Makefile index 2819f2884..657915e1e 100644 --- a/Makefile +++ b/Makefile @@ -29,6 +29,8 @@ all: \ js/id/oauth.js \ js/id/services/*.js \ js/id/util.js \ + js/id/geo.js \ + js/id/geo/*.js \ js/id/actions.js \ js/id/actions/*.js \ js/id/behavior.js \ diff --git a/index.html b/index.html index 4e42441f7..64d839d93 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,9 @@ + + + diff --git a/js/id/geo.js b/js/id/geo.js new file mode 100644 index 000000000..06b63ae14 --- /dev/null +++ b/js/id/geo.js @@ -0,0 +1 @@ +iD.geo = {}; diff --git a/js/id/geo/extent.js b/js/id/geo/extent.js new file mode 100644 index 000000000..80bf631c6 --- /dev/null +++ b/js/id/geo/extent.js @@ -0,0 +1,37 @@ +iD.geo.Extent = function (min, max) { + if (!(this instanceof iD.geo.Extent)) return new iD.geo.Extent(min, max); + if (min instanceof iD.geo.Extent) { + return min; + } else if (min && min.length === 2 && min[0].length === 2 && min[1].length === 2) { + this[0] = min[0]; + this[1] = min[1]; + } else { + this[0] = min || [ Infinity, Infinity]; + this[1] = max || min || [-Infinity, -Infinity]; + } +}; + +iD.geo.Extent.prototype = [[], []]; + +_.extend(iD.geo.Extent.prototype, { + extend: function (obj) { + obj = iD.geo.Extent(obj); + return iD.geo.Extent([Math.min(obj[0][0], this[0][0]), + Math.min(obj[0][1], this[0][1])], + [Math.max(obj[1][0], this[1][0]), + Math.max(obj[1][1], this[1][1])]); + }, + + center: function () { + return [(this[0][0] + this[1][0]) / 2, + (this[0][1] + this[1][1]) / 2]; + }, + + intersects: function (obj) { + obj = iD.geo.Extent(obj); + return obj[0][0] <= this[1][0] && + obj[0][1] <= this[1][1] && + obj[1][0] >= this[0][0] && + obj[1][1] >= this[0][1]; + } +}); diff --git a/js/id/graph/entity.js b/js/id/graph/entity.js index afc152589..8c8f9a6fb 100644 --- a/js/id/graph/entity.js +++ b/js/id/graph/entity.js @@ -74,11 +74,7 @@ iD.Entity.prototype = { }, intersects: function(extent, resolver) { - var _extent = this.extent(resolver); - return _extent[0][0] > extent[0][0] && - _extent[1][0] < extent[1][0] && - _extent[0][1] < extent[0][1] && - _extent[1][1] > extent[1][1]; + return this.extent(resolver).intersects(extent); }, hasInterestingTags: function() { diff --git a/js/id/graph/node.js b/js/id/graph/node.js index 9500991fa..fd3a1cd69 100644 --- a/js/id/graph/node.js +++ b/js/id/graph/node.js @@ -2,7 +2,7 @@ iD.Node = iD.Entity.extend({ type: "node", extent: function() { - return [this.loc, this.loc]; + return iD.geo.Extent(this.loc); }, geometry: function() { diff --git a/js/id/graph/way.js b/js/id/graph/way.js index 5c3e1210b..305f12051 100644 --- a/js/id/graph/way.js +++ b/js/id/graph/way.js @@ -4,14 +4,11 @@ iD.Way = iD.Entity.extend({ extent: function(resolver) { return resolver.transient(this, 'extent', function() { - var extent = [[-Infinity, Infinity], [Infinity, -Infinity]]; + var extent = iD.geo.Extent(); for (var i = 0, l = this.nodes.length; i < l; i++) { var node = this.nodes[i]; if (node.loc === undefined) node = resolver.entity(node); - if (node.loc[0] > extent[0][0]) extent[0][0] = node.loc[0]; - if (node.loc[0] < extent[1][0]) extent[1][0] = node.loc[0]; - if (node.loc[1] < extent[0][1]) extent[0][1] = node.loc[1]; - if (node.loc[1] > extent[1][1]) extent[1][1] = node.loc[1]; + extent = extent.extend(node.loc); } return extent; }); diff --git a/js/id/modes/select.js b/js/id/modes/select.js index d091fdc57..4d567fd59 100644 --- a/js/id/modes/select.js +++ b/js/id/modes/select.js @@ -59,8 +59,8 @@ iD.modes.Select = function (entity) { map_size = mode.map.size(), entity_extent = entity.extent(mode.history.graph()), left_edge = map_size[0] - inspector_size[0], - left = mode.map.projection(entity_extent[1])[0], - right = mode.map.projection(entity_extent[0])[0]; + left = mode.map.projection(entity_extent[0])[0], + right = mode.map.projection(entity_extent[1])[0]; if (left > left_edge && right > left_edge) mode.map.centerEase( diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index ec232d542..59f46f0ee 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -257,26 +257,23 @@ iD.Map = function() { }, 20); }; - map.extent = function(tl, br) { + map.extent = function(_) { if (!arguments.length) { - return [projection.invert([0, 0]), projection.invert(dimensions)]; + return iD.geo.Extent(projection.invert([0, dimensions[1]]), + projection.invert([dimensions[0], 0])); } else { - - var TL = projection(tl), - BR = projection(br); + var extent = iD.geo.Extent(_), + tl = projection([extent[0][0], extent[1][1]]), + br = projection([extent[1][0], extent[0][1]]); // Calculate maximum zoom that fits extent - var hFactor = (BR[0] - TL[0]) / dimensions[0], - vFactor = (BR[1] - TL[1]) / dimensions[1], + var hFactor = (br[0] - tl[0]) / dimensions[0], + vFactor = (br[1] - tl[1]) / dimensions[1], hZoomDiff = Math.log(Math.abs(hFactor)) / Math.LN2, vZoomDiff = Math.log(Math.abs(vFactor)) / Math.LN2, newZoom = map.zoom() - Math.max(hZoomDiff, vZoomDiff); - // Calculate center of projected extent - var midPoint = [(TL[0] + BR[0]) / 2, (TL[1] + BR[1]) / 2], - midLoc = projection.invert(midPoint); - - map.zoom(newZoom).center(midLoc); + map.zoom(newZoom).center(extent.center()); } }; diff --git a/js/id/ui/geocoder.js b/js/id/ui/geocoder.js index 87eaa7d74..4bd8c0629 100644 --- a/js/id/ui/geocoder.js +++ b/js/id/ui/geocoder.js @@ -16,7 +16,7 @@ iD.ui.geocoder = function() { .text('No location found for "' + resp.query[0] + '"'); } var bounds = resp.results[0][0].bounds; - map.extent([bounds[0], bounds[3]], [bounds[2], bounds[1]]); + map.extent(iD.geo.Extent([bounds[0], bounds[1]], [bounds[2], bounds[3]])); }); } diff --git a/js/id/ui/save.js b/js/id/ui/save.js index e40125e71..6bf8419c3 100644 --- a/js/id/ui/save.js +++ b/js/id/ui/save.js @@ -60,8 +60,7 @@ iD.ui.save = function() { modal.remove(); }) .on('fix', function(d) { - var ext = d.entity.extent(map.history().graph()); - map.extent(ext[0], ext[1]); + map.extent(d.entity.extent(map.history().graph())); if (map.zoom() > 19) map.zoom(19); controller.enter(iD.modes.Select(d.entity)); modal.remove(); diff --git a/test/index.html b/test/index.html index ab7b521cd..7f63be2a3 100644 --- a/test/index.html +++ b/test/index.html @@ -34,6 +34,9 @@ + + + @@ -139,6 +142,8 @@ + + diff --git a/test/index_packaged.html b/test/index_packaged.html index 9044adf66..042a0227e 100644 --- a/test/index_packaged.html +++ b/test/index_packaged.html @@ -47,6 +47,8 @@ + + diff --git a/test/spec/geo/extent.js b/test/spec/geo/extent.js new file mode 100644 index 000000000..54f328efb --- /dev/null +++ b/test/spec/geo/extent.js @@ -0,0 +1,100 @@ +describe("iD.geo.Extent", function () { + describe("constructor", function () { + it("defaults to infinitely empty extent", function () { + expect(iD.geo.Extent()).to.eql([[Infinity, Infinity], [-Infinity, -Infinity]]); + }); + + it("constructs via a point", function () { + var p = [0, 0]; + expect(iD.geo.Extent(p)).to.eql([p, p]); + }); + + it("constructs via two points", function () { + var min = [0, 0], + max = [5, 10]; + expect(iD.geo.Extent(min, max)).to.eql([min, max]); + }); + + it("constructs via an extent", function () { + var min = [0, 0], + max = [5, 10]; + expect(iD.geo.Extent([min, max])).to.eql([min, max]); + }); + + it("constructs via an iD.geo.Extent", function () { + var min = [0, 0], + max = [5, 10], + extent = iD.geo.Extent(min, max); + expect(iD.geo.Extent(extent)).to.equal(extent); + }); + + it("has length 2", function () { + expect(iD.geo.Extent().length).to.equal(2); + }); + + it("has min element", function () { + var min = [0, 0], + max = [5, 10]; + expect(iD.geo.Extent(min, max)[0]).to.equal(min); + }); + + it("has max element", function () { + var min = [0, 0], + max = [5, 10]; + expect(iD.geo.Extent(min, max)[1]).to.equal(max); + }); + }); + + describe("#center", function () { + it("returns the center point", function () { + expect(iD.geo.Extent([0, 0], [5, 10]).center()).to.eql([2.5, 5]); + }); + }); + + describe("#extend", function () { + it("does not modify self", function () { + var extent = iD.geo.Extent([0, 0], [0, 0]); + extent.extend([1, 1]); + expect(extent).to.eql([[0, 0], [0, 0]]); + }); + + it("returns the minimal extent containing self and the given point", function () { + expect(iD.geo.Extent().extend([0, 0])).to.eql([[0, 0], [0, 0]]); + expect(iD.geo.Extent([0, 0], [0, 0]).extend([5, 10])).to.eql([[0, 0], [5, 10]]); + }); + + it("returns the minimal extent containing self and the given extent", function () { + expect(iD.geo.Extent().extend([[0, 0], [5, 10]])).to.eql([[0, 0], [5, 10]]); + expect(iD.geo.Extent([0, 0], [0, 0]).extend([[4, -1], [5, 10]])).to.eql([[0, -1], [5, 10]]); + }); + }); + + describe('#intersects', function () { + it("returns true for a point inside self", function () { + expect(iD.geo.Extent([0, 0], [5, 5]).intersects([2, 2])).to.be.true; + }); + + it("returns true for a point on the boundary of self", function () { + expect(iD.geo.Extent([0, 0], [5, 5]).intersects([0, 0])).to.be.true; + }); + + it("returns false for a point outside self", function () { + expect(iD.geo.Extent([0, 0], [5, 5]).intersects([6, 6])).to.be.false; + }); + + it("returns true for an extent contained by self", function () { + expect(iD.geo.Extent([0, 0], [5, 5]).intersects([[1, 1], [2, 2]])).to.be.true; + expect(iD.geo.Extent([1, 1], [2, 2]).intersects([[0, 0], [5, 5]])).to.be.true; + }); + + it("returns true for an extent intersected by self", function () { + expect(iD.geo.Extent([0, 0], [5, 5]).intersects([[1, 1], [6, 6]])).to.be.true; + expect(iD.geo.Extent([1, 1], [6, 6]).intersects([[0, 0], [5, 5]])).to.be.true; + }); + + it("returns false for an extent not intersected by self", function () { + expect(iD.geo.Extent([0, 0], [5, 5]).intersects([[6, 6], [7, 7]])).to.be.false; + expect(iD.geo.Extent([[6, 6], [7, 7]]).intersects([[0, 0], [5, 5]])).to.be.false; + }); + }); +}); diff --git a/test/spec/graph/node.js b/test/spec/graph/node.js index 929946b04..8045270b3 100644 --- a/test/spec/graph/node.js +++ b/test/spec/graph/node.js @@ -29,11 +29,11 @@ describe('iD.Node', function () { describe("#intersects", function () { it("returns true for a node within the given extent", function () { - expect(iD.Node({loc: [0, 0]}).intersects([[-180, 90], [180, -90]])).to.equal(true); + expect(iD.Node({loc: [0, 0]}).intersects([[-5, -5], [5, 5]])).to.equal(true); }); it("returns false for a node outside the given extend", function () { - expect(iD.Node({loc: [0, 0]}).intersects([[100, 90], [180, -90]])).to.equal(false); + expect(iD.Node({loc: [6, 6]}).intersects([[-5, -5], [5, 5]])).to.equal(false); }); }); diff --git a/test/spec/graph/way.js b/test/spec/graph/way.js index 3aa8045fb..19a4514db 100644 --- a/test/spec/graph/way.js +++ b/test/spec/graph/way.js @@ -41,7 +41,7 @@ describe('iD.Way', function() { node2 = iD.Node({loc: [5, 10]}), way = iD.Way({nodes: [node1.id, node2.id]}), graph = iD.Graph([node1, node2, way]); - expect(way.extent(graph)).to.eql([[5, 0], [0, 10]]); + expect(way.extent(graph)).to.eql([[0, 0], [5, 10]]); }); }); @@ -50,14 +50,14 @@ describe('iD.Way', function() { var node = iD.Node({loc: [0, 0]}), way = iD.Way({nodes: [node.id]}), graph = iD.Graph([node, way]); - expect(way.intersects([[-180, 90], [180, -90]], graph)).to.equal(true); + expect(way.intersects([[-5, -5], [5, 5]], graph)).to.equal(true); }); it("returns false for way with no nodes within the given extent", function () { - var node = iD.Node({loc: [0, 0]}), + var node = iD.Node({loc: [6, 6]}), way = iD.Way({nodes: [node.id]}), graph = iD.Graph([node, way]); - expect(way.intersects([[100, 90], [180, -90]], graph)).to.equal(false); + expect(way.intersects([[-5, -5], [5, 5]], graph)).to.equal(false); }); }); diff --git a/test/spec/renderer/map.js b/test/spec/renderer/map.js index 4cec560e9..611a2d1ff 100644 --- a/test/spec/renderer/map.js +++ b/test/spec/renderer/map.js @@ -54,16 +54,17 @@ describe('Map', function() { describe('#extent', function() { it('gets and sets extent', function() { - expect(map.size([100, 100])).to.equal(map); - expect(map.center([0, 0])).to.equal(map); + map.size([100, 100]) + .center([0, 0]); + expect(map.extent()[0][0]).to.be.closeTo(-17.5, 0.5); expect(map.extent()[1][0]).to.be.closeTo(17.5, 0.5); - expect(map.extent([10, 1], [30, 1])); + expect(map.extent([[10, 1], [30, 1]])); expect(map.extent()[0][0]).to.be.closeTo(10, 0.1); expect(map.extent()[1][0]).to.be.closeTo(30, 0.1); - expect(map.extent([-1, -20], [1, -40])); - expect(map.extent()[0][1]).to.be.closeTo(-20, 0.1); - expect(map.extent()[1][1]).to.be.closeTo(-40, 0.1); + expect(map.extent([[-1, -40], [1, -20]])); + expect(map.extent()[0][1]).to.be.closeTo(-40, 1); + expect(map.extent()[1][1]).to.be.closeTo(-20, 1); }); }); From 9abe3af312554470a0d79a8f75e3f1587a08cb7d Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 14:14:31 -0800 Subject: [PATCH 20/33] Fix extent and difference rendering for multi polygons --- js/id/graph/relation.js | 10 ++++++++-- js/id/renderer/map.js | 10 ++++++++-- test/spec/graph/relation.js | 9 ++++++++- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/js/id/graph/relation.js b/js/id/graph/relation.js index 4788ad0d1..490b98ac7 100644 --- a/js/id/graph/relation.js +++ b/js/id/graph/relation.js @@ -2,8 +2,14 @@ iD.Relation = iD.Entity.extend({ type: "relation", members: [], - extent: function() { - return [[NaN, NaN], [NaN, NaN]]; + extent: function(resolver) { + return resolver.transient(this, 'extent', function() { + var extent = iD.geo.Extent(); + for (var i = 0, l = this.members.length; i < l; i++) { + extent = extent.extend(resolver.entity(this.members[i].id).extent(resolver)); + } + return extent; + }); }, geometry: function() { diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 59f46f0ee..a21a8a2d0 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -69,8 +69,7 @@ iD.Map = function() { all = graph.intersects(extent); filter = d3.functor(true); } else { - var only = {}, - filterOnly = {}; + var only = {}; for (var j = 0; j < difference.length; j++) { var id = difference[j], entity = graph.fetch(id); @@ -86,6 +85,13 @@ iD.Map = function() { only[parents[k].id] = graph.fetch(parents[k].id); } } + parents = graph.parentRelations(only[id]); + for (k = 0; k < parents.length; k++) { + // Don't re-fetch parents + if (only[parents[k].id] === undefined) { + only[parents[k].id] = parents[k].id; + } + } } } } diff --git a/test/spec/graph/relation.js b/test/spec/graph/relation.js index 26a1a2022..7395521c0 100644 --- a/test/spec/graph/relation.js +++ b/test/spec/graph/relation.js @@ -36,7 +36,14 @@ describe('iD.Relation', function () { }); describe("#extent", function () { - it("returns the minimal extent containing the extents of all members"); + it("returns the minimal extent containing the extents of all members", function () { + var a = iD.Node({loc: [0, 0]}), + b = iD.Node({loc: [5, 10]}), + r = iD.Relation({members: [{id: a.id}, {id: b.id}]}), + graph = iD.Graph([a, b, r]); + + expect(r.extent(graph)).to.eql([[0, 0], [5, 10]]) + }); }); describe("#multipolygon", function () { From 8c051dc80182d84167bc55668f639d5e98afcff8 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 18:05:48 -0500 Subject: [PATCH 21/33] Add centerZoom to center and zoom the map with one redraw. Fixes #416 Also throttles redraw and make hash track the map faster. --- js/id/id.js | 3 +-- js/id/renderer/hash.js | 12 ++++++----- js/id/renderer/map.js | 46 +++++++++++++++++++++++++++--------------- 3 files changed, 38 insertions(+), 23 deletions(-) diff --git a/js/id/id.js b/js/id/id.js index 828aa45f9..afcdfc3e4 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -209,8 +209,7 @@ window.iD = function(container) { var hash = iD.Hash().map(map); if (!hash.hadHash) { - map.zoom(20) - .center([-77.02271,38.90085]); + map.centerZoom([-77.02271, 38.90085], 20); } d3.select('.user-container').call(iD.ui.userpanel(connection) diff --git a/js/id/renderer/hash.js b/js/id/renderer/hash.js index 05691ef59..bb454811b 100644 --- a/js/id/renderer/hash.js +++ b/js/id/renderer/hash.js @@ -1,5 +1,5 @@ iD.Hash = function() { - var hash = {}, + var hash = { hadHash: false }, s0, // cached location.hash lat = 90 - 1e-8, // allowable latitude range map; @@ -10,8 +10,9 @@ iD.Hash = function() { if (args.length < 3 || args.some(isNaN)) { return true; // replace bogus hash } else { - map.zoom(args[0]) - .center([args[2], Math.min(lat, Math.max(-lat, args[1]))]); + map.centerZoom([args[2], + Math.min(lat, Math.max(-lat, args[1]))], + args[0]); } }; @@ -27,12 +28,13 @@ iD.Hash = function() { var move = _.throttle(function() { var s1 = formatter(map); if (s0 !== s1) location.replace(s0 = s1); // don't recenter the map! - }, 1000); + }, 100); function hashchange() { if (location.hash === s0) return; // ignore spurious hashchange events - if (parser(map, (s0 = location.hash).substring(2))) + if (parser(map, (s0 = location.hash).substring(2))) { move(); // replace bogus hash + } } hash.map = function(x) { diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index a21a8a2d0..75043a1f8 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -161,7 +161,7 @@ iD.Map = function() { redraw(); } - function redraw(difference) { + var redraw = _.throttle(function(difference) { dispatch.move(map); surface.attr('data-zoom', ~~map.zoom()); tilegroup.call(background); @@ -172,7 +172,7 @@ iD.Map = function() { editOff(); } return map; - } + }, 10); function pointLocation(p) { var translate = projection.translate(), @@ -207,10 +207,7 @@ iD.Map = function() { return map; }; - map.zoom = function(z) { - if (!arguments.length) { - return Math.max(Math.log(projection.scale()) / Math.LN2 - 8, 0); - } + function setZoom(z) { var scale = 256 * Math.pow(2, z), center = pxCenter(), l = pointLocation(center); @@ -223,8 +220,17 @@ iD.Map = function() { t[1] += center[1] - l[1]; projection.translate(t); zoom.translate(projection.translate()); - return redraw(); - }; + } + + function setCenter(loc) { + var t = projection.translate(), + c = pxCenter(), + ll = projection(loc); + projection.translate([ + t[0] - ll[0] + c[0], + t[1] - ll[1] + c[1]]); + zoom.translate(projection.translate()); + } map.size = function(_) { if (!arguments.length) return dimensions; @@ -244,17 +250,25 @@ iD.Map = function() { if (!arguments.length) { return projection.invert(pxCenter()); } else { - var t = projection.translate(), - c = pxCenter(), - ll = projection(loc); - projection.translate([ - t[0] - ll[0] + c[0], - t[1] - ll[1] + c[1]]); - zoom.translate(projection.translate()); + setCenter(loc); return redraw(); } }; + map.zoom = function(z) { + if (!arguments.length) { + return Math.max(Math.log(projection.scale()) / Math.LN2 - 8, 0); + } + setZoom(z); + return redraw(); + }; + + map.centerZoom = function(loc, z) { + setCenter(loc); + setZoom(z); + return redraw(); + }; + map.centerEase = function(loc) { var from = map.center().slice(), t = 0; d3.timer(function() { @@ -279,7 +293,7 @@ iD.Map = function() { vZoomDiff = Math.log(Math.abs(vFactor)) / Math.LN2, newZoom = map.zoom() - Math.max(hZoomDiff, vZoomDiff); - map.zoom(newZoom).center(extent.center()); + map.centerZoom(extent.center(), newZoom); } }; From 7df1a00f3853d36516155abaf5df3a34dd622b3f Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 18:13:16 -0500 Subject: [PATCH 22/33] Fix hash tests --- test/spec/renderer/hash.js | 32 ++++++++------------------------ 1 file changed, 8 insertions(+), 24 deletions(-) diff --git a/test/spec/renderer/hash.js b/test/spec/renderer/hash.js index 64945683d..44d3c64a2 100644 --- a/test/spec/renderer/hash.js +++ b/test/spec/renderer/hash.js @@ -7,7 +7,8 @@ describe("hash", function () { on: function () { return map; }, off: function () { return map; }, zoom: function () { return arguments.length ? map : 0; }, - center: function () { return arguments.length ? map : [0, 0] } + center: function () { return arguments.length ? map : [0, 0] }, + centerZoom: function () { return arguments.length ? map : [0, 0] } }; }); @@ -28,18 +29,11 @@ describe("hash", function () { expect(hash.hadHash).to.be.true; }); - it("zooms map to requested level", function () { + it("centerZooms map to requested level", function () { location.hash = "?map=20.00/38.87952/-77.02405"; - sinon.spy(map, 'zoom'); + sinon.spy(map, 'centerZoom'); hash.map(map); - expect(map.zoom).to.have.been.calledWith(20.0); - }); - - it("centers map at requested coordinates", function () { - location.hash = "?map=20.00/38.87952/-77.02405"; - sinon.spy(map, 'center'); - hash.map(map); - expect(map.center).to.have.been.calledWith([-77.02405, 38.87952]); + expect(map.centerZoom).to.have.been.calledWith([-77.02405,38.87952], 20.0); }); it("binds the map's move event", function () { @@ -66,23 +60,13 @@ describe("hash", function () { d3.select(window).one("hashchange", fn); } - it("zooms map to requested level", function (done) { + it("centerZooms map at requested coordinates", function (done) { onhashchange(function () { - expect(map.zoom).to.have.been.calledWith(20.0); + expect(map.centerZoom).to.have.been.calledWith([-77.02405,38.87952], 20.0); done(); }); - sinon.spy(map, 'zoom'); - location.hash = "#?map=20.00/38.87952/-77.02405"; - }); - - it("centers map at requested coordinates", function (done) { - onhashchange(function () { - expect(map.center).to.have.been.calledWith([-77.02405, 38.87952]); - done(); - }); - - sinon.spy(map, 'center'); + sinon.spy(map, 'centerZoom'); location.hash = "#?map=20.00/38.87952/-77.02405"; }); }); From 3eaf4a46e03fb7a1ca2328169d697daac014d8d0 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 15:12:48 -0800 Subject: [PATCH 23/33] Add CSS classes for relation memberships An entity that is a member of a relation will have the classes `member`, `member-role-`, and `member-type-`. The first use of these classes is to avoid filling multipolygon member areas. --- css/map.css | 4 +++ index.html | 1 + js/id/svg/areas.js | 3 +- js/id/svg/lines.js | 40 ++++++++++++------------ js/id/svg/member_classes.js | 32 +++++++++++++++++++ js/id/svg/multipolygons.js | 3 +- js/id/svg/points.js | 3 +- js/id/svg/vertices.js | 1 + test/index.html | 3 ++ test/index_packaged.html | 2 ++ test/spec/svg/areas.js | 12 ++++++++ test/spec/svg/member_classes.js | 54 +++++++++++++++++++++++++++++++++ 12 files changed, 135 insertions(+), 23 deletions(-) create mode 100644 js/id/svg/member_classes.js create mode 100644 test/spec/svg/member_classes.js diff --git a/css/map.css b/css/map.css index fc54d7499..bf600b18d 100644 --- a/css/map.css +++ b/css/map.css @@ -154,6 +154,10 @@ path.multipolygon { fill-rule: evenodd; } +path.area.member-type-multipolygon { + fill: none; +} + path.area.selected { stroke-width:4 !important; } diff --git a/index.html b/index.html index 64d839d93..16dce5779 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,7 @@ + diff --git a/js/id/svg/areas.js b/js/id/svg/areas.js index e77fe8a4d..5a3c31288 100644 --- a/js/id/svg/areas.js +++ b/js/id/svg/areas.js @@ -52,7 +52,8 @@ iD.svg.Areas = function(projection) { paths .order() .attr('d', lineString) - .call(iD.svg.TagClasses()); + .call(iD.svg.TagClasses()) + .call(iD.svg.MemberClasses(graph)); paths.exit() .remove(); diff --git a/js/id/svg/lines.js b/js/id/svg/lines.js index 167a9e75e..375a88f05 100644 --- a/js/id/svg/lines.js +++ b/js/id/svg/lines.js @@ -33,27 +33,27 @@ iD.svg.Lines = function(projection) { return as - bs; } - function drawPaths(group, lines, filter, classes, lineString) { - var paths = group.selectAll('path') - .filter(filter) - .data(lines, iD.Entity.key); - - paths.enter() - .append('path') - .attr('class', classes); - - paths - .order() - .attr('d', lineString) - .call(iD.svg.TagClasses()); - - paths.exit() - .remove(); - - return paths; - } - return function drawLines(surface, graph, entities, filter) { + function drawPaths(group, lines, filter, classes, lineString) { + var paths = group.selectAll('path') + .filter(filter) + .data(lines, iD.Entity.key); + + paths.enter() + .append('path') + .attr('class', classes); + + paths + .order() + .attr('d', lineString) + .call(iD.svg.TagClasses()) + .call(iD.svg.MemberClasses(graph)); + + paths.exit() + .remove(); + + return paths; + } if (!alength) { var arrow = surface.append('text').text(arrowtext); diff --git a/js/id/svg/member_classes.js b/js/id/svg/member_classes.js new file mode 100644 index 000000000..b675288c3 --- /dev/null +++ b/js/id/svg/member_classes.js @@ -0,0 +1,32 @@ +iD.svg.MemberClasses = function(graph) { + var tagClassRe = /^member-?/; + + return function memberClassesSelection(selection) { + selection.each(function memberClassesEach(d, i) { + var classes, value = this.className; + + if (value.baseVal !== undefined) value = value.baseVal; + + classes = value.trim().split(/\s+/).filter(function(name) { + return name.length && !tagClassRe.test(name); + }).join(' '); + + var relations = graph.parentRelations(d); + + if (relations.length) { + classes += ' member'; + } + + relations.forEach(function (relation) { + classes += ' member-type-' + relation.tags.type; + classes += ' member-role-' + _.find(relation.members, function (member) { return member.id == d.id; }).role; + }); + + classes = classes.trim(); + + if (classes !== value) { + d3.select(this).attr('class', classes); + } + }); + }; +}; diff --git a/js/id/svg/multipolygons.js b/js/id/svg/multipolygons.js index bad07ff41..6330cf685 100644 --- a/js/id/svg/multipolygons.js +++ b/js/id/svg/multipolygons.js @@ -40,7 +40,8 @@ iD.svg.Multipolygons = function(projection) { paths .order() .attr('d', lineString) - .call(iD.svg.TagClasses()); + .call(iD.svg.TagClasses()) + .call(iD.svg.MemberClasses(graph)); paths.exit() .remove(); diff --git a/js/id/svg/points.js b/js/id/svg/points.js index 37c4bbf91..5862a5cb9 100644 --- a/js/id/svg/points.js +++ b/js/id/svg/points.js @@ -45,7 +45,8 @@ iD.svg.Points = function(projection) { .attr('transform', 'translate(-8, -8)'); groups.attr('transform', iD.svg.PointTransform(projection)) - .call(iD.svg.TagClasses()); + .call(iD.svg.TagClasses()) + .call(iD.svg.MemberClasses(graph)); // Selecting the following implicitly // sets the data (point entity) on the element diff --git a/js/id/svg/vertices.js b/js/id/svg/vertices.js index ff775fa3e..ce81dface 100644 --- a/js/id/svg/vertices.js +++ b/js/id/svg/vertices.js @@ -31,6 +31,7 @@ iD.svg.Vertices = function(projection) { groups.attr('transform', iD.svg.PointTransform(projection)) .call(iD.svg.TagClasses()) + .call(iD.svg.MemberClasses(graph)) .classed('shared', function(entity) { return graph.parentWays(entity).length > 1; }); // Selecting the following implicitly diff --git a/test/index.html b/test/index.html index 7f63be2a3..0777751d5 100644 --- a/test/index.html +++ b/test/index.html @@ -45,6 +45,7 @@ + @@ -159,6 +160,8 @@ + + diff --git a/test/index_packaged.html b/test/index_packaged.html index 042a0227e..070a2666b 100644 --- a/test/index_packaged.html +++ b/test/index_packaged.html @@ -64,6 +64,8 @@ + + diff --git a/test/spec/svg/areas.js b/test/spec/svg/areas.js index 112e25d03..4f984540a 100644 --- a/test/spec/svg/areas.js +++ b/test/spec/svg/areas.js @@ -28,6 +28,18 @@ describe("iD.svg.Areas", function () { expect(surface.select('.area')).to.be.classed('tag-building-yes'); }); + it("adds member classes", function () { + var area = iD.Way({tags: {area: 'yes'}}), + relation = iD.Relation({members: [{id: area.id, role: 'outer'}], tags: {type: 'multipolygon'}}), + graph = iD.Graph([area, relation]); + + surface.call(iD.svg.Areas(projection), graph, [area], filter); + + expect(surface.select('.area')).to.be.classed('member'); + expect(surface.select('.area')).to.be.classed('member-role-outer'); + expect(surface.select('.area')).to.be.classed('member-type-multipolygon'); + }); + it("preserves non-area paths", function () { var area = iD.Way({tags: {area: 'yes'}}), graph = iD.Graph([area]); diff --git a/test/spec/svg/member_classes.js b/test/spec/svg/member_classes.js new file mode 100644 index 000000000..651ba2342 --- /dev/null +++ b/test/spec/svg/member_classes.js @@ -0,0 +1,54 @@ +describe("iD.svg.MemberClasses", function () { + var selection; + + beforeEach(function () { + selection = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'g')); + }); + + it("adds no classes to elements that aren't a member of any relations", function() { + var node = iD.Node(), + graph = iD.Graph([node]); + + selection + .datum(node) + .call(iD.svg.MemberClasses(graph)); + + expect(selection.attr('class')).to.equal(null); + }); + + it("adds tags for member, role, and type", function() { + var node = iD.Node(), + relation = iD.Relation({members: [{id: node.id, role: 'r'}], tags: {type: 't'}}), + graph = iD.Graph([node, relation]); + + selection + .datum(node) + .call(iD.svg.MemberClasses(graph)); + + expect(selection.attr('class')).to.equal('member member-type-t member-role-r'); + }); + + it('removes classes for tags that are no longer present', function() { + var node = iD.Entity(), + graph = iD.Graph([node]); + + selection + .attr('class', 'member member-type-t member-role-r') + .datum(node) + .call(iD.svg.MemberClasses(graph)); + + expect(selection.attr('class')).to.equal(''); + }); + + it("preserves existing non-'member-'-prefixed classes", function() { + var node = iD.Entity(), + graph = iD.Graph([node]); + + selection + .attr('class', 'selected') + .datum(node) + .call(iD.svg.MemberClasses(graph)); + + expect(selection.attr('class')).to.equal('selected'); + }); +}); From 2c6e244fb07b09b65ff64cc8e139cc0223e006bc Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 15:13:01 -0800 Subject: [PATCH 24/33] Add tests for iD.svg.Lines --- test/spec/svg/lines.js | 54 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 test/spec/svg/lines.js diff --git a/test/spec/svg/lines.js b/test/spec/svg/lines.js new file mode 100644 index 000000000..61c3229a9 --- /dev/null +++ b/test/spec/svg/lines.js @@ -0,0 +1,54 @@ +describe("iD.svg.Lines", function () { + var surface, + projection = Object, + filter = d3.functor(true); + + beforeEach(function () { + surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) + .call(iD.svg.Surface()); + }); + + it("adds way and area classes", function () { + var line = iD.Way(), + graph = iD.Graph([line]); + + surface.call(iD.svg.Lines(projection), graph, [line], filter); + + expect(surface.select('path')).to.be.classed('way'); + expect(surface.select('path')).to.be.classed('line'); + }); + + it("adds tag classes", function () { + var line = iD.Way({tags: {highway: 'residential'}}), + graph = iD.Graph([line]); + + surface.call(iD.svg.Lines(projection), graph, [line], filter); + + expect(surface.select('.line')).to.be.classed('tag-highway'); + expect(surface.select('.line')).to.be.classed('tag-highway-residential'); + }); + + it("adds member classes", function () { + var line = iD.Way(), + relation = iD.Relation({members: [{id: line.id}], tags: {type: 'route'}}), + graph = iD.Graph([line, relation]); + + surface.call(iD.svg.Lines(projection), graph, [line], filter); + + expect(surface.select('.line')).to.be.classed('member'); + expect(surface.select('.line')).to.be.classed('member-type-route'); + }); + + it("preserves non-line paths", function () { + var line = iD.Way(), + graph = iD.Graph([line]); + + surface.select('.layer-fill') + .append('path') + .attr('class', 'other'); + + surface.call(iD.svg.Lines(projection), graph, [line], filter); + + expect(surface.selectAll('.other')[0].length).to.equal(1); + }); +}); From 1c21b2a38144b2857ca39fa9e3776f4406531d40 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 17 Jan 2013 18:20:24 -0500 Subject: [PATCH 25/33] Fix up bbox extent link --- js/id/ui/contributors.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/id/ui/contributors.js b/js/id/ui/contributors.js index 3dc5a4014..c0036a677 100644 --- a/js/id/ui/contributors.js +++ b/js/id/ui/contributors.js @@ -39,8 +39,8 @@ iD.ui.contributors = function(map) { .attr('href', function() { var ext = map.extent(); return 'http://www.openstreetmap.org/browse/changesets?bbox=' + [ - ext[0][0], ext[1][1], - ext[1][0], ext[0][1]]; + ext[0][0], ext[0][1], + ext[1][0], ext[1][1]]; }) .text(' and ' + (u.length - limit) + ' others'); } From d2921caf6cf64fbeb2152aec4cff895a2cfaea9c Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 15:57:15 -0800 Subject: [PATCH 26/33] Fix build --- Makefile | 1 + 1 file changed, 1 insertion(+) diff --git a/Makefile b/Makefile index 657915e1e..788eef43e 100644 --- a/Makefile +++ b/Makefile @@ -17,6 +17,7 @@ all: \ js/lib/d3.keybinding.js \ js/lib/d3.one.js \ js/lib/d3.size.js \ + js/lib/d3.tail.js \ js/lib/d3.trigger.js \ js/lib/d3.typeahead.js \ js/lib/jxon.js \ From e933b9d088799bfe63d38c2cb72cccf3f441d818 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 16:31:45 -0800 Subject: [PATCH 27/33] Include parent relations recursively Fixes drawing when dragging a multipolygon vertex. --- js/id/renderer/map.js | 44 +++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 75043a1f8..729d37936 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -70,31 +70,31 @@ iD.Map = function() { filter = d3.functor(true); } else { var only = {}; - for (var j = 0; j < difference.length; j++) { - var id = difference[j], - entity = graph.fetch(id); - // Even if the entity is false (deleted), it needs to be - // removed from the surface - only[id] = entity; - if (entity && entity.intersects(extent, graph)) { - if (only[id].type === 'node') { - var parents = graph.parentWays(only[id]); - for (var k = 0; k < parents.length; k++) { - // Don't re-fetch parents - if (only[parents[k].id] === undefined) { - only[parents[k].id] = graph.fetch(parents[k].id); - } - } - parents = graph.parentRelations(only[id]); - for (k = 0; k < parents.length; k++) { - // Don't re-fetch parents - if (only[parents[k].id] === undefined) { - only[parents[k].id] = parents[k].id; - } - } + + function addParents(parents) { + for (var i = 0; i < parents.length; i++) { + var parent = parents[i]; + if (only[parent.id] === undefined) { + only[parent.id] = graph.fetch(parent.id); + addParents(graph.parentRelations(parent)); } } } + + for (var j = 0; j < difference.length; j++) { + var id = difference[j], + entity = graph.fetch(id); + + // Even if the entity is false (deleted), it needs to be + // removed from the surface + only[id] = entity; + + if (entity && entity.intersects(extent, graph)) { + addParents(graph.parentWays(only[id])); + addParents(graph.parentRelations(only[id])); + } + } + all = _.compact(_.values(only)); filter = function(d) { return d.midpoint ? d.way in only : d.id in only; }; } From d40c6451708d8f60651fddc4a022c19f860459c7 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 16:32:50 -0800 Subject: [PATCH 28/33] Fix packaged tests --- test/index_packaged.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/test/index_packaged.html b/test/index_packaged.html index 070a2666b..630ed1088 100644 --- a/test/index_packaged.html +++ b/test/index_packaged.html @@ -20,7 +20,10 @@ From bf251dce150e6376a5768241d99044799fd654fb Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 17:20:22 -0800 Subject: [PATCH 29/33] Handle incomplete relations --- js/id/graph/relation.js | 14 ++++++++------ test/spec/graph/relation.js | 21 +++++++++++++++++++++ 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/js/id/graph/relation.js b/js/id/graph/relation.js index 490b98ac7..7d8a9aa89 100644 --- a/js/id/graph/relation.js +++ b/js/id/graph/relation.js @@ -4,11 +4,13 @@ iD.Relation = iD.Entity.extend({ extent: function(resolver) { return resolver.transient(this, 'extent', function() { - var extent = iD.geo.Extent(); - for (var i = 0, l = this.members.length; i < l; i++) { - extent = extent.extend(resolver.entity(this.members[i].id).extent(resolver)); - } - return extent; + return this.members.reduce(function (extent, member) { + if (member = resolver.entity(member.id)) { + return extent.extend(member.extent(resolver)) + } else { + return extent; + } + }, iD.geo.Extent()); }); }, @@ -28,7 +30,7 @@ iD.Relation = iD.Entity.extend({ // multipolygon: function(resolver) { var members = this.members - .filter(function (m) { return m.type === 'way'; }) + .filter(function (m) { return m.type === 'way' && resolver.entity(m.id); }) .map(function (m) { return { role: m.role || 'outer', id: m.id, nodes: resolver.fetch(m.id).nodes }; }); function join(ways) { diff --git a/test/spec/graph/relation.js b/test/spec/graph/relation.js index 7395521c0..8880fc98c 100644 --- a/test/spec/graph/relation.js +++ b/test/spec/graph/relation.js @@ -44,6 +44,15 @@ describe('iD.Relation', function () { expect(r.extent(graph)).to.eql([[0, 0], [5, 10]]) }); + + it("returns the known extent of incomplete relations", function () { + var a = iD.Node({loc: [0, 0]}), + b = iD.Node({loc: [5, 10]}), + r = iD.Relation({members: [{id: a.id}, {id: b.id}]}), + graph = iD.Graph([a, r]); + + expect(r.extent(graph)).to.eql([[0, 0], [0, 0]]) + }); }); describe("#multipolygon", function () { @@ -239,5 +248,17 @@ describe('iD.Relation', function () { expect(r.multipolygon(graph)).to.eql([[[a, b, c, a], [d, e, f, d]], [[g, h, i, g]]]); }); + + specify("incomplete relation", function () { + var a = iD.Node(), + b = iD.Node(), + c = iD.Node(), + w1 = iD.Way({nodes: [a.id, b.id, c.id]}), + w2 = iD.Way(), + r = iD.Relation({members: [{id: w2.id, type: 'way'}, {id: w1.id, type: 'way'}]}), + g = iD.Graph([a, b, c, w1, r]); + + expect(r.multipolygon(g)).to.eql([[[a, b, c]]]); + }); }); }); From a8cd845831f970ad129b164a065e718cc55f4e3f Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 20:50:58 -0800 Subject: [PATCH 30/33] Use area cursors for multipolygons for now --- css/map.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/css/map.css b/css/map.css index bf600b18d..5977887a6 100644 --- a/css/map.css +++ b/css/map.css @@ -326,7 +326,9 @@ text.tag-oneway { } .mode-select .area, -.mode-browse .area { +.mode-browse .area, +.mode-select .multipolygon, +.mode-browse .multipolygon { cursor: url(../img/cursor-select-area.png), pointer; } @@ -339,6 +341,7 @@ text.tag-oneway { .vertex:active, .line:active, .area:active, +.multipolygon:active, .midpoint:active, .mode-select .selected { cursor: url(../img/cursor-select-acting.png), pointer; From c5afec0f986b0b8151079e76130aecdbe8ff3370 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 21:03:25 -0800 Subject: [PATCH 31/33] Add leisure=park rendering --- css/map.css | 6 ++++-- js/id/svg/tag_classes.js | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/css/map.css b/css/map.css index 5977887a6..bc2ff5069 100644 --- a/css/map.css +++ b/css/map.css @@ -186,14 +186,16 @@ path.area.tag-landuse, path.area.tag-natural-wood, path.area.tag-natural-tree, path.area.tag-natural-grassland, +path.area.tag-leisure-park, path.multipolygon.tag-landuse, path.multipolygon.tag-natural-wood, path.multipolygon.tag-natural-tree, -path.multipolygon.tag-natural-grassland { +path.multipolygon.tag-natural-grassland, +path.multipolygon.tag-leisure-park { stroke: #006B34; stroke-width: 1; fill: #189E59; - fill-opacity:0.2; + fill-opacity: 0.2; } /* highways */ diff --git a/js/id/svg/tag_classes.js b/js/id/svg/tag_classes.js index 0295ca7e6..a7660e1f5 100644 --- a/js/id/svg/tag_classes.js +++ b/js/id/svg/tag_classes.js @@ -1,7 +1,8 @@ iD.svg.TagClasses = function() { var keys = iD.util.trueObj([ 'highway', 'railway', 'motorway', 'amenity', 'natural', - 'landuse', 'building', 'oneway', 'bridge', 'boundary' + 'landuse', 'building', 'oneway', 'bridge', 'boundary', + 'leisure' ]), tagClassRe = /^tag-/; return function tagClassesSelection(selection) { From abb5d83d9c0ece078d214887e819c47f9d078f77 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 17 Jan 2013 21:10:30 -0800 Subject: [PATCH 32/33] Add amenity=parking rendering --- css/map.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/css/map.css b/css/map.css index bc2ff5069..479ca6454 100644 --- a/css/map.css +++ b/css/map.css @@ -198,6 +198,13 @@ path.multipolygon.tag-leisure-park { fill-opacity: 0.2; } +path.area.tag-amenity-parking, +path.multipolygon.tag-amenity-parking { + stroke: #beb267; + stroke-width: 1; + fill: #edecc0; +} + /* highways */ path.stroke.tag-highway-residential { stroke:#fff; From faecda854eadb14f5615904fa02fa6367170a69d Mon Sep 17 00:00:00 2001 From: Ansis Brammanis Date: Fri, 18 Jan 2013 13:04:42 -0500 Subject: [PATCH 33/33] Improve inspector-forced panning --- js/id/modes/select.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/js/id/modes/select.js b/js/id/modes/select.js index 4d567fd59..62b309e29 100644 --- a/js/id/modes/select.js +++ b/js/id/modes/select.js @@ -57,14 +57,13 @@ iD.modes.Select = function (entity) { // of the inspector var inspector_size = d3.select('.inspector-wrap').size(), map_size = mode.map.size(), - entity_extent = entity.extent(mode.history.graph()), - left_edge = map_size[0] - inspector_size[0], - left = mode.map.projection(entity_extent[0])[0], - right = mode.map.projection(entity_extent[1])[0]; + offset = 50, + shift_left = d3.event.x - map_size[0] + inspector_size[0] + offset, + center = (map_size[0] / 2) + shift_left + offset; - if (left > left_edge && - right > left_edge) mode.map.centerEase( - mode.map.projection.invert([(window.innerWidth), d3.event.y])); + if (shift_left > 0 && inspector_size[1] > d3.event.y) { + mode.map.centerEase(mode.map.projection.invert([center, map_size[1]/2])); + } inspector .on('changeTags', changeTags)