keep photo viewer state on reset, properly clean up active marker

when switching between photos from different providers

fixes #10987

modules/services/kartaview.js

@@ -7,6 +7,7 @@ import RBush from 'rbush';
 import { localizer } from '../core/localizer';
 import { geoExtent, geoScaleToZoom } from '../geo';
 import { utilQsString, utilRebind, utilSetTransform, utilStringQs, utilTiler } from '../util';
+import { services } from './';
 
 
 var apibase = 'https://kartaview.org';
@@ -191,8 +192,6 @@ export default {
             images: { inflight: {}, loaded: {}, nextPage: {}, rtree: new RBush(), forImageKey: {} },
             sequences: {}
         };
-
-        _oscSelectedImage = null;
     },
 
 
@@ -368,21 +367,22 @@ export default {
 
 
     showViewer: function(context) {
-        var viewer = context.container().select('.photoviewer')
+        var viewer = context.container().select('.photoviewer');
-            .classed('hide', false);
-
         var isHidden = viewer.selectAll('.photo-wrapper.kartaview-wrapper.hide').size();
 
         if (isHidden) {
-            viewer
+            for (const service of Object.values(services)) {
-                .selectAll('.photo-wrapper:not(.kartaview-wrapper)')
+                if (service === this) continue;
-                .classed('hide', true);
+                if (typeof service.hideViewer === 'function') {
-
+                    service.hideViewer(context);
+                }
+            }
             viewer
                 .selectAll('.photo-wrapper.kartaview-wrapper')
                 .classed('hide', false);
         }
 
+        viewer.classed('hide', false);
         return this;
     },
 

modules/services/mapilio.js

@@ -10,6 +10,7 @@ import { isEqual } from 'lodash';
 import { utilRebind, utilTiler, utilQsString, utilStringQs, utilSetTransform } from '../util';
 import {geoExtent, geoScaleToZoom} from '../geo';
 import {localizer} from '../core/localizer';
+import { services } from './';
 
 const apiUrl = 'https://end.mapilio.com';
 const imageBaseUrl = 'https://cdn.mapilio.com/im';
@@ -222,8 +223,6 @@ export default {
             sequences: { rtree: new RBush(), lineString: {} },
             requests: { loaded: {}, inflight: {} }
         };
-
-        _activeImage = null;
     },
 
     // Get visible images
@@ -575,21 +574,22 @@ export default {
     },
 
     showViewer:function (context) {
-        let wrap = context.container().select('.photoviewer')
+        let wrap = context.container().select('.photoviewer');
-            .classed('hide', false);
-
         let isHidden = wrap.selectAll('.photo-wrapper.mapilio-wrapper.hide').size();
 
         if (isHidden) {
-            wrap
+            for (const service of Object.values(services)) {
-                .selectAll('.photo-wrapper:not(.mapilio-wrapper)')
+                if (service === this) continue;
-                .classed('hide', true);
+                if (typeof service.hideViewer === 'function') {
-
+                    service.hideViewer(context);
+                }
+            }
             wrap
                 .selectAll('.photo-wrapper.mapilio-wrapper')
                 .classed('hide', false);
         }
 
+        wrap.classed('hide', false);
         return this;
     },
 

modules/services/mapillary.js

@@ -8,6 +8,7 @@ import { VectorTile } from '@mapbox/vector-tile';
 
 import { geoExtent, geoScaleToZoom } from '../geo';
 import { utilQsString, utilRebind, utilTiler, utilStringQs } from '../util';
+import { services } from './';
 
 const accessToken = 'MLY|4100327730013843|5bb78b81720791946a9a7b956c57b7cf';
 const apiUrl = 'https://graph.mapillary.com/';
@@ -260,8 +261,6 @@ export default {
             sequences: { rtree: new RBush(), lineString: {} },
             requests: { loaded: {}, inflight: {} }
         };
-
-        _mlyActiveImage = null;
     },
 
     // Get visible images
@@ -465,15 +464,16 @@ export default {
 
     // Make the image viewer visible
     showViewer: function(context) {
-        const wrap = context.container().select('.photoviewer')
+        const wrap = context.container().select('.photoviewer');
-            .classed('hide', false);
-
         const isHidden = wrap.selectAll('.photo-wrapper.mly-wrapper.hide').size();
 
         if (isHidden && _mlyViewer) {
-            wrap
+            for (const service of Object.values(services)) {
-                .selectAll('.photo-wrapper:not(.mly-wrapper)')
+                if (service === this) continue;
-                .classed('hide', true);
+                if (typeof service.hideViewer === 'function') {
+                    service.hideViewer(context);
+                }
+            }
 
             wrap
                 .selectAll('.photo-wrapper.mly-wrapper')
@@ -483,6 +483,7 @@ export default {
         }
 
         _isViewerOpen = true;
+        wrap.classed('hide', false);
 
         return this;
     },

modules/services/panoramax.js

@@ -9,6 +9,8 @@ import { geoExtent, geoScaleToZoom } from '../geo';
 import { t, localizer } from '../core/localizer';
 import pannellumPhotoFrame from './pannellum_photo';
 import planePhotoFrame from './plane_photo';
+import { services } from './';
+
 
 const apiUrl = 'https://api.panoramax.xyz/';
 const tileUrl = apiUrl + 'api/map/{z}/{x}/{y}.mvt';
@@ -255,9 +257,6 @@ export default {
             mockSequences: { rtree: new RBush(), lineString: {} },
             requests: { loaded: {}, inflight: {} }
         };
-
-        _currentScene.currentImage = null;
-        _activeImage = null;
     },
 
     /**
@@ -685,19 +684,22 @@ export default {
      * @param {*} context
      */
     showViewer: function (context) {
-        let wrap = context.container().select('.photoviewer')
+        let wrap = context.container().select('.photoviewer');
-            .classed('hide', false);
         let isHidden = wrap.selectAll('.photo-wrapper.panoramax-wrapper.hide').size();
         if (isHidden) {
-            wrap
+            for (const service of Object.values(services)) {
-                .selectAll('.photo-wrapper:not(.panoramax-wrapper)')
+                if (service === this) continue;
-                .classed('hide', true);
+                if (typeof service.hideViewer === 'function') {
+                    service.hideViewer(context);
+                }
+            }
             wrap
                 .selectAll('.photo-wrapper.panoramax-wrapper')
                 .classed('hide', false);
         }
 
         _isViewerOpen = true;
+        wrap.classed('hide', false);
 
         return this;
     },

modules/services/streetside.js

@@ -15,6 +15,8 @@ import {
 
 import { utilAesDecrypt, utilArrayUnion, utilQsString, utilRebind, utilStringQs, utilTiler, utilUniqueDomId } from '../util';
 
+import { services } from './';
+
 
 const streetsideApi = 'https://dev.virtualearth.net/REST/v1/Imagery/MetaData/Streetside?mapArea={bbox}&key={key}&count={count}&uriScheme=https';
 const maxResults = 500;
@@ -644,22 +646,22 @@ export default {
    * showViewer()
    */
   showViewer: function(context) {
-
+    let wrap = context.container().select('.photoviewer');
-    let wrap = context.container().select('.photoviewer')
-      .classed('hide', false);
-
     let isHidden = wrap.selectAll('.photo-wrapper.ms-wrapper.hide').size();
 
     if (isHidden) {
-      wrap
+      for (const service of Object.values(services)) {
-        .selectAll('.photo-wrapper:not(.ms-wrapper)')
+        if (service === this) continue;
-        .classed('hide', true);
+        if (typeof service.hideViewer === 'function') {
-
+          service.hideViewer(context);
+        }
+      }
       wrap
         .selectAll('.photo-wrapper.ms-wrapper')
         .classed('hide', false);
     }
 
+    wrap.classed('hide', false);
     return this;
   },
 

modules/services/vegbilder.js

@@ -8,6 +8,7 @@ import { utilQsString, utilTiler, utilRebind, utilArrayUnion, utilStringQs} from
 import {geoExtent, geoScaleToZoom, geoVecAngle, geoVecEqual} from '../geo';
 import pannellumPhotoFrame from './pannellum_photo';
 import planePhotoFrame from './plane_photo';
+import { services } from './';
 
 
 const owsEndpoint = 'https://www.vegvesen.no/kart/ogc/vegbilder_1_0/ows?';
@@ -493,20 +494,21 @@ export default {
   },
 
   showViewer: function (context) {
-    const viewer = context.container().select('.photoviewer')
+    const viewer = context.container().select('.photoviewer');
-      .classed('hide', false);
-
     const isHidden = viewer.selectAll('.photo-wrapper.vegbilder-wrapper.hide').size();
 
     if (isHidden) {
-      viewer
+      for (const service of Object.values(services)) {
-        .selectAll('.photo-wrapper:not(.vegbilder-wrapper)')
+        if (service === this) continue;
-        .classed('hide', true);
+        if (typeof service.hideViewer === 'function') {
-
+          service.hideViewer(context);
+        }
+      }
       viewer
         .selectAll('.photo-wrapper.vegbilder-wrapper')
         .classed('hide', false);
     }
+    viewer.classed('hide', false);
     return this;
   },
 

modules/svg/panoramax_images.js

@@ -233,10 +233,6 @@ export function svgPanoramaxImages(projection, context, dispatch) {
         let images = (service && zoom >= imageMinZoom ? service.images(projection) : []);
         dispatch.call('photoDatesChanged', this, 'panoramax', [...images.map(p => p.capture_time), ...sequences.map(s => s.properties.date)]);
 
-        let isHidden = d3_select('.photo-wrapper.panoramax-wrapper.hide').size();
-
-        if (isHidden) service.setActiveImage(null);
-
         images = await filterImages(images);
         sequences = await filterSequences(sequences, service);
 

modules/ui/photoviewer.js

@@ -26,12 +26,11 @@ export function uiPhotoviewer(context) {
             .attr('class', 'thumb-hide')
             .attr('title', t('icons.close'))
             .on('click', function () {
-                if (services.streetside) { services.streetside.hideViewer(context); }
+                for (const service of Object.values(services)) {
-                if (services.mapillary) { services.mapillary.hideViewer(context); }
+                    if (typeof service.hideViewer === 'function') {
-                if (services.kartaview) { services.kartaview.hideViewer(context); }
+                        service.hideViewer(context);
-                if (services.mapilio) { services.mapilio.hideViewer(context); }
+                    }
-                if (services.panoramax) { services.panoramax.hideViewer(context); }
+                }
-                if (services.vegbilder) { services.vegbilder.hideViewer(context); }
             })
             .append('div')
             .call(svgIcon('#iD-icon-close'));

test/spec/services/kartaview.js

@@ -43,13 +43,12 @@ describe('iD.serviceKartaview', function() {
     });
 
     describe('#reset', function() {
-        it('resets cache and image', function() {
+        it('resets cache', function() {
             kartaview.cache().foo = 'bar';
             kartaview.selectImage(context, {key: 'baz'});
 
             kartaview.reset();
             expect(kartaview.cache()).to.not.have.property('foo');
-            expect(kartaview.getSelectedImage()).to.be.null;
         });
     });
 

test/spec/services/mapillary.js

@@ -42,13 +42,12 @@ describe('iD.serviceMapillary', function() {
 
 
     describe('#reset', function() {
-        it('resets cache and image', function() {
+        it('resets cache', function() {
             mapillary.cache().foo = 'bar';
             mapillary.selectImage(context, { key: 'baz', loc: [10,0] });
 
             mapillary.reset();
             expect(mapillary.cache()).to.not.have.property('foo');
-            expect(mapillary.getActiveImage()).to.be.null;
         });
     });
 

test/spec/services/panoramax.js

@@ -79,13 +79,12 @@ describe('iD.servicePanoramax', function() {
     });
 
     describe('#reset', function() {
-        it('resets cache and image', function() {
+        it('resets cache', function() {
             panoramax.cache().foo = 'bar';
             panoramax.setActiveImage(context, {key: 'baz'});
 
             panoramax.reset();
             expect(panoramax.cache()).to.not.have.property('foo');
-            expect(panoramax.getActiveImage()).to.be.null;
         });
     });