syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(renderer): extract artboard checkerboard drawing

Browse Source
This commit is contained in:
syntaxbullet
2026-07-03 09:56:03 +02:00
parent 3d32e8fbef
commit fb0c424745
7 changed files with 75 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
renderer/renderer.ts
View File

@@ -1,5 +1,7 @@
import type { ImageDocument } from "@core/document";
import type { EditorState } from "@editor/state";
import { renderArtboard } from "./artboard";
import type { WebGlRendererContext } from "./types";
export type RenderFrame = {
document: ImageDocument;
@@ -23,16 +25,11 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
throw new Error("WebGL2 is not available");
}
const clearRect = (x: number, y: number, w: number, h: number, color: [number, number, number, number]) => {
context.scissor(x, canvas.height - y - h, w, h);
context.clearColor(...color);
context.clear(context.COLOR_BUFFER_BIT);
};
const rendererContext: WebGlRendererContext = { gl: context, canvas };
return {
render(frame) {
const { w, h } = frame.editor.viewport.size;
const { center, zoom } = frame.editor.viewport;
if (canvas.width !== w) canvas.width = w;
if (canvas.height !== h) canvas.height = h;
@@ -44,26 +41,7 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
context.enable(context.SCISSOR_TEST);
for (const artboard of frame.document.artboards) {
const x = Math.round(w / 2 + (artboard.bounds.x - center.x) * zoom);
const y = Math.round(h / 2 + (artboard.bounds.y - center.y) * zoom);
const width = Math.max(0, Math.round(artboard.bounds.w * zoom));
const height = Math.max(0, Math.round(artboard.bounds.h * zoom));
if (artboard.backgroundColor === "transparent") {
const squareSize = Math.max(4, Math.round(12 * zoom));
for (let py = y; py < y + height; py += squareSize) {
for (let px = x; px < x + width; px += squareSize) {
const sx = Math.max(0, px);
const sy = Math.max(0, py);
const sw = Math.min(px + squareSize, x + width, w) - sx;
const sh = Math.min(py + squareSize, y + height, h) - sy;
if (sw <= 0 || sh <= 0) continue;
const checker = (Math.floor((px - x) / squareSize) + Math.floor((py - y) / squareSize)) % 2 === 0;
clearRect(sx, sy, sw, sh, checker ? [0.82, 0.82, 0.86, 1] : [0.94, 0.94, 0.97, 1]);
}
}
}
renderArtboard(rendererContext, artboard, frame.editor.viewport);
}
context.disable(context.SCISSOR_TEST);