nakarte

commit 3a3811b20c6218aa2b348bb32fee31b09dfd04a9
parent 18805c34cd24f9ab3eb522178b0d2aa7a775ed18
Author: Sergey Orlov <wladimirych@gmail.com>
Date:   Wed,  6 May 2020 15:49:02 +0200

panoramas: resize viewers using specific methods

instead of firing windows resize event

Related to #16

Diffstat:
M
src/lib/leaflet.control.panoramas/index.js
 | 
17
++++++++---------
M
src/lib/leaflet.control.panoramas/lib/google/index.js
 | 
7
+++++++
M
src/lib/leaflet.control.panoramas/lib/mapillary/index.js
 | 
5
+++++
M
src/lib/leaflet.control.panoramas/lib/wikimedia/index.js
 | 
4
++++

4 files changed, 24 insertions(+), 9 deletions(-)
diff --git a/src/lib/leaflet.control.panoramas/index.js b/src/lib/leaflet.control.panoramas/index.js
@@ -11,12 +11,6 @@ import {DragEvents} from '~/lib/leaflet.events.drag';
 import {onElementResize} from '~/lib/anyElementResizeEvent';
 import safeLocalStorage from '~/lib/safe-localstorage';
 
-function fireRefreshEventOnWindow() {
-    const evt = document.createEvent("HTMLEvents");
-    evt.initEvent('resize', true, false);
-    window.dispatchEvent(evt);
-}
-
 const PanoMarker = L.Marker.extend({
     options: {
         zIndexOffset: 10000
@@ -97,7 +91,7 @@ L.Control.Panoramas = L.Control.extend({
             L.Control.prototype.initialize.call(this, options);
             this.loadSettings();
             this._panoramasContainer = L.DomUtil.create('div', 'panoramas-container');
-            onElementResize(this._panoramasContainer, fireRefreshEventOnWindow);
+            onElementResize(this._panoramasContainer, this.onContainerResize.bind(this));
             this.providers = this.getProviders();
             for (let provider of this.providers) {
                 provider.selected.subscribe(this.updateCoverageVisibility, this);
@@ -242,7 +236,6 @@ L.Control.Panoramas = L.Control.extend({
 
         showPanoramaContainer: function() {
             L.DomUtil.addClass(this._panoramasContainer, 'enabled');
-            fireRefreshEventOnWindow();
         },
 
         panoramaVisible: function() {
@@ -311,7 +304,6 @@ L.Control.Panoramas = L.Control.extend({
             }
             L.DomUtil.removeClass(this._panoramasContainer, 'enabled');
             this.hideMarker();
-            fireRefreshEventOnWindow();
             this.notifyChanged();
         },
 
@@ -407,6 +399,13 @@ L.Control.Panoramas = L.Control.extend({
             const mapSize = this._map._container[this._splitVerically ? 'offsetWidth' : 'offsetHeight'];
             const newSize = fraction * (mapSize + containerSize);
             container.style[this._splitVerically ? 'width' : 'height'] = `${newSize}px`;
+        },
+
+        onContainerResize: function() {
+            const provider = this.panoramaVisible();
+            if (provider && provider.viewer) {
+                provider.viewer.invalidateSize();
+            }
         }
     },
 );
diff --git a/src/lib/leaflet.control.panoramas/lib/google/index.js b/src/lib/leaflet.control.panoramas/lib/google/index.js
@@ -33,6 +33,7 @@ async function getPanoramaAtPos(latlng, searchRadiusMeters) {
 
 const Viewer = L.Evented.extend({
     initialize: function(google, container) {
+        this.google = google;
         const panorama = this.panorama = new google.maps.StreetViewPanorama(container, {
                 enableCloseButton: true,
                 imageDateControl: true
@@ -41,6 +42,8 @@ const Viewer = L.Evented.extend({
         panorama.addListener('position_changed', () => this.onPanoramaChangeView());
         panorama.addListener('pov_changed', () => this.onPanoramaChangeView());
         panorama.addListener('closeclick', () => this.onCloseClick());
+
+        this.invalidateSize = L.Util.throttle(this._invalidateSize, 50, this);
     },
 
     showPano: function(data) {
@@ -99,6 +102,10 @@ const Viewer = L.Evented.extend({
             return true;
         }
         return false;
+    },
+
+    _invalidateSize: function() {
+        this.google.maps.event.trigger(this.panorama, 'resize');
     }
 });
 
diff --git a/src/lib/leaflet.control.panoramas/lib/mapillary/index.js b/src/lib/leaflet.control.panoramas/lib/mapillary/index.js
@@ -52,6 +52,7 @@ const Viewer = L.Evented.extend({
             this._bearing = 0;
             this._zoom = 0;
             this._center = [0, 0];
+            this.invalidateSize = L.Util.throttle(this._invalidateSize, 100, this);
         },
 
         showPano: function(data) {
@@ -161,6 +162,10 @@ const Viewer = L.Evented.extend({
                 return true;
             }
             return false;
+        },
+
+        _invalidateSize: function() {
+            this.viewer.resize();
         }
     }
 );
diff --git a/src/lib/leaflet.control.panoramas/lib/wikimedia/index.js b/src/lib/leaflet.control.panoramas/lib/wikimedia/index.js
@@ -333,6 +333,10 @@ const Viewer = L.Evented.extend({
             center.lng.toFixed(2),
             this.map.getZoom().toFixed(1)
         ];
+    },
+
+    invalidateSize: function() {
+        this.map.invalidateSize();
     }
 });