diff --git a/js/id/behavior/drag.js b/js/id/behavior/drag.js index d88e8a44a..cd6f607bf 100644 --- a/js/id/behavior/drag.js +++ b/js/id/behavior/drag.js @@ -14,7 +14,7 @@ * Delegation is supported via the `delegate` function. */ -iD.behavior.drag = function () { +iD.behavior.drag = function() { function d3_eventCancel() { d3.event.stopPropagation(); d3.event.preventDefault(); @@ -50,21 +50,21 @@ iD.behavior.drag = function () { moved = 0; var w = d3.select(window) - .on(touchId != null ? "touchmove.drag-" + touchId : "mousemove.drag", dragmove) - .on(touchId != null ? "touchend.drag-" + touchId : "mouseup.drag", dragend, true); + .on(touchId !== null ? "touchmove.drag-" + touchId : "mousemove.drag", dragmove) + .on(touchId !== null ? "touchend.drag-" + touchId : "mouseup.drag", dragend, true); if (origin) { offset = origin.apply(target, arguments); - offset = [ offset[0] - origin_[0], offset[1] - origin_[1] ]; + offset = [offset[0] - origin_[0], offset[1] - origin_[1]]; } else { - offset = [ 0, 0 ]; + offset = [0, 0]; } - if (touchId == null) d3_eventCancel(); + if (touchId === null) d3_eventCancel(); function point() { var p = target.parentNode; - return touchId != null ? d3.touches(p).filter(function (p) { + return touchId !== null ? d3.touches(p).filter(function(p) { return p.identifier === touchId; })[0] : d3.mouse(p); } @@ -103,8 +103,8 @@ iD.behavior.drag = function () { if (d3.event.target === eventTarget) w.on("click.drag", click, true); } - w.on(touchId != null ? "touchmove.drag-" + touchId : "mousemove.drag", null) - .on(touchId != null ? "touchend.drag-" + touchId : "mouseup.drag", null); + w.on(touchId !== null ? "touchmove.drag-" + touchId : "mousemove.drag", null) + .on(touchId !== null ? "touchend.drag-" + touchId : "mouseup.drag", null); } function click() { diff --git a/js/id/behavior/draw.js b/js/id/behavior/draw.js index 656eb7988..078e257b2 100644 --- a/js/id/behavior/draw.js +++ b/js/id/behavior/draw.js @@ -1,24 +1,39 @@ iD.behavior.Draw = function(context) { - var event = d3.dispatch('move', 'click', 'clickWay', 'clickNode', 'undo', 'cancel', 'finish'), + var event = d3.dispatch('move', 'click', 'clickWay', + 'clickNode', 'undo', 'cancel', 'finish'), keybinding = d3.keybinding('draw'), - hover = iD.behavior.Hover(); + hover = iD.behavior.Hover(), + tolerance = 8; function datum() { - if (d3.event.altKey) { - return {}; - } else { - return d3.event.target.__data__ || {}; - } + if (d3.event.altKey) return {}; + else return d3.event.target.__data__ || {}; } function mousedown() { - var selection = d3.select(this); - selection.on('mousemove.draw', null); - d3.select(window) - .on('mouseup.draw', function() { - selection.on('mousemove.draw', mousemove); + function point() { + var p = target.node().parentNode; + return touchId !== null ? d3.touches(p).filter(function(p) { + return p.identifier === touchId; + })[0] : d3.mouse(p); + } + + var target = d3.select(this), + touchId = d3.event.touches ? d3.event.changedTouches[0].identifier : null, + time = +new Date(), + pos = point(); + + target.on('mousemove.draw', null); + + d3.select(window).on('mouseup.draw', function() { + target.on('mousemove.draw', mousemove); + if (iD.geo.dist(pos, point()) < tolerance || + (+new Date() - time) < 500) { + click(); + } }); + } function mousemove() { @@ -77,8 +92,7 @@ iD.behavior.Draw = function(context) { selection .on('mousedown.draw', mousedown) - .on('mousemove.draw', mousemove) - .on('click.draw', click); + .on('mousemove.draw', mousemove); d3.select(document) .call(keybinding) @@ -93,8 +107,7 @@ iD.behavior.Draw = function(context) { selection .on('mousedown.draw', null) - .on('mousemove.draw', null) - .on('click.draw', null); + .on('mousemove.draw', null); d3.select(window).on('mouseup.draw', null); diff --git a/js/id/behavior/select.js b/js/id/behavior/select.js index b5276a4d0..f7a388396 100644 --- a/js/id/behavior/select.js +++ b/js/id/behavior/select.js @@ -1,4 +1,5 @@ iD.behavior.Select = function(context) { + function click() { var datum = d3.select(d3.event.target).datum(); if (datum instanceof iD.Entity) {