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

23
view/exportArtboardPng.ts
View File

@@ -18,9 +18,10 @@ export async function downloadArtboardPng(artboard: Artboard, assets: readonly A
context.fillRect(0, 0, width, height);
}
const maskLayerIds = collectMaskLayerIds(artboard.layers);
context.save();
context.translate(-artboard.bounds.x, -artboard.bounds.y);
for (const layer of artboard.layers) await drawLayer(context, layer, artboard.layers, assets, artboard.bounds);
for (const layer of artboard.layers) await drawLayer(context, layer, artboard.layers, assets, artboard.bounds, { maskLayerIds });
context.restore();
const url = canvas.toDataURL("image/png");
@@ -36,11 +37,11 @@ async function drawLayer(
layerTree: readonly Layer[],
assets: readonly Asset[],
artboardBounds: Rect,
ignoreOwnMask = false,
options: { maskLayerIds: ReadonlySet<string>; ignoreOwnMask?: boolean },
) {
if (!layer.visible) return;
if (!layer.visible || (!options.ignoreOwnMask && options.maskLayerIds.has(layer.id))) return;
if (!ignoreOwnMask && layer.clippingMask) {
if (!options.ignoreOwnMask && layer.clippingMask) {
const maskLayer = findLayer(layerTree, layer.clippingMask.maskLayerId);
if (!maskLayer) return;
await drawMaskedLayer(context, layer, maskLayer, layerTree, assets, artboardBounds);
@@ -51,7 +52,7 @@ async function drawLayer(
context.globalAlpha *= layer.opacity;
if (layer.type === "group") {
for (const child of layer.children) await drawLayer(context, child, layerTree, assets, artboardBounds);
for (const child of layer.children) await drawLayer(context, child, layerTree, assets, artboardBounds, options);
context.restore();
return;
}
@@ -83,12 +84,12 @@ async function drawMaskedLayer(
) {
const layerCanvas = createArtboardCanvas(artboardBounds);
const layerContext = translatedContext(layerCanvas, artboardBounds);
await drawLayer(layerContext, layer, layerTree, assets, artboardBounds, true);
await drawLayer(layerContext, layer, layerTree, assets, artboardBounds, { maskLayerIds: new Set(), ignoreOwnMask: true });
layerContext.restore();
const maskCanvas = createArtboardCanvas(artboardBounds);
const maskContext = translatedContext(maskCanvas, artboardBounds);
await drawLayer(maskContext, maskLayer, layerTree, assets, artboardBounds, true);
await drawLayer(maskContext, maskLayer, layerTree, assets, artboardBounds, { maskLayerIds: new Set(), ignoreOwnMask: true });
maskContext.restore();
const compositeContext = layerCanvas.getContext("2d");
@@ -115,6 +116,14 @@ function translatedContext(canvas: HTMLCanvasElement, bounds: Rect) {
return context;
}
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 findLayer(layers: readonly Layer[], layerId: string): Layer | undefined {
for (const layer of layers) {
if (layer.id === layerId) return layer;