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

feat(renderer): render image textures

Browse Source
This commit is contained in:
syntaxbullet
2026-07-03 16:23:38 +02:00
parent 71e97388da
commit bc0fbea029
3 changed files with 200 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
renderer/layers.ts
View File

@@ -3,23 +3,24 @@ import type { Layer } from "@core/layer";
import type { ViewportState } from "@editor/state";
import { resolveTransformTargetBounds } from "@editor/transform-targets";
import { clearScreenRect } from "./clear-rect";
import type { ImageTextureRenderer } from "./image-textures";
import { documentRectToScreenRect } from "./screen-rect";
import type { RgbaColor, WebGlRendererContext } from "./types";
const imageLayerColor: RgbaColor = [0.38, 0.42, 0.5, 1];
const imageLayerInsetColor: RgbaColor = [0.48, 0.54, 0.64, 1];
export function renderLayers(context: WebGlRendererContext, document: ImageDocument, viewport: ViewportState) {
export function renderLayers(context: WebGlRendererContext, document: ImageDocument, viewport: ViewportState, imageTextureRenderer: ImageTextureRenderer) {
for (const artboard of document.artboards) {
for (const layer of artboard.layers) renderLayer(context, document, viewport, layer);
for (const layer of artboard.layers) renderLayer(context, document, viewport, layer, imageTextureRenderer);
}
}
function renderLayer(context: WebGlRendererContext, document: ImageDocument, viewport: ViewportState, layer: Layer) {
function renderLayer(context: WebGlRendererContext, document: ImageDocument, viewport: ViewportState, layer: Layer, imageTextureRenderer: ImageTextureRenderer) {
if (!layer.visible) return;
if (layer.type === "group") {
for (const child of layer.children) renderLayer(context, document, viewport, child);
for (const child of layer.children) renderLayer(context, document, viewport, child, imageTextureRenderer);
return;
}
@@ -27,6 +28,9 @@ function renderLayer(context: WebGlRendererContext, document: ImageDocument, vie
if (!bounds) return;
const rect = documentRectToScreenRect(context.canvas, bounds, viewport);
const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
if (asset && imageTextureRenderer.render(asset, rect)) return;
clearScreenRect(context, rect, imageLayerColor);
clearScreenRect(context, { x: rect.x + 4, y: rect.y + 4, w: Math.max(0, rect.w - 8), h: Math.max(0, rect.h - 8) }, imageLayerInsetColor);
}