diff --git a/css/map.css b/css/map.css index 4a6c43ea3..320fe0f52 100644 --- a/css/map.css +++ b/css/map.css @@ -58,7 +58,7 @@ g.point .shadow { stroke-opacity: 0; } -.behavior-hover g.point.hover:not(.selected) .shadow { +g.point.hover:not(.selected) .shadow { stroke-opacity: 0.5; } @@ -103,17 +103,17 @@ g.vertex.vertex-hover { display: none; } -.mode-draw-area .behavior-hover g.vertex.vertex-hover, -.mode-draw-line .behavior-hover g.vertex.vertex-hover, -.mode-add-area .behavior-hover g.vertex.vertex-hover, -.mode-add-line .behavior-hover g.vertex.vertex-hover, -.mode-add-point .behavior-hover g.vertex.vertex-hover, -.mode-drag-node .behavior-hover g.vertex.vertex-hover { +.mode-draw-area g.vertex.vertex-hover, +.mode-draw-line g.vertex.vertex-hover, +.mode-add-area g.vertex.vertex-hover, +.mode-add-line g.vertex.vertex-hover, +.mode-add-point g.vertex.vertex-hover, +.mode-drag-node g.vertex.vertex-hover { display: block; } -.behavior-hover g.vertex.hover:not(.selected) .shadow, -.behavior-hover g.midpoint.hover:not(.selected) .shadow { +g.vertex.hover:not(.selected) .shadow, +g.midpoint.hover:not(.selected) .shadow { fill-opacity: 0.3; } @@ -148,7 +148,7 @@ path.shadow { stroke-opacity: 0; } -.behavior-hover path.shadow.hover:not(.selected) { +path.shadow.hover:not(.selected) { stroke-opacity: 0.3; } @@ -995,11 +995,11 @@ text.point { ) 9 9, crosshair; } -.mode-draw-line .behavior-hover .way, -.mode-draw-area .behavior-hover .way, -.mode-add-line .behavior-hover .way, -.mode-add-area .behavior-hover .way, -.mode-drag-node .behavior-hover .way { +.mode-draw-line .way.hover, +.mode-draw-area .way.hover, +.mode-add-line .way.hover, +.mode-add-area .way.hover, +.mode-drag-node .way.hover { cursor: crosshair; /* Opera */ cursor: url(img/cursor-draw-connect-line.png) 9 9, crosshair; /* FF */ cursor: -webkit-image-set( @@ -1008,11 +1008,11 @@ text.point { ) 9 9, crosshair; } -.mode-draw-line .behavior-hover .vertex, -.mode-draw-area .behavior-hover .vertex, -.mode-add-line .behavior-hover .vertex, -.mode-add-area .behavior-hover .vertex, -.mode-drag-node .behavior-hover .vertex { +.mode-draw-line .vertex.hover, +.mode-draw-area .vertex.hover, +.mode-add-line .vertex.hover, +.mode-add-area .vertex.hover, +.mode-drag-node .vertex.hover { cursor: crosshair; /* Opera */ cursor: url(img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */ cursor: -webkit-image-set( diff --git a/js/id/behavior/hover.js b/js/id/behavior/hover.js index 4fe3d2f41..a2fba0a3d 100644 --- a/js/id/behavior/hover.js +++ b/js/id/behavior/hover.js @@ -13,23 +13,23 @@ iD.behavior.Hover = function() { function keydown() { if (altDisables && d3.event.keyCode === d3.keybinding.modifierCodes.alt) { - selection.classed('behavior-hover', false); + selection.selectAll('.hover') + .classed('hover-suppressed', true) + .classed('hover', false); } } function keyup() { if (altDisables && d3.event.keyCode === d3.keybinding.modifierCodes.alt) { - selection.classed('behavior-hover', true); + selection.selectAll('.hover-suppressed') + .classed('hover-suppressed', false) + .classed('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__; @@ -42,17 +42,23 @@ iD.behavior.Hover = function() { }); } + var suppressed = altDisables && d3.event && d3.event.altKey; + selection.selectAll(selector) - .classed('hover', true); + .classed(suppressed ? 'hover-suppressed' : 'hover', true); } } - selection.on('mouseover.hover', mouseover); - - selection.on('mouseout.hover', function() { + function mouseout() { selection.selectAll('.hover') .classed('hover', false); - }); + selection.selectAll('.hover-suppressed') + .classed('hover-suppressed', false); + } + + selection + .on('mouseover.hover', mouseover) + .on('mouseout.hover', mouseout); d3.select(document) .on('keydown.hover', keydown) @@ -60,12 +66,14 @@ iD.behavior.Hover = function() { }; hover.off = function(selection) { - selection.classed('behavior-hover', false) - .on('mouseover.hover', null) - .on('mouseout.hover', null); - selection.selectAll('.hover') .classed('hover', false); + selection.selectAll('.hover-suppressed') + .classed('hover-suppressed', false); + + selection + .on('mouseover.hover', null) + .on('mouseout.hover', null); d3.select(document) .on('keydown.hover', null)