Fix viewer translation.

This commit is contained in:
Yaro Kasear 2026-01-08 09:51:47 -06:00
parent 34d4a28622
commit c51ef38d99

View file

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