From df3b281d3912c2d65b7e25370553df405ef40f9e Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Wed, 11 Dec 2019 15:03:54 -0500 Subject: [PATCH] Fix mapillary detection selection rendering in Firefox and Safari (close #6804) Fix mapillary feature detection tooltips (re: #7079) --- css/60_photos.css | 26 ++++++++-------- modules/svg/mapillary_map_features.js | 44 +++++++++++++++++---------- modules/svg/mapillary_signs.js | 33 ++++++++++++-------- 3 files changed, 63 insertions(+), 40 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index 676fd5925..4b6ceadd2 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -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; } diff --git a/modules/svg/mapillary_map_features.js b/modules/svg/mapillary_map_features.js index 2ee611370..512f6de8d 100644 --- a/modules/svg/mapillary_map_features.js +++ b/modules/svg/mapillary_map_features.js @@ -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); diff --git a/modules/svg/mapillary_signs.js b/modules/svg/mapillary_signs.js index d50145c07..e12a6c1dc 100644 --- a/modules/svg/mapillary_signs.js +++ b/modules/svg/mapillary_signs.js @@ -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);