feat(masks): add mask editing mode

renderer/layers.ts

@@ -1,6 +1,6 @@
 import type { ImageDocument } from "@core/document";
 import type { Layer } from "@core/layer";
-import type { ViewportState } from "@editor/state";
+import type { EditorState, ViewportState } from "@editor/state";
 import { resolveTransformTargetBounds } from "@editor/transform-targets";
 import { clearScreenRect } from "./clear-rect";
 import type { ImageTextureRenderer } from "./image-textures";
@@ -10,39 +10,45 @@ import type { RgbaColor, ScreenRect, 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, imageTextureRenderer: ImageTextureRenderer) {
+export function renderLayers(context: WebGlRendererContext, document: ImageDocument, editor: EditorState, imageTextureRenderer: ImageTextureRenderer) {
   for (const artboard of document.artboards) {
     if (!artboard.visible) continue;
-    const clipRect = documentRectToScreenRect(context.canvas, artboard.bounds, viewport);
+    const clipRect = documentRectToScreenRect(context.canvas, artboard.bounds, editor.viewport);
     const maskLayerIds = collectMaskLayerIds(artboard.layers);
-    for (const layer of artboard.layers) renderLayer(context, document, viewport, layer, imageTextureRenderer, clipRect, maskLayerIds);
+    for (const layer of artboard.layers) renderLayer(context, document, editor, layer, imageTextureRenderer, clipRect, maskLayerIds);
   }
 }
 
 function renderLayer(
   context: WebGlRendererContext,
   document: ImageDocument,
-  viewport: ViewportState,
+  editor: EditorState,
   layer: Layer,
   imageTextureRenderer: ImageTextureRenderer,
   clipRect: ScreenRect,
   maskLayerIds: ReadonlySet<string>,
 ) {
-  if (!layer.visible || maskLayerIds.has(layer.id)) return;
+  const editingMaskLayer = editor.maskEditLayerId === layer.id;
+  if (!layer.visible || (maskLayerIds.has(layer.id) && !editingMaskLayer)) return;
 
-  const effectiveClipRect = resolveLayerClipRect(context, document, viewport, layer, clipRect);
+  const effectiveClipRect = resolveLayerClipRect(context, document, editor.viewport, layer, clipRect);
   if (!effectiveClipRect) return;
 
   if (layer.type === "group") {
-    for (const child of layer.children) renderLayer(context, document, viewport, child, imageTextureRenderer, effectiveClipRect, maskLayerIds);
+    for (const child of layer.children) renderLayer(context, document, editor, child, imageTextureRenderer, effectiveClipRect, maskLayerIds);
     return;
   }
 
   const bounds = resolveTransformTargetBounds(document, { type: "layer", id: layer.id });
   if (!bounds) return;
 
-  const rect = documentRectToScreenRect(context.canvas, bounds, viewport);
+  const rect = documentRectToScreenRect(context.canvas, bounds, editor.viewport);
   const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
+  const maskLayer = !editingMaskLayer && layer.clippingMask ? findLayer(document, layer.clippingMask.maskLayerId) : undefined;
+  const maskAsset = maskLayer && maskLayer.type !== "group" ? document.assets.find((candidate) => candidate.id === maskLayer.assetId) : undefined;
+  const maskBounds = maskLayer ? resolveTransformTargetBounds(document, { type: "layer", id: maskLayer.id }) : undefined;
+  const maskRect = maskBounds ? documentRectToScreenRect(context.canvas, maskBounds, editor.viewport) : undefined;
+  if (asset && maskAsset && maskRect && imageTextureRenderer.renderMasked(asset, rect, maskAsset, maskRect, effectiveClipRect)) return;
   if (asset && imageTextureRenderer.render(asset, rect, effectiveClipRect)) return;
 
   const fallbackRect = intersectScreenRects(rect, effectiveClipRect);
@@ -67,6 +73,25 @@ function resolveLayerClipRect(
   return intersectScreenRects(clipRect, documentRectToScreenRect(context.canvas, maskBounds, viewport));
 }
 
+function findLayer(document: ImageDocument, layerId: string): Layer | undefined {
+  for (const artboard of document.artboards) {
+    const layer = findLayerInTree(artboard.layers, layerId);
+    if (layer) return layer;
+  }
+  return undefined;
+}
+
+function findLayerInTree(layers: readonly Layer[], layerId: string): Layer | undefined {
+  for (const layer of layers) {
+    if (layer.id === layerId) return layer;
+    if (layer.type === "group") {
+      const child = findLayerInTree(layer.children, layerId);
+      if (child) return child;
+    }
+  }
+  return undefined;
+}
+
 function collectMaskLayerIds(layers: readonly Layer[], ids = new Set<string>()) {
   for (const layer of layers) {
     if (layer.clippingMask) ids.add(layer.clippingMask.maskLayerId);