CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 21:48:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix mapillary detection selection rendering in Firefox and Safari (close #6804)

Browse Source 
Fix mapillary feature detection tooltips (re: #7079)
This commit is contained in:
Quincy Morgan
2019-12-11 15:03:54 -05:00
parent a7dd6db8a7
commit df3b281d39
3 changed files with 63 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/60_photos.css
+14 -12
View File
@@ -196,25 +196,27 @@
/* Mapillary Traffic Signs and Map Features Layers */
.layer-mapillary-signs,
.layer-mapillary-map-features {
.layer-mapillary-detections {
pointer-events: none;
}
.layer-mapillary-signs .icon-sign,
.layer-mapillary-map-features .icon-map-feature {
.layer-mapillary-detections .icon-detected {
outline: 2px solid transparent;
pointer-events: visible;
cursor: pointer;
opacity: 0.75;
}
.layer-mapillary-signs .icon-sign:hover,
.layer-mapillary-map-features .icon-map-feature:hover {
outline: 5px solid #eebb00;
background-color: #eebb00;
.layer-mapillary-detections .icon-detected rect {
fill: none;
}
.layer-mapillary-signs .icon-sign.currentView,
.layer-mapillary-map-features .icon-map-feature.currentView {
outline: 5px solid #ffee00;
background-color: #ffee00;
.layer-mapillary-detections .icon-detected:hover rect {
outline: 3px solid rgba(255, 238, 0, 0.6);
}
.layer-mapillary-detections .icon-detected.currentView rect {
outline: 3px solid rgba(255, 238, 0, 1);
}
.layer-mapillary-detections .icon-detected:hover,
.layer-mapillary-detections .icon-detected.currentView {
opacity: 1;
}
modules/svg/mapillary_map_features.js
+28 -16
View File
@@ -82,8 +82,7 @@ export function svgMapillaryMapFeatures(projection, context, dispatch) {
function update() {
var service = getService();
var data = (service ? service.mapFeatures(projection) : []);
var viewer = d3_select('#photoviewer');
var selected = viewer.empty() ? undefined : viewer.datum();
var selected = service && service.getSelectedImage();
var selectedImageKey = selected && selected.key;
var transform = svgPointTransform(projection);
@@ -96,23 +95,31 @@ export function svgMapillaryMapFeatures(projection, context, dispatch) {
// enter
var enter = mapFeatures.enter()
.append('g')
.attr('class', 'icon-map-feature icon-detected')
.on('click', click);
enter
.append('title')
.text(function(d) {
var id = d.value.replace(/--/g, '.').replace(/-/g, '_');
return t('mapillary_map_features.' + id);
});
enter
.append('use')
.attr('class', 'icon-map-feature')
.attr('width', '24px')
.attr('height', '24px')
.attr('x', '-12px')
.attr('y', '-12px')
.attr('xlink:href', function(d) { return '#' + d.value; })
.attr('title', function(d) {
var id = d.value.replace(/--/g, '.').replace(/-/g, '_');
return t('mapillary_map_features.' + id);
})
.classed('currentView', function(d) {
return d.detections.some(function(detection) {
return detection.image_key === selectedImageKey;
});
})
.on('click', click);
.attr('xlink:href', function(d) { return '#' + d.value; });
enter
.append('rect')
.attr('width', '24px')
.attr('height', '24px')
.attr('x', '-12px')
.attr('y', '-12px');
// update
mapFeatures
@@ -122,7 +129,12 @@ export function svgMapillaryMapFeatures(projection, context, dispatch) {
: (b === selected) ? -1
: b.loc[1] - a.loc[1]; // sort Y
})
.attr('transform', transform);
.attr('transform', transform)
.classed('currentView', function(d) {
return d.detections.some(function(detection) {
return detection.image_key === selectedImageKey;
});
});
}
@@ -138,7 +150,7 @@ export function svgMapillaryMapFeatures(projection, context, dispatch) {
layer = layer.enter()
.append('g')
.attr('class', 'layer-mapillary-map-features')
.attr('class', 'layer-mapillary-map-features layer-mapillary-detections')
.style('display', enabled ? 'block' : 'none')
.merge(layer);
modules/svg/mapillary_signs.js
+21 -12
View File
@@ -82,8 +82,7 @@ export function svgMapillarySigns(projection, context, dispatch) {
function update() {
var service = getService();
var data = (service ? service.signs(projection) : []);
var viewer = d3_select('#photoviewer');
var selected = viewer.empty() ? undefined : viewer.datum();
var selected = service && service.getSelectedImage();
var selectedImageKey = selected && selected.key;
var transform = svgPointTransform(projection);
@@ -96,19 +95,24 @@ export function svgMapillarySigns(projection, context, dispatch) {
// enter
var enter = signs.enter()
.append('g')
.attr('class', 'icon-sign icon-detected')
.on('click', click);
enter
.append('use')
.attr('class', 'icon-sign')
.attr('width', '24px')
.attr('height', '24px')
.attr('x', '-12px')
.attr('y', '-12px')
.attr('xlink:href', function(d) { return '#' + d.value; })
.classed('currentView', function(d) {
return d.detections.some(function(detection) {
return detection.image_key === selectedImageKey;
});
})
.on('click', click);
.attr('xlink:href', function(d) { return '#' + d.value; });
enter
.append('rect')
.attr('width', '24px')
.attr('height', '24px')
.attr('x', '-12px')
.attr('y', '-12px');
// update
signs
@@ -118,7 +122,12 @@ export function svgMapillarySigns(projection, context, dispatch) {
: (b === selected) ? -1
: b.loc[1] - a.loc[1]; // sort Y
})
.attr('transform', transform);
.attr('transform', transform)
.classed('currentView', function(d) {
return d.detections.some(function(detection) {
return detection.image_key === selectedImageKey;
});
});
}
@@ -134,7 +143,7 @@ export function svgMapillarySigns(projection, context, dispatch) {
layer = layer.enter()
.append('g')
.attr('class', 'layer-mapillary-signs')
.attr('class', 'layer-mapillary-signs layer-mapillary-detections')
.style('display', enabled ? 'block' : 'none')
.merge(layer);