wip: local portal changes (backup before disk cleanup)
This commit is contained in:
Ondřej Glaser
@@ -5,6 +5,7 @@
|
||||
upload: $("s-upload"),
|
||||
processing: $("s-processing"),
|
||||
symbols: $("s-symbols"),
|
||||
blocks: $("s-blocks"),
|
||||
results: $("s-results"),
|
||||
};
|
||||
const show = (name) => {
|
||||
@@ -31,12 +32,20 @@
|
||||
fd.append("file", file);
|
||||
try {
|
||||
// Skip auto-detection by default — user defines symbols manually
|
||||
const r = await fetch("/api/upload?auto_detect=false", {
|
||||
const r = await fetch("api/upload?auto_detect=false", {
|
||||
method: "POST", body: fd,
|
||||
});
|
||||
if (!r.ok) throw new Error((await r.json()).detail || r.statusText);
|
||||
const data = await r.json();
|
||||
state.jobId = data.job_id;
|
||||
if (data.mode === "blocks") {
|
||||
state.blocks = data.blocks || [];
|
||||
state.blockSel = new Set();
|
||||
state.regionActive = false;
|
||||
renderBlocks(data);
|
||||
show("blocks");
|
||||
return;
|
||||
}
|
||||
state.symbols = data.symbols || [];
|
||||
state.selected = new Set();
|
||||
renderSymbols();
|
||||
@@ -52,7 +61,7 @@
|
||||
show("processing");
|
||||
$("processing-title").textContent = "Hledám legendu pomocí AI…";
|
||||
try {
|
||||
const r = await fetch(`/api/auto-detect/${state.jobId}`, { method: "POST" });
|
||||
const r = await fetch(`api/auto-detect/${state.jobId}`, { method: "POST" });
|
||||
if (!r.ok) throw new Error((await r.json()).detail || r.statusText);
|
||||
const data = await r.json();
|
||||
state.symbols = data.symbols || [];
|
||||
@@ -80,7 +89,7 @@
|
||||
fd.append("file", f);
|
||||
fd.append("description", name);
|
||||
try {
|
||||
const r = await fetch(`/api/symbols/${state.jobId}/upload`, { method: "POST", body: fd });
|
||||
const r = await fetch(`api/symbols/${state.jobId}/upload`, { method: "POST", body: fd });
|
||||
if (!r.ok) throw new Error((await r.json()).detail || r.statusText);
|
||||
const sym = await r.json();
|
||||
state.symbols.push(sym);
|
||||
@@ -104,7 +113,7 @@
|
||||
card.className = "symbol-card";
|
||||
card.innerHTML = `
|
||||
<input type="checkbox" data-id="${s.id}">
|
||||
<img class="symbol-thumb" src="/api/symbol/${state.jobId}/${s.id}?v=${s._v||0}" alt=""
|
||||
<img class="symbol-thumb" src="api/symbol/${state.jobId}/${s.id}?v=${s._v||0}" alt=""
|
||||
onerror="this.style.visibility='hidden'">
|
||||
<div class="symbol-info">
|
||||
<div class="symbol-id">${s.id}</div>
|
||||
@@ -137,7 +146,7 @@
|
||||
e.stopPropagation();
|
||||
if (!confirm(`Smazat symbol "${s.description || s.id}"?`)) return;
|
||||
try {
|
||||
const r = await fetch(`/api/symbols/${state.jobId}/${s.id}`, { method: "DELETE" });
|
||||
const r = await fetch(`api/symbols/${state.jobId}/${s.id}`, { method: "DELETE" });
|
||||
if (!r.ok) throw new Error("delete failed");
|
||||
state.symbols = state.symbols.filter(x => x.id !== s.id);
|
||||
state.selected.delete(s.id);
|
||||
@@ -161,7 +170,7 @@
|
||||
"DOPORUČENO: najděte symbol PŘÍMO ve výkresu (ne v legendě) — barvy a tloušťka čar tam přesně odpovídají tomu, co budeme hledat. Vyznačte těsný rámeček kolem jedné instance symbolu a pojmenujte ho.";
|
||||
$("crop-name-row").classList.remove("hidden");
|
||||
$("crop-name").value = "";
|
||||
img.src = `/api/drawing/${state.jobId}`;
|
||||
img.src = `api/drawing/${state.jobId}`;
|
||||
sel.style.display = "none";
|
||||
$("crop-save").disabled = true;
|
||||
cropState = { mode: "create", sym: null, bbox: null, dragging: false };
|
||||
@@ -182,7 +191,7 @@
|
||||
"Označte oblast obsahující pouze grafický symbol (bez popisu).";
|
||||
$("crop-name-row").classList.add("hidden");
|
||||
// For editing: use the full drawing so user can pick any instance
|
||||
img.src = `/api/drawing/${state.jobId}`;
|
||||
img.src = `api/drawing/${state.jobId}`;
|
||||
sel.style.display = "none";
|
||||
$("crop-save").disabled = true;
|
||||
cropState = { mode: "edit", sym, bbox: null, dragging: false };
|
||||
@@ -191,64 +200,176 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// Crop modal: zoom + pan + bbox selection.
|
||||
// • Wheel = zoom in/out at cursor (1.2× per notch).
|
||||
// • Left-drag = draw selection rectangle.
|
||||
// • Shift+drag or middle-button drag = pan.
|
||||
// • Selection box is tracked in image-natural pixels, so it stays
|
||||
// attached to the same image region across zoom changes.
|
||||
// • Initial scale is "fit": the whole drawing visible in the modal.
|
||||
function attachCropHandlers(wrap, img, sel) {
|
||||
let scale = 1;
|
||||
let curBox = null; // {x,y,w,h} in image-natural pixels (or null)
|
||||
let dragging = false;
|
||||
let startX = 0, startY = 0; // drag start in image-natural pixels
|
||||
let panning = false;
|
||||
let panFromX = 0, panFromY = 0, panScrollX = 0, panScrollY = 0;
|
||||
|
||||
// Mouse coords relative to the IMAGE's top-left (in image-pixel space,
|
||||
// which is also wrap's content space since image is at native scale and
|
||||
// sits at content origin (0,0) in the relative-positioned wrap).
|
||||
function localXY(e) {
|
||||
const setBtnState = () => {
|
||||
const ok = !!curBox && curBox.w >= 3 && curBox.h >= 3;
|
||||
$("crop-save").disabled = !ok;
|
||||
};
|
||||
|
||||
function clientToImg(clientX, clientY) {
|
||||
const rect = img.getBoundingClientRect();
|
||||
return { x: e.clientX - rect.left, y: e.clientY - rect.top };
|
||||
return { x: (clientX - rect.left) / scale,
|
||||
y: (clientY - rect.top) / scale };
|
||||
}
|
||||
|
||||
function drawSel() {
|
||||
if (!curBox || curBox.w <= 0 || curBox.h <= 0) {
|
||||
sel.style.display = "none";
|
||||
return;
|
||||
}
|
||||
sel.style.display = "block";
|
||||
sel.style.left = (curBox.x * scale) + "px";
|
||||
sel.style.top = (curBox.y * scale) + "px";
|
||||
sel.style.width = (curBox.w * scale) + "px";
|
||||
sel.style.height = (curBox.h * scale) + "px";
|
||||
}
|
||||
|
||||
function applyScale() {
|
||||
img.style.width = (img.naturalWidth * scale) + "px";
|
||||
img.style.height = "auto";
|
||||
drawSel();
|
||||
}
|
||||
|
||||
function setScale(newScale, anchorClientX, anchorClientY) {
|
||||
newScale = Math.max(0.05, Math.min(20, newScale));
|
||||
const imgRect = img.getBoundingClientRect();
|
||||
const wrapRect = wrap.getBoundingClientRect();
|
||||
// Image-natural coords under the cursor BEFORE the zoom.
|
||||
const imgCx = (anchorClientX - imgRect.left) / scale;
|
||||
const imgCy = (anchorClientY - imgRect.top) / scale;
|
||||
// Cursor position relative to the wrap viewport.
|
||||
const cx = anchorClientX - wrapRect.left;
|
||||
const cy = anchorClientY - wrapRect.top;
|
||||
scale = newScale;
|
||||
applyScale();
|
||||
// Keep the same image point under the cursor after the resize.
|
||||
wrap.scrollLeft = imgCx * scale - cx;
|
||||
wrap.scrollTop = imgCy * scale - cy;
|
||||
}
|
||||
|
||||
function fitToModal() {
|
||||
const wrapRect = wrap.getBoundingClientRect();
|
||||
const sx = wrapRect.width / img.naturalWidth;
|
||||
const sy = wrapRect.height / img.naturalHeight;
|
||||
scale = Math.min(sx, sy, 1);
|
||||
applyScale();
|
||||
wrap.scrollLeft = 0;
|
||||
wrap.scrollTop = 0;
|
||||
}
|
||||
|
||||
// Reset every time a new image loads.
|
||||
img.addEventListener("load", () => {
|
||||
curBox = null;
|
||||
sel.style.display = "none";
|
||||
// Wait one frame so wrap has its measured size.
|
||||
requestAnimationFrame(fitToModal);
|
||||
setBtnState();
|
||||
});
|
||||
// If the image is already loaded (cached), fit now too.
|
||||
if (img.complete && img.naturalWidth) {
|
||||
curBox = null;
|
||||
requestAnimationFrame(fitToModal);
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
const p = localXY(e);
|
||||
cropState.startX = p.x;
|
||||
cropState.startY = p.y;
|
||||
cropState.dragging = true;
|
||||
sel.style.display = "block";
|
||||
sel.style.left = p.x + "px";
|
||||
sel.style.top = p.y + "px";
|
||||
sel.style.width = "0px";
|
||||
sel.style.height = "0px";
|
||||
}
|
||||
function onMouseMove(e) {
|
||||
if (!cropState || !cropState.dragging) return;
|
||||
const p = localXY(e);
|
||||
const left = Math.min(p.x, cropState.startX);
|
||||
const top = Math.min(p.y, cropState.startY);
|
||||
const w = Math.abs(p.x - cropState.startX);
|
||||
const h = Math.abs(p.y - cropState.startY);
|
||||
sel.style.left = left + "px";
|
||||
sel.style.top = top + "px";
|
||||
sel.style.width = w + "px";
|
||||
sel.style.height = h + "px";
|
||||
}
|
||||
function onMouseUp() {
|
||||
if (!cropState) return;
|
||||
cropState.dragging = false;
|
||||
const rect = img.getBoundingClientRect();
|
||||
const dispW = rect.width, dispH = rect.height;
|
||||
const left = parseFloat(sel.style.left), top = parseFloat(sel.style.top);
|
||||
const w = parseFloat(sel.style.width), h = parseFloat(sel.style.height);
|
||||
if (w < 5 || h < 5) {
|
||||
sel.style.display = "none";
|
||||
$("crop-save").disabled = true;
|
||||
if (e.button === 1 || (e.button === 0 && e.shiftKey)) {
|
||||
panning = true;
|
||||
panFromX = e.clientX;
|
||||
panFromY = e.clientY;
|
||||
panScrollX = wrap.scrollLeft;
|
||||
panScrollY = wrap.scrollTop;
|
||||
wrap.style.cursor = "grabbing";
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
cropState.bbox = {
|
||||
x: left / dispW,
|
||||
y: top / dispH,
|
||||
w: w / dispW,
|
||||
h: h / dispH,
|
||||
if (e.button !== 0) return;
|
||||
const p = clientToImg(e.clientX, e.clientY);
|
||||
dragging = true;
|
||||
startX = p.x; startY = p.y;
|
||||
curBox = { x: p.x, y: p.y, w: 0, h: 0 };
|
||||
drawSel();
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function onMouseMove(e) {
|
||||
if (panning) {
|
||||
wrap.scrollLeft = panScrollX - (e.clientX - panFromX);
|
||||
wrap.scrollTop = panScrollY - (e.clientY - panFromY);
|
||||
return;
|
||||
}
|
||||
if (!dragging) return;
|
||||
const p = clientToImg(e.clientX, e.clientY);
|
||||
curBox = {
|
||||
x: Math.min(p.x, startX),
|
||||
y: Math.min(p.y, startY),
|
||||
w: Math.abs(p.x - startX),
|
||||
h: Math.abs(p.y - startY),
|
||||
};
|
||||
$("crop-save").disabled = false;
|
||||
drawSel();
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
if (panning) {
|
||||
panning = false;
|
||||
wrap.style.cursor = "";
|
||||
}
|
||||
if (!dragging) return;
|
||||
dragging = false;
|
||||
if (!curBox || curBox.w < 3 || curBox.h < 3) {
|
||||
curBox = null;
|
||||
sel.style.display = "none";
|
||||
} else {
|
||||
const W = img.naturalWidth, H = img.naturalHeight;
|
||||
cropState.bbox = {
|
||||
x: curBox.x / W,
|
||||
y: curBox.y / H,
|
||||
w: curBox.w / W,
|
||||
h: curBox.h / H,
|
||||
};
|
||||
}
|
||||
setBtnState();
|
||||
}
|
||||
|
||||
function onWheel(e) {
|
||||
e.preventDefault();
|
||||
const factor = e.deltaY < 0 ? 1.2 : 1 / 1.2;
|
||||
setScale(scale * factor, e.clientX, e.clientY);
|
||||
}
|
||||
|
||||
wrap.onmousedown = onMouseDown;
|
||||
wrap.onmousemove = onMouseMove;
|
||||
wrap.onmouseup = onMouseUp;
|
||||
wrap.onmouseleave = onMouseUp;
|
||||
// Replace any prior wheel listener (close/reopen of the modal).
|
||||
if (wrap._onWheel) wrap.removeEventListener("wheel", wrap._onWheel);
|
||||
wrap._onWheel = onWheel;
|
||||
wrap.addEventListener("wheel", onWheel, { passive: false });
|
||||
|
||||
// Expose for toolbar buttons.
|
||||
wrap._zoom = {
|
||||
in: () => setScale(scale * 1.5,
|
||||
wrap.getBoundingClientRect().left + wrap.clientWidth / 2,
|
||||
wrap.getBoundingClientRect().top + wrap.clientHeight / 2),
|
||||
out: () => setScale(scale / 1.5,
|
||||
wrap.getBoundingClientRect().left + wrap.clientWidth / 2,
|
||||
wrap.getBoundingClientRect().top + wrap.clientHeight / 2),
|
||||
fit: fitToModal,
|
||||
one: () => { scale = 1; applyScale(); },
|
||||
};
|
||||
}
|
||||
|
||||
function closeCropModal() {
|
||||
@@ -263,12 +384,12 @@
|
||||
body.innerHTML = '<p style="padding:20px">Načítám diagnostiku…</p>';
|
||||
modal.classList.remove("hidden");
|
||||
try {
|
||||
const r = await fetch(`/api/debug/${state.jobId}/${sym.id}`);
|
||||
const r = await fetch(`api/debug/${state.jobId}/${sym.id}`);
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
const info = await r.json();
|
||||
const tmplURL = `/api/symbol/${state.jobId}/${sym.id}?v=${sym._v||0}`;
|
||||
const procURL = `/api/debug-template/${state.jobId}/${sym.id}?v=${sym._v||0}&t=${Date.now()}`;
|
||||
const drawURL = `/api/drawing/${state.jobId}`;
|
||||
const tmplURL = `api/symbol/${state.jobId}/${sym.id}?v=${sym._v||0}`;
|
||||
const procURL = `api/debug-template/${state.jobId}/${sym.id}?v=${sym._v||0}&t=${Date.now()}`;
|
||||
const drawURL = `api/drawing/${state.jobId}`;
|
||||
const matches = info.matches_at_threshold || {};
|
||||
const maxMatchCount = Math.max(1, ...Object.values(matches));
|
||||
const threshRows = Object.entries(matches).map(([t, n]) => `
|
||||
@@ -342,11 +463,13 @@
|
||||
$("crop-cancel").addEventListener("click", closeCropModal);
|
||||
$("crop-save").addEventListener("click", async () => {
|
||||
if (!cropState || !cropState.bbox) return;
|
||||
if (cropState.mode === "region" || cropState.mode === "region-area")
|
||||
return; // handled separately by the capture-phase dispatcher
|
||||
try {
|
||||
if (cropState.mode === "create") {
|
||||
const name = ($("crop-name").value || "").trim();
|
||||
if (!name) { alert("Zadejte název symbolu."); return; }
|
||||
const r = await fetch(`/api/symbols/${state.jobId}`, {
|
||||
const r = await fetch(`api/symbols/${state.jobId}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
@@ -359,7 +482,7 @@
|
||||
const newSym = await r.json();
|
||||
state.symbols.push(newSym);
|
||||
} else {
|
||||
const r = await fetch(`/api/symbol/${state.jobId}/${cropState.sym.id}/recrop`, {
|
||||
const r = await fetch(`api/symbol/${state.jobId}/${cropState.sym.id}/recrop`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ bbox: cropState.bbox }),
|
||||
@@ -385,7 +508,7 @@
|
||||
show("processing");
|
||||
$("processing-title").textContent = `Počítám ${state.selected.size} symbolů…`;
|
||||
try {
|
||||
const r = await fetch(`/api/count/${state.jobId}`, {
|
||||
const r = await fetch(`api/count/${state.jobId}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
@@ -396,6 +519,7 @@
|
||||
if (!r.ok) throw new Error((await r.json()).detail || r.statusText);
|
||||
const data = await r.json();
|
||||
state.results = data.results || [];
|
||||
state.resultsBack = "symbols";
|
||||
renderResults();
|
||||
show("results");
|
||||
} catch (err) {
|
||||
@@ -412,8 +536,11 @@
|
||||
for (const r of state.results) {
|
||||
const tr = document.createElement("tr");
|
||||
const conf = r.confidence || "";
|
||||
const thumb = r.id === "region"
|
||||
? ""
|
||||
: `<img class="symbol-thumb" style="width:40px;height:40px" src="api/symbol/${state.jobId}/${r.id}" alt="" onerror="this.style.display='none'">`;
|
||||
tr.innerHTML = `
|
||||
<td><img class="symbol-thumb" style="width:40px;height:40px" src="/api/symbol/${state.jobId}/${r.id}" alt=""></td>
|
||||
<td>${thumb}</td>
|
||||
<td>${escapeHtml(r.description || "")}</td>
|
||||
<td><strong>${r.count}</strong></td>
|
||||
<td class="confidence-${conf}">${conf || "—"}</td>
|
||||
@@ -422,14 +549,89 @@
|
||||
}
|
||||
}
|
||||
|
||||
$("export-btn").addEventListener("click", () => {
|
||||
window.location.href = `/api/export/${state.jobId}`;
|
||||
// Stream a slow file download with an in-flight overlay so the user
|
||||
// knows the server is working (DWG → PNG → annotated PDF takes minutes
|
||||
// on dense site plans). Falls back to a clear error message instead of
|
||||
// a silent browser spinner.
|
||||
function showBusyOverlay(title, sub) {
|
||||
let o = document.getElementById("busy-overlay");
|
||||
if (!o) {
|
||||
o = document.createElement("div");
|
||||
o.id = "busy-overlay";
|
||||
o.style.cssText =
|
||||
"position:fixed;inset:0;background:rgba(0,0,0,0.55);" +
|
||||
"display:flex;align-items:center;justify-content:center;" +
|
||||
"z-index:9999;backdrop-filter:blur(2px);";
|
||||
o.innerHTML =
|
||||
'<div style="background:var(--bg,#fff);color:var(--fg,#111);' +
|
||||
'padding:28px 36px;border-radius:12px;text-align:center;' +
|
||||
'box-shadow:0 8px 32px rgba(0,0,0,0.3);max-width:480px">' +
|
||||
'<div class="spinner" style="margin:0 auto 16px"></div>' +
|
||||
'<div id="busy-title" style="font-size:18px;font-weight:600;margin-bottom:6px"></div>' +
|
||||
'<div id="busy-sub" style="font-size:14px;opacity:0.75"></div>' +
|
||||
'<div id="busy-elapsed" style="font-size:12px;opacity:0.55;margin-top:10px"></div>' +
|
||||
"</div>";
|
||||
document.body.appendChild(o);
|
||||
}
|
||||
o.querySelector("#busy-title").textContent = title;
|
||||
o.querySelector("#busy-sub").textContent = sub || "";
|
||||
const elapsedEl = o.querySelector("#busy-elapsed");
|
||||
elapsedEl.textContent = "Uplynulo: 0 s";
|
||||
const t0 = Date.now();
|
||||
const timer = setInterval(() => {
|
||||
const s = Math.floor((Date.now() - t0) / 1000);
|
||||
const m = Math.floor(s / 60);
|
||||
elapsedEl.textContent = m ? `Uplynulo: ${m} min ${s % 60} s`
|
||||
: `Uplynulo: ${s} s`;
|
||||
}, 1000);
|
||||
o.style.display = "flex";
|
||||
return () => { clearInterval(timer); o.style.display = "none"; };
|
||||
}
|
||||
|
||||
async function downloadWithProgress(url, label, btn, sub) {
|
||||
const wasDisabled = btn ? btn.disabled : false;
|
||||
const oldLabel = btn ? btn.textContent : "";
|
||||
if (btn) { btn.disabled = true; btn.textContent = label + "…"; }
|
||||
const hideOverlay = showBusyOverlay(label,
|
||||
sub || "Server pracuje, prosím vyčkejte.");
|
||||
try {
|
||||
const r = await fetch(url);
|
||||
if (!r.ok) {
|
||||
let msg = r.statusText;
|
||||
try { msg = (await r.json()).detail || msg; } catch (_) {}
|
||||
throw new Error(msg);
|
||||
}
|
||||
const cd = r.headers.get("content-disposition") || "";
|
||||
const m = cd.match(/filename="?([^"]+)"?/);
|
||||
const filename = m ? m[1] : "soubor";
|
||||
const blob = await r.blob();
|
||||
const a = document.createElement("a");
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
setTimeout(() => URL.revokeObjectURL(a.href), 60000);
|
||||
} catch (err) {
|
||||
alert("Chyba při stahování: " + err.message);
|
||||
} finally {
|
||||
hideOverlay();
|
||||
if (btn) { btn.disabled = wasDisabled; btn.textContent = oldLabel; }
|
||||
}
|
||||
}
|
||||
|
||||
$("export-btn").addEventListener("click", (e) => {
|
||||
downloadWithProgress(`api/export/${state.jobId}`,
|
||||
"Vytvářím Excel", e.currentTarget,
|
||||
"Sestavuji tabulku s nalezenými symboly.");
|
||||
});
|
||||
$("pdf-btn").addEventListener("click", () => {
|
||||
window.location.href = `/api/export-pdf/${state.jobId}`;
|
||||
$("pdf-btn").addEventListener("click", (e) => {
|
||||
downloadWithProgress(`api/export-pdf/${state.jobId}`,
|
||||
"Vytvářím PDF s vyznačením", e.currentTarget,
|
||||
"U velkých výkresů to může trvat několik minut — server rastruje výkres ve vysokém rozlišení a kreslí značky.");
|
||||
});
|
||||
|
||||
$("back-btn").addEventListener("click", () => show("symbols"));
|
||||
$("back-btn").addEventListener("click", () => show(state.resultsBack || "symbols"));
|
||||
$("reset-btn").addEventListener("click", () => {
|
||||
state = { jobId: null, symbols: [], selected: new Set(), results: [] };
|
||||
fileInput.value = "";
|
||||
@@ -439,4 +641,241 @@
|
||||
function escapeHtml(s) {
|
||||
return String(s).replace(/[&<>"']/g, (c) => ({"&":"&","<":"<",">":">",'"':""","'":"'"}[c]));
|
||||
}
|
||||
|
||||
// ── Block picker (DWG/DXF exact counting) ───────────────────
|
||||
function renderBlocks(data) {
|
||||
const grid = $("blocks-grid");
|
||||
const showNoise = $("blocks-shownoise").checked;
|
||||
const list = state.blocks.filter((b) => showNoise || !b.noise);
|
||||
$("blocks-meta").textContent =
|
||||
`${data.total_instances} symbolů celkem · ${state.blocks.length} bloků` +
|
||||
(showNoise ? "" : ` · ${state.blocks.length - list.length} pomocných skryto`);
|
||||
grid.innerHTML = "";
|
||||
for (const b of list) {
|
||||
const card = document.createElement("div");
|
||||
card.className = "block-card" + (state.blockSel.has(b.idx) ? " is-sel" : "");
|
||||
card.innerHTML = `
|
||||
<div class="block-thumb">
|
||||
<img loading="lazy" src="api/block-thumb/${state.jobId}/${b.idx}" alt="">
|
||||
</div>
|
||||
<div class="block-info">
|
||||
<div class="block-name" title="${escapeHtml(b.name)}">${escapeHtml(b.name)}</div>
|
||||
<div class="block-count">${b.count}×</div>
|
||||
</div>`;
|
||||
card.addEventListener("click", () => {
|
||||
if (state.blockSel.has(b.idx)) state.blockSel.delete(b.idx);
|
||||
else state.blockSel.add(b.idx);
|
||||
card.classList.toggle("is-sel");
|
||||
updateBlockTotal();
|
||||
});
|
||||
grid.appendChild(card);
|
||||
}
|
||||
updateBlockTotal();
|
||||
}
|
||||
|
||||
function updateBlockTotal() {
|
||||
const sel = state.blocks.filter((b) => state.blockSel.has(b.idx));
|
||||
const total = sel.reduce((a, b) => a + b.count, 0);
|
||||
$("blocks-total").textContent = sel.length
|
||||
? `Vybráno ${sel.length} bloků · celkem ${total} symbolů`
|
||||
: "Nic nevybráno";
|
||||
const dis = sel.length === 0;
|
||||
$("blocks-export-btn").disabled = dis;
|
||||
$("blocks-pdf-btn").disabled = dis;
|
||||
}
|
||||
|
||||
async function commitBlockSelection() {
|
||||
const idxs = [...state.blockSel];
|
||||
if (!idxs.length) return false;
|
||||
const r = await fetch(`api/count-blocks/${state.jobId}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ idxs }),
|
||||
});
|
||||
if (!r.ok) { alert("Chyba: " + ((await r.json()).detail || r.statusText)); return false; }
|
||||
return true;
|
||||
}
|
||||
|
||||
$("blocks-shownoise").addEventListener("change", () => renderBlocks(
|
||||
{ total_instances: state.blocks.reduce((a, b) => a + b.count, 0) }));
|
||||
$("blocks-reset-btn").addEventListener("click", () => {
|
||||
state = { jobId: null, symbols: [], selected: new Set(), results: [] };
|
||||
fileInput.value = "";
|
||||
show("upload");
|
||||
});
|
||||
$("blocks-export-btn").addEventListener("click", async (e) => {
|
||||
// Region results are already stored server-side — export directly.
|
||||
if (state.regionActive || await commitBlockSelection())
|
||||
downloadWithProgress(`api/export/${state.jobId}`,
|
||||
"Vytvářím Excel", e.currentTarget,
|
||||
"Sestavuji tabulku s nalezenými symboly.");
|
||||
});
|
||||
$("blocks-pdf-btn").addEventListener("click", async (e) => {
|
||||
if (state.regionActive || await commitBlockSelection())
|
||||
downloadWithProgress(`api/export-pdf/${state.jobId}`,
|
||||
"Vytvářím PDF s vyznačením", e.currentTarget,
|
||||
"U velkých výkresů to může trvat několik minut — server rastruje výkres ve vysokém rozlišení a kreslí značky.");
|
||||
});
|
||||
|
||||
// Crop modal zoom toolbar — delegates to the wrap's exposed handlers.
|
||||
function cropZoom(action) {
|
||||
const wrap = $("crop-canvas-wrap");
|
||||
if (wrap && wrap._zoom && typeof wrap._zoom[action] === "function")
|
||||
wrap._zoom[action]();
|
||||
}
|
||||
$("crop-zoom-in").addEventListener("click", () => cropZoom("in"));
|
||||
$("crop-zoom-out").addEventListener("click", () => cropZoom("out"));
|
||||
$("crop-zoom-fit").addEventListener("click", () => cropZoom("fit"));
|
||||
$("crop-zoom-one").addEventListener("click", () => cropZoom("one"));
|
||||
|
||||
// ── Region-select vector matching (non-block symbols) ───────
|
||||
// Two stages: (1) box a coarse AREA on the overview, (2) the server
|
||||
// re-renders just that area at high DPI and the user precisely boxes
|
||||
// the SYMBOL on it. Stage 2's pixel coords go through the zoom
|
||||
// transform on the server, so symbol coords map correctly back to
|
||||
// model space even though they were measured on a sub-region image.
|
||||
function enterRegionAreaStage() {
|
||||
const modal = $("crop-modal");
|
||||
const img = $("crop-img");
|
||||
const sel = $("crop-selection");
|
||||
const wrap = $("crop-canvas-wrap");
|
||||
$("crop-modal-title").textContent = "Krok 1 / 2 — vyznačte oblast";
|
||||
$("crop-modal-hint").textContent =
|
||||
"Vyznačte přibližnou oblast, ve které je hledaný symbol. " +
|
||||
"V dalším kroku oblast přiblížíme a vyberete přesně samotný symbol.";
|
||||
$("crop-name-row").classList.add("hidden");
|
||||
$("crop-back-btn").classList.add("hidden");
|
||||
$("crop-threshold-row").classList.add("hidden");
|
||||
sel.style.display = "none";
|
||||
$("crop-save").disabled = true;
|
||||
$("crop-save").textContent = "Pokračovat";
|
||||
cropState = { mode: "region-area", bbox: null, dragging: false };
|
||||
img.onload = () => {
|
||||
$("crop-modal-hint").textContent =
|
||||
"Vyznačte přibližnou oblast, ve které je hledaný symbol. " +
|
||||
"Bude přiblížena ve vysokém rozlišení.";
|
||||
$("crop-modal-hint").style.color = "";
|
||||
};
|
||||
img.onerror = async () => {
|
||||
let detail = "Server vrátil chybu.";
|
||||
try {
|
||||
const r = await fetch(`api/render/${state.jobId}`);
|
||||
if (r.status === 404) {
|
||||
detail = "Výkres už není v paměti serveru (server byl mezitím " +
|
||||
"restartován). Zavřete toto okno a nahrajte výkres znovu.";
|
||||
} else if (!r.ok) {
|
||||
try { detail = (await r.json()).detail || r.statusText; }
|
||||
catch (_) { detail = r.statusText; }
|
||||
}
|
||||
} catch (_) {}
|
||||
$("crop-modal-hint").textContent = "Chyba: " + detail;
|
||||
$("crop-modal-hint").style.color = "var(--danger, #c0392b)";
|
||||
};
|
||||
img.src = `api/render/${state.jobId}?t=${Date.now()}`;
|
||||
modal.classList.remove("hidden");
|
||||
attachCropHandlers(wrap, img, sel);
|
||||
}
|
||||
|
||||
$("region-match-btn").addEventListener("click", enterRegionAreaStage);
|
||||
|
||||
async function runZoomRegion() {
|
||||
if (!cropState || !cropState.bbox) return;
|
||||
const btn = $("crop-save");
|
||||
btn.disabled = true;
|
||||
btn.textContent = "Přibližuji…";
|
||||
const hide = showBusyOverlay("Přibližuji oblast",
|
||||
"Renderuji oblast ve vysokém rozlišení.");
|
||||
try {
|
||||
const r = await fetch(`api/zoom-region/${state.jobId}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ bbox: cropState.bbox }),
|
||||
});
|
||||
if (!r.ok) throw new Error((await r.json()).detail || r.statusText);
|
||||
// Transition to stage 2.
|
||||
const img = $("crop-img");
|
||||
const sel = $("crop-selection");
|
||||
const wrap = $("crop-canvas-wrap");
|
||||
$("crop-modal-title").textContent = "Krok 2 / 2 — vyznačte symbol";
|
||||
$("crop-modal-hint").textContent =
|
||||
"Nakreslete těsný rámeček kolem jedné instance symbolu. " +
|
||||
"Najdeme všechny vizuálně podobné výskyty (i otočené a zrcadlené). " +
|
||||
"Citlivost nastavte níže.";
|
||||
sel.style.display = "none";
|
||||
btn.textContent = "Najít symbol";
|
||||
btn.disabled = true;
|
||||
$("crop-back-btn").classList.remove("hidden");
|
||||
$("crop-threshold-row").classList.remove("hidden");
|
||||
cropState = { mode: "region", bbox: null, dragging: false };
|
||||
img.src = `api/zoom-render/${state.jobId}?t=${Date.now()}`;
|
||||
attachCropHandlers(wrap, img, sel);
|
||||
} catch (err) {
|
||||
alert("Chyba: " + err.message);
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Pokračovat";
|
||||
} finally {
|
||||
hide();
|
||||
}
|
||||
}
|
||||
|
||||
async function runRegionMatch() {
|
||||
if (!cropState || !cropState.bbox) return;
|
||||
const btn = $("crop-save");
|
||||
btn.disabled = true;
|
||||
btn.textContent = "Hledám…";
|
||||
const hide = showBusyOverlay("Hledám symbol",
|
||||
"Porovnávám vyznačený symbol s celým výkresem.");
|
||||
try {
|
||||
const r = await fetch(`api/match-raster/${state.jobId}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
bbox: cropState.bbox,
|
||||
threshold: parseFloat($("crop-threshold").value),
|
||||
}),
|
||||
});
|
||||
if (!r.ok) throw new Error((await r.json()).detail || r.statusText);
|
||||
const d = await r.json();
|
||||
state.regionActive = true;
|
||||
closeCropModal();
|
||||
$("crop-threshold-row").classList.add("hidden");
|
||||
$("crop-save").textContent = "Uložit výřez";
|
||||
// Show the dedicated results view (count + Excel + annotated PDF).
|
||||
state.results = [{
|
||||
id: "region",
|
||||
description: "Vyznačený symbol (práh " +
|
||||
(+$("crop-threshold").value).toFixed(2) + ")",
|
||||
count: d.count,
|
||||
notes: d.count ? "" : "žádné shody nenalezeny",
|
||||
}];
|
||||
state.resultsBack = "blocks";
|
||||
renderResults();
|
||||
show("results");
|
||||
} catch (err) {
|
||||
alert("Chyba: " + err.message);
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Najít symbol";
|
||||
} finally {
|
||||
hide();
|
||||
}
|
||||
}
|
||||
|
||||
// Crop modal "Save" button dispatches by current stage. Capture phase
|
||||
// so it runs before the symbol-create flow (which no-ops on mode!=create).
|
||||
$("crop-save").addEventListener("click", () => {
|
||||
if (!cropState) return;
|
||||
if (cropState.mode === "region-area") runZoomRegion();
|
||||
else if (cropState.mode === "region") runRegionMatch();
|
||||
}, true);
|
||||
|
||||
$("crop-back-btn").addEventListener("click", () => {
|
||||
if (cropState && (cropState.mode === "region" || cropState.mode === "region-area"))
|
||||
enterRegionAreaStage();
|
||||
});
|
||||
|
||||
// Region threshold slider live value.
|
||||
const cropThr = $("crop-threshold");
|
||||
if (cropThr) cropThr.addEventListener("input", () => {
|
||||
$("crop-threshold-value").textContent = (+cropThr.value).toFixed(2);
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user