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

fix(masks): render layer masks

Browse Source
This commit is contained in:
syntaxbullet
2026-07-03 18:00:28 +02:00
parent 29c0d1eafd
commit 4a21b28ed0
2 changed files with 50 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
renderer/layers.ts
View File

@@ -14,7 +14,8 @@ export function renderLayers(context: WebGlRendererContext, document: ImageDocum
for (const artboard of document.artboards) {
if (!artboard.visible) continue;
const clipRect = documentRectToScreenRect(context.canvas, artboard.bounds, viewport);
for (const layer of artboard.layers) renderLayer(context, document, viewport, layer, imageTextureRenderer, clipRect);
const maskLayerIds = collectMaskLayerIds(artboard.layers);
for (const layer of artboard.layers) renderLayer(context, document, viewport, layer, imageTextureRenderer, clipRect, maskLayerIds);
}
}
@@ -25,11 +26,15 @@ function renderLayer(
layer: Layer,
imageTextureRenderer: ImageTextureRenderer,
clipRect: ScreenRect,
maskLayerIds: ReadonlySet<string>,
) {
if (!layer.visible) return;
if (!layer.visible || maskLayerIds.has(layer.id)) return;
const effectiveClipRect = resolveLayerClipRect(context, document, viewport, layer, clipRect);
if (!effectiveClipRect) return;
if (layer.type === "group") {
for (const child of layer.children) renderLayer(context, document, viewport, child, imageTextureRenderer, clipRect);
for (const child of layer.children) renderLayer(context, document, viewport, child, imageTextureRenderer, effectiveClipRect, maskLayerIds);
return;
}
@@ -38,15 +43,38 @@ function renderLayer(
const rect = documentRectToScreenRect(context.canvas, bounds, viewport);
const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
if (asset && imageTextureRenderer.render(asset, rect, clipRect)) return;
if (asset && imageTextureRenderer.render(asset, rect, effectiveClipRect)) return;
const fallbackRect = intersectScreenRects(rect, clipRect);
const fallbackRect = intersectScreenRects(rect, effectiveClipRect);
if (!fallbackRect) return;
clearScreenRect(context, fallbackRect, imageLayerColor);
const insetRect = intersectScreenRects({ x: rect.x + 4, y: rect.y + 4, w: Math.max(0, rect.w - 8), h: Math.max(0, rect.h - 8) }, clipRect);
const insetRect = intersectScreenRects({ x: rect.x + 4, y: rect.y + 4, w: Math.max(0, rect.w - 8), h: Math.max(0, rect.h - 8) }, effectiveClipRect);
if (insetRect) clearScreenRect(context, insetRect, imageLayerInsetColor);
}
function resolveLayerClipRect(
context: WebGlRendererContext,
document: ImageDocument,
viewport: ViewportState,
layer: Layer,
clipRect: ScreenRect,
): ScreenRect | undefined {
if (!layer.clippingMask) return clipRect;
const maskBounds = resolveTransformTargetBounds(document, { type: "layer", id: layer.clippingMask.maskLayerId });
if (!maskBounds) return undefined;
return intersectScreenRects(clipRect, documentRectToScreenRect(context.canvas, maskBounds, viewport));
}
function collectMaskLayerIds(layers: readonly Layer[], ids = new Set<string>()) {
for (const layer of layers) {
if (layer.clippingMask) ids.add(layer.clippingMask.maskLayerId);
if (layer.type === "group") collectMaskLayerIds(layer.children, ids);
}
return ids;
}
function intersectScreenRects(a: ScreenRect, b: ScreenRect): ScreenRect | undefined {
const x1 = Math.max(a.x, b.x);
const y1 = Math.max(a.y, b.y);