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:
Generated
+2
-2
@@ -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
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "jwe",
|
||||
"version": "2.0.1",
|
||||
"version": "2.0.2",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user