From 9cfe6dd357200d25255e181f91a90e5ac51e8a57 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 12 Jun 2018 00:45:42 -0400
Subject: [PATCH] Fix highlighted and selected styles (_union needed array
 arguments)

---
 css/60_photos.css              | 11 -----------
 modules/services/streetside.js |  7 ++++++-
 modules/svg/streetside.js      | 27 ++++++++++++++++++---------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/css/60_photos.css b/css/60_photos.css
index 83ca4349d..44b80781c 100644
--- a/css/60_photos.css
+++ b/css/60_photos.css
@@ -146,17 +146,6 @@
 .layer-streetside-images .viewfield-group * {
     fill: #00d8f5;
 }
-.layer-streetside-images .viewfield-group * {
-    fill: #00d8f5;
-}
-.layer-streetside-images .viewfield-group.selected * {
-    fill: #fffc64 !important;
-    fill-opacity: 1;
-}
-.layer-streetside-images .viewfield-group.hovered * {
-    fill: #fffc64 !important;
-    fill-opacity: .9;
-}
 .layer-streetside-images .sequence {
     stroke: #00d8f5;
 }
diff --git a/modules/services/streetside.js b/modules/services/streetside.js
index 9bb56d350..bf622d687 100644
--- a/modules/services/streetside.js
+++ b/modules/services/streetside.js
@@ -293,6 +293,11 @@ export default {
     },
 
 
+    viewer: function() {
+        return _pannellumViewer;
+    },
+
+
     initViewer: function (context) {
         if (!window.pannellum) return;
         if (_pannellumViewer) return;
@@ -503,7 +508,7 @@ export default {
         var viewer = d3_select('#photoviewer');
         var selected = viewer.empty() ? undefined : viewer.datum();
         var selectedBubbleKey = selected && selected.key;
-        var highlightedBubbleKeys = _union(hoveredBubbleKey, selectedBubbleKey);
+        var highlightedBubbleKeys = _union([hoveredBubbleKey], [selectedBubbleKey]);
 
         d3_selectAll('.layer-streetside-images .viewfield-group')
             .classed('highlighted', function (d) { return highlightedBubbleKeys.indexOf(d.key) !== -1; })
diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js
index 7820a01c9..fc0d6310b 100644
--- a/modules/svg/streetside.js
+++ b/modules/svg/streetside.js
@@ -93,10 +93,18 @@ export function svgStreetside(projection, context, dispatch) {
         var service = getService();
         if (!service) return;
 
+        // reset bubble back to a circular field
+        layer.selectAll('.viewfield-group.selected .viewfield')
+            .attr('d', viewfieldPath);
+
         service
             .selectImage(d)
             .showViewer();
 
+        // show selected bubble with a viewfield
+        layer.selectAll('.viewfield-group.selected .viewfield')
+            .attr('d', 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z');
+
         context.map().centerEase(d.loc);
     }
 
@@ -192,15 +200,6 @@ export function svgStreetside(projection, context, dispatch) {
             .attr('class', 'viewfield')
             .attr('transform', 'scale(1.5,1.5),translate(-8, -13)')
             .attr('d', viewfieldPath);
-
-        function viewfieldPath() {
-            var d = this.parentNode.__data__;
-            if (d.pano) {
-                return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
-            } else {
-                return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
-            }
-        }
     }
 
     /**
@@ -242,6 +241,16 @@ export function svgStreetside(projection, context, dispatch) {
         }
     }
 
+
+    function viewfieldPath() {
+        var d = this.parentNode.__data__;
+        if (d.pano) {
+            return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
+        } else {
+            return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
+        }
+    }
+
     /**
      * drawImages.enabled().
      */