From c51ef38d99b104b88fcdf2d7d6b770bd9b16dd8e Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Thu, 8 Jan 2026 09:51:47 -0600
Subject: [PATCH] Fix viewer translation.

---
 inventory/static/js/components/draw.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/inventory/static/js/components/draw.js b/inventory/static/js/components/draw.js
index ec515f1..03546e1 100644
--- a/inventory/static/js/components/draw.js
+++ b/inventory/static/js/components/draw.js
@@ -35,6 +35,7 @@ function initGridWidget(root, opts = {}) {
         sanitizeShapes(Array.isArray(doc.shapes) ? doc.shapes : [])
     );
     let cellSize = Number(doc.cellSize) || 25;
+    let viewerOffset = { x: 0, y: 0 };
 
     let ctx;
     let dpr = 1;
@@ -279,7 +280,12 @@ function initGridWidget(root, opts = {}) {
         if (!ctx || !shapes) return;
 
         clearCanvas();
+        ctx.save();
+        if (mode !== 'editor') {
+            ctx.translate(viewerOffset.x, viewerOffset.y);
+        }
         shapes.forEach(drawShape);
+        ctx.restore();
     }
 
     function setDoc(nextDoc) {
@@ -301,17 +307,25 @@ function initGridWidget(root, opts = {}) {
             const wCells = b ? (b.maxX - b.minX + padCells * 2) : 10;
             const hCells = b ? (b.maxY - b.minY + padCells * 2) : 10;
 
-            const wPx = Math.ceil(wCells * cellSize);
-            const wPy = Math.ceil(hCells * cellSize);
+            const wPx = Math.max(1, Math.ceil(wCells * cellSize));
+            const wPy = Math.max(1, Math.ceil(hCells * cellSize));
 
             gridEl.style.width = `${wPx}px`;
             gridEl.style.height = `${wPy}px`;
 
             gridWrapEl.style.width = `${wPx}px`;
             gridWrapEl.style.height = `${wPy}px`;
+
+            if(b) {
+                viewerOffset.x = (-b.minX + padCells) * cellSize;
+                viewerOffset.y = (-b.minY + padCells) * cellSize;
+            } else {
+                viewerOffset.x = 0;
+                viewerOffset.y = 0;
+            }
         }
 
-        resizeAndSetupCanvas();
+        requestAnimationFrame(() => resizeAndSetupCanvas());
     }
 
     resizeAndSetupCanvas();
@@ -470,7 +484,7 @@ function initGridWidget(root, opts = {}) {
             maxY = Math.max(maxY, y2);
         };
 
-        for (const s of shapes) {
+        for (const s of shapes || []) {
             if (!s) continue;
 
             if (s.type === 'rect' || s.type === 'ellipse') {