declare-render 1.0.3 → 1.0.4

package/src/canvas-renderers/container-renderer/index.ts

@@ -2,6 +2,7 @@ import {
   ChildRenderers,
   ImgRenderData,
   RendererType,
+  ShapeRenderData,
   TextRenderData,
 } from "../../types";
 import type { ContainerRenderData } from "../../types";
@@ -10,12 +11,13 @@ import { cloneDeep, isNumber, isObject, isUndefined } from "lodash-es";
 import { BaseRender } from "../base-renderer";
 import { ImgRender } from "../img-renderer/index";
 import { TextRender } from "../text-renderer/index";
+import { ShapeRender } from "../shape-render/index";
 
 export type { ContainerRenderData } from "../../types";
 
 export class ContainerRenderer extends BaseRender<ContainerRenderData> {
   private ctx: CanvasRenderingContext2D
-  private renderers: Array<ImgRender | TextRender | ContainerRenderer> = []
+  private renderers: Array<ImgRender | TextRender | ShapeRender | ContainerRenderer> = []
 
   constructor(ctx: CanvasRenderingContext2D, data: ContainerRenderData) {
     super()
@@ -29,13 +31,15 @@ export class ContainerRenderer extends BaseRender<ContainerRenderData> {
     return this.getContainerCoordinates()
   }
 
-  private createRenderer = (renderData: ImgRenderData | TextRenderData | ContainerRenderData) => {
+  private createRenderer = (renderData: ImgRenderData | TextRenderData | ShapeRenderData | ContainerRenderData) => {
     switch (renderData.type) {
       case RendererType.TEXT: {
         return new TextRender(this.ctx, renderData, { inFlexFlow: isUndefined(renderData.x) || isUndefined(renderData.y) })
       }
       case RendererType.IMG:
         return new ImgRender(this.ctx, renderData)
+      case RendererType.SHAPE:
+        return new ShapeRender(this.ctx, renderData)
       case RendererType.CONTAINER:
         return new ContainerRenderer(this.ctx, renderData)
       default:
@@ -45,10 +49,10 @@ export class ContainerRenderer extends BaseRender<ContainerRenderData> {
 
   // TODO center the renderers, vertical center, left align, wrap the renderers;
   public layout = async () => {
-    const layoutedRenderers = [] as Array<ImgRender | TextRender | ContainerRenderer>
+    const layoutedRenderers = [] as Array<ImgRender | TextRender | ShapeRender | ContainerRenderer>
 
     for (const index in this.data.renderers) {
-      const renderData = cloneDeep(this.data.renderers[index]) as ImgRenderData | TextRenderData | ContainerRenderData
+      const renderData = cloneDeep(this.data.renderers[index]) as ImgRenderData | TextRenderData | ShapeRenderData | ContainerRenderData
 
       let renderX = renderData.x
       let renderY = renderData.y
@@ -63,7 +67,7 @@ export class ContainerRenderer extends BaseRender<ContainerRenderData> {
 
       // justify
       if (isUndefined(renderX) || isUndefined(renderY)) {
-        const preRenderer = layoutedRenderers.at(-1) as undefined | ImgRender | TextRender | ContainerRenderer
+        const preRenderer = layoutedRenderers.at(-1) as undefined | ImgRender | TextRender | ShapeRender | ContainerRenderer
         const { x2, y1, x1, y2 } = preRenderer?.container || { x1: this.data.x, x2: this.data.x, y1: this.data.y, y2: this.data.y }
 
         const gapX = !preRenderer ?
@@ -132,8 +136,8 @@ export class ContainerRenderer extends BaseRender<ContainerRenderData> {
   // TODO handle the renderers wrapping, add gap;
   private getContainerCoordinates = () => {
     if (!this.renderers.length) throw new Error("can not get container coordinates before layouted")
-    const firstChild = this.renderers.at(0) as ImgRender | TextRender
-    const lastChild = this.renderers.at(-1) as ImgRender | TextRender
+    const firstChild = this.renderers.at(0) as ImgRender | TextRender | ShapeRender
+    const lastChild = this.renderers.at(-1) as ImgRender | TextRender | ShapeRender
     return {
       x1: firstChild.container.x1,
       y1: firstChild.container.y1,

package/src/canvas-renderers/shape-render/index.ts

@@ -0,0 +1,279 @@
+import { BaseRender } from "../base-renderer";
+import type { ShapeRenderData, ShapeCommand } from "../../types";
+import { cloneDeep, isNumber } from "lodash-es";
+import { type CanvasRenderingContext2D } from "canvas";
+
+export type { ShapeRenderData } from "../../types";
+
+export class ShapeRender extends BaseRender<ShapeRenderData> {
+  private ctx: CanvasRenderingContext2D;
+  private computedWidth: number = 0;
+  private computedHeight: number = 0;
+
+  constructor(ctx: CanvasRenderingContext2D, data: ShapeRenderData) {
+    super();
+    this.ctx = ctx;
+    this.data = cloneDeep(data);
+  }
+
+  get container() {
+    return this.getContainerCoordinates();
+  }
+
+  private applyStyle() {
+    const style = this.data.style;
+    if (!style) return;
+
+    if (style.fillStyle) {
+      this.ctx.fillStyle = style.fillStyle;
+    }
+    if (style.strokeStyle) {
+      this.ctx.strokeStyle = style.strokeStyle;
+    }
+    if (isNumber(style.lineWidth)) {
+      this.ctx.lineWidth = style.lineWidth;
+    }
+    if (style.lineCap) {
+      this.ctx.lineCap = style.lineCap;
+    }
+    if (style.lineJoin) {
+      this.ctx.lineJoin = style.lineJoin;
+    }
+    if (isNumber(style.miterLimit)) {
+      this.ctx.miterLimit = style.miterLimit;
+    }
+    if (style.lineDash) {
+      this.ctx.setLineDash(style.lineDash);
+    }
+    if (isNumber(style.lineDashOffset)) {
+      this.ctx.lineDashOffset = style.lineDashOffset;
+    }
+    if (isNumber(style.globalAlpha)) {
+      this.ctx.globalAlpha = style.globalAlpha;
+    }
+  }
+
+  private applyShadow() {
+    if (this.data.shadow) {
+      this.ctx.shadowBlur = this.data.shadow.blur;
+      this.ctx.shadowColor = this.data.shadow.color;
+      this.ctx.shadowOffsetX = this.data.shadow.X;
+      this.ctx.shadowOffsetY = this.data.shadow.Y;
+    }
+  }
+
+  private executeCommand(cmd: ShapeCommand, offsetX: number, offsetY: number) {
+    switch (cmd.type) {
+      case "rect":
+        this.ctx.rect(cmd.x + offsetX, cmd.y + offsetY, cmd.width, cmd.height);
+        break;
+      case "fillRect":
+        this.ctx.fillRect(
+          cmd.x + offsetX,
+          cmd.y + offsetY,
+          cmd.width,
+          cmd.height,
+        );
+        break;
+      case "strokeRect":
+        this.ctx.strokeRect(
+          cmd.x + offsetX,
+          cmd.y + offsetY,
+          cmd.width,
+          cmd.height,
+        );
+        break;
+      case "clearRect":
+        this.ctx.clearRect(
+          cmd.x + offsetX,
+          cmd.y + offsetY,
+          cmd.width,
+          cmd.height,
+        );
+        break;
+      case "beginPath":
+        this.ctx.beginPath();
+        break;
+      case "closePath":
+        this.ctx.closePath();
+        break;
+      case "moveTo":
+        this.ctx.moveTo(cmd.x + offsetX, cmd.y + offsetY);
+        break;
+      case "lineTo":
+        this.ctx.lineTo(cmd.x + offsetX, cmd.y + offsetY);
+        break;
+      case "arc":
+        this.ctx.arc(
+          cmd.x + offsetX,
+          cmd.y + offsetY,
+          cmd.radius,
+          cmd.startAngle,
+          cmd.endAngle,
+          cmd.counterclockwise || false,
+        );
+        break;
+      case "arcTo":
+        this.ctx.arcTo(
+          cmd.x1 + offsetX,
+          cmd.y1 + offsetY,
+          cmd.x2 + offsetX,
+          cmd.y2 + offsetY,
+          cmd.radius,
+        );
+        break;
+      case "quadraticCurveTo":
+        this.ctx.quadraticCurveTo(
+          cmd.cp1x + offsetX,
+          cmd.cp1y + offsetY,
+          cmd.x + offsetX,
+          cmd.y + offsetY,
+        );
+        break;
+      case "bezierCurveTo":
+        this.ctx.bezierCurveTo(
+          cmd.cp1x + offsetX,
+          cmd.cp1y + offsetY,
+          cmd.cp2x + offsetX,
+          cmd.cp2y + offsetY,
+          cmd.x + offsetX,
+          cmd.y + offsetY,
+        );
+        break;
+      case "fill":
+        this.ctx.fill();
+        break;
+      case "stroke":
+        this.ctx.stroke();
+        break;
+      case "fillAndStroke":
+        this.ctx.fill();
+        this.ctx.stroke();
+        break;
+    }
+  }
+
+  private computeBounds(): { width: number; height: number } {
+    if (this.data.width && this.data.height) {
+      return { width: this.data.width, height: this.data.height };
+    }
+
+    if (!this.data.shapes || this.data.shapes.length === 0) {
+      return { width: 0, height: 0 };
+    }
+
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+
+    for (const cmd of this.data.shapes) {
+      switch (cmd.type) {
+        case "rect":
+        case "fillRect":
+        case "strokeRect":
+        case "clearRect":
+          minX = Math.min(minX, cmd.x);
+          minY = Math.min(minY, cmd.y);
+          maxX = Math.max(maxX, cmd.x + cmd.width);
+          maxY = Math.max(maxY, cmd.y + cmd.height);
+          break;
+        case "moveTo":
+        case "lineTo":
+          minX = Math.min(minX, cmd.x);
+          minY = Math.min(minY, cmd.y);
+          maxX = Math.max(maxX, cmd.x);
+          maxY = Math.max(maxY, cmd.y);
+          break;
+        case "arc":
+          minX = Math.min(minX, cmd.x - cmd.radius);
+          minY = Math.min(minY, cmd.y - cmd.radius);
+          maxX = Math.max(maxX, cmd.x + cmd.radius);
+          maxY = Math.max(maxY, cmd.y + cmd.radius);
+          break;
+        case "arcTo":
+          minX = Math.min(minX, cmd.x1, cmd.x2);
+          minY = Math.min(minY, cmd.y1, cmd.y2);
+          maxX = Math.max(maxX, cmd.x1, cmd.x2);
+          maxY = Math.max(maxY, cmd.y1, cmd.y2);
+          break;
+        case "quadraticCurveTo":
+        case "bezierCurveTo":
+          minX = Math.min(minX, cmd.cp1x, cmd.x);
+          minY = Math.min(minY, cmd.cp1y, cmd.y);
+          maxX = Math.max(maxX, cmd.cp1x, cmd.x);
+          maxY = Math.max(maxY, cmd.cp1y, cmd.y);
+          if (cmd.type === "bezierCurveTo") {
+            minX = Math.min(minX, cmd.cp2x);
+            minY = Math.min(minY, cmd.cp2y);
+            maxX = Math.max(maxX, cmd.cp2x);
+            maxY = Math.max(maxY, cmd.cp2y);
+          }
+          break;
+      }
+    }
+
+    if (minX === Infinity) {
+      return { width: 0, height: 0 };
+    }
+
+    return {
+      width: maxX - minX,
+      height: maxY - minY,
+    };
+  }
+
+  public layout = async () => {
+    const bounds = this.computeBounds();
+    this.computedWidth = this.data.width ?? bounds.width;
+    this.computedHeight = this.data.height ?? bounds.height;
+    return this;
+  };
+
+  public draw = async () => {
+    const { x, y, rotate } = this.data;
+    const offsetX = x;
+    const offsetY = y;
+
+    const drawImpl = () => {
+      this.ctx.save();
+      this.applyStyle();
+      this.applyShadow();
+
+      for (const cmd of this.data.shapes) {
+        this.executeCommand(cmd, offsetX, offsetY);
+      }
+
+      this.ctx.restore();
+    };
+
+    if (!rotate) {
+      drawImpl();
+    } else {
+      const { computedWidth, computedHeight } = this;
+      const centerX = x + computedWidth / 2;
+      const centerY = y + computedHeight / 2;
+
+      this.ctx.save();
+      this.ctx.translate(centerX, centerY);
+      this.ctx.rotate((rotate * Math.PI) / 180);
+      this.ctx.translate(-centerX, -centerY);
+
+      drawImpl();
+
+      this.ctx.restore();
+    }
+
+    return this;
+  };
+
+  public getContainerCoordinates = () => {
+    const { x, y } = this.data;
+    return {
+      x1: x,
+      y1: y,
+      x2: x + this.computedWidth,
+      y2: y + this.computedHeight,
+    };
+  };
+}

package/src/index.ts

@@ -5,6 +5,7 @@ import { ContainerRenderer } from "./canvas-renderers/container-renderer/index";
 export type {
   ContainerRenderData,
   ImgRenderData,
+  ShapeRenderData,
   TextRenderData,
   RenderData,
 } from "./types";
@@ -23,7 +24,7 @@ export class Renderer {
   }
 
   draw = async () => {
-    if (!this.schema.renderers.length) {
+    if (!this.schema.layers.length) {
       throw new Error("[Renderer] empty canvas with no renderers");
     }
     const container = new ContainerRenderer(this.ctx, {
@@ -33,7 +34,7 @@ export class Renderer {
       y: 0,
       width: this.canvas.width,
       height: this.canvas.height,
-      renderers: this.schema.renderers,
+      renderers: this.schema.layers,
     });
     await container.layout().then((d) => d.draw());
     return this.toBuffer();

package/src/types.ts

@@ -4,6 +4,7 @@ export enum RendererType {
   CONTAINER = "container",
   TEXT = "text",
   IMG = "img",
+  SHAPE = "shape",
 }
 
 // ----- TypeScript types (primitives only) -----
@@ -70,13 +71,97 @@ export interface ContainerRenderData {
   renderers: ChildRenderers;
 }
 
-export type ChildRenderers = (ImgRenderData | TextRenderData | ContainerRenderData)[];
+export interface ShapeRenderData {
+  id: string | number;
+  type: "shape";
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+  rotate?: number;
+  style?: {
+    fillStyle?: string;
+    strokeStyle?: string;
+    lineWidth?: number;
+    lineCap?: "butt" | "round" | "square";
+    lineJoin?: "bevel" | "round" | "miter";
+    miterLimit?: number;
+    lineDash?: number[];
+    lineDashOffset?: number;
+    globalAlpha?: number;
+  };
+  shadow?: {
+    color: string;
+    blur: number;
+    X: number;
+    Y: number;
+  };
+  shapes: ShapeCommand[];
+}
+
+export type ShapeCommand =
+  | { type: "rect"; x: number; y: number; width: number; height: number }
+  | { type: "fillRect"; x: number; y: number; width: number; height: number }
+  | { type: "strokeRect"; x: number; y: number; width: number; height: number }
+  | { type: "clearRect"; x: number; y: number; width: number; height: number }
+  | { type: "beginPath" }
+  | { type: "closePath" }
+  | { type: "moveTo"; x: number; y: number }
+  | { type: "lineTo"; x: number; y: number }
+  | {
+      type: "arc";
+      x: number;
+      y: number;
+      radius: number;
+      startAngle: number;
+      endAngle: number;
+      counterclockwise?: boolean;
+    }
+  | {
+      type: "arcTo";
+      x1: number;
+      y1: number;
+      x2: number;
+      y2: number;
+      radius: number;
+    }
+  | {
+      type: "quadraticCurveTo";
+      cp1x: number;
+      cp1y: number;
+      x: number;
+      y: number;
+    }
+  | {
+      type: "bezierCurveTo";
+      cp1x: number;
+      cp1y: number;
+      cp2x: number;
+      cp2y: number;
+      x: number;
+      y: number;
+    }
+  | { type: "fill" }
+  | { type: "stroke" }
+  | { type: "fillAndStroke" };
+
+export type ChildRenderers = (
+  | ImgRenderData
+  | TextRenderData
+  | ContainerRenderData
+  | ShapeRenderData
+)[];
 
 export interface RenderData {
   id: string;
   width: number;
   height: number;
-  renderers: (ImgRenderData | TextRenderData | ContainerRenderData)[];
+  layers: (
+    | ImgRenderData
+    | TextRenderData
+    | ContainerRenderData
+    | ShapeRenderData
+  )[];
   output?: {
     type?: "png" | "jpg";
   };
@@ -85,13 +170,17 @@ export interface RenderData {
 // ----- String schema for AI (readable as string) -----
 
 export const RENDER_DATA_SCHEMA = `
-RenderData: { "id": string, "width": number, "height": number, "renderers": Array<TextRenderData | ImgRenderData | ContainerRenderData>, "output"?: { "type"?: "png" | "jpg" } }
+RenderData: { "id": string, "width": number, "height": number, "layers": Array<TextRenderData | ImgRenderData | ContainerRenderData | ShapeRenderData>, "output"?: { "type"?: "png" | "jpg" } }
 
 TextRenderData: { "id": string|number, "type": "text", "x": number, "y": number, "width": number, "height": number, "content": string, "style": { "fontName": string, "fontSize": number | { "max": number, "min": number }, "color": string, "align"?: "center"|"right", "verticalAlign"?: "center"|"top"|"bottom", "fontWeight"?: string, "verticalGap"?: number, "backgroundColor"?: string, "padding"?: number|{ "x": number, "y": number }, "border"?: { "color": string, "width"?: number }, "radius"?: number }, "rotate"?: number }
 
 ImgRenderData: { "id": string, "type": "img", "x": number, "y": number, "width"?: number, "height"?: number, "url"?: string, "color"?: string, "objectFit": "contain"|"cover", "radius"?: number, "rotate"?: number, "globalAlpha"?: number, "shadow"?: { "color": string, "blur": number, "X": number, "Y": number } }
 
 ContainerRenderData: { "id": string|number, "type": "container", "x": number, "y": number, "width": number, "height": number, "renderers": ChildRenderers[], "direction"?: "row"|"column", "gap"?: number|{ "x": number, "y": number }, "itemAlign"?: "center", "wrap"?: boolean }
+
+ShapeRenderData: { "id": string|number, "type": "shape", "x": number, "y": number, "width"?: number, "height"?: number, "rotate"?: number, "style"?: { "fillStyle"?: string, "strokeStyle"?: string, "lineWidth"?: number, "lineCap"?: "butt"|"round"|"square", "lineJoin"?: "bevel"|"round"|"miter", "miterLimit"?: number, "lineDash"?: number[], "lineDashOffset"?: number, "globalAlpha"?: number }, "shadow"?: { "color": string, "blur": number, "X": number, "Y": number }, "shapes": Array<ShapeCommand> }
+
+ShapeCommand: { "type": "rect"|"fillRect"|"strokeRect"|"clearRect"|"beginPath"|"closePath"|"moveTo"|"lineTo"|"arc"|"arcTo"|"quadraticCurveTo"|"bezierCurveTo"|"fill"|"stroke"|"fillAndStroke", ...additional properties based on type }
 `.trim();
 
 // ----- Metrics (canvas-dependent) -----

package/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ES2020",
     "module": "ESNext",
     "lib": ["ES2020"],
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
@@ -11,12 +11,14 @@
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "types": ["node"],
+    "allowImportingTsExtensions": true
   },
   "ts-node": {
     "esm": true,
     "experimentalSpecifierResolution": "node"
   },
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "examples/**/*"],
   "exclude": ["node_modules"]
 }