add app

app/src/drawers/box.ts

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,24 @@
+import { convertToFloat } from "@tempblade/common";
+import { Canvas, CanvasKit } from "canvaskit-wasm";
+import { EllipseEntity } from "primitives/Entities";
+import { z } from "zod";
+import { buildPaintStyle } from "./paint";
+
+export default function drawEllipse(
+  CanvasKit: CanvasKit,
+  canvas: Canvas,
+  entity: z.infer<typeof EllipseEntity>
+) {
+  const paint = new CanvasKit.Paint();
+
+  buildPaintStyle(CanvasKit, paint, entity.paint);
+
+  const rect = CanvasKit.XYWHRect(
+    entity.position[0],
+    entity.position[1],
+    entity.radius[0],
+    entity.radius[1]
+  );
+
+  canvas.drawOval(rect, paint);
+}

app/src/drawers/paint.ts

@@ -0,0 +1,30 @@
+import { convertToFloat } from "@tempblade/common";
+import { Paint as SkPaint, CanvasKit } from "canvaskit-wasm";
+import { Paint } from "primitives/Paint";
+import { z } from "zod";
+
+export function buildPaintStyle(
+  CanvasKit: CanvasKit,
+  skPaint: SkPaint,
+  paint: z.output<typeof Paint>
+) {
+  const color = convertToFloat(paint.style.color.value);
+
+  skPaint.setAntiAlias(true);
+  skPaint.setColor(color);
+
+  switch (paint.style.type) {
+    case "Fill":
+      skPaint.setStyle(CanvasKit.PaintStyle.Fill);
+      break;
+
+    case "Stroke":
+      skPaint.setStyle(CanvasKit.PaintStyle.Stroke);
+      skPaint.setStrokeWidth(paint.style.width);
+      break;
+
+    default:
+      console.error("Paint Style not supported!");
+      break;
+  }
+}

app/src/drawers/text.ts

@@ -0,0 +1,42 @@
+import { Canvas, CanvasKit } from "canvaskit-wasm";
+import { TextEntity } from "primitives/Entities";
+import { convertToFloat } from "@tempblade/common";
+import { z } from "zod";
+
+export default function drawText(
+  CanvasKit: CanvasKit,
+  canvas: Canvas,
+  entity: z.infer<typeof TextEntity>,
+  fontData: ArrayBuffer
+) {
+  const fontMgr = CanvasKit.FontMgr.FromData(fontData);
+
+  if (!fontMgr) {
+    console.error("No FontMgr");
+    return;
+  }
+
+  const paint = new CanvasKit.Paint();
+
+  const color = convertToFloat(entity.paint.style.color.value);
+
+  paint.setColor(color);
+
+  const pStyle = new CanvasKit.ParagraphStyle({
+    textStyle: {
+      color: color,
+      fontFamilies: ["Roboto"],
+      fontSize: entity.paint.size,
+    },
+    textDirection: CanvasKit.TextDirection.LTR,
+    textAlign: CanvasKit.TextAlign[entity.paint.align],
+  });
+
+  const builder = CanvasKit.ParagraphBuilder.Make(pStyle, fontMgr);
+  builder.addText(entity.text);
+  const p = builder.build();
+  p.layout(900);
+  const height = p.getHeight() / 2;
+  const width = p.getMaxWidth() / 2;
+  canvas.drawParagraph(p, entity.origin[0] - width, entity.origin[1] - height);
+}