fix(app): cadrage revelation — resize canvas + maxZoom 15

- ResizeObserver sur le conteneur : MapLibre ne detecte pas seul les
  changements de taille (panneau resultat, rotation ecran)
- map.resize() avant fitBounds : le panneau resultat remplace la photo,
  le canvas etait obsolete et le cadrage fausse (marqueur reel coupe)
- maxZoom 12 -> 15 : pour un guess proche, les deux marqueurs restent
  distinguables (juger visuellement la qualite du guess)
This commit is contained in:
sucupira
2026-07-19 20:41:49 -04:00
parent 84c0363067
commit 67142428ac
3 changed files with 16 additions and 4 deletions
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "jwe",
"version": "2.0.1",
"version": "2.0.2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "jwe",
"version": "2.0.1",
"version": "2.0.2",
"dependencies": {
"mapillary-js": "^4.1.2",
"maplibre-gl": "^5.1.0",
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "jwe",
"version": "2.0.1",
"version": "2.0.2",
"private": true,
"type": "module",
"scripts": {
+13 -1
View File
@@ -50,6 +50,7 @@
let guessMarker: Marker | null = null;
let realMarker: Marker | null = null;
let explorerMarkers: Marker[] = [];
let observateurTaille: ResizeObserver | null = null;
const SRC_LIGNE = 'jwe-ligne';
const SRC_PAIRES = 'jwe-paires';
@@ -143,7 +144,12 @@
[Math.min(guess.lon, real.lon), Math.min(guess.lat, real.lat)],
[Math.max(guess.lon, real.lon), Math.max(guess.lat, real.lat)]
);
map.fitBounds(bounds, { padding: 80, duration: reducedMotion ? 0 : 900, maxZoom: 12 });
// Le panneau résultat vient de remplacer la photo : synchroniser la
// taille du canvas AVANT de calculer le cadrage, sinon il est faussé.
// maxZoom 15 (et non 12) : pour un guess proche du lieu, les deux
// marqueurs doivent rester distinguables (juger « à quel point on est bon »).
map.resize();
map.fitBounds(bounds, { padding: 90, duration: reducedMotion ? 0 : 900, maxZoom: 15 });
} else {
map.easeTo({ center: [real.lon, real.lat], zoom: 11, duration: reducedMotion ? 0 : 900 });
}
@@ -316,9 +322,15 @@
syncExplorerMarkers();
if (real) dessinerRevelation();
});
// MapLibre ne détecte pas seul les changements de taille du conteneur
// (panneau résultat qui remplace la photo, rotation d'écran…).
observateurTaille = new ResizeObserver(() => map?.resize());
observateurTaille.observe(conteneur);
})();
return () => {
detruit = true;
observateurTaille?.disconnect();
observateurTaille = null;
map?.remove();
map = null;
};