feat(renderer): render image layer placeholders

renderer/layers.ts

@@ -0,0 +1,32 @@
+import type { ImageDocument } from "@core/document";
+import type { Layer } from "@core/layer";
+import type { ViewportState } from "@editor/state";
+import { resolveTransformTargetBounds } from "@editor/transform-targets";
+import { clearScreenRect } from "./clear-rect";
+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) {
+  for (const artboard of document.artboards) {
+    for (const layer of artboard.layers) renderLayer(context, document, viewport, layer);
+  }
+}
+
+function renderLayer(context: WebGlRendererContext, document: ImageDocument, viewport: ViewportState, layer: Layer) {
+  if (!layer.visible) return;
+
+  if (layer.type === "group") {
+    for (const child of layer.children) renderLayer(context, document, viewport, child);
+    return;
+  }
+
+  const bounds = resolveTransformTargetBounds(document, { type: "layer", id: layer.id });
+  if (!bounds) return;
+
+  const rect = documentRectToScreenRect(context.canvas, bounds, viewport);
+  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);
+}

renderer/renderer.ts

@@ -1,6 +1,7 @@
 import type { ImageDocument } from "@core/document";
 import type { EditorState } from "@editor/state";
 import { renderArtboard } from "./artboard";
+import { renderLayers } from "./layers";
 import { renderSelectionOverlay } from "./selection";
 import { renderTransformControls } from "./transform-controls";
 import type { WebGlRendererContext } from "./types";
@@ -45,6 +46,7 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
       for (const artboard of frame.document.artboards) {
         renderArtboard(rendererContext, artboard, frame.editor.viewport);
       }
+      renderLayers(rendererContext, frame.document, frame.editor.viewport);
 
       renderSelectionOverlay(rendererContext, frame.document, frame.editor);
       renderTransformControls(rendererContext, frame.document, frame.editor);