From 67632d638f79fee02bf9abb221a87b7486b53393 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Tue, 5 Feb 2013 15:27:02 -0500 Subject: [PATCH 1/6] Soft clicking. Feels pretty nice. Refs #530 --- js/id/behavior/drag.js | 18 ++++++++-------- js/id/behavior/draw.js | 45 ++++++++++++++++++++++++++-------------- js/id/behavior/select.js | 1 + 3 files changed, 39 insertions(+), 25 deletions(-) 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) { From f65803d99f7d0a97e9ac7dbacceee470b3a4686f Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Tue, 5 Feb 2013 15:39:58 -0500 Subject: [PATCH 2/6] Make restriction both space and time --- js/id/behavior/draw.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/id/behavior/draw.js b/js/id/behavior/draw.js index 078e257b2..e482138ec 100644 --- a/js/id/behavior/draw.js +++ b/js/id/behavior/draw.js @@ -28,8 +28,8 @@ iD.behavior.Draw = function(context) { d3.select(window).on('mouseup.draw', function() { target.on('mousemove.draw', mousemove); - if (iD.geo.dist(pos, point()) < tolerance || - (+new Date() - time) < 500) { + if (iD.geo.dist(pos, point()) < tolerance && + (+new Date() - time) < 1000) { click(); } }); From 0e0ca2382ebee689db8b68254152edc158d83273 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Tue, 5 Feb 2013 15:40:23 -0500 Subject: [PATCH 3/6] Half-second --- js/id/behavior/draw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/id/behavior/draw.js b/js/id/behavior/draw.js index e482138ec..d4aac636d 100644 --- a/js/id/behavior/draw.js +++ b/js/id/behavior/draw.js @@ -29,7 +29,7 @@ iD.behavior.Draw = function(context) { d3.select(window).on('mouseup.draw', function() { target.on('mousemove.draw', mousemove); if (iD.geo.dist(pos, point()) < tolerance && - (+new Date() - time) < 1000) { + (+new Date() - time) < 500) { click(); } }); From 9743fdf4773c0806af9fc728170a54f71ae52f15 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Tue, 5 Feb 2013 15:41:56 -0500 Subject: [PATCH 4/6] Up the radius tolerance to 12px --- js/id/behavior/draw.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/id/behavior/draw.js b/js/id/behavior/draw.js index d4aac636d..b614763b4 100644 --- a/js/id/behavior/draw.js +++ b/js/id/behavior/draw.js @@ -3,7 +3,7 @@ iD.behavior.Draw = function(context) { 'clickNode', 'undo', 'cancel', 'finish'), keybinding = d3.keybinding('draw'), hover = iD.behavior.Hover(), - tolerance = 8; + tolerance = 12; function datum() { if (d3.event.altKey) return {}; From 4a024651b40e668c2cdcdfefa4c316d1bacaa6a7 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Tue, 5 Feb 2013 15:44:50 -0500 Subject: [PATCH 5/6] Allow long clicks --- js/id/behavior/draw.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/id/behavior/draw.js b/js/id/behavior/draw.js index b614763b4..e68625d05 100644 --- a/js/id/behavior/draw.js +++ b/js/id/behavior/draw.js @@ -3,6 +3,7 @@ iD.behavior.Draw = function(context) { 'clickNode', 'undo', 'cancel', 'finish'), keybinding = d3.keybinding('draw'), hover = iD.behavior.Hover(), + closeTolerance = 4; tolerance = 12; function datum() { @@ -28,8 +29,9 @@ iD.behavior.Draw = function(context) { d3.select(window).on('mouseup.draw', function() { target.on('mousemove.draw', mousemove); - if (iD.geo.dist(pos, point()) < tolerance && - (+new Date() - time) < 500) { + if (iD.geo.dist(pos, point()) < closeTolerance || + (iD.geo.dist(pos, point()) < tolerance && + (+new Date() - time) < 500)) { click(); } }); From 4b76b136fab3a2bc0beb2aba6f21c23d7287b2c4 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Tue, 5 Feb 2013 15:58:54 -0500 Subject: [PATCH 6/6] Fix tests for faux click --- js/id/behavior/draw.js | 2 +- test/spec/modes/add_point.js | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/js/id/behavior/draw.js b/js/id/behavior/draw.js index e68625d05..a4fb53a1a 100644 --- a/js/id/behavior/draw.js +++ b/js/id/behavior/draw.js @@ -3,7 +3,7 @@ iD.behavior.Draw = function(context) { 'clickNode', 'undo', 'cancel', 'finish'), keybinding = d3.keybinding('draw'), hover = iD.behavior.Hover(), - closeTolerance = 4; + closeTolerance = 4, tolerance = 12; function datum() { diff --git a/test/spec/modes/add_point.js b/test/spec/modes/add_point.js index 38a614198..62291f8ee 100644 --- a/test/spec/modes/add_point.js +++ b/test/spec/modes/add_point.js @@ -1,7 +1,7 @@ -describe("iD.modes.AddPoint", function () { +describe("iD.modes.AddPoint", function() { var context; - beforeEach(function () { + beforeEach(function() { var container = d3.select(document.createElement('div')); context = iD() @@ -15,20 +15,22 @@ describe("iD.modes.AddPoint", function () { }); describe("clicking the map", function () { - it("adds a node", function () { - happen.click(context.surface().node(), {}); + it("adds a node", function() { + happen.mousedown(context.surface().node(), {}); + happen.mouseup(window, {}); expect(context.changes().created).to.have.length(1); }); - it("selects the node", function () { - happen.click(context.surface().node(), {}); + it("selects the node", function() { + happen.mousedown(context.surface().node(), {}); + happen.mouseup(window, {}); expect(context.mode().id).to.equal('select'); expect(context.mode().selection()).to.eql([context.changes().created[0].id]); }); }); - describe("pressing ⎋", function () { - it("exits to browse mode", function () { + describe("pressing ⎋", function() { + it("exits to browse mode", function() { happen.keydown(document, {keyCode: 27}); expect(context.mode().id).to.equal('browse'); });