CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-06-04 14:08:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Convert DragNode to a mode

Browse Source 
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.
This commit is contained in:
John Firebaugh
2013-03-11 15:29:30 -07:00
parent 4c45ab1787
commit 9f5ba8342d
8 changed files with 93 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/map.css
+7 -7
View File
@@ -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;
}
index.html
+1 -1
View File
@@ -123,7 +123,6 @@
<script src='js/id/behavior/add_way.js'></script>
<script src='js/id/behavior/accept.js'></script>
<script src='js/id/behavior/drag.js'></script>
<script src='js/id/behavior/drag_node.js'></script>
<script src='js/id/behavior/draw.js'></script>
<script src='js/id/behavior/lasso.js'></script>
<script src='js/id/behavior/draw_way.js'></script>
@@ -136,6 +135,7 @@
<script src='js/id/modes/add_point.js'></script>
<script src='js/id/modes/add_line.js'></script>
<script src='js/id/modes/browse.js'></script>
<script src='js/id/modes/drag_node.js'></script>
<script src='js/id/modes/draw_area.js'></script>
<script src='js/id/modes/draw_line.js'></script>
<script src='js/id/modes/move.js'></script>
js/id/behavior/draw.js
+6 -23
View File
@@ -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');
js/id/behavior/hover.js
+35 -2
View File
@@ -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;
js/id/modes/browse.js
+1 -1
View File
@@ -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) {
js/id/behavior/drag_node.js → js/id/modes/drag_node.js
+41 -25
View File
@@ -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;
};
js/id/modes/select.js
+1 -1
View File
@@ -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) {
test/index.html
+1 -1
View File
@@ -124,7 +124,6 @@
<script src='../js/id/behavior.js'></script>
<script src='../js/id/behavior/add_way.js'></script>
<script src='../js/id/behavior/drag.js'></script>
<script src='../js/id/behavior/drag_node.js'></script>
<script src='../js/id/behavior/draw.js'></script>
<script src='../js/id/behavior/draw_way.js'></script>
<script src='../js/id/behavior/hash.js'></script>
@@ -137,6 +136,7 @@
<script src='../js/id/modes/add_point.js'></script>
<script src='../js/id/modes/add_line.js'></script>
<script src='../js/id/modes/browse.js'></script>
<script src='../js/id/modes/drag_node.js'></script>
<script src='../js/id/modes/draw_area.js'></script>
<script src='../js/id/modes/draw_line.js'></script>
<script src='../js/id/modes/move.js'></script>