feat(renderer): draw selection overlay

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);
+}