539 lines
18 KiB
JavaScript
539 lines
18 KiB
JavaScript
/* inspector.js - Visual Trace Tracking (v6) */
|
||
|
||
class Inspector {
|
||
constructor(db, cv) {
|
||
this.db = db;
|
||
this.cv = cv;
|
||
this.grid = document.getElementById('inspect-grid');
|
||
this.sidebarList = document.getElementById('inspect-layers');
|
||
this.activeNetEl = document.getElementById('inspect-active-net');
|
||
|
||
this.viewers = {};
|
||
this.visibleIds = new Set();
|
||
this.activeNet = null;
|
||
this.masterId = null;
|
||
this.netNodeCache = {}; // Cache for calculated node positions
|
||
}
|
||
|
||
async init() {
|
||
this.sidebarList.innerHTML = '';
|
||
|
||
// Hide the "+ New Net" button for now
|
||
// We find it by the onclick attribute since it doesn't have an ID in the HTML
|
||
const newNetBtn = document.querySelector('button[onclick="inspector.startNewNet()"]');
|
||
if(newNetBtn) newNetBtn.style.display = 'none';
|
||
|
||
const imgs = [...bomImages].sort((a,b) => {
|
||
const nA = a.name.toLowerCase(), nB = b.name.toLowerCase();
|
||
if(nA.includes('top')) return -1;
|
||
if(nB.includes('top')) return 1;
|
||
return nA.localeCompare(nB);
|
||
});
|
||
|
||
// Checkbox Layout
|
||
imgs.forEach(img => {
|
||
const row = document.createElement('div');
|
||
// Force Grid layout for strict alignment of checkbox vs label
|
||
row.style.cssText = "display:grid; grid-template-columns: 20px 1fr; align-items:center; gap:5px; color:#334155; font-size:0.85rem; border-bottom:1px solid #f1f5f9; padding-bottom:4px;";
|
||
|
||
const chk = document.createElement('input');
|
||
chk.type = 'checkbox';
|
||
chk.checked = this.visibleIds.has(img.id);
|
||
chk.onchange = () => this.toggleLayer(img.id, chk.checked);
|
||
|
||
const label = document.createElement('span');
|
||
label.innerText = img.name;
|
||
label.style.cssText = "white-space:nowrap; overflow:hidden; text-overflow:ellipsis;";
|
||
label.title = img.name;
|
||
|
||
row.appendChild(chk);
|
||
row.appendChild(label);
|
||
this.sidebarList.appendChild(row);
|
||
});
|
||
|
||
// Smart Default Selection
|
||
if(this.visibleIds.size === 0) {
|
||
const isDesktop = window.matchMedia("(min-width: 800px)").matches;
|
||
if (isDesktop) {
|
||
imgs.forEach(img => this.visibleIds.add(img.id));
|
||
} else {
|
||
if (imgs.length > 0) this.visibleIds.add(imgs[0].id);
|
||
if (imgs.length > 1) this.visibleIds.add(imgs[1].id);
|
||
}
|
||
// Sync UI
|
||
Array.from(this.sidebarList.querySelectorAll('input')).forEach((chk, i) => {
|
||
chk.checked = this.visibleIds.has(imgs[i].id);
|
||
});
|
||
}
|
||
|
||
this.updateNetUI();
|
||
this.renderGrid();
|
||
}
|
||
|
||
async renderGrid() {
|
||
this.grid.innerHTML = '';
|
||
this.viewers = {};
|
||
|
||
if(this.visibleIds.size === 0) {
|
||
this.grid.innerHTML = '<div style="display:flex; align-items:center; justify-content:center; color:#64748b; height:100%;">Select layers to inspect</div>';
|
||
return;
|
||
}
|
||
|
||
// [FIX] Force Grid Layout Styles via JS to ensure they apply
|
||
this.grid.style.display = 'grid';
|
||
this.grid.style.width = '100%';
|
||
this.grid.style.height = '100%';
|
||
this.grid.style.boxSizing = 'border-box';
|
||
this.grid.style.gap = '2px';
|
||
this.grid.style.background = '#000';
|
||
|
||
const count = this.visibleIds.size;
|
||
this.grid.style.gridTemplateColumns = (count > 1) ? '1fr 1fr' : '1fr';
|
||
this.grid.style.gridTemplateRows = (count > 2) ? '1fr 1fr' : '1fr';
|
||
|
||
if(!this.masterId || !this.visibleIds.has(this.masterId)) {
|
||
this.masterId = this.visibleIds.values().next().value;
|
||
}
|
||
|
||
for(const id of this.visibleIds) {
|
||
const imgRec = bomImages.find(i => i.id === id);
|
||
if(!imgRec) continue;
|
||
|
||
const cell = document.createElement('div');
|
||
cell.style.cssText = "position:relative; overflow:hidden; border:1px solid #334155; background:#000; width:100%; height:100%;";
|
||
|
||
const cvs = document.createElement('canvas');
|
||
cvs.id = `inspect-cvs-${id}`;
|
||
cvs.style.display = 'block';
|
||
cell.appendChild(cvs);
|
||
|
||
const lbl = document.createElement('div');
|
||
lbl.innerText = imgRec.name;
|
||
lbl.style.cssText = "position:absolute; top:5px; left:5px; background:rgba(0,0,0,0.7); padding:2px 6px; font-size:0.7rem; pointer-events:none; border-radius:3px; color:white;";
|
||
cell.appendChild(lbl);
|
||
|
||
this.grid.appendChild(cell);
|
||
|
||
const viewer = new PanZoomCanvas(cvs.id,
|
||
(ctx, k) => this.drawOverlay(id, ctx, k),
|
||
(x, y) => this.handleNodeClick(id, x, y),
|
||
(dx, dy, mode) => {
|
||
// Hit Test: Return -1 to allow Panning
|
||
if(mode === 'check') return -1;
|
||
}
|
||
);
|
||
|
||
viewer.onMouseMove = (x, y) => {
|
||
if(this.masterId === id) this.syncCursors(id, x, y);
|
||
};
|
||
|
||
// Activation & Click Handling
|
||
let downX = 0, downY = 0;
|
||
let wasActiveBeforeDown = false; // Track state before click
|
||
|
||
cvs.addEventListener('mousedown', (e) => {
|
||
if (e.button === 0) { // Left Click
|
||
downX = e.clientX;
|
||
downY = e.clientY;
|
||
|
||
// Check if we are clicking an already active window
|
||
wasActiveBeforeDown = (this.masterId === id);
|
||
|
||
// Activate immediately to allow dragging/tracking
|
||
if(this.masterId !== id) {
|
||
this.masterId = id;
|
||
}
|
||
|
||
const pt = viewer.getImgCoords(e.clientX, e.clientY);
|
||
this.syncCursors(id, pt.x, pt.y);
|
||
}
|
||
});
|
||
|
||
// Right Click: Inactivate (Stop Tracking)
|
||
cvs.oncontextmenu = (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
this.masterId = null;
|
||
this.cursorState = null;
|
||
|
||
// Clear cursors on all views
|
||
Object.values(this.viewers).forEach(v => {
|
||
v.cursorPos = null;
|
||
v.setDimmed(false);
|
||
v.draw();
|
||
});
|
||
};
|
||
|
||
cvs.addEventListener('mouseup', (e) => {
|
||
if (e.button !== 0) return; // Left click only
|
||
|
||
const dist = Math.hypot(e.clientX - downX, e.clientY - downY);
|
||
if (dist < 10) { // Click vs Drag
|
||
// Only Add/Edit node if the window was ALREADY active.
|
||
// If it wasn't, we just activated it in mousedown, so do nothing else.
|
||
if (wasActiveBeforeDown) {
|
||
const pt = viewer.getImgCoords(e.clientX, e.clientY);
|
||
|
||
// 1. Try to edit an existing node
|
||
const hit = this.handleNodeClick(id, pt.x, pt.y);
|
||
|
||
// 2. If no node hit, try to add a new one
|
||
if (!hit) {
|
||
this.handleAddNode(id, pt.x, pt.y);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
this.viewers[id] = viewer;
|
||
|
||
try {
|
||
const bmp = await createImageBitmap(imgRec.blob);
|
||
viewer.setImage(bmp);
|
||
// Force sync canvas resolution to container size before fitting
|
||
if (cell.clientWidth && cell.clientHeight) {
|
||
viewer.canvas.width = cell.clientWidth;
|
||
viewer.canvas.height = cell.clientHeight;
|
||
}
|
||
viewer.fit();
|
||
|
||
if(imgRec.name.toLowerCase().includes('bot') && !imgRec.name.toLowerCase().includes('top')) {
|
||
viewer.setMirror(true);
|
||
}
|
||
} catch(e) { console.error("Inspector img load error", e); }
|
||
}
|
||
this.updateNetNodeCache();
|
||
}
|
||
|
||
handleNodeClick(imgId, x, y) {
|
||
if (!this.activeNet || !this.netNodeCache[imgId]) return false;
|
||
const viewer = this.viewers[imgId];
|
||
if (!viewer) return false;
|
||
|
||
// Hit test in Screen Space
|
||
const HIT_RADIUS = 20;
|
||
|
||
const hit = this.netNodeCache[imgId].find(n => {
|
||
const dist = Math.hypot(n.x - x, n.y - y);
|
||
return (dist * viewer.t.k) < HIT_RADIUS;
|
||
});
|
||
|
||
if (hit) {
|
||
const oldLabel = hit.label;
|
||
const newLabel = prompt(`Edit Node "${oldLabel}"\n\nEnter new name to Rename.\nClear text and click OK to Delete.`, oldLabel);
|
||
|
||
if (newLabel !== null) {
|
||
const nodeIndex = this.activeNet.nodes.indexOf(hit.origNode);
|
||
if (nodeIndex === -1) return true;
|
||
|
||
if (newLabel.trim() === "") {
|
||
this.activeNet.nodes.splice(nodeIndex, 1); // Delete
|
||
} else {
|
||
this.activeNet.nodes[nodeIndex].label = newLabel.trim(); // Rename
|
||
}
|
||
this.updateNetUI();
|
||
}
|
||
return true; // Handled
|
||
}
|
||
return false; // Not handled
|
||
}
|
||
|
||
toggleLayer(id, isVisible) {
|
||
if(isVisible) this.visibleIds.add(id);
|
||
else this.visibleIds.delete(id);
|
||
this.renderGrid();
|
||
}
|
||
|
||
// Load an existing net for editing
|
||
loadNet(net) {
|
||
// Deep copy to ensure "Cancel" works (discarding changes)
|
||
this.activeNet = JSON.parse(JSON.stringify(net));
|
||
this.updateNetUI();
|
||
|
||
// Ensure pins are visible immediately
|
||
// We might need to ensure grid is rendered if not already
|
||
if(Object.keys(this.viewers).length === 0) {
|
||
this.renderGrid().then(() => {
|
||
Object.values(this.viewers).forEach(v => v.draw());
|
||
});
|
||
} else {
|
||
Object.values(this.viewers).forEach(v => v.draw());
|
||
}
|
||
}
|
||
|
||
async updateNetNodeCache() {
|
||
this.netNodeCache = {};
|
||
if (!this.activeNet || !this.activeNet.nodes) return;
|
||
|
||
// Initialize cache arrays for visible viewers
|
||
for (const vid of this.visibleIds) this.netNodeCache[vid] = [];
|
||
|
||
// Process each node in the net
|
||
for (const node of this.activeNet.nodes) {
|
||
// 1. Add directly to the source image (Blue)
|
||
if (this.visibleIds.has(node.imgId)) {
|
||
this.netNodeCache[node.imgId].push({
|
||
x: node.x, y: node.y, label: node.label,
|
||
color: '#2563eb', isSource: true, origNode: node
|
||
});
|
||
}
|
||
|
||
// 2. Project to other visible images (Green)
|
||
// We need paths from the node's image to all other visible images
|
||
const paths = await ImageGraph.solvePaths(node.imgId, this.cv, this.db);
|
||
|
||
for (const p of paths) {
|
||
if (this.visibleIds.has(p.id)) {
|
||
const proj = this.cv.projectPoint(node.x, node.y, p.H);
|
||
if (proj) {
|
||
this.netNodeCache[p.id].push({
|
||
x: proj.x, y: proj.y, label: node.label,
|
||
color: '#4ade80', isSource: false, origNode: node
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// Redraw all to show changes
|
||
Object.values(this.viewers).forEach(v => v.draw());
|
||
}
|
||
|
||
async syncCursors(masterId, mx, my) {
|
||
this.cursorState = { masterId, mx, my };
|
||
|
||
for(const [id, viewer] of Object.entries(this.viewers)) {
|
||
if(id === masterId) {
|
||
viewer.setDimmed(false);
|
||
viewer.draw();
|
||
continue;
|
||
}
|
||
|
||
const path = await ImageGraph.solvePaths(masterId, this.cv, this.db);
|
||
const targetPath = path.find(p => p.id === id);
|
||
|
||
if(targetPath) {
|
||
const pt = this.cv.projectPoint(mx, my, targetPath.H);
|
||
if(pt) {
|
||
viewer.cursorPos = pt;
|
||
|
||
const w = viewer.bmp ? viewer.bmp.width : 1000;
|
||
const h = viewer.bmp ? viewer.bmp.height : 1000;
|
||
const inside = (pt.x >= 0 && pt.y >= 0 && pt.x <= w && pt.y <= h);
|
||
|
||
viewer.setDimmed(!inside);
|
||
|
||
if (inside && viewer.bmp) {
|
||
const k = viewer.t.k;
|
||
const tx = viewer.t.x;
|
||
const ty = viewer.t.y;
|
||
|
||
const imgX = viewer.isMirrored ? (w - pt.x) : pt.x;
|
||
const screenX = imgX * k + tx;
|
||
const screenY = pt.y * k + ty;
|
||
|
||
const cvsW = viewer.canvas.width;
|
||
const cvsH = viewer.canvas.height;
|
||
const padX = cvsW * 0.25;
|
||
const padY = cvsH * 0.25;
|
||
|
||
let dx = 0; let dy = 0;
|
||
|
||
if (screenX > cvsW - padX) dx = (cvsW - padX) - screenX;
|
||
else if (screenX < padX) dx = padX - screenX;
|
||
|
||
if (screenY > cvsH - padY) dy = (cvsH - padY) - screenY;
|
||
else if (screenY < padY) dy = padY - screenY;
|
||
|
||
if (dx !== 0 || dy !== 0) {
|
||
viewer.t.x += dx;
|
||
viewer.t.y += dy;
|
||
}
|
||
}
|
||
} else {
|
||
viewer.cursorPos = null;
|
||
viewer.setDimmed(true);
|
||
}
|
||
} else {
|
||
viewer.cursorPos = null;
|
||
viewer.setDimmed(true);
|
||
}
|
||
viewer.draw();
|
||
}
|
||
}
|
||
|
||
drawOverlay(id, ctx, k) {
|
||
const viewer = this.viewers[id];
|
||
if (!viewer) return;
|
||
|
||
const ik = 1/k; // Inverse zoom factor
|
||
|
||
// 1. Draw Cached Nodes as Pins
|
||
if (this.netNodeCache[id]) {
|
||
this.netNodeCache[id].forEach(n => {
|
||
let drawX = n.x;
|
||
if (viewer.isMirrored && viewer.bmp) drawX = viewer.bmp.width - n.x;
|
||
|
||
ctx.save();
|
||
ctx.translate(drawX, n.y);
|
||
ctx.scale(ik, ik); // Keep pin constant size on screen
|
||
|
||
// ROTATION: -45 degrees (Counter-Clockwise)
|
||
// This aligns the "Bottom-Left" corner of our square to point straight down if the square is in the Top-Right quadrant.
|
||
ctx.rotate(-Math.PI / 4);
|
||
|
||
// DRAW PIN SHAPE
|
||
// We draw a square relative to the origin (0,0).
|
||
// The Origin (0,0) is the Sharp Tip.
|
||
// The square extends into x>0, y<0 (Visual Top-Right relative to rotation axis)
|
||
// so that when rotated -45deg, it stands "Up" above the point.
|
||
|
||
const s = 20; // Size of the square side
|
||
const r = 10; // Radius (50% of size)
|
||
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, 0); // Tip starts exactly on the node coordinate
|
||
|
||
// Left Edge (going 'Up' in local coords) -> Top-Left Corner
|
||
ctx.lineTo(0, -s + r);
|
||
ctx.arcTo(0, -s, s, -s, r);
|
||
|
||
// Top Edge -> Top-Right Corner
|
||
ctx.lineTo(s - r, -s);
|
||
ctx.arcTo(s, -s, s, 0, r);
|
||
|
||
// Right Edge -> Bottom-Right Corner
|
||
ctx.lineTo(s, -r);
|
||
ctx.arcTo(s, 0, 0, 0, r);
|
||
|
||
// Return to Tip
|
||
ctx.lineTo(0, 0);
|
||
ctx.closePath();
|
||
|
||
ctx.fillStyle = n.color; // Blue (#2563eb) or Green (#4ade80)
|
||
ctx.fill();
|
||
|
||
// White Border
|
||
ctx.lineWidth = 1.5;
|
||
ctx.strokeStyle = 'white';
|
||
ctx.stroke();
|
||
|
||
// LABEL
|
||
// We want the text in the center of the "bulb".
|
||
// The center of our square is at (s/2, -s/2).
|
||
ctx.translate(s/2, -s/2);
|
||
|
||
// Rotate text back +45deg so it appears horizontal
|
||
ctx.rotate(Math.PI / 4);
|
||
|
||
ctx.fillStyle = 'white';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.font = 'bold 9px sans-serif';
|
||
ctx.fillText(n.label, 0, 0);
|
||
|
||
ctx.restore();
|
||
});
|
||
}
|
||
|
||
// 2. Cursor Crosshair (Unchanged)
|
||
let cx, cy, color = '#ff0000';
|
||
|
||
if(this.cursorState && this.cursorState.masterId === id) {
|
||
cx = this.cursorState.mx; cy = this.cursorState.my;
|
||
if(viewer.isMirrored && viewer.bmp) cx = viewer.bmp.width - cx;
|
||
} else if (viewer.cursorPos) {
|
||
cx = viewer.cursorPos.x; cy = viewer.cursorPos.y;
|
||
if(viewer.isMirrored && viewer.bmp) cx = viewer.bmp.width - cx;
|
||
color = '#facc15';
|
||
}
|
||
|
||
if(cx !== undefined) {
|
||
const len = 100000;
|
||
ctx.lineWidth = 1 * ik;
|
||
ctx.strokeStyle = color;
|
||
ctx.beginPath();
|
||
ctx.moveTo(cx - len, cy); ctx.lineTo(cx + len, cy);
|
||
ctx.moveTo(cx, cy - len); ctx.lineTo(cx, cy + len);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
|
||
startNewNet() {
|
||
this.activeNet = { id: uuid(), name: "New Net", nodes: [], isNew: true };
|
||
this.updateNetUI();
|
||
}
|
||
|
||
handleAddNode(imgId, x, y) {
|
||
// Determine default label (start at P1 if no net exists)
|
||
const nextIdx = this.activeNet ? this.activeNet.nodes.length + 1 : 1;
|
||
const defaultLabel = `P${nextIdx}`;
|
||
|
||
const label = prompt("Pad/Pin Name:", defaultLabel);
|
||
|
||
if(label) {
|
||
if(!this.activeNet) {
|
||
this.startNewNet();
|
||
}
|
||
|
||
this.activeNet.nodes.push({
|
||
id: uuid(),
|
||
imgId: imgId,
|
||
x: Math.round(x),
|
||
y: Math.round(y),
|
||
label: label
|
||
});
|
||
this.updateNetUI();
|
||
Object.values(this.viewers).forEach(v => v.draw());
|
||
}
|
||
}
|
||
|
||
async saveNet() {
|
||
if(!this.activeNet) return;
|
||
|
||
// Only prompt for name if it's a new net
|
||
if (this.activeNet.isNew) {
|
||
const name = prompt("Net Name:", this.activeNet.name);
|
||
if(name) {
|
||
this.activeNet.name = name;
|
||
delete this.activeNet.isNew; // Remove flag before saving
|
||
} else {
|
||
return; // Cancelled by user in prompt
|
||
}
|
||
}
|
||
|
||
this.activeNet.projectId = currentBomId;
|
||
await this.db.addNet(this.activeNet);
|
||
|
||
this.activeNet = null;
|
||
this.updateNetUI();
|
||
|
||
if(window.netManager) window.netManager.render();
|
||
|
||
// Return to Nets list
|
||
history.back();
|
||
}
|
||
|
||
cancelNet() {
|
||
this.activeNet = null;
|
||
this.updateNetUI();
|
||
history.back();
|
||
}
|
||
|
||
updateNetUI() {
|
||
if(!this.activeNet) {
|
||
this.activeNetEl.style.display = 'none';
|
||
} else {
|
||
this.activeNetEl.style.cssText = "pointer-events:auto; background:rgba(15, 23, 42, 0.9); padding:4px 10px; border-radius:20px; border:1px solid #334155; display:flex; color:white; align-items:center; gap:8px; box-shadow:0 4px 6px rgba(0,0,0,0.2); backdrop-filter:blur(4px); font-size:0.85rem; height:auto;";
|
||
|
||
this.activeNetEl.innerHTML = `
|
||
<span style="font-weight:600; color:#4ade80; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${this.activeNet.name}</span>
|
||
<span style="color:#94a3b8; border-left:1px solid #475569; padding-left:8px; font-size:0.8rem;">${this.activeNet.nodes.length}</span>
|
||
<button class="primary sm-btn" style="padding:1px 8px; font-size:0.75rem; height:24px; min-height:0; line-height:1;" onclick="inspector.saveNet()">Save</button>
|
||
<button class="danger sm-btn" style="padding:0; width:20px; height:20px; min-height:0; border-radius:50%; line-height:1; display:flex; align-items:center; justify-content:center;" onclick="inspector.cancelNet()">×</button>
|
||
`;
|
||
}
|
||
this.updateNetNodeCache();
|
||
}
|
||
|
||
}
|