diff --git a/inventory/static/js/components/draw.js b/inventory/static/js/components/draw.js index cc725fd..b182231 100644 --- a/inventory/static/js/components/draw.js +++ b/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 { } } } } diff --git a/inventory/templates/testing.html b/inventory/templates/testing.html index cf34b04..694fa91 100644 --- a/inventory/templates/testing.html +++ b/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 %}