More features added.

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, canvasEl.width / dpr, canvasEl.height / dpr);
-    ctx.clearRect(0, 0, rect.width, rect.height);
 }
 
+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();