From 9f5ba8342d0f7112e8b54f1091a5e5b0a9e02d94 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Mon, 11 Mar 2013 15:29:30 -0700 Subject: [PATCH] Convert DragNode to a mode This makes the CSS more consistent and makes fixing #953 easier. Also, dragging now clears the selection and closes any operations menu, which is good. There's still a minor Chrome bug: it doesn't refresh the cursor when the .behavior-hover class is removed. --- css/map.css | 14 +++--- index.html | 2 +- js/id/behavior/draw.js | 29 +++-------- js/id/behavior/hover.js | 37 ++++++++++++++- js/id/modes/browse.js | 2 +- js/id/{behavior => modes}/drag_node.js | 66 ++++++++++++++++---------- js/id/modes/select.js | 2 +- test/index.html | 2 +- 8 files changed, 93 insertions(+), 61 deletions(-) rename js/id/{behavior => modes}/drag_node.js (88%) diff --git a/css/map.css b/css/map.css index 812435de2..496891c1e 100644 --- a/css/map.css +++ b/css/map.css @@ -155,7 +155,7 @@ g.vertex.selected .shadow { .mode-add-area g.midpoint, .mode-add-line g.midpoint, .mode-add-point g.midpoint, -.behavior-drag-node g.midpoint { +.mode-drag-node g.midpoint { display: none; } @@ -917,7 +917,7 @@ text.point { .mode-draw-area #map:hover, .mode-add-line #map:hover, .mode-add-area #map:hover, -#map:hover .behavior-drag-node { +.mode-drag-node #map:hover { cursor: crosshair; cursor: url(../img/cursor-draw.png) 9 9, crosshair; } @@ -926,7 +926,7 @@ text.point { .mode-draw-area .behavior-hover .way, .mode-add-line .behavior-hover .way, .mode-add-area .behavior-hover .way, -.behavior-drag-node.behavior-hover .way { +.mode-drag-node .behavior-hover .way { cursor: crosshair; cursor: url(../img/cursor-draw-connect-line.png) 9 9, crosshair; } @@ -935,7 +935,7 @@ text.point { .mode-draw-area .behavior-hover .vertex, .mode-add-line .behavior-hover .vertex, .mode-add-area .behavior-hover .vertex, -.behavior-drag-node.behavior-hover .vertex { +.mode-drag-node .behavior-hover .vertex { cursor: crosshair; cursor: url(../img/cursor-draw-connect-vertex.png) 9 9, crosshair; } @@ -960,13 +960,13 @@ text.point { .mode-draw-line .vertex.active, .mode-draw-area .vertex.active, -.behavior-drag-node .vertex.active { +.mode-drag-node .vertex.active { display: none; } .mode-draw-line .way.active, .mode-draw-area .way.active, -.behavior-drag-node .active { +.mode-drag-node .active { pointer-events: none; } @@ -976,6 +976,6 @@ text.point { .mode-draw-area .area.fill, .mode-add-line .area.fill, .mode-add-area .area.fill, -.behavior-drag-node .area.fill { +.mode-drag-node .area.fill { pointer-events: none; } diff --git a/index.html b/index.html index 8b95a50c7..2311d0afe 100644 --- a/index.html +++ b/index.html @@ -123,7 +123,6 @@ - @@ -136,6 +135,7 @@ + diff --git a/js/id/behavior/draw.js b/js/id/behavior/draw.js index 65a28fcfe..0a2816943 100644 --- a/js/id/behavior/draw.js +++ b/js/id/behavior/draw.js @@ -2,7 +2,7 @@ iD.behavior.Draw = function(context) { var event = d3.dispatch('move', 'click', 'clickWay', 'clickNode', 'undo', 'cancel', 'finish'), keybinding = d3.keybinding('draw'), - hover = iD.behavior.Hover(), + hover = iD.behavior.Hover().altDisables(true), closeTolerance = 4, tolerance = 12; @@ -62,18 +62,6 @@ iD.behavior.Draw = function(context) { } } - function keydown() { - if (d3.event.keyCode === d3.keybinding.modifierCodes.alt) { - context.uninstall(hover); - } - } - - function keyup() { - if (d3.event.keyCode === d3.keybinding.modifierCodes.alt) { - context.install(hover); - } - } - function backspace() { d3.event.preventDefault(); event.undo(); @@ -90,9 +78,7 @@ iD.behavior.Draw = function(context) { } function draw(selection) { - if (!d3.event || !d3.event.altKey) { - context.install(hover); - } + context.install(hover); keybinding .on('⌫', backspace) @@ -105,9 +91,7 @@ iD.behavior.Draw = function(context) { .on('mousemove.draw', mousemove); d3.select(document) - .call(keybinding) - .on('keydown.draw', keydown) - .on('keyup.draw', keyup); + .call(keybinding); return draw; } @@ -119,12 +103,11 @@ iD.behavior.Draw = function(context) { .on('mousedown.draw', null) .on('mousemove.draw', null); - d3.select(window).on('mouseup.draw', null); + d3.select(window) + .on('mouseup.draw', null); d3.select(document) - .call(keybinding.off) - .on('keydown.draw', null) - .on('keyup.draw', null); + .call(keybinding.off); }; return d3.rebind(draw, event, 'on'); diff --git a/js/id/behavior/hover.js b/js/id/behavior/hover.js index 64748e4f0..7294491f7 100644 --- a/js/id/behavior/hover.js +++ b/js/id/behavior/hover.js @@ -8,8 +8,27 @@ have the .hover class. */ iD.behavior.Hover = function() { - var hover = function(selection) { - selection.classed('behavior-hover', true); + var selection, + altDisables; + + function keydown() { + if (altDisables && d3.event.keyCode === d3.keybinding.modifierCodes.alt) { + selection.classed('behavior-hover', false); + } + } + + function keyup() { + if (altDisables && d3.event.keyCode === d3.keybinding.modifierCodes.alt) { + selection.classed('behavior-hover', true); + } + } + + var hover = function(_) { + selection = _; + + if (!altDisables || !d3.event || !d3.event.altKey) { + selection.classed('behavior-hover', true); + } function mouseover() { var datum = d3.event.target.__data__; @@ -26,6 +45,10 @@ iD.behavior.Hover = function() { selection.selectAll('.hover') .classed('hover', false); }); + + d3.select(document) + .on('keydown.hover', keydown) + .on('keyup.hover', keyup); }; hover.off = function(selection) { @@ -35,6 +58,16 @@ iD.behavior.Hover = function() { selection.selectAll('.hover') .classed('hover', false); + + d3.select(document) + .on('keydown.hover', null) + .on('keyup.hover', null); + }; + + hover.altDisables = function(_) { + if (!arguments.length) return altDisables; + altDisables = _; + return hover; }; return hover; diff --git a/js/id/modes/browse.js b/js/id/modes/browse.js index d26ea4a55..6dc0060f9 100644 --- a/js/id/modes/browse.js +++ b/js/id/modes/browse.js @@ -11,7 +11,7 @@ iD.modes.Browse = function(context) { iD.behavior.Hover(), iD.behavior.Select(context), iD.behavior.Lasso(context), - iD.behavior.DragNode(context)]; + iD.modes.DragNode(context).behavior]; mode.enter = function() { behaviors.forEach(function(behavior) { diff --git a/js/id/behavior/drag_node.js b/js/id/modes/drag_node.js similarity index 88% rename from js/id/behavior/drag_node.js rename to js/id/modes/drag_node.js index e1bb93595..55a3272dc 100644 --- a/js/id/behavior/drag_node.js +++ b/js/id/modes/drag_node.js @@ -1,7 +1,14 @@ -iD.behavior.DragNode = function(context) { +iD.modes.DragNode = function(context) { + var mode = { + id: 'drag-node', + button: 'browse' + }; + var nudgeInterval, + activeIDs, wasMidpoint, - cancelled; + cancelled, + hover = iD.behavior.Hover().altDisables(true); function edge(point, size) { var pad = [30, 100, 30, 100]; @@ -40,9 +47,6 @@ iD.behavior.DragNode = function(context) { cancelled = d3.event.sourceEvent.shiftKey; if (cancelled) return behavior.cancel(); - context.history() - .on('undone.drag-node', cancel); - wasMidpoint = entity.type === 'midpoint'; if (wasMidpoint) { var midpoint = entity; @@ -59,14 +63,10 @@ iD.behavior.DragNode = function(context) { iD.actions.Noop()); } - var activeIDs = _.pluck(context.graph().parentWays(entity), 'id'); + activeIDs = _.pluck(context.graph().parentWays(entity), 'id'); activeIDs.push(entity.id); - context.surface() - .classed('behavior-drag-node', true) - .selectAll('.node, .way') - .filter(function(d) { return activeIDs.indexOf(d.id) >= 0; }) - .classed('active', true); + context.enter(mode); } function datum() { @@ -101,7 +101,6 @@ iD.behavior.DragNode = function(context) { function end(entity) { if (cancelled) return; - off(); function adjacent(d) { return _.any(context.graph().parentWays(entity).map(function(w) { @@ -138,23 +137,13 @@ iD.behavior.DragNode = function(context) { iD.actions.Noop(), moveAnnotation(entity)); } - } - function off() { - context.history() - .on('undone.drag_node', null); - - context.surface() - .classed('behavior-drag-node', false) - .selectAll('.active') - .classed('active', false); - - stopNudge(); + context.enter(iD.modes.Browse(context)); } function cancel() { - off(); behavior.cancel(); + context.enter(iD.modes.Browse(context)); } var behavior = iD.behavior.drag() @@ -165,5 +154,32 @@ iD.behavior.DragNode = function(context) { .on('move', move) .on('end', end); - return behavior; + mode.enter = function() { + context.install(hover); + + context.history() + .on('undone.drag-node', cancel); + + context.surface() + .selectAll('.node, .way') + .filter(function(d) { return activeIDs.indexOf(d.id) >= 0; }) + .classed('active', true); + }; + + mode.exit = function() { + context.uninstall(hover); + + context.history() + .on('undone.drag_node', null); + + context.surface() + .selectAll('.active') + .classed('active', false); + + stopNudge(); + }; + + mode.behavior = behavior; + + return mode; }; diff --git a/js/id/modes/select.js b/js/id/modes/select.js index f3ed7b703..8f24aca35 100644 --- a/js/id/modes/select.js +++ b/js/id/modes/select.js @@ -13,7 +13,7 @@ iD.modes.Select = function(context, selection, initial) { iD.behavior.Hover(), iD.behavior.Select(context), iD.behavior.Lasso(context), - iD.behavior.DragNode(context)], + iD.modes.DragNode(context).behavior], radialMenu; function changeTags(d, tags) { diff --git a/test/index.html b/test/index.html index 78da96b3a..a58130b27 100644 --- a/test/index.html +++ b/test/index.html @@ -124,7 +124,6 @@ - @@ -137,6 +136,7 @@ +