add staggered text

rename box to rect
refactor rust

app/src/drawers/box.ts

@@ -1,47 +0,0 @@
-import { Canvas, CanvasKit } from "canvaskit-wasm";
-import { z } from "zod";
-import { BoxEntity } from "primitives/Entities";
-import { buildPaintStyle } from "./paint";
-
-export default function drawBox(
-  CanvasKit: CanvasKit,
-  canvas: Canvas,
-  entity: z.infer<typeof BoxEntity>
-) {
-  const paint = new CanvasKit.Paint();
-
-  const debugPaint = new CanvasKit.Paint();
-  debugPaint.setColor(CanvasKit.RED);
-  buildPaintStyle(CanvasKit, paint, entity.paint);
-
-  let targetPosition = entity.position;
-
-  canvas.drawCircle(targetPosition[0], targetPosition[1], 10, debugPaint);
-
-  targetPosition = targetPosition.map((val, index) => {
-    let temp = val - entity.size[index] * 0.5;
-
-    return temp;
-  });
-
-  debugPaint.setColor(CanvasKit.BLUE);
-
-  canvas.drawCircle(targetPosition[0], targetPosition[1], 10, debugPaint);
-
-  debugPaint.setColor(CanvasKit.GREEN);
-
-  canvas.drawCircle(targetPosition[0], targetPosition[1], 10, debugPaint);
-
-  console.log(targetPosition[0], targetPosition[1]);
-
-  const rect = CanvasKit.XYWHRect(
-    targetPosition[0],
-    targetPosition[1],
-    entity.size[0],
-    entity.size[1]
-  );
-
-  canvas.drawRect(rect, paint);
-
-  canvas.drawCircle(targetPosition[0], targetPosition[1], 10, debugPaint);
-}

app/src/drawers/ellipse.ts

@@ -13,9 +13,13 @@ export default function drawEllipse(
 
   buildPaintStyle(CanvasKit, paint, entity.paint);
 
+  const mappedPosition = entity.position.map(
+    (val, index) => val - entity.radius[index] * 0.5
+  );
+
   const rect = CanvasKit.XYWHRect(
-    entity.position[0],
-    entity.position[1],
+    mappedPosition[0],
+    mappedPosition[1],
     entity.radius[0],
     entity.radius[1]
   );

app/src/drawers/rect.ts

@@ -0,0 +1,43 @@
+import { Canvas, CanvasKit } from "canvaskit-wasm";
+import { z } from "zod";
+import { RectEntity } from "primitives/Entities";
+import { buildPaintStyle } from "./paint";
+
+export default function drawRect(
+  CanvasKit: CanvasKit,
+  canvas: Canvas,
+  entity: z.infer<typeof RectEntity>
+) {
+  canvas.save();
+
+  const paint = new CanvasKit.Paint();
+
+  buildPaintStyle(CanvasKit, paint, entity.paint);
+
+  const mappedPosition = entity.position.map(
+    (val, index) => val - entity.size[index] * 0.5
+  );
+
+  const rect = CanvasKit.XYWHRect(
+    mappedPosition[0],
+    mappedPosition[1],
+    entity.size[0],
+    entity.size[1]
+  );
+
+  if (entity.transform) {
+    const origin = [0, entity.size[1]];
+
+    canvas.translate(origin[0], origin[1]);
+
+    canvas.scale(entity.transform.scale[0], entity.transform.scale[1]);
+
+    canvas.rotate;
+
+    canvas.translate(-origin[0], -origin[1]);
+  }
+
+  canvas.drawRect(rect, paint);
+
+  canvas.restore();
+}

app/src/drawers/staggered-text.ts

@@ -0,0 +1,33 @@
+import { convertToFloat } from "@tempblade/common";
+import { Canvas, CanvasKit } from "canvaskit-wasm";
+import { StaggeredText } from "primitives/Entities";
+import { z } from "zod";
+
+export default function drawStaggeredText(
+  CanvasKit: CanvasKit,
+  canvs: Canvas,
+  entity: z.output<typeof StaggeredText>,
+  fontData: ArrayBuffer
+) {
+  const paint = new CanvasKit.Paint();
+
+  const color = convertToFloat(entity.letter.paint.style.color.value);
+
+  paint.setColor(color);
+
+  const typeface = CanvasKit.Typeface.MakeFreeTypeFaceFromData(fontData);
+
+  const font = new CanvasKit.Font(typeface, entity.letter.paint.size);
+
+  const glyphIDs = font.getGlyphIDs(entity.text);
+
+  font.setLinearMetrics(true);
+  font.setSubpixel(true);
+  font.setHinting(CanvasKit.FontHinting.Slight);
+
+  const bounds = font.getGlyphBounds(glyphIDs, paint);
+  const widths = font.getGlyphWidths(glyphIDs, paint);
+
+  console.log(bounds);
+  console.log(widths);
+}

app/src/drawers/text.ts

@@ -6,7 +6,7 @@ import { z } from "zod";
 export default function drawText(
   CanvasKit: CanvasKit,
   canvas: Canvas,
-  entity: z.infer<typeof TextEntity>,
+  entity: z.output<typeof TextEntity>,
   fontData: ArrayBuffer
 ) {
   const fontMgr = CanvasKit.FontMgr.FromData(fontData);
@@ -38,5 +38,6 @@ export default function drawText(
   p.layout(900);
   const height = p.getHeight() / 2;
   const width = p.getMaxWidth() / 2;
+
   canvas.drawParagraph(p, entity.origin[0] - width, entity.origin[1] - height);
 }