diff --git a/inventory/templates/testing.html b/inventory/templates/testing.html
index 05bbf53..314635d 100644
--- a/inventory/templates/testing.html
+++ b/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);
}