Getting more resize and reset behavior.

inventory/routes/testing.py

@@ -7,6 +7,6 @@ bp_testing = Blueprint("testing", __name__)
 def init_testing_routes(app):
     @bp_testing.get('/testing')
     def test_page():
-        return render_template('testing.html', grid_size=25)
+        return render_template('testing.html')
 
     app.register_blueprint(bp_testing)

inventory/templates/testing.html

@@ -1,5 +1,4 @@
 {% extends 'base.html' %}
-{% set dot_size = [grid_size * 1.25, 32]|max|int %}
 
 {% block style %}
 
@@ -49,7 +48,7 @@
                 class="btn-toolbar bg-light position-absolute border border-secondary-subtle rounded start-50 p-1 align-items-center flex-nowrap overflow-auto">
                 <div class="input-group input-group-sm w-auto">
                     <span class="input-group-text">Grid Size:</span>
-                    <input type="number" min="1" value="{{ grid_size }}" name="gridSize" id="gridSize" class="form-control form-control-sm">
+                    <input type="number" min="1" value="25" name="gridSize" id="gridSize" class="form-control form-control-sm">
                 </div>
                 <div class="vr mx-1"></div>
                 <input type="color" class="form-control form-control-sm form-control-color" id="color">
@@ -173,7 +172,7 @@
                 </div>
             </div>
             <span id="dot" class="position-absolute p-0 m-0 d-none">
-                <svg xmlns="http://www.w3.org/2000/svg" width="{{ dot_size }}" height="{{ dot_size }}" viewBox="0 0 32 32"
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"
                     id="dotSVG">
                     <circle cx="16" cy="16" r="4" fill="black" />
                 </svg>
@@ -187,6 +186,8 @@
 {% endblock %}
 
 {% block script %}
+const DEFAULT_DOC = { version: 1, gridSize: 25, shapes: [] };
+
 const canvasEl = document.getElementById('overlay');
 const clearEl = document.getElementById('clear');
 const colorEl = document.getElementById('color');
@@ -200,7 +201,9 @@ const importEl = document.getElementById('import');
 const gridSizeEl = document.getElementById('gridSize');
 const gridWrapEl = document.getElementById('gridWrap');
 
-let gridSize = Number(gridSizeEl.value) || {{ grid_size }};
+let doc = loadDoc();
+let gridSize = Number(doc.gridSize) || 25;
+gridSizeEl.value = gridSize;
 let dotSize = Math.floor(Math.max(gridSize * 1.25, 32));
 
 let ctx;
@@ -208,7 +211,7 @@ let dpr = 1;
 let selectedColor;
 
 let currentShape = null;
-let shapes = loadShapes();
+let shapes = Array.isArray(doc.shapes) ? doc.shapes : [];
 
 let sizingRAF = 0;
 let lastApplied = { w: 0, h: 0 };
@@ -231,6 +234,15 @@ window.addEventListener('resize', resizeAndSetupCanvas);
 
 setGrid();
 
+function loadDoc() {
+    try { return JSON.parse(localStorage.getItem("gridDoc")) || DEFAULT_DOC; }
+    catch { return DEFAULT_DOC; }
+}
+
+function saveDoc() {
+    try { localStorage.setItem("gridDoc", JSON.stringify(doc)); } catch {}
+}
+
 function snapDown(n, step) {
     return Math.floor(n / step) * step;
 }
@@ -248,13 +260,12 @@ function applySnappedGridSize() {
     const snappedH = snapDown(h, grid);
 
     if (snappedW === lastApplied.w && snappedH === lastApplied.h) return;
-
     lastApplied = { w: snappedW, h: snappedH };
 
     gridEl.style.width = `${snappedW}px`;
     gridEl.style.height = `${snappedH}px`;
 
-    resizeAndSetupCanvas();
+    requestAnimationFrame(resizeAndSetupCanvas);
 }
 
 function scheduleSnappedGridSize() {
@@ -267,6 +278,8 @@ function applyGridSize(newSize) {
     if (!Number.isFinite(n) || n < 1) return;
 
     gridSize = n;
+    doc.gridSize = gridSize;
+    saveDoc({ ...doc, shapes });
 
     dotSize = Math.floor(Math.max(gridSize * 1.25, 32));
 
@@ -556,7 +569,7 @@ importEl.addEventListener('change', (e) => {
         try {
             const data = JSON.parse(reader.result);
 
-            if (data.gridSize) {
+            if (Number.isFinite(Number(data.gridSize)) && Number(data.gridSize) >= 1) {
                 gridSizeEl.value = data.gridSize;
                 applyGridSize(data.gridSize);
             }
@@ -590,14 +603,18 @@ exportEl.addEventListener('click', () => {
 });
 
 clearEl.addEventListener('click', () => {
+    gridSize = 25;
     shapes = [];
-    saveShapes();
+    doc.gridSize = gridSize;
-    redrawAll();
+    doc.shapes = shapes;
+    saveDoc(doc);
+    gridSizeEl.value = 25;
+    applyGridSize(25);
 });
 
 colorEl.addEventListener('input', () => {
     selectedColor = document.getElementById('color').value;
-    const circle = dotSVGEl.querySelector('circle');
+    const circle = dotSVGEl.querySelector('circle');2
     if (circle) {
         circle.setAttribute('fill', selectedColor);
     }
@@ -762,7 +779,8 @@ window.addEventListener('pointerup', (e) => {
 
     if (finalShape) {
         shapes.push(finalShape);
-        saveShapes();
+        doc.shapes = shapes;
+        saveDoc(doc);
     }
 
     clearCanvas();