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();