Update viewfield rotation when adjusting viewer

modules/services/streetside.js

@@ -26,7 +26,7 @@ var bubbleAppKey = 'AuftgJsO0Xs8Ts4M1xZUQJQXJNsvmh3IV8DkNieCiy3tCwCUMq76-WpkrBtN
 var pannellumViewerCSS = 'pannellum-streetside/pannellum.css';
 var pannellumViewerJS = 'pannellum-streetside/pannellum.js';
 var tileZoom = 16.5;
-var dispatch = d3_dispatch('loadedBubbles');
+var dispatch = d3_dispatch('loadedBubbles', 'viewerChanged');
 var _currScene = 0;
 var _bubbleCache;
 var _pannellumViewer;
@@ -177,7 +177,7 @@ function loadNextTilePage(which, currZoom, url, tile) {
         }).filter(Boolean);
 
         cache.rtree.load(features);
-        if (which === 'bubbles'){
+        if (which === 'bubbles') {
             dispatch.call('loadedBubbles');
         }
     });
@@ -310,6 +310,14 @@ export default {
         options.scenes[sceneID] = _sceneOptions;
 
         _pannellumViewer = window.pannellum.viewer('viewer-streetside', options);
+
+        _pannellumViewer
+            .on('mouseup', updateRotation)
+            .on('touchend', updateRotation);
+
+        function updateRotation() {
+            dispatch.call('viewerChanged');
+        }
     },
 
 

modules/svg/streetside.js

@@ -10,6 +10,7 @@ export function svgStreetside(projection, context, dispatch) {
     var minMarkerZoom = 16;
     var minViewfieldZoom = 19;
     var layer = d3_select(null);
+    var _viewerRotation = null;
     var _streetside;
 
     /**
@@ -27,7 +28,9 @@ export function svgStreetside(projection, context, dispatch) {
     function getService() {
         if (services.streetside && !_streetside) {
             _streetside = services.streetside;
-            _streetside.event.on('loadedBubbles', throttledRedraw);
+            _streetside.event
+                .on('viewerChanged', viewerChanged)
+                .on('loadedBubbles', throttledRedraw);
         } else if (!services.streetside && _streetside) {
             _streetside = null;
         }
@@ -129,12 +132,28 @@ export function svgStreetside(projection, context, dispatch) {
      */
     function transform(d) {
         var t = svgPointTransform(projection)(d);
-        if (d.ca) {
-            t += ' rotate(' + Math.floor(d.ca) + ',0,0)';
+        var rot = _viewerRotation !== null ? _viewerRotation : d.ca;
+        if (rot) {
+            t += ' rotate(' + Math.floor(rot) + ',0,0)';
         }
         return t;
     }
 
+
+    function viewerChanged() {
+        var service = getService();
+        if (!service) return;
+
+        var viewer = service.viewer();
+        if (!viewer) return;
+
+        // update viewfield rotation
+        _viewerRotation = viewer.getYaw();
+        layer.selectAll('.viewfield-group.selected')
+            .attr('transform', transform);
+    }
+
+
     /**
      * update().
      */