diff --git a/inventory/templates/testing.html b/inventory/templates/testing.html index fab20b9..d2a80ae 100644 --- a/inventory/templates/testing.html +++ b/inventory/templates/testing.html @@ -14,8 +14,13 @@ cursor: crosshair; height: 80vh; width: 100%; - height: calc(round(nearest, 80vh, var(--grid)) + 1px); - width: calc(round(nearest, 100%, var(--grid)) + 1px); +} + +@supports (height: calc(round(nearest, 80vh, {{ grid_size }}px))) { + #grid { + height: calc(round(nearest, 80vh, var(--grid)) + 1px); + width: calc(round(nearest, 100%, var(--grid)) + 1px); + } } #toolBar { @@ -121,7 +126,12 @@ let dpr = 1; let selectedColor; let currentShape = null; -let shapes = JSON.parse(localStorage.getItem('gridShapes')) || []; +let shapes = loadShapes(); + +const savedTool = localStorage.getItem('gridTool'); +if (savedTool) { + setActiveTool(savedTool); +} resizeAndSetupCanvas(); window.addEventListener('resize', resizeAndSetupCanvas); @@ -131,6 +141,14 @@ function getActiveTool() { return checked ? checked.id : 'outline'; } +function setActiveTool(toolId) { + const el = document.getElementById(toolId); + if (el) { + el.checked = true; + localStorage.setItem('gridTool', toolId); + } +} + function snapToGrid(x, y) { const rect = gridEl.getBoundingClientRect(); const clampedX = Math.min(Math.max(x, rect.left), rect.right); @@ -201,7 +219,7 @@ function resizeAndSetupCanvas() { } function redrawAll() { - if (!ctx) return; + if (!ctx || !shapes) return; clearCanvas(); shapes.forEach(drawShape); @@ -234,10 +252,33 @@ function drawShape(shape) { function clearCanvas() { if (!ctx) return; - const rect = canvasEl.getBoundingClientRect(); - ctx.clearRect(0, 0, rect.width, rect.height); + ctx.clearRect(0, 0, canvasEl.width / dpr, canvasEl.height / dpr); } +function loadShapes() { + try { + const raw = localStorage.getItem('gridShapes'); + if (!raw) return []; + return JSON.parse(raw); + } catch { + return []; + } +} + +function saveShapes() { + try { + localStorage.setItem('gridShapes', JSON.stringify(shapes)); + } catch {} +} + +document.querySelectorAll('input[name="tool"]').forEach(input => { + input.addEventListener('change', () => { + if (input.checked) { + localStorage.setItem('gridTool', input.id); + } + }); +}); + exportEl.addEventListener('click', () => { const blob = new Blob([JSON.stringify(shapes, null,2)], {type: 'application/json'}); const url = URL.createObjectURL(blob); @@ -269,7 +310,7 @@ document.addEventListener('keydown', (e) => { e.preventDefault(); if (shapes.length > 0) { shapes.pop(); - localStorage.setItem('gridShapes', JSON.stringify(shapes)); + saveShapes(); redrawAll(); } } @@ -376,7 +417,11 @@ window.addEventListener('mouseup', (e) => { let finalShape = null; if (currentShape.tool === 'line') { - finalShape = normalizeLine(currentShape); + const line = normalizeLine(currentShape); + + if (line.x1 !== line.x2 || line.y1 !== line.y2) { + finalShape = line; + } } else { const rect = normalizeRect(currentShape); @@ -387,7 +432,7 @@ window.addEventListener('mouseup', (e) => { if (finalShape) { shapes.push(finalShape); - localStorage.setItem('gridShapes', JSON.stringify(shapes)); + saveShapes(); } clearCanvas();