feat(renderer): draw selection overlay

renderer/artboard.ts

@@ -1,21 +1,13 @@
 import type { Artboard } from "@core/artboard";
 import type { ViewportState } from "@editor/state";
 import { renderCheckerboard } from "./checkerboard";
-import type { ScreenRect, WebGlRendererContext } from "./types";
+import { documentRectToScreenRect } from "./screen-rect";
+import type { WebGlRendererContext } from "./types";
 
 export function renderArtboard(context: WebGlRendererContext, artboard: Artboard, viewport: ViewportState) {
-  const rect = artboardScreenRect(context.canvas, artboard, viewport);
+  const rect = documentRectToScreenRect(context.canvas, artboard.bounds, viewport);
 
   if (artboard.backgroundColor === "transparent") {
     renderCheckerboard(context, rect, Math.max(4, Math.round(12 * viewport.zoom)));
   }
 }
-
-function artboardScreenRect(canvas: HTMLCanvasElement, artboard: Artboard, viewport: ViewportState): ScreenRect {
-  return {
-    x: Math.round(canvas.width / 2 + (artboard.bounds.x - viewport.center.x) * viewport.zoom),
-    y: Math.round(canvas.height / 2 + (artboard.bounds.y - viewport.center.y) * viewport.zoom),
-    w: Math.max(0, Math.round(artboard.bounds.w * viewport.zoom)),
-    h: Math.max(0, Math.round(artboard.bounds.h * viewport.zoom)),
-  };
-}

renderer/renderer.ts

@@ -1,6 +1,7 @@
 import type { ImageDocument } from "@core/document";
 import type { EditorState } from "@editor/state";
 import { renderArtboard } from "./artboard";
+import { renderSelectionOverlay } from "./selection";
 import type { WebGlRendererContext } from "./types";
 
 export type RenderFrame = {
@@ -44,6 +45,8 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
         renderArtboard(rendererContext, artboard, frame.editor.viewport);
       }
 
+      renderSelectionOverlay(rendererContext, frame.document, frame.editor);
+
       context.disable(context.SCISSOR_TEST);
     },
     dispose() {},

renderer/screen-rect.ts

@@ -0,0 +1,12 @@
+import type { Rect } from "@core/geometry";
+import type { ViewportState } from "@editor/state";
+import type { ScreenRect } from "./types";
+
+export function documentRectToScreenRect(canvas: HTMLCanvasElement, rect: Rect, viewport: ViewportState): ScreenRect {
+  return {
+    x: Math.round(canvas.width / 2 + (rect.x - viewport.center.x) * viewport.zoom),
+    y: Math.round(canvas.height / 2 + (rect.y - viewport.center.y) * viewport.zoom),
+    w: Math.max(0, Math.round(rect.w * viewport.zoom)),
+    h: Math.max(0, Math.round(rect.h * viewport.zoom)),
+  };
+}

renderer/selection.ts

@@ -0,0 +1,25 @@
+import type { ImageDocument } from "@core/document";
+import type { EditorState } from "@editor/state";
+import { clearScreenRect } from "./clear-rect";
+import { documentRectToScreenRect } from "./screen-rect";
+import type { RgbaColor, ScreenRect, WebGlRendererContext } from "./types";
+
+const selectionColor: RgbaColor = [0.1, 0.65, 1, 1];
+
+export function renderSelectionOverlay(context: WebGlRendererContext, document: ImageDocument, editor: EditorState) {
+  const selectedArtboard = editor.selection.artboardId
+    ? document.artboards.find((artboard) => artboard.id === editor.selection.artboardId)
+    : undefined;
+
+  if (!selectedArtboard) return;
+
+  const rect = documentRectToScreenRect(context.canvas, selectedArtboard.bounds, editor.viewport);
+  renderScreenRectStroke(context, rect, 3, selectionColor);
+}
+
+function renderScreenRectStroke(context: WebGlRendererContext, rect: ScreenRect, width: number, color: RgbaColor) {
+  clearScreenRect(context, { x: rect.x - width, y: rect.y - width, w: rect.w + width * 2, h: width }, color);
+  clearScreenRect(context, { x: rect.x - width, y: rect.y + rect.h, w: rect.w + width * 2, h: width }, color);
+  clearScreenRect(context, { x: rect.x - width, y: rect.y, w: width, h: rect.h }, color);
+  clearScreenRect(context, { x: rect.x + rect.w, y: rect.y, w: width, h: rect.h }, color);
+}