Merge pull request #5816 from SilentSpike/mapillary-icon

Fix street imagery hover and selection behaviour

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

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;
                 });
@@ -556,16 +556,19 @@ export default {
     },
 
 
+    // Updates the currently highlighted sequence and selected bubble.
+    // Reset is only necessary when interacting with the viewport because
+    // this implicitly changes the currently selected bubble/sequence
     setStyles: function(hovered, reset) {
         if (reset) {  // reset all layers
             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;
@@ -586,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')

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;
     },
@@ -492,16 +492,19 @@ export default {
     },
 
 
+    // Updates the currently highlighted sequence and selected bubble.
+    // Reset is only necessary when interacting with the viewport because
+    // this implicitly changes the currently selected bubble/sequence
     setStyles: function(hovered, reset) {
         if (reset) {  // reset all layers
             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;
@@ -522,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')

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);
     },
@@ -925,19 +925,19 @@ export default {
     },
 
 
-    /**
-     * setStyles().
-     */
+    // Updates the currently highlighted sequence and selected bubble.
+    // Reset is only necessary when interacting with the viewport because
+    // this implicitly changes the currently selected bubble/sequence
     setStyles: function (hovered, reset) {
         if (reset) {  // reset all layers
             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')

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;
                     })
@@ -164,8 +164,8 @@ export function svgMapillaryImages(projection, context, dispatch) {
         var groupsEnter = groups.enter()
             .append('g')
             .attr('class', 'viewfield-group')
-            .on('mouseover', mouseover)
-            .on('mouseout', mouseout)
+            .on('mouseenter', mouseover)
+            .on('mouseleave', mouseout)
             .on('click', click);
 
         groupsEnter

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

modules/svg/openstreetcam_images.js

@@ -147,8 +147,8 @@ export function svgOpenstreetcamImages(projection, context, dispatch) {
         var groupsEnter = groups.enter()
             .append('g')
             .attr('class', 'viewfield-group')
-            .on('mouseover', mouseover)
-            .on('mouseout', mouseout)
+            .on('mouseenter', mouseover)
+            .on('mouseleave', mouseout)
             .on('click', click);
 
         groupsEnter

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,8 +120,7 @@ export function svgStreetside(projection, context, dispatch) {
      */
     function mouseover(d) {
         var service = getService();
-        _hoveredBubble = d;
-        if (service) service.setStyles(d, true);
+        if (service) service.setStyles(d);
     }
 
     /**
@@ -130,8 +128,7 @@ export function svgStreetside(projection, context, dispatch) {
      */
     function mouseout() {
         var service = getService();
-        _hoveredBubble = null;
-        if (service) service.setStyles(null, true);
+        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);
     }
 
@@ -209,8 +206,8 @@ export function svgStreetside(projection, context, dispatch) {
         var groupsEnter = groups.enter()
             .append('g')
             .attr('class', 'viewfield-group')
-            .on('mouseover', mouseover)
-            .on('mouseout', mouseout)
+            .on('mouseenter', mouseover)
+            .on('mouseleave', mouseout)
             .on('click', click);
 
         groupsEnter
@@ -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, true);
-        }
-
-
         function viewfieldPath() {
             var d = this.parentNode.__data__;
             if (d.pano) {