1 Commits

Author SHA1 Message Date
sucupira 67142428ac 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)
2026-07-19 20:41:49 -04:00
3 changed files with 16 additions and 4 deletions
+2 -2
View File
@@ -1,12 +1,12 @@
{ {
"name": "jwe", "name": "jwe",
"version": "2.0.1", "version": "2.0.2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "jwe", "name": "jwe",
"version": "2.0.1", "version": "2.0.2",
"dependencies": { "dependencies": {
"mapillary-js": "^4.1.2", "mapillary-js": "^4.1.2",
"maplibre-gl": "^5.1.0", "maplibre-gl": "^5.1.0",
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "jwe", "name": "jwe",
"version": "2.0.1", "version": "2.0.2",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
+13 -1
View File
@@ -50,6 +50,7 @@
let guessMarker: Marker | null = null; let guessMarker: Marker | null = null;
let realMarker: Marker | null = null; let realMarker: Marker | null = null;
let explorerMarkers: Marker[] = []; let explorerMarkers: Marker[] = [];
let observateurTaille: ResizeObserver | null = null;
const SRC_LIGNE = 'jwe-ligne'; const SRC_LIGNE = 'jwe-ligne';
const SRC_PAIRES = 'jwe-paires'; const SRC_PAIRES = 'jwe-paires';
@@ -143,7 +144,12 @@
[Math.min(guess.lon, real.lon), Math.min(guess.lat, real.lat)], [Math.min(guess.lon, real.lon), Math.min(guess.lat, real.lat)],
[Math.max(guess.lon, real.lon), Math.max(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 { } else {
map.easeTo({ center: [real.lon, real.lat], zoom: 11, duration: reducedMotion ? 0 : 900 }); map.easeTo({ center: [real.lon, real.lat], zoom: 11, duration: reducedMotion ? 0 : 900 });
} }
@@ -316,9 +322,15 @@
syncExplorerMarkers(); syncExplorerMarkers();
if (real) dessinerRevelation(); 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 () => { return () => {
detruit = true; detruit = true;
observateurTaille?.disconnect();
observateurTaille = null;
map?.remove(); map?.remove();
map = null; map = null;
}; };