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:
@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user