feat(renderer): draw transform handles

renderer/transform-controls.ts

@@ -0,0 +1,43 @@
+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 handleColor: RgbaColor = [1, 1, 1, 1];
+const handleBorderColor: RgbaColor = [0.1, 0.65, 1, 1];
+
+export function renderTransformControls(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);
+  for (const handle of transformHandleRects(rect)) {
+    clearScreenRect(context, handle.border, handleBorderColor);
+    clearScreenRect(context, handle.fill, handleColor);
+  }
+}
+
+function transformHandleRects(rect: ScreenRect) {
+  const size = 8;
+  const border = 2;
+  const half = size / 2;
+  const points = [
+    { x: rect.x, y: rect.y },
+    { x: rect.x + rect.w / 2, y: rect.y },
+    { x: rect.x + rect.w, y: rect.y },
+    { x: rect.x + rect.w, y: rect.y + rect.h / 2 },
+    { x: rect.x + rect.w, y: rect.y + rect.h },
+    { x: rect.x + rect.w / 2, y: rect.y + rect.h },
+    { x: rect.x, y: rect.y + rect.h },
+    { x: rect.x, y: rect.y + rect.h / 2 },
+  ];
+
+  return points.map((point) => ({
+    border: { x: Math.round(point.x - half - border), y: Math.round(point.y - half - border), w: size + border * 2, h: size + border * 2 },
+    fill: { x: Math.round(point.x - half), y: Math.round(point.y - half), w: size, h: size },
+  }));
+}