From da41d9d92148a7ff9fc78ac4c96eb60604c55f9a Mon Sep 17 00:00:00 2001 From: SilentSpike Date: Sun, 27 Jan 2019 13:13:44 +0000 Subject: [PATCH 1/3] Fix mouseover events on imagery layer bubbles This is just a minor thing that doesn't usually alter visible behaviour. The mouseover and mouseout events would fire when moving between child elements of the svg group which was unnecessary. --- modules/svg/mapillary_images.js | 4 ++-- modules/svg/openstreetcam_images.js | 4 ++-- modules/svg/streetside.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js index 55dfa7dd3..7eda83646 100644 --- a/modules/svg/mapillary_images.js +++ b/modules/svg/mapillary_images.js @@ -164,8 +164,8 @@ export function svgMapillaryImages(projection, context, dispatch) { var groupsEnter = groups.enter() .append('g') .attr('class', 'viewfield-group') - .on('mouseover', mouseover) - .on('mouseout', mouseout) + .on('mouseenter', mouseover) + .on('mouseleave', mouseout) .on('click', click); groupsEnter diff --git a/modules/svg/openstreetcam_images.js b/modules/svg/openstreetcam_images.js index 35fc76cc0..254897169 100644 --- a/modules/svg/openstreetcam_images.js +++ b/modules/svg/openstreetcam_images.js @@ -147,8 +147,8 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { var groupsEnter = groups.enter() .append('g') .attr('class', 'viewfield-group') - .on('mouseover', mouseover) - .on('mouseout', mouseout) + .on('mouseenter', mouseover) + .on('mouseleave', mouseout) .on('click', click); groupsEnter diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 8acfd3cff..5884ed76d 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -209,8 +209,8 @@ export function svgStreetside(projection, context, dispatch) { var groupsEnter = groups.enter() .append('g') .attr('class', 'viewfield-group') - .on('mouseover', mouseover) - .on('mouseout', mouseout) + .on('mouseenter', mouseover) + .on('mouseleave', mouseout) .on('click', click); groupsEnter From 99f7a9038778595bfe9b4384fcb593a8239a3511 Mon Sep 17 00:00:00 2001 From: SilentSpike Date: Sun, 27 Jan 2019 14:44:57 +0000 Subject: [PATCH 2/3] Fix imagery layers resetting eachother's classes Fixes: - Selecting a bubble then enabling a second imagery layer removes the hovered and selected highlighting - If multiple imagery layers are enabled and you select a bubble it only temporarily becomes highlighted - If multiple imagery layers are enabled and a bubble is highlighted, hovering over another imagery layer's bubble will remove the selected and hovered highlighting Basically these all came down to style updates resetting all layers for cases other than when the viewport was changed (where doing so makes sense because the selected bubble/sequence needs to update as a result). See #5494 --- modules/services/mapillary.js | 3 +++ modules/services/openstreetcam.js | 3 +++ modules/services/streetside.js | 6 +++--- modules/svg/mapillary_images.js | 1 + modules/svg/streetside.js | 6 +++--- 5 files changed, 13 insertions(+), 6 deletions(-) diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 5e13da7b2..dcd6762ba 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -556,6 +556,9 @@ export default { }, + // Updates the currently highlighted sequence and selected bubble. + // Reset is only necessary when interacting with the viewport because + // this implicitly changes the currently selected bubble/sequence setStyles: function(hovered, reset) { if (reset) { // reset all layers d3_selectAll('.viewfield-group') diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index 4f1d180bc..2c683471c 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -492,6 +492,9 @@ export default { }, + // Updates the currently highlighted sequence and selected bubble. + // Reset is only necessary when interacting with the viewport because + // this implicitly changes the currently selected bubble/sequence setStyles: function(hovered, reset) { if (reset) { // reset all layers d3_selectAll('.viewfield-group') diff --git a/modules/services/streetside.js b/modules/services/streetside.js index a7bdf4eb4..c7908a7ad 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -925,9 +925,9 @@ export default { }, - /** - * setStyles(). - */ + // Updates the currently highlighted sequence and selected bubble. + // Reset is only necessary when interacting with the viewport because + // this implicitly changes the currently selected bubble/sequence setStyles: function (hovered, reset) { if (reset) { // reset all layers d3_selectAll('.viewfield-group') diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js index 7eda83646..0adc739f9 100644 --- a/modules/svg/mapillary_images.js +++ b/modules/svg/mapillary_images.js @@ -205,6 +205,7 @@ export function svgMapillaryImages(projection, context, dispatch) { .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') .attr('d', viewfieldPath); + function viewfieldPath() { var d = this.parentNode.__data__; if (d.pano) { diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 5884ed76d..cf3ddae11 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -122,7 +122,7 @@ export function svgStreetside(projection, context, dispatch) { function mouseover(d) { var service = getService(); _hoveredBubble = d; - if (service) service.setStyles(d, true); + if (service) service.setStyles(d); } /** @@ -131,7 +131,7 @@ export function svgStreetside(projection, context, dispatch) { function mouseout() { var service = getService(); _hoveredBubble = null; - if (service) service.setStyles(null, true); + if (service) service.setStyles(null); } /** @@ -253,7 +253,7 @@ export function svgStreetside(projection, context, dispatch) { if (service) { - service.setStyles(_hoveredBubble, true); + service.setStyles(_hoveredBubble); } From 129c28fb257a8dc869ec84835c495bd83b4e419a Mon Sep 17 00:00:00 2001 From: SilentSpike Date: Mon, 28 Jan 2019 21:17:20 +0000 Subject: [PATCH 3/3] Fix street imagery selection highlight persistence Root cause was the `select` mode removing the "selected" class from all elements upon `exit()`. Easy fix is to use a different class (here "currentView") for street imagery elements. --- css/60_photos.css | 12 ++++++------ modules/services/mapillary.js | 12 ++++++------ modules/services/openstreetcam.js | 12 ++++++------ modules/services/streetside.js | 10 +++++----- modules/svg/mapillary_images.js | 3 +-- modules/svg/mapillary_signs.js | 2 +- modules/svg/streetside.js | 11 +---------- 7 files changed, 26 insertions(+), 36 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index 3d4de1341..4df1e4382 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -101,7 +101,7 @@ cursor: pointer; } -.viewfield-group.selected * { +.viewfield-group.currentView * { fill: #ffee00 !important; } .viewfield-group.hovered * { @@ -125,7 +125,7 @@ stroke-opacity: 0.9; fill-opacity: 0.9; } -.viewfield-group.highlighted.selected circle { +.viewfield-group.highlighted.currentView circle { stroke: #222; stroke-width: 2; stroke-opacity: 1; @@ -145,12 +145,12 @@ stroke-width: 1; fill-opacity: 0.8; } -.viewfield-group.highlighted.selected .viewfield { +.viewfield-group.highlighted.currentView .viewfield { stroke-width: 1; fill-opacity: 0.9; } -.viewfield-group.selected .viewfield-scale { +.viewfield-group.currentView .viewfield-scale { transform: scale(2,2); } @@ -160,7 +160,7 @@ stroke-opacity: 0.4; } .sequence.highlighted, -.sequence.selected { +.sequence.currentView { stroke-width: 4; stroke-opacity: 1; } @@ -204,7 +204,7 @@ outline: 5px solid #eebb00; background-color: #eebb00; } -.layer-mapillary-signs .icon-sign.selected { +.layer-mapillary-signs .icon-sign.currentView { outline: 5px solid #ffee00; background-color: #ffee00; } diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index dcd6762ba..0cc6b650e 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -410,7 +410,7 @@ export default { .classed('hide', true); d3_selectAll('.viewfield-group, .sequence, .icon-sign') - .classed('selected', false); + .classed('currentView', false); return this.setStyles(null, true); }, @@ -531,7 +531,7 @@ export default { // if signs signs are shown, highlight the ones that appear in this image d3_selectAll('.layer-mapillary-signs .icon-sign') - .classed('selected', function(d) { + .classed('currentView', function(d) { return _some(d.detections, function(detection) { return detection.image_key === imageKey; }); @@ -564,11 +564,11 @@ export default { d3_selectAll('.viewfield-group') .classed('highlighted', false) .classed('hovered', false) - .classed('selected', false); + .classed('currentView', false); d3_selectAll('.sequence') .classed('highlighted', false) - .classed('selected', false); + .classed('currentView', false); } var hoveredImageKey = hovered && hovered.key; @@ -589,11 +589,11 @@ export default { d3_selectAll('.layer-mapillary-images .viewfield-group') .classed('highlighted', function(d) { return highlightedImageKeys.indexOf(d.key) !== -1; }) .classed('hovered', function(d) { return d.key === hoveredImageKey; }) - .classed('selected', function(d) { return d.key === selectedImageKey; }); + .classed('currentView', function(d) { return d.key === selectedImageKey; }); d3_selectAll('.layer-mapillary-images .sequence') .classed('highlighted', function(d) { return d.properties.key === hoveredSequenceKey; }) - .classed('selected', function(d) { return d.properties.key === selectedSequenceKey; }); + .classed('currentView', function(d) { return d.properties.key === selectedSequenceKey; }); // update viewfields if needed d3_selectAll('.viewfield-group .viewfield') diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index 2c683471c..d4963a1f3 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -403,7 +403,7 @@ export default { .classed('hide', true); d3_selectAll('.viewfield-group, .sequence, .icon-sign') - .classed('selected', false); + .classed('currentView', false); return this.setStyles(null, true); }, @@ -476,7 +476,7 @@ export default { this.setStyles(null, true); d3_selectAll('.icon-sign') - .classed('selected', false); + .classed('currentView', false); return this; }, @@ -500,11 +500,11 @@ export default { d3_selectAll('.viewfield-group') .classed('highlighted', false) .classed('hovered', false) - .classed('selected', false); + .classed('currentView', false); d3_selectAll('.sequence') .classed('highlighted', false) - .classed('selected', false); + .classed('currentView', false); } var hoveredImageKey = hovered && hovered.key; @@ -525,11 +525,11 @@ export default { d3_selectAll('.layer-openstreetcam-images .viewfield-group') .classed('highlighted', function(d) { return highlightedImageKeys.indexOf(d.key) !== -1; }) .classed('hovered', function(d) { return d.key === hoveredImageKey; }) - .classed('selected', function(d) { return d.key === selectedImageKey; }); + .classed('currentView', function(d) { return d.key === selectedImageKey; }); d3_selectAll('.layer-openstreetcam-images .sequence') .classed('highlighted', function(d) { return d.properties.key === hoveredSequenceKey; }) - .classed('selected', function(d) { return d.properties.key === selectedSequenceKey; }); + .classed('currentView', function(d) { return d.properties.key === selectedSequenceKey; }); // update viewfields if needed d3_selectAll('.viewfield-group .viewfield') diff --git a/modules/services/streetside.js b/modules/services/streetside.js index c7908a7ad..da7181172 100644 --- a/modules/services/streetside.js +++ b/modules/services/streetside.js @@ -750,7 +750,7 @@ export default { .classed('hide', true); d3_selectAll('.viewfield-group, .sequence, .icon-sign') - .classed('selected', false); + .classed('currentView', false); return this.setStyles(null, true); }, @@ -933,11 +933,11 @@ export default { d3_selectAll('.viewfield-group') .classed('highlighted', false) .classed('hovered', false) - .classed('selected', false); + .classed('currentView', false); d3_selectAll('.sequence') .classed('highlighted', false) - .classed('selected', false); + .classed('currentView', false); } var hoveredBubbleKey = hovered && hovered.key; @@ -958,11 +958,11 @@ export default { d3_selectAll('.layer-streetside-images .viewfield-group') .classed('highlighted', function (d) { return highlightedBubbleKeys.indexOf(d.key) !== -1; }) .classed('hovered', function (d) { return d.key === hoveredBubbleKey; }) - .classed('selected', function (d) { return d.key === selectedBubbleKey; }); + .classed('currentView', function (d) { return d.key === selectedBubbleKey; }); d3_selectAll('.layer-streetside-images .sequence') .classed('highlighted', function (d) { return d.properties.key === hoveredSequenceKey; }) - .classed('selected', function (d) { return d.properties.key === selectedSequenceKey; }); + .classed('currentView', function (d) { return d.properties.key === selectedSequenceKey; }); // update viewfields if needed d3_selectAll('.viewfield-group .viewfield') diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js index 0adc739f9..7b43840b4 100644 --- a/modules/svg/mapillary_images.js +++ b/modules/svg/mapillary_images.js @@ -33,7 +33,7 @@ export function svgMapillaryImages(projection, context, dispatch) { // e.g. during drags or easing. if (context.map().isTransformed()) return; - layer.selectAll('.viewfield-group.selected') + layer.selectAll('.viewfield-group.currentView') .filter(function(d) { return d.pano; }) @@ -205,7 +205,6 @@ export function svgMapillaryImages(projection, context, dispatch) { .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') .attr('d', viewfieldPath); - function viewfieldPath() { var d = this.parentNode.__data__; if (d.pano) { diff --git a/modules/svg/mapillary_signs.js b/modules/svg/mapillary_signs.js index 6f95126d0..c282d5363 100644 --- a/modules/svg/mapillary_signs.js +++ b/modules/svg/mapillary_signs.js @@ -105,7 +105,7 @@ export function svgMapillarySigns(projection, context, dispatch) { .attr('x', '-12px') .attr('y', '-12px') .attr('xlink:href', function(d) { return '#' + d.value; }) - .classed('selected', function(d) { + .classed('currentView', function(d) { return _some(d.detections, function(detection) { return detection.image_key === selectedImageKey; }); diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index cf3ddae11..89b9883dc 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -12,7 +12,6 @@ export function svgStreetside(projection, context, dispatch) { var layer = d3_select(null); var _viewerYaw = 0; var _selectedSequence = null; - var _hoveredBubble = null; var _streetside; /** @@ -121,7 +120,6 @@ export function svgStreetside(projection, context, dispatch) { */ function mouseover(d) { var service = getService(); - _hoveredBubble = d; if (service) service.setStyles(d); } @@ -130,7 +128,6 @@ export function svgStreetside(projection, context, dispatch) { */ function mouseout() { var service = getService(); - _hoveredBubble = null; if (service) service.setStyles(null); } @@ -161,7 +158,7 @@ export function svgStreetside(projection, context, dispatch) { // e.g. during drags or easing. if (context.map().isTransformed()) return; - layer.selectAll('.viewfield-group.selected') + layer.selectAll('.viewfield-group.currentView') .attr('transform', transform); } @@ -251,12 +248,6 @@ export function svgStreetside(projection, context, dispatch) { .attr('transform', 'scale(1.5,1.5),translate(-8, -13)') .attr('d', viewfieldPath); - - if (service) { - service.setStyles(_hoveredBubble); - } - - function viewfieldPath() { var d = this.parentNode.__data__; if (d.pano) {