Poser le cadre d'export PDF sur le terrain, le déplacer par une poignée et recadrer la vue dessus
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Antoine Jacquin
@ -137,7 +137,10 @@ _MAP_HTML = """<!DOCTYPE html>
|
||||
<option value="5000">1:5 000</option><option value="10000">1:10 000</option></select></div>
|
||||
<div class="use-row"><input id="printTitle" type="text" maxlength="120"
|
||||
placeholder="Titre (optionnel)" title="Titre imprimé dans le cartouche"></div>
|
||||
<p class="print-hint">Déplacez la carte sous le cadre jaune : il montre la zone imprimée.</p>
|
||||
<p class="print-hint">Faites glisser la poignée ✥ pour placer le cadre jaune sur la zone à imprimer.</p>
|
||||
<div class="use-row"><button id="printHere" class="link-btn"
|
||||
title="Placer le cadre au centre de la vue">⌖ Centrer ici</button>
|
||||
<button id="printFit" class="link-btn" title="Zoomer sur le cadre">⤢ Voir le cadre</button></div>
|
||||
<div class="card-foot"><button id="printGo">Exporter le PDF</button>
|
||||
<span id="printMsg" class="print-msg"></span></div>
|
||||
</div>
|
||||
@ -350,6 +353,9 @@ input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius
|
||||
border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 4px 6px; }
|
||||
.print-hint { margin: 4px 0; font-size: 12px; opacity: 0.75; }
|
||||
.print-msg { font-size: 12px; margin-left: 8px; }
|
||||
.print-handle { display: flex; align-items: center; justify-content: center; cursor: move;
|
||||
font-size: 20px; color: #1b1b1b; background: #ffd166; border: 2px solid #1b1b1b;
|
||||
border-radius: 50%; box-shadow: 0 1px 6px rgba(0,0,0,0.5); }
|
||||
body.drawing { cursor: crosshair !important; }
|
||||
body.drawing .leaflet-container { cursor: crosshair !important; }
|
||||
/* Barre de génération : en HAUT à droite de l'écran, boutons accentués —
|
||||
@ -1288,10 +1294,11 @@ el('genQueueClear').addEventListener('click', () =>
|
||||
.catch(msg => toast('Échec : ' + msg.message, 6000)));
|
||||
|
||||
// --- export PDF (planche d'impression terrain) ---
|
||||
// Cadre = zone imprimée, toujours centré sur la vue : on déplace la carte
|
||||
// dessous. Géométrie calculée par le serveur (projection Lambert 93).
|
||||
// Cadre = zone imprimée, posé sur le terrain (centre PRINT.center) : la carte
|
||||
// se déplace librement autour, on le fait glisser à la souris ou au doigt.
|
||||
// Géométrie exacte calculée par le serveur (projection Lambert 93).
|
||||
const PRINT_LS = 'lidar-print';
|
||||
const PRINT = { on: false, rect: null, seq: 0 };
|
||||
const PRINT = { on: false, rect: null, handle: null, seq: 0, center: null, corners: null, drag: null };
|
||||
map.createPane('printFrame').style.zIndex = '690';
|
||||
|
||||
function printSettings() {
|
||||
@ -1300,7 +1307,7 @@ function printSettings() {
|
||||
}
|
||||
|
||||
function printQuery(s, withTitle) {
|
||||
const c = map.getCenter();
|
||||
const c = PRINT.center || map.getCenter();
|
||||
const q = new URLSearchParams({ lat: c.lat.toFixed(6), lon: c.lng.toFixed(6),
|
||||
paper: s.paper, orient: s.orient, scale: s.scale });
|
||||
if (withTitle && s.title) q.set('title', s.title);
|
||||
@ -1308,7 +1315,9 @@ function printQuery(s, withTitle) {
|
||||
}
|
||||
|
||||
function printSave() {
|
||||
try { localStorage.setItem(PRINT_LS, JSON.stringify(printSettings())); } catch (e) { /* privé */ }
|
||||
const s = printSettings();
|
||||
if (PRINT.center) s.center = [PRINT.center.lat, PRINT.center.lng];
|
||||
try { localStorage.setItem(PRINT_LS, JSON.stringify(s)); } catch (e) { /* privé */ }
|
||||
}
|
||||
|
||||
function printLoad() {
|
||||
@ -1318,30 +1327,98 @@ function printLoad() {
|
||||
['scale', 'printScale'], ['title', 'printTitle']]) {
|
||||
if (s[k] != null) el(id).value = s[k];
|
||||
}
|
||||
if (Array.isArray(s.center) && s.center.length === 2) PRINT.center = L.latLng(s.center);
|
||||
} catch (e) { /* privé ou illisible : réglages par défaut */ }
|
||||
}
|
||||
|
||||
function printRefreshFrame() {
|
||||
// Recadre sur le cadre en laissant libre la bande basse couverte par les
|
||||
// cartes (couches, export…) : sinon le bas du cadre passe dessous.
|
||||
function printFit() {
|
||||
if (!PRINT.corners) return;
|
||||
const box = map.getContainer().getBoundingClientRect();
|
||||
let bottom = 0;
|
||||
for (const c of document.querySelectorAll('.card')) {
|
||||
if (c.hidden || !c.offsetParent) continue;
|
||||
const r = c.getBoundingClientRect();
|
||||
if (r.top > box.top + box.height / 2) bottom = Math.max(bottom, box.bottom - r.top);
|
||||
}
|
||||
map.fitBounds(L.latLngBounds(PRINT.corners),
|
||||
{ paddingTopLeft: [30, 60], paddingBottomRight: [70, bottom + 20] });
|
||||
}
|
||||
|
||||
function printDraw(corners) {
|
||||
PRINT.corners = corners;
|
||||
if (PRINT.rect) PRINT.rect.setLatLngs(corners);
|
||||
else PRINT.rect = L.polygon(corners, { pane: 'printFrame', color: '#ffd166', weight: 2,
|
||||
dashArray: '8 5', fill: false, interactive: false }).addTo(map);
|
||||
if (PRINT.handle) { PRINT.handle.setLatLng(PRINT.center); return; }
|
||||
PRINT.handle = L.marker(PRINT.center, {
|
||||
pane: 'printFrame', draggable: true, autoPan: true, keyboard: false,
|
||||
title: 'Faire glisser pour déplacer la zone imprimée',
|
||||
icon: L.divIcon({ className: 'print-handle', html: '✥', iconSize: [34, 34] }),
|
||||
}).addTo(map);
|
||||
PRINT.handle.on('dragstart', printDragStart);
|
||||
PRINT.handle.on('drag', printDragMove);
|
||||
PRINT.handle.on('dragend', printDragEnd);
|
||||
}
|
||||
|
||||
// fit : recadrer la vue sur le cadre une fois la géométrie reçue.
|
||||
function printRefreshFrame(fit) {
|
||||
if (!PRINT.on) return;
|
||||
const seq = ++PRINT.seq;
|
||||
fetch('api/export/frame?' + printQuery(printSettings(), false))
|
||||
.then(r => r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))
|
||||
.then(d => {
|
||||
if (seq !== PRINT.seq || !PRINT.on) return;
|
||||
if (PRINT.rect) PRINT.rect.setLatLngs(d.corners);
|
||||
else PRINT.rect = L.polygon(d.corners, { pane: 'printFrame', color: '#ffd166', weight: 2,
|
||||
dashArray: '8 5', fill: false, interactive: false }).addTo(map);
|
||||
if (seq !== PRINT.seq || !PRINT.on || PRINT.drag) return;
|
||||
printDraw(d.corners);
|
||||
el('printInfo').textContent = d.width_m + ' × ' + d.height_m + ' m';
|
||||
if (fit === true) printFit();
|
||||
})
|
||||
.catch(() => { if (seq === PRINT.seq) el('printInfo').textContent = ''; });
|
||||
}
|
||||
|
||||
// Glisser la poignée : le cadre suit en direct (translation en pixels de calque,
|
||||
// stables pendant le défilement automatique),
|
||||
// géométrie exacte redemandée au serveur au relâchement.
|
||||
function printDragStart() {
|
||||
PRINT.drag = { start: map.latLngToLayerPoint(PRINT.handle.getLatLng()),
|
||||
corners: PRINT.corners.map(c => map.latLngToLayerPoint(c)) };
|
||||
}
|
||||
|
||||
function printDragMove() {
|
||||
const d = PRINT.drag;
|
||||
if (!d) return;
|
||||
const delta = map.latLngToLayerPoint(PRINT.handle.getLatLng()).subtract(d.start);
|
||||
PRINT.rect.setLatLngs(d.corners.map(p => map.layerPointToLatLng(p.add(delta))));
|
||||
}
|
||||
|
||||
function printDragEnd() {
|
||||
PRINT.drag = null;
|
||||
PRINT.center = PRINT.handle.getLatLng();
|
||||
PRINT.corners = PRINT.rect.getLatLngs()[0];
|
||||
printSave();
|
||||
printRefreshFrame();
|
||||
}
|
||||
|
||||
function printCenterHere() {
|
||||
PRINT.center = map.getCenter();
|
||||
printSave();
|
||||
printRefreshFrame();
|
||||
}
|
||||
|
||||
function printSetOpen(on) {
|
||||
PRINT.on = on;
|
||||
el('printcard').hidden = !on;
|
||||
el('btnPrint').classList.toggle('accent', on);
|
||||
if (on) printRefreshFrame();
|
||||
else if (PRINT.rect) { PRINT.rect.remove(); PRINT.rect = null; }
|
||||
if (on) {
|
||||
// cadre gardé s'il est encore dans la vue, sinon posé au centre
|
||||
if (!PRINT.center || !map.getBounds().contains(PRINT.center)) PRINT.center = map.getCenter();
|
||||
printRefreshFrame(true);
|
||||
} else {
|
||||
if (PRINT.rect) PRINT.rect.remove();
|
||||
if (PRINT.handle) PRINT.handle.remove();
|
||||
PRINT.rect = PRINT.handle = PRINT.corners = null;
|
||||
}
|
||||
}
|
||||
|
||||
function printExport() {
|
||||
@ -1375,10 +1452,12 @@ function printExport() {
|
||||
el('btnPrint').addEventListener('click', () => printSetOpen(!PRINT.on));
|
||||
el('printClose').addEventListener('click', () => printSetOpen(false));
|
||||
el('printGo').addEventListener('click', printExport);
|
||||
for (const id of ['printPaper', 'printOrient', 'printScale', 'printTitle']) {
|
||||
el(id).addEventListener('change', () => { printSave(); printRefreshFrame(); });
|
||||
el('printHere').addEventListener('click', printCenterHere);
|
||||
el('printFit').addEventListener('click', printFit);
|
||||
for (const id of ['printPaper', 'printOrient', 'printScale']) {
|
||||
el(id).addEventListener('change', () => { printSave(); printRefreshFrame(true); });
|
||||
}
|
||||
map.on('moveend', printRefreshFrame);
|
||||
el('printTitle').addEventListener('change', printSave);
|
||||
printLoad();
|
||||
|
||||
// --- démarrage ------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user