fix(masks): show tinted mask edit overlay

renderer/mask-edit-overlay.ts

@@ -0,0 +1,40 @@
+import type { ImageDocument } from "@core/document";
+import type { Layer } from "@core/layer";
+import type { EditorState } from "@editor/state";
+import { resolveTransformTargetBounds } from "@editor/transform-targets";
+import type { ImageTextureRenderer } from "./image-textures";
+import { documentRectToScreenRect } from "./screen-rect";
+import type { WebGlRendererContext } from "./types";
+
+const maskOverlayColor = [0.25, 0.65, 1, 0.35] as const;
+
+export function renderMaskEditOverlay(
+  context: WebGlRendererContext,
+  document: ImageDocument,
+  editor: EditorState,
+  imageTextureRenderer: ImageTextureRenderer,
+) {
+  const layerId = editor.maskEditLayerId;
+  if (!layerId) return;
+
+  const layer = findLayer(document.artboards.flatMap((artboard) => artboard.layers), layerId);
+  if (!layer || layer.type === "group") return;
+
+  const bounds = resolveTransformTargetBounds(document, { type: "layer", id: layer.id });
+  const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
+  if (!bounds || !asset) return;
+
+  const rect = documentRectToScreenRect(context.canvas, bounds, editor.viewport);
+  imageTextureRenderer.renderTinted(asset, rect, maskOverlayColor);
+}
+
+function findLayer(layers: readonly Layer[], layerId: string): Layer | undefined {
+  for (const layer of layers) {
+    if (layer.id === layerId) return layer;
+    if (layer.type === "group") {
+      const child = findLayer(layer.children, layerId);
+      if (child) return child;
+    }
+  }
+  return undefined;
+}