Fix viewer translation.
This commit is contained in:
parent
34d4a28622
commit
c51ef38d99
1 changed files with 18 additions and 4 deletions
|
|
@ -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') {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue