Minor fix in the encoder for quantizing state changes.

inventory/static/js/components/draw.js

@@ -229,6 +229,20 @@ function initGridWidget(root, opts = {}) {
         return out;
     }
 
+    function encodeStates(shapes) {
+        return shapes.map(shape => {
+            if (shape.type !== 'stateChange') return shape;
+
+            let newShape = {};
+            Object.keys(shape).forEach(key => {
+                if (key === 'strokeOpacity' || key === 'strokeWidth' || key === 'fillOpacity') {
+                    newShape[key] = Math.round(shape[key] * 100);
+                }
+            });
+            return {...shape, ...newShape};
+        });
+    }
+
     function encode() {
         const payload = {
             v: 1,
@@ -241,7 +255,7 @@ function initGridWidget(root, opts = {}) {
                 so: 100,
                 fo: 100
             },
-            s: shortenKeys(shortenShapes(encodeRuns(computeDeltas(collapseStateChanges(stateCode(stripCaches(shapes)))))))
+            s: shortenKeys(shortenShapes(encodeStates(encodeRuns(computeDeltas(collapseStateChanges(stateCode(stripCaches(shapes))))))))
         };
         return payload;
     }
@@ -507,12 +521,6 @@ function initGridWidget(root, opts = {}) {
         ctx = canvasEl.getContext('2d');
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 
-        ctx.save();
-        ctx.globalAlpha = 1;
-        ctx.fillStyle = "red";
-        ctx.fillRect(0, 0, 10, 10);
-        ctx.restore();
-
         redrawAll();
     }
 
@@ -1641,7 +1649,10 @@ function initGridWidget(root, opts = {}) {
 
             const raw = root.dataset.doc;
             if (raw) {
-                try { api.setDoc(JSON.parse(api.decode(raw))); } catch { }
+                try {
+                    const parsed = JSON.parse(raw);
+                    api.setDoc(api.decode(parsed));
+                } catch { }
             }
         }
     }

inventory/templates/testing.html

@@ -8,7 +8,7 @@
 
 {% block main %}
 {% set jsonImage %}
-{"v":1,"cs":5,"q":100,"d":{"cl":"#000000","f":false,"sw":12,"so":100,"fo":100},"s":[{"t":"s","f":true},{"t":"e","p":[0,0,500,500,500,0,500,500,1000,0,500,500,1500,0,500,500,2000,0,500,500,2500,0,500,500,3000,0,500,500,3000,500,500,500,2500,500,500,500,2000,500,500,500,1500,500,500,500,1000,500,500,500,500,500,500,500,0,500,500,500,0,1000,500,500,500,1000,500,500,1000,1000,500,500,1500,1000,500,500,2000,1000,500,500,2500,1000,500,500,3000,1000,500,500,3000,1500,500,500,2500,1500,500,500,2000,1500,500,500,1500,1500,500,500,1000,1500,500,500,500,1500,500,500,0,1500,500,500,0,2000,500,500,500,2000,500,500,1000,2000,500,500,1500,2000,500,500,2000,2000,500,500,2500,2000,500,500,3000,2000,500,500]}]}
+{"v":1,"cs":5,"q":100,"d":{"cl":"#000000","f":false,"sw":12,"so":100,"fo":100},"s":[{"t":"s","cl":"#e8af11","f":true},{"t":"e","p":[1000,500,2500,2500]},{"t":"s","cl":"#f7a6f4"},{"t":"e","p":[1100,600,2300,2300]},{"t":"s","cl":"#e2b128"},{"t":"e","p":[1600,1100,1300,1300]},{"t":"s","cl":"#ffffff"},{"t":"e","p":[1700,1200,1100,1100]},{"t":"s","cl":"#000000","f":false},{"t":"e","p":[1000,500,2500,2500,1100,600,2300,2300,1600,1100,1300,1300,1700,1200,1100,1100]},{"t":"s","sw":30,"cl":"#ff0000"},{"t":"l","p":[2900,1100,100,0,3100,1700,0,100,3000,2200,100,0,2700,2600,0,-100,2000,2600,100,100,1600,2300,-100,0,1400,1900,0,-100,1300,1400,100,0,1600,1100,0,100,1900,900,100,-100,2300,900,100,100,2600,900,100,-100,3000,1400,100,0,2800,2300,100,0,2500,2600,-100,100,1700,2600,100,-100]},{"t":"s","cl":"#00ff00"},{"t":"l","p":[2700,1100,100,-100,2000,1000,100,0,1400,1600,100,-100,1400,2200,100,0,1300,1900,-100,100,1900,2700,0,-100,2100,2600,100,0,2300,2800,100,0,2500,2400,100,100,2900,2500,100,-100,3200,2000,-100,0,3100,1600,100,-100,3100,1300,-100,0,2400,700,-100,100,1700,900,100,100]},{"t":"s","cl":"#6188ff"},{"t":"l","p":[1500,1300,100,0,1200,1700,100,0,1500,2100,0,-100,1600,2600,0,-100,2000,2500,-100,-100,2400,2500,-100,0,2700,2400,100,0,2900,2100,100,-100,3300,1800,0,100,3000,1600,-100,-100,3200,1700,0,-100,2900,1200,-100,0,2500,900,0,100,2200,900,0,-100,1800,1100,-100,0,1500,1100,-100,100,1700,2400,0,-100,1300,2300,100,100,2600,2800,100,-100,2100,2800,100,-100,3100,2300,100,0,3200,2100,100,-100,2700,1200,100,100,1500,1700,100,-100]}]}
 {% endset %}
 <div class="row">
     <div class="col" style="height: 80vh;">