f29678ebf1
Photo-based book cataloger with AI identification. Room → Cabinet → Shelf → Book hierarchy; FastAPI + SQLite backend; vanilla JS SPA; OpenAI-compatible plugin system for boundary detection, text recognition, and archive search.
272 lines
11 KiB
JavaScript
272 lines
11 KiB
JavaScript
/*
|
|
* canvas-boundary.js
|
|
* Boundary-line editor rendered on a <canvas> overlaid on cabinet/shelf images.
|
|
* Handles:
|
|
* - Parsing boundary JSON from tree nodes
|
|
* - Drawing segment fills, labels, user boundary lines, and AI suggestion
|
|
* overlays (dashed lines per plugin, or all-plugins combined)
|
|
* - Pointer drag to move existing boundary lines
|
|
* - Ctrl+Alt+Click to add a new boundary line (and create a new child entity)
|
|
* - Mouse hover to highlight the corresponding tree row (seg-hover)
|
|
* - Snap-to-AI-guide when releasing a drag near a plugin boundary
|
|
*
|
|
* Reads: S, _bnd (state.js); req, toast, render (api.js / init.js)
|
|
* Writes: _bnd (state.js)
|
|
* Provides: parseBounds(), parseBndPluginResults(), SEG_FILLS, SEG_STROKES,
|
|
* setupDetailCanvas(), drawBnd(), clearSegHover()
|
|
*/
|
|
|
|
// ── Boundary parsing helpers ─────────────────────────────────────────────────
|
|
function parseBounds(json) {
|
|
if (!json) return [];
|
|
try { return JSON.parse(json) || []; } catch { return []; }
|
|
}
|
|
|
|
function parseBndPluginResults(json) {
|
|
if (!json) return {};
|
|
try {
|
|
const v = JSON.parse(json);
|
|
if (Array.isArray(v) || !v || typeof v !== 'object') return {};
|
|
return v;
|
|
} catch { return {}; }
|
|
}
|
|
|
|
const SEG_FILLS = ['rgba(59,130,246,.14)','rgba(16,185,129,.14)','rgba(245,158,11,.14)','rgba(239,68,68,.14)','rgba(168,85,247,.14)'];
|
|
const SEG_STROKES = ['#3b82f6','#10b981','#f59e0b','#ef4444','#a855f7'];
|
|
|
|
// ── Canvas setup ─────────────────────────────────────────────────────────────
|
|
function setupDetailCanvas() {
|
|
const wrap = document.getElementById('bnd-wrap');
|
|
const img = document.getElementById('bnd-img');
|
|
const canvas = document.getElementById('bnd-canvas');
|
|
if (!wrap || !img || !canvas || !S.selected) return;
|
|
const {type, id} = S.selected;
|
|
const node = findNode(id);
|
|
if (!node || (type !== 'cabinet' && type !== 'shelf')) return;
|
|
|
|
const axis = type === 'cabinet' ? 'y' : 'x';
|
|
const boundaries = parseBounds(type === 'cabinet' ? node.shelf_boundaries : node.book_boundaries);
|
|
const pluginResults = parseBndPluginResults(type === 'cabinet' ? node.ai_shelf_boundaries : node.ai_book_boundaries);
|
|
const pluginIds = Object.keys(pluginResults);
|
|
const segments = type === 'cabinet'
|
|
? node.shelves.map((s,i) => ({id:s.id, label:s.name||`Shelf ${i+1}`}))
|
|
: node.books.map((b,i) => ({id:b.id, label:b.title||`Book ${i+1}`}));
|
|
|
|
const hasChildren = type === 'cabinet' ? node.shelves.length > 0 : node.books.length > 0;
|
|
const prevSel = (_bnd?.nodeId === id) ? _bnd.selectedPlugin
|
|
: (hasChildren ? null : pluginIds[0] ?? null);
|
|
|
|
_bnd = {wrap, img, canvas, axis, boundaries:[...boundaries],
|
|
pluginResults, selectedPlugin: prevSel, segments, nodeId:id, nodeType:type};
|
|
|
|
function sizeAndDraw() {
|
|
canvas.width = img.offsetWidth;
|
|
canvas.height = img.offsetHeight;
|
|
drawBnd();
|
|
}
|
|
if (img.complete && img.offsetWidth > 0) sizeAndDraw();
|
|
else img.addEventListener('load', sizeAndDraw);
|
|
|
|
canvas.addEventListener('pointerdown', bndPointerDown);
|
|
canvas.addEventListener('pointermove', bndPointerMove);
|
|
canvas.addEventListener('pointerup', bndPointerUp);
|
|
canvas.addEventListener('click', bndClick);
|
|
canvas.addEventListener('mousemove', bndHover);
|
|
canvas.addEventListener('mouseleave', () => clearSegHover());
|
|
}
|
|
|
|
// ── Draw ─────────────────────────────────────────────────────────────────────
|
|
function drawBnd(dragIdx = -1, dragVal = null) {
|
|
if (!_bnd || S._cropMode) return;
|
|
const {canvas, axis, boundaries, segments} = _bnd;
|
|
const W = canvas.width, H = canvas.height;
|
|
if (!W || !H) return;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
// Build working boundary list with optional live drag value
|
|
const full = [0, ...boundaries, 1];
|
|
if (dragIdx >= 0 && dragIdx < boundaries.length) {
|
|
const lo = full[dragIdx] + 0.005;
|
|
const hi = full[dragIdx + 2] - 0.005;
|
|
full[dragIdx + 1] = Math.max(lo, Math.min(hi, dragVal));
|
|
}
|
|
|
|
// Draw segments
|
|
for (let i = 0; i < full.length - 1; i++) {
|
|
const a = full[i], b = full[i + 1];
|
|
const ci = i % SEG_FILLS.length;
|
|
ctx.fillStyle = SEG_FILLS[ci];
|
|
if (axis === 'y') ctx.fillRect(0, a*H, W, (b-a)*H);
|
|
else ctx.fillRect(a*W, 0, (b-a)*W, H);
|
|
// Label
|
|
const seg = segments[i];
|
|
if (seg) {
|
|
ctx.font = '11px system-ui,sans-serif';
|
|
ctx.fillStyle = 'rgba(0,0,0,.5)';
|
|
const lbl = seg.label.slice(0, 24);
|
|
if (axis === 'y') {
|
|
ctx.fillText(lbl, 4, a*H + 14);
|
|
} else {
|
|
ctx.save(); ctx.translate(a*W + 12, 14); ctx.rotate(Math.PI/2);
|
|
ctx.fillText(lbl, 0, 0); ctx.restore();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Draw interior user boundary lines
|
|
ctx.setLineDash([5, 3]);
|
|
ctx.lineWidth = 2;
|
|
for (let i = 0; i < boundaries.length; i++) {
|
|
const val = (dragIdx === i && dragVal !== null) ? full[i+1] : boundaries[i];
|
|
ctx.strokeStyle = '#1e3a5f';
|
|
ctx.beginPath();
|
|
if (axis === 'y') { ctx.moveTo(0, val*H); ctx.lineTo(W, val*H); }
|
|
else { ctx.moveTo(val*W, 0); ctx.lineTo(val*W, H); }
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Draw plugin boundary suggestions (dashed, non-interactive)
|
|
const {pluginResults, selectedPlugin} = _bnd;
|
|
const pluginIds = Object.keys(pluginResults);
|
|
if (selectedPlugin && pluginIds.length) {
|
|
ctx.setLineDash([3, 6]);
|
|
ctx.lineWidth = 1.5;
|
|
const drawPluginBounds = (bounds, color) => {
|
|
ctx.strokeStyle = color;
|
|
for (const ab of (bounds || [])) {
|
|
ctx.beginPath();
|
|
if (axis === 'y') { ctx.moveTo(0, ab*H); ctx.lineTo(W, ab*H); }
|
|
else { ctx.moveTo(ab*W, 0); ctx.lineTo(ab*W, H); }
|
|
ctx.stroke();
|
|
}
|
|
};
|
|
if (selectedPlugin === 'all') {
|
|
pluginIds.forEach((pid, i) => drawPluginBounds(pluginResults[pid], SEG_STROKES[i % SEG_STROKES.length]));
|
|
} else if (pluginResults[selectedPlugin]) {
|
|
drawPluginBounds(pluginResults[selectedPlugin], 'rgba(234,88,12,0.8)');
|
|
}
|
|
}
|
|
ctx.setLineDash([]);
|
|
}
|
|
|
|
// ── Drag machinery ───────────────────────────────────────────────────────────
|
|
let _dragIdx = -1, _dragging = false;
|
|
|
|
function fracFromEvt(e) {
|
|
const r = _bnd.canvas.getBoundingClientRect();
|
|
const x = (e.clientX - r.left) / r.width;
|
|
const y = (e.clientY - r.top) / r.height;
|
|
return _bnd.axis === 'y' ? y : x;
|
|
}
|
|
|
|
function nearestBnd(frac) {
|
|
const {boundaries, canvas, axis} = _bnd;
|
|
const r = canvas.getBoundingClientRect();
|
|
const dim = axis === 'y' ? r.height : r.width;
|
|
const thresh = (window._grabPx ?? 14) / dim;
|
|
let best = -1, bestD = thresh;
|
|
boundaries.forEach((b,i) => { const d=Math.abs(b-frac); if(d<bestD){bestD=d;best=i;} });
|
|
return best;
|
|
}
|
|
|
|
function snapToAi(frac) {
|
|
if (!_bnd?.selectedPlugin) return frac;
|
|
const {pluginResults, selectedPlugin} = _bnd;
|
|
const snapBounds = selectedPlugin === 'all'
|
|
? Object.values(pluginResults).flat()
|
|
: (pluginResults[selectedPlugin] || []);
|
|
if (!snapBounds.length) return frac;
|
|
const r = _bnd.canvas.getBoundingClientRect();
|
|
const dim = _bnd.axis === 'y' ? r.height : r.width;
|
|
const thresh = (window._grabPx ?? 14) / dim;
|
|
let best = frac, bestD = thresh;
|
|
snapBounds.forEach(ab => { const d = Math.abs(ab - frac); if (d < bestD) { bestD = d; best = ab; } });
|
|
return best;
|
|
}
|
|
|
|
function bndPointerDown(e) {
|
|
if (!_bnd || S._cropMode) return;
|
|
const frac = fracFromEvt(e);
|
|
const idx = nearestBnd(frac);
|
|
if (idx >= 0) {
|
|
_dragIdx = idx; _dragging = true;
|
|
_bnd.canvas.setPointerCapture(e.pointerId);
|
|
e.stopPropagation();
|
|
}
|
|
}
|
|
|
|
function bndPointerMove(e) {
|
|
if (!_bnd || S._cropMode) return;
|
|
const frac = fracFromEvt(e);
|
|
const near = nearestBnd(frac);
|
|
_bnd.canvas.style.cursor = (near >= 0 || _dragging)
|
|
? (_bnd.axis==='y' ? 'ns-resize' : 'ew-resize') : 'default';
|
|
if (_dragging && _dragIdx >= 0) drawBnd(_dragIdx, frac);
|
|
}
|
|
|
|
async function bndPointerUp(e) {
|
|
if (!_dragging || !_bnd || S._cropMode) return;
|
|
const frac = fracFromEvt(e);
|
|
_dragging = false;
|
|
const {boundaries, nodeId, nodeType} = _bnd;
|
|
const full = [0, ...boundaries, 1];
|
|
const clamped = Math.max(full[_dragIdx]+0.005, Math.min(full[_dragIdx+2]-0.005, frac));
|
|
boundaries[_dragIdx] = Math.round(snapToAi(clamped) * 10000) / 10000;
|
|
_bnd.boundaries = [...boundaries];
|
|
_dragIdx = -1;
|
|
drawBnd();
|
|
const url = nodeType==='cabinet' ? `/api/cabinets/${nodeId}/boundaries` : `/api/shelves/${nodeId}/boundaries`;
|
|
try {
|
|
await req('PATCH', url, {boundaries});
|
|
const node = findNode(nodeId);
|
|
if (node) {
|
|
if (nodeType==='cabinet') node.shelf_boundaries = JSON.stringify(boundaries);
|
|
else node.book_boundaries = JSON.stringify(boundaries);
|
|
}
|
|
} catch(err) { toast('Save failed: ' + err.message); }
|
|
}
|
|
|
|
async function bndClick(e) {
|
|
if (!_bnd || _dragging || S._cropMode) return;
|
|
if (!e.ctrlKey || !e.altKey) return;
|
|
e.preventDefault();
|
|
const frac = snapToAi(fracFromEvt(e));
|
|
const {boundaries, nodeId, nodeType} = _bnd;
|
|
const newBounds = [...boundaries, frac].sort((a,b)=>a-b);
|
|
_bnd.boundaries = newBounds;
|
|
const url = nodeType==='cabinet' ? `/api/cabinets/${nodeId}/boundaries` : `/api/shelves/${nodeId}/boundaries`;
|
|
try {
|
|
await req('PATCH', url, {boundaries: newBounds});
|
|
if (nodeType === 'cabinet') {
|
|
const s = await req('POST', `/api/cabinets/${nodeId}/shelves`, null);
|
|
S.tree.forEach(r=>r.cabinets.forEach(c=>{ if(c.id===nodeId){
|
|
c.shelf_boundaries=JSON.stringify(newBounds); c.shelves.push({...s,books:[]});
|
|
}}));
|
|
} else {
|
|
const b = await req('POST', `/api/shelves/${nodeId}/books`);
|
|
S.tree.forEach(r=>r.cabinets.forEach(c=>c.shelves.forEach(s=>{ if(s.id===nodeId){
|
|
s.book_boundaries=JSON.stringify(newBounds); s.books.push(b);
|
|
}})));
|
|
}
|
|
render();
|
|
} catch(err) { toast('Error: ' + err.message); }
|
|
}
|
|
|
|
function bndHover(e) {
|
|
if (!_bnd || S._cropMode) return;
|
|
const frac = fracFromEvt(e);
|
|
const {boundaries, segments} = _bnd;
|
|
const full = [0, ...boundaries, 1];
|
|
let segIdx = -1;
|
|
for (let i = 0; i < full.length-1; i++) { if(frac>=full[i]&&frac<full[i+1]){segIdx=i;break;} }
|
|
clearSegHover();
|
|
if (segIdx>=0 && segments[segIdx]) {
|
|
document.querySelector(`.node[data-id="${segments[segIdx].id}"] .nrow`)?.classList.add('seg-hover');
|
|
}
|
|
}
|
|
|
|
function clearSegHover() {
|
|
document.querySelectorAll('.seg-hover').forEach(el=>el.classList.remove('seg-hover'));
|
|
}
|