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 @@
+