nakarte

Source code of https://map.sikmir.ru (fork)
git clone git://git.sikmir.ru/nakarte
Log | Files | Refs | LICENSE

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:
Msrc/lib/leaflet.control.panoramas/index.js | 17++++++++---------
Msrc/lib/leaflet.control.panoramas/lib/google/index.js | 7+++++++
Msrc/lib/leaflet.control.panoramas/lib/mapillary/index.js | 5+++++
Msrc/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(); } });