Tuiles jointives : grille en outline et assets versionnés

La bordure 1px des tuiles insettait l'image (box-sizing: border-box) et
creusait un espace vide entre deux tuiles ; la grille est désormais un
outline dessiné par-dessus le bord des images, sans consommer de place
(hover/sélection/export/régénération adaptés). Les URLs de app.css et
app.js portent un hash de contenu : chaque évolution force le
rechargement chez tous les navigateurs, même avec une entrée de cache
antérieure aux en-têtes no-cache.
This commit is contained in:
Antoine Jacquin
2026-09-16 21:42:46 +02:00
parent 328af123ad
commit 26c05319fd

View File

@ -23,6 +23,7 @@ Intégration:
- Régénération solo via --rebuild-index dans cli.py
"""
import hashlib
import json
import logging
import re
@ -1185,6 +1186,13 @@ def _render_html(tiles, global_bbox, all_viz_keys, output_format):
tiles_json = json.dumps(tiles, ensure_ascii=False)
# Les assets sont référencés avec une version (hash de leur contenu) :
# une URL neuve à chaque évolution du CSS/JS force le rechargement chez
# tous les navigateurs, même ceux qui ont une entrée de cache antérieure
# aux en-têtes no-cache de la webapp.
assets_v = hashlib.sha1(
(_APP_CSS + _APP_JS).encode('utf-8')).hexdigest()[:10]
# Options du sélecteur de génération/régénération : les couches du panneau
# (PANEL_VIZ si restreint, sinon le registre complet — mêmes libellés,
# valeurs = noms d'étapes --only du pipeline), y compris celles absentes
@ -1218,6 +1226,7 @@ def _render_html(tiles, global_bbox, all_viz_keys, output_format):
tiles_json=tiles_json,
viz_meta_json=viz_meta_json,
stats_json=stats_json,
assets_v=assets_v,
gen_viz_options=gen_viz_options,
n_tiles=n_tiles,
grid_w=grid_w,
@ -1233,7 +1242,7 @@ _HTML_TEMPLATE = """<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carte LiDAR</title>
<link rel="stylesheet" href="assets/vendor/leaflet/leaflet.css"/>
<link rel="stylesheet" href="assets/app.css"/>
<link rel="stylesheet" href="assets/app.css?v={assets_v}"/>
</head>
<body>
@ -1416,7 +1425,7 @@ const VIZ_META = {viz_meta_json};
const STATS = {stats_json};
</script>
<script src="assets/vendor/leaflet/leaflet.js"></script>
<script src="assets/app.js"></script>
<script src="assets/app.js?v={assets_v}"></script>
</body>
</html>
"""
@ -1626,7 +1635,10 @@ input[type="range"]::-moz-range-thumb {
.ltile-anchor { width: 0; height: 0; }
.ltile {
position: absolute; left: 0; top: 0; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.10);
/* Grille dessinée en outline (par-dessus le bord des images) : une
bordure classique insetterait l'image de 1 px (box-sizing: border-box)
et creuserait un espace vide entre deux tuiles jointives. */
outline: 1px solid rgba(255, 255, 255, 0.10);
/* Fond transparent obligatoire : l'opacité des couches doit laisser voir
les couches du dessous et le fond de carte, pas un rectangle noir. */
background: transparent;
@ -1643,8 +1655,8 @@ body.zooming .leaflet-lidarTiles-pane { will-change: transform; }
/* Évite le drag natif des images qui avale le mouseup (dessin de zones) */
pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.ltile:hover { border-color: var(--accent); box-shadow: 0 0 8px rgba(90, 169, 230, 0.35); }
.ltile.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(90, 169, 230, 0.5); }
.ltile:hover { outline-color: var(--accent); box-shadow: 0 0 8px rgba(90, 169, 230, 0.35); }
.ltile.selected { outline-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(90, 169, 230, 0.5); }
/* --- Fiche tuile (onglet Tuile) --- */
.tile-info { padding: 6px 6px 10px; }
@ -1849,7 +1861,7 @@ body.zooming .leaflet-lidarTiles-pane { will-change: transform; }
/* Surlignage vert des dalles retenues pour l'export (surcouche écran
uniquement — l'image exportée colle les dalles sans aucun trait). */
.ltile.exportSel {
border-color: #39d98a;
outline-color: #39d98a;
box-shadow: 0 0 0 1px #39d98a, 0 0 12px rgba(57, 217, 138, 0.5);
}
body.exporting, body.exporting #viewport { cursor: pointer; }
@ -1857,7 +1869,7 @@ body.exporting, body.exporting #viewport { cursor: pointer; }
/* Surlignage bleu des dalles retenues pour la régénération (mode
« Sélectionner des tuiles » de l'onglet Génération). */
.ltile.genSel {
border-color: var(--accent);
outline-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(90, 169, 230, 0.5);
}
body.genSel, body.genSel #viewport { cursor: pointer; }