feat(renderer): enhance image rendering with asset synchronization and clipping

renderer/layers.ts

@@ -5,22 +5,30 @@ import { resolveTransformTargetBounds } from "@editor/transform-targets";
 import { clearScreenRect } from "./clear-rect";
 import type { ImageTextureRenderer } from "./image-textures";
 import { documentRectToScreenRect } from "./screen-rect";
-import type { RgbaColor, WebGlRendererContext } from "./types";
+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) {
   for (const artboard of document.artboards) {
-    for (const layer of artboard.layers) renderLayer(context, document, viewport, layer, imageTextureRenderer);
+    const clipRect = documentRectToScreenRect(context.canvas, artboard.bounds, viewport);
+    for (const layer of artboard.layers) renderLayer(context, document, viewport, layer, imageTextureRenderer, clipRect);
   }
 }
 
-function renderLayer(context: WebGlRendererContext, document: ImageDocument, viewport: ViewportState, layer: Layer, imageTextureRenderer: ImageTextureRenderer) {
+function renderLayer(
+  context: WebGlRendererContext,
+  document: ImageDocument,
+  viewport: ViewportState,
+  layer: Layer,
+  imageTextureRenderer: ImageTextureRenderer,
+  clipRect: ScreenRect,
+) {
   if (!layer.visible) return;
 
   if (layer.type === "group") {
-    for (const child of layer.children) renderLayer(context, document, viewport, child, imageTextureRenderer);
+    for (const child of layer.children) renderLayer(context, document, viewport, child, imageTextureRenderer, clipRect);
     return;
   }
 
@@ -29,8 +37,21 @@ function renderLayer(context: WebGlRendererContext, document: ImageDocument, vie
 
   const rect = documentRectToScreenRect(context.canvas, bounds, viewport);
   const asset = document.assets.find((candidate) => candidate.id === layer.assetId);
-  if (asset && imageTextureRenderer.render(asset, rect)) return;
+  if (asset && imageTextureRenderer.render(asset, rect, clipRect)) return;
 
-  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);
+  const fallbackRect = intersectScreenRects(rect, clipRect);
+  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);
+  if (insetRect) clearScreenRect(context, insetRect, imageLayerInsetColor);
+}
+
+function intersectScreenRects(a: ScreenRect, b: ScreenRect): ScreenRect | undefined {
+  const x1 = Math.max(a.x, b.x);
+  const y1 = Math.max(a.y, b.y);
+  const x2 = Math.min(a.x + a.w, b.x + b.w);
+  const y2 = Math.min(a.y + a.h, b.y + b.h);
+  if (x2 <= x1 || y2 <= y1) return undefined;
+
+  return { x: x1, y: y1, w: x2 - x1, h: y2 - y1 };
 }