More work on drawing widget.

inventory/templates/testing.html

@@ -14,6 +14,7 @@
     width: 100%;
     height: 100%;
     touch-action: none;
+    margin: 0 auto;
 }
 
 #toolBar {
@@ -239,8 +240,9 @@ function loadDoc() {
     catch { return DEFAULT_DOC; }
 }
 
-function saveDoc() {
-    try { localStorage.setItem("gridDoc", JSON.stringify(doc)); } catch {}
+function saveDoc(nextDoc = doc) {
+    doc = nextDoc;
+    try { localStorage.setItem("gridDoc", JSON.stringify(nextDoc)); } catch {}
 }
 
 function snapDown(n, step) {
@@ -482,22 +484,6 @@ function clearCanvas() {
     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 { }
-}
-
 function setGrid() {
     const type = getActiveType();
 
@@ -578,7 +564,14 @@ importEl.addEventListener('change', (e) => {
             if (!Array.isArray(loadedShapes)) return;
 
             shapes = loadedShapes;
-            saveShapes();
+
+            doc = {
+                version: Number(data?.version) || 1,
+                gridSize: Number(data?.gridSize) || gridSize,
+                shapes
+            };
+
+            saveDoc(data);
             redrawAll();
         } catch {
             toastMessage('Failed to load data from JSON file.', 'danger');
@@ -610,11 +603,12 @@ clearEl.addEventListener('click', () => {
     saveDoc(doc);
     gridSizeEl.value = 25;
     applyGridSize(25);
+    redrawAll();
 });
 
 colorEl.addEventListener('input', () => {
     selectedColor = document.getElementById('color').value;
-    const circle = dotSVGEl.querySelector('circle');2
+    const circle = dotSVGEl.querySelector('circle');
     if (circle) {
         circle.setAttribute('fill', selectedColor);
     }