feat: add first-class text layers

platform/browser/exportArtboardPng.ts

@@ -4,6 +4,7 @@ import type { Rect } from "@core/geometry";
 import type { Layer } from "@core/layer";
 import type { Size } from "@core/geometry";
 import { getLayerMask } from "@core/layer-mask-utils";
+import { measureTextLayer } from "@core/text-layer";
 
 export async function downloadArtboardPng(artboard: Artboard, assets: readonly Asset[]) {
   const width = Math.max(1, Math.round(artboard.bounds.w));
@@ -71,6 +72,12 @@ async function drawLayer(
     return;
   }
 
+  if (layer.type === "text") {
+    drawTextLayer(context, layer);
+    context.restore();
+    return;
+  }
+
   const asset = assets.find((candidate) => candidate.id === layer.assetId);
   if (!asset) {
     context.restore();
@@ -84,6 +91,29 @@ async function drawLayer(
   context.restore();
 }
 
+export function drawTextLayer(context: CanvasRenderingContext2D, layer: Extract<Layer, { type: "text" }>) {
+  const draw = resolveTextLayerDraw(layer);
+  const { size } = draw;
+  context.translate(draw.center.x, draw.center.y);
+  context.rotate(layer.transform.rotation);
+  context.scale(layer.transform.scale.x, layer.transform.scale.y);
+  context.fillStyle = layer.style.color;
+  context.font = `${layer.style.fontStyle} ${layer.style.fontWeight} ${layer.style.fontSize}px ${JSON.stringify(layer.style.fontFamily)}, Arial, sans-serif`;
+  context.textAlign = layer.style.alignment;
+  context.textBaseline = "alphabetic";
+  const x = draw.textX;
+  layer.content.split("\n").forEach((line, index) => context.fillText(line, x, (index + 0.82) * layer.style.fontSize * layer.style.lineHeight - size.h / 2));
+}
+
+export function resolveTextLayerDraw(layer: Extract<Layer, { type: "text" }>) {
+  const size = measureTextLayer(layer);
+  return {
+    size,
+    center: { x: layer.transform.position.x + size.w * layer.transform.scale.x / 2, y: layer.transform.position.y + size.h * layer.transform.scale.y / 2 },
+    textX: (layer.style.alignment === "left" ? 0 : layer.style.alignment === "center" ? size.w / 2 : size.w) - size.w / 2,
+  };
+}
+
 export function resolveLayerDrawImage(layer: Extract<Layer, { type: "image" | "raster" }>, intrinsicSize: Size) {
   const source = layer.sourceRect ?? { x: 0, y: 0, ...intrinsicSize };
   return {