diff --git a/app/javascript/application.js b/app/javascript/application.js index 94b36764..77c12e58 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -1,9 +1,9 @@ // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails import '@hotwired/turbo-rails' -import 'stimulus-controllers-index' -import * as functions from 'helpers/functions' import AOS from 'aos' +import * as functions from 'helpers/functions' +import 'stimulus-controllers-index' // Note: Don't import map js here for faster frontpage load times @@ -21,7 +21,6 @@ window.addEventListener('turbo:load', function () { } }) - if ('serviceWorker' in navigator) { // Register the service worker window.addEventListener('load', () => { diff --git a/app/javascript/channels/map_channel.js b/app/javascript/channels/map_channel.js index 6141afa2..b0880678 100644 --- a/app/javascript/channels/map_channel.js +++ b/app/javascript/channels/map_channel.js @@ -46,16 +46,17 @@ export function initializeSocket () { if (channelStatus === 'off') { reloadMapProperties().then(() => { initializeMaplibreProperties() - loadLayerDefinitions().then(() => { + loadLayerDefinitions().then(async () => { // If basemap actually changed, setBackgroundMapLayer() will trigger // initializeStyles() via style.load (which re-initializes layer sources/styles). // If not, we re-initialize them directly to catch up on any missed updates. if (!setBackgroundMapLayer()) { initializeLayerSources() - initializeLayerStyles() + await initializeLayerStyles() } map.fire('load', { detail: { message: 'Map re-loaded by map_channel' } }) }) + // status('Connection to server re-established') }) } consumer.connection.webSocket.onerror = function (_event) { diff --git a/app/javascript/maplibre/controls/buttons/select.js b/app/javascript/maplibre/controls/buttons/select.js index d43c5497..eca7c3ed 100644 --- a/app/javascript/maplibre/controls/buttons/select.js +++ b/app/javascript/maplibre/controls/buttons/select.js @@ -1,13 +1,11 @@ import { resetEditControls } from 'maplibre/controls/edit'; import { resetControls } from 'maplibre/controls/shared'; -import { recoverHandlers } from 'maplibre/map'; export class MapSelectControl { constructor (_options) { this._container = document.createElement('div') this._container.innerHTML = '' this._container.onclick = function (e) { - recoverHandlers() resetControls() resetEditControls() e.target.closest('button').classList.add('active') diff --git a/app/javascript/maplibre/map.js b/app/javascript/maplibre/map.js index 834a5929..ae26d20f 100644 --- a/app/javascript/maplibre/map.js +++ b/app/javascript/maplibre/map.js @@ -6,10 +6,10 @@ import * as functions from 'helpers/functions'; import { status } from 'helpers/status'; import { AnimateLineAnimation, AnimatePointAnimation, AnimatePolygonAnimation, animateViewFromProperties } from 'maplibre/animations'; import { hideContextMenu, initContextMenu } from 'maplibre/controls/context_menu'; -import { isGeolocateCompassModeActive, isGeolocateFollowModeActive } from 'maplibre/controls/geolocate'; +import { isGeolocateFollowModeActive } from 'maplibre/controls/geolocate'; import { initCtrlTooltips, initializeDefaultControls, initSettingsModal, resetControls } from 'maplibre/controls/shared'; import { initializeViewControls } from 'maplibre/controls/view'; -import { draw, resetEditMode } from 'maplibre/edit'; +import { resetEditMode } from 'maplibre/edit'; import { highlightFeature, resetHighlightedFeature } from 'maplibre/feature'; import { getFeature, initializeLayers, initializeLayerSources, initializeLayerStyles, layers, renderLayers } from 'maplibre/layers/layers'; import { basemaps, defaultFont, demSource, elevationSource } from 'maplibre/styles/basemaps'; @@ -26,38 +26,6 @@ let backgroundHillshade let backgroundGlobe let backgroundContours -// Cycle handler enable state and dispatch synthetic pointer-up events to clear -// any wedged interaction state. Idempotent — safe to call any time. Triggered -// automatically on first idle after visibility resume, and manually via the -// select-mode button click. -export function recoverHandlers () { - status("Recovering handlers") - const opts = { bubbles: true, cancelable: true } - window.dispatchEvent(new MouseEvent('mouseup', opts)) - if (window.PointerEvent) { - window.dispatchEvent(new PointerEvent('pointerup', { ...opts, pointerType: 'mouse' })) - } - const cycle = (h) => { h.disable(); h.enable() } - cycle(map.scrollZoom) - cycle(map.doubleClickZoom) - cycle(map.keyboard) - cycle(map.boxZoom) - cycle(map.touchPitch) - if (!isGeolocateCompassModeActive()) { - cycle(map.dragRotate) - cycle(map.touchZoomRotate) - if (!draw || draw.getMode() !== 'draw_paint_mode') cycle(map.dragPan) - } -} - -// Module-scope visibilitychange listener — registered once. Inside initializeMap -// would re-register on every Stimulus reconnect (Turbo navigation), accumulating -// stale closures. Guard with `!map` since this can fire before initializeMap runs. -document.addEventListener('visibilitychange', () => { - if (document.visibilityState !== 'visible' || !map) return - // map.once('idle', recoverHandlers) -}) - // Workflow of map loading: // // initializeMap() @@ -171,7 +139,7 @@ export async function initializeMap (divId = 'maplibre-map') { map.on('touchend', (e) => { updateCursorPosition(e) }) map.on('drag', () => { mapInteracted = true - if (layers.filter(l => (l.type === 'overpass' || l.type === 'wikipedia') && l.show !== false).length) { dom.animateElement('#layer-reload', 'fade-in') } + if (layers && layers.filter(l => (l.type === 'overpass' || l.type === 'wikipedia') && l.show !== false).length) { dom.animateElement('#layer-reload', 'fade-in') } }) map.on('zoom', (_e) => { limitZoom() }) map.on('online', (_e) => { functions.e('#maplibre-map', e => { e.setAttribute('data-online', true) }) }) @@ -525,10 +493,10 @@ export function setBackgroundMapLayer (mapName = mapProperties.base_map, force = basemap = basemaps()['osmRasterTiles'] } if (basemap) { - map.once('style.load', () => { + map.once('style.load', async () => { status('Loaded base map ' + mapName) // on map style change, all sources and layers are removed, so we need to re-initialize them - initializeStyles() + await initializeStyles() limitZoom() }) backgroundMapLayer = mapName