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.
This commit is contained in:
SilentSpike
2019-01-28 21:17:20 +00:00
parent 99f7a90387
commit 129c28fb25
7 changed files with 26 additions and 36 deletions
+6 -6
View File
@@ -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')
+6 -6
View File
@@ -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')
+5 -5
View File
@@ -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')