Resizing viewer.

inventory/static/css/components/draw.css

@@ -45,6 +45,27 @@
     opacity: .95;
 }
 
+.grid-widget[data-mode="viewer"] {
+    display: inline-block;
+    height: auto;
+    min-width: 0;
+}
+
+.grid-widget[data-mode="viewer"] .grid-wrap {
+    flex: 0 0 auto;
+    min-height: 0;
+    width: fit-content;
+    overflow: visible;
+}
+
+.grid-widget[data-mode="viewer"] [data-grid]{
+    position: relative;
+    width: auto;
+    height: auto;
+    inset: auto;
+    cursor: default;
+}
+
 /* WIDE: 1 row */
 @container (min-width: 750px) {
     .grid-widget [data-toolbar].toolbar {

inventory/static/js/components/draw.js

@@ -293,6 +293,24 @@ function initGridWidget(root, opts = {}) {
             saveDoc({ version: Number(d.version) || 1, cellSize, shapes });
         }
 
+        if (mode !== 'editor') {
+            const b = getShapesBounds(shapes);
+
+            const padCells = 0.5;
+
+            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);
+
+            gridEl.style.width = `${wPx}px`;
+            gridEl.style.height = `${wPy}px`;
+
+            gridWrapEl.style.width = `${wPx}px`;
+            gridWrapEl.style.height = `${wPy}px`;
+        }
+
         resizeAndSetupCanvas();
     }
 
@@ -442,6 +460,37 @@ function initGridWidget(root, opts = {}) {
         window.activeGridWidget = api;
     }, { capture: true });
 
+    function getShapesBounds(shapes) {
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+        const expand = (x1, y1, x2, y2) => {
+            minX = Math.min(minX, x1);
+            minY = Math.min(minY, y1);
+            maxX = Math.max(maxX, x2);
+            maxY = Math.max(maxY, y2);
+        };
+
+        for (const s of shapes) {
+            if (!s) continue;
+
+            if (s.type === 'rect' || s.type === 'ellipse') {
+                expand(s.x, s.y, s.x + s.w, s.y + s.h);
+            } else if (s.type === 'line') {
+                expand(
+                    Math.min(s.x1, s.x2), Math.min(s.y1, s.y2),
+                    Math.max(s.x1, s.x2), Math.max(s.y1, s.y2)
+                );
+            } else if (s.type === 'path') {
+                const pts = (s.renderPoints?.length >= 2) ? s.renderPoints : s.points;
+                if (!pts?.length) continue;
+                for (const p of pts) expand(p.x, p.y, p.x, p.y);
+            }
+        }
+
+        if (!Number.isFinite(minX)) return null;
+        return { minX, minY, maxX, maxY };
+    }
+
     function setGrid() {
         const type = getActiveType();
 

inventory/templates/components/draw.html

@@ -16,6 +16,18 @@
                         </svg>
                     </label>
 
+                    <input type="radio" class="btn-check" value="line" name="tool-{{ uid }}" id="tool-line-{{ uid }}"
+                        data-tool>
+                    <label for="tool-line-{{ uid }}"
+                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"
+                            aria-hidden="true">
+                            <path d="M4 12 L12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                            <circle cx="4" cy="12" r="1.5" fill="currentColor" />
+                            <circle cx="12" cy="4" r="1.5" fill="currentColor" />
+                        </svg>
+                    </label>
+
                     <input type="radio" class="btn-check" value="outline" name="tool-{{ uid }}"
                         id="tool-outline-{{ uid }}" data-tool>
                     <label for="tool-outline-{{ uid }}"
@@ -56,18 +68,6 @@
                             <circle cx="8" cy="8" r="8" />
                         </svg>
                     </label>
-
-                    <input type="radio" class="btn-check" value="line" name="tool-{{ uid }}" id="tool-line-{{ uid }}"
-                        data-tool>
-                    <label for="tool-line-{{ uid }}"
-                        class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"
-                            aria-hidden="true">
-                            <path d="M4 12 L12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-                            <circle cx="4" cy="12" r="1.5" fill="currentColor" />
-                            <circle cx="12" cy="4" r="1.5" fill="currentColor" />
-                        </svg>
-                    </label>
                 </div>
                 <input type="color" class="form-control form-control-sm form-control-color" data-color>
             </div>

inventory/templates/testing.html

@@ -144,9 +144,11 @@
 }
 {% endset %}
 <div class="row">
+{#
     <div class="col" style="min-height: 80vh">
         {{ draw.drawWidget('test1') }}
     </div>
+#}
     <div class="col" style="min-height: 80vh">
         {{ draw.viewWidget('test2', jsonImage) }}
     </div>