From 129c28fb257a8dc869ec84835c495bd83b4e419a Mon Sep 17 00:00:00 2001 From: SilentSpike Date: Mon, 28 Jan 2019 21:17:20 +0000 Subject: [PATCH] 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) {