diff --git a/js/id/behavior/lasso.js b/js/id/behavior/lasso.js index 355f14059..648545a9d 100644 --- a/js/id/behavior/lasso.js +++ b/js/id/behavior/lasso.js @@ -20,11 +20,11 @@ iD.behavior.Lasso = function(context) { function mousemove() { if (!lasso) { - lasso = iD.ui.Lasso(context).a(mouse); + lasso = iD.ui.Lasso(context).p(mouse); context.surface().call(lasso); } - lasso.b(context.mouse()); + lasso.p(context.mouse()); } function normalize(a, b) { @@ -42,13 +42,14 @@ iD.behavior.Lasso = function(context) { var graph = context.graph(), extent = iD.geo.Extent( - normalize(context.projection.invert(lasso.a()), - context.projection.invert(lasso.b()))); + normalize(context.projection.invert(lasso.getBounds()[0]), + context.projection.invert(lasso.getBounds()[1]))); lasso.close(); var selected = context.intersects(extent).filter(function(entity) { return entity.type === 'node' && + iD.geo.pointInPolygon(context.projection(entity.loc), lasso.coordinates) && !context.features().isHidden(entity, graph, entity.geometry(graph)); }); diff --git a/js/id/ui/lasso.js b/js/id/ui/lasso.js index 3bc50dee7..3d3576a93 100644 --- a/js/id/ui/lasso.js +++ b/js/id/ui/lasso.js @@ -1,8 +1,9 @@ iD.ui.Lasso = function(context) { - var box, group, - a = [0, 0], - b = [0, 0]; + var group, path, + polygon, p; + + lasso.coordinates = []; function lasso(selection) { @@ -11,7 +12,7 @@ iD.ui.Lasso = function(context) { group = selection.append('g') .attr('class', 'lasso hide'); - box = group.append('rect') + polygon = group.append('path') .attr('class', 'lasso-box'); group.call(iD.ui.Toggle(true)); @@ -20,36 +21,37 @@ iD.ui.Lasso = function(context) { // top-left function topLeft(d) { - return 'translate(' + Math.min(d[0][0], d[1][0]) + ',' + Math.min(d[0][1], d[1][1]) + ')'; + return path = (path ? (path + ' L ') : 'M ') + d[0] + ' ' + d[1]; } - function width(d) { return Math.abs(d[0][0] - d[1][0]); } - function height(d) { return Math.abs(d[0][1] - d[1][1]); } - function draw() { - if (box) { - box.data([[a, b]]) - .attr('transform', topLeft) - .attr('width', width) - .attr('height', height); + if (polygon) { + polygon.data([p]) + .attr('d', topLeft); } } - lasso.a = function(_) { - if (!arguments.length) return a; - a = _; + lasso.getBounds = function () { + var x = lasso.coordinates.map(function(i) {return i[0];}); + var y = lasso.coordinates.map(function(i) {return i[1];}); + return [[Math.min.apply(null, x), Math.min.apply(null, y)], + [Math.max.apply(null, x), Math.max.apply(null, y)]]; + }; + + lasso.p = function(_) { + if (!arguments.length) return p; + p = _; + lasso.coordinates.push(p); draw(); return lasso; }; - lasso.b = function(_) { - if (!arguments.length) return b; - b = _; - draw(); - return lasso; - }; lasso.close = function() { + + polygon.data([p]) + .attr('d', path + ' Z'); + if (group) { group.call(iD.ui.Toggle(false, function() { d3.select(this).remove();