vjrj
bba2ad5523
Causa raíz, encontrada reproduciéndolo con el bundle de producción en local
—con el servidor de desarrollo NO se ve, y por eso llevaba semanas dándose por
un artefacto del navegador sin pantalla:
if ((centerStored !== [0, 0] || geolocation.get()) && geoInit) {
center.set(centerStored || geolocation.get());
geoInit = false;
}
`centerStored !== [0, 0]` compara contra un array recién creado: es SIEMPRE
cierto. En un navegador nuevo —sin centro en localStorage y con la
geolocalización todavía sin resolver— eso hacía `center.set(undefined)` y dejaba
`geoInit` en false, o sea para siempre. Un `<MapContainer>` sin `center` no
recibe `setView`, y un mapa de Leaflet sin vista no carga capa base ni teselas
ni dispara `whenReady`, con lo que tampoco se creaba la suscripción por
viewport. En desarrollo no pasaba porque la geolocalización llegaba a tiempo.
Y de paso el "Actualizando…" que no se quitaba nunca: las suscripciones se
creaban dentro de un `Tracker.autorun` ANIDADO en el withTracker. La computación
de fuera no dependía de `mapSize`, así que `loading` se calculaba con
`subscription` a undefined y no volvía a recalcularse; además cada pasada del
withTracker dejaba otro autorun sin parar. Ahora las suscripciones se crean en
la propia computación reactiva, que es donde Meteor sabe pararlas al invalidarse.
MapReady, además, vigila el contenedor con un ResizeObserver: su comprobación de
tamaño solo podía reintentar con el evento `resize` de Leaflet, que no se emite
si nadie llama a invalidateSize(). No era la causa de esto, pero hacía que la
comprobación no sirviera de nada.
La suite e2e deja de usar selectores por id: TestUtils.testId() los devuelve solo
en desarrollo, así que contra el bundle de producción —lo que levanta el job
nocturno— no existían y la suite entera habría fallado esta noche.
Verificado contra bundle de producción: /fires pasa de 0 teselas y 0 capas a 12
teselas, capa base y las dos suscripciones por viewport, sin "Actualizando…".
90 tests de servidor, 16 e2e y smoke REST byte-idéntico.
77 lines
3 KiB
JavaScript
77 lines
3 KiB
JavaScript
import { useEffect } from 'react';
|
|
import { useMap, useMapEvents } from 'react-leaflet';
|
|
|
|
// v4 replaces the v1 `ref`/`.leafletElement` + handleLeafletLoad pattern: this
|
|
// child runs inside <MapContainer> and hands the ready Leaflet map to a class
|
|
// parent once, so the parent can drive it imperatively (setView, fitBounds,
|
|
// graphicScale, subsUnion, …).
|
|
export const MapReady = ({ onReady }) => {
|
|
const map = useMap();
|
|
useEffect(() => {
|
|
if (!onReady) return undefined;
|
|
let cancelled = false;
|
|
let delivered = false;
|
|
// El efecto de montaje puede correr antes de que el contenedor tenga tamaño.
|
|
// Si entregamos el mapa entonces, un `getBounds()` del padre lanza y se queda
|
|
// sin bounds: en /fires eso dejaba la suscripcion por viewport sin crear y el
|
|
// mapa vacio (0 capas) pese a haber 7470 fuegos. Esperamos a que el mapa este
|
|
// listo Y tenga tamaño real; entregamos una sola vez.
|
|
let observer = null;
|
|
let poll = null;
|
|
|
|
const stopWatching = () => {
|
|
if (observer) { observer.disconnect(); observer = null; }
|
|
if (poll) { clearInterval(poll); poll = null; }
|
|
};
|
|
|
|
const deliver = () => {
|
|
if (cancelled || delivered) return;
|
|
map.invalidateSize();
|
|
const size = map.getSize();
|
|
if (!size || size.x === 0 || size.y === 0) return;
|
|
delivered = true;
|
|
stopWatching();
|
|
onReady(map);
|
|
};
|
|
|
|
map.whenReady(deliver);
|
|
map.on('resize', deliver);
|
|
|
|
// Y aquí está lo que faltaba. El contenedor puede coger su tamaño DESPUÉS
|
|
// del montaje —en producción la hoja de estilos se aplica más tarde que el
|
|
// primer render de React, cosa que en desarrollo no pasa porque el CSS lo
|
|
// inyecta el propio JS— y Leaflet no vigila su contenedor: solo emite
|
|
// `resize` cuando ALGUIEN llama a invalidateSize(). Como nadie lo hacía, el
|
|
// mapa se quedaba con tamaño 0 para siempre: sin capa base, sin teselas y
|
|
// sin la suscripción por viewport que crea el padre. Es el "mapa gris" de
|
|
// /fires en staging, que en local no se veía justamente porque en
|
|
// desarrollo el CSS llega a tiempo.
|
|
const container = map.getContainer();
|
|
if (container && typeof ResizeObserver !== 'undefined') {
|
|
observer = new ResizeObserver(deliver);
|
|
observer.observe(container);
|
|
}
|
|
// Red de seguridad para navegadores sin ResizeObserver y para cambios de
|
|
// tamaño que no lo disparen; se apaga sola al entregar o a los 10 s.
|
|
let attempts = 0;
|
|
poll = setInterval(() => {
|
|
attempts += 1;
|
|
deliver();
|
|
if (delivered || attempts > 20) stopWatching();
|
|
}, 500);
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
map.off('resize', deliver);
|
|
stopWatching();
|
|
};
|
|
}, [map]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
return null;
|
|
};
|
|
|
|
// Bridges Leaflet map events to callbacks (replaces the v1 onMoveend /
|
|
// onViewportChanged / onZoomend props on <Map>).
|
|
export const MapEvents = ({ handlers }) => {
|
|
useMapEvents(handlers || {});
|
|
return null;
|
|
};
|