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

Fix street imagery selection highlight persistence

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

12
css/60_photos.css
View File

@@ -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;
}

12
modules/services/mapillary.js
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')

12
modules/services/openstreetcam.js
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')

10
modules/services/streetside.js
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')

3
modules/svg/mapillary_images.js
View File

@@ -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) {

2
modules/svg/mapillary_signs.js
View File

@@ -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;
});

11
modules/svg/streetside.js
View File

@@ -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) {