declare-render 1.0.3 → 1.0.5

package/src/canvas-renderers/base-renderer.ts

@@ -1,11 +1,16 @@
 import type {
   ContainerRenderData,
   ImgRenderData,
+  ShapeRenderData,
   TextRenderData,
 } from "../types";
 
 export abstract class BaseRender<
-  T extends TextRenderData | ImgRenderData | ContainerRenderData,
+  T extends
+    | TextRenderData
+    | ImgRenderData
+    | ContainerRenderData
+    | ShapeRenderData,
 > {
   protected data!: T;
   abstract get container(): { x1: number; x2: number; y1: number; y2: number };

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,135 +11,179 @@ 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 ctx: CanvasRenderingContext2D;
+  private layers: Array<
+    ImgRender | TextRender | ShapeRender | ContainerRenderer
+  > = [];
 
   constructor(ctx: CanvasRenderingContext2D, data: ContainerRenderData) {
-    super()
-    this.ctx = ctx
-    this.data = cloneDeep(data)
-    this.ctx.patternQuality = 'best'
-    this.ctx.quality = 'best'
+    super();
+    this.ctx = ctx;
+    this.data = cloneDeep(data);
+    this.ctx.patternQuality = "best";
+    this.ctx.quality = "best";
   }
 
   get container() {
-    return this.getContainerCoordinates()
+    return this.getContainerCoordinates();
   }
 
-  private createRenderer = (renderData: ImgRenderData | TextRenderData | ContainerRenderData) => {
-    switch (renderData.type) {
+  private createLayer = (
+    layerData:
+      | ImgRenderData
+      | TextRenderData
+      | ShapeRenderData
+      | ContainerRenderData,
+  ) => {
+    switch (layerData.type) {
       case RendererType.TEXT: {
-        return new TextRender(this.ctx, renderData, { inFlexFlow: isUndefined(renderData.x) || isUndefined(renderData.y) })
+        return new TextRender(this.ctx, layerData, {
+          inFlexFlow: isUndefined(layerData.x) || isUndefined(layerData.y),
+        });
       }
       case RendererType.IMG:
-        return new ImgRender(this.ctx, renderData)
+        return new ImgRender(this.ctx, layerData);
+      case RendererType.SHAPE:
+        return new ShapeRender(this.ctx, layerData);
       case RendererType.CONTAINER:
-        return new ContainerRenderer(this.ctx, renderData)
+        return new ContainerRenderer(this.ctx, layerData);
       default:
-        throw new Error("[Renderer] unknown renderer type")
+        throw new Error("[Renderer] unknown layer type");
     }
-  }
+  };
 
-  // TODO center the renderers, vertical center, left align, wrap the renderers;
+  // TODO center the layers, vertical center, left align, wrap the layers;
   public layout = async () => {
-    const layoutedRenderers = [] as Array<ImgRender | TextRender | ContainerRenderer>
-
-    for (const index in this.data.renderers) {
-      const renderData = cloneDeep(this.data.renderers[index]) as ImgRenderData | TextRenderData | ContainerRenderData
-
-      let renderX = renderData.x
-      let renderY = renderData.y
-      // 子 renderer 的 x、y 相对容器的 x、y 进行定位
-      if (isNumber(renderX)) {
-        renderX += this.data.x
+    const layoutedLayers = [] as Array<
+      ImgRender | TextRender | ShapeRender | ContainerRenderer
+    >;
+
+    for (const index in this.data.layers) {
+      const layerData = cloneDeep(this.data.layers[index]) as
+        | ImgRenderData
+        | TextRenderData
+        | ShapeRenderData
+        | ContainerRenderData;
+
+      let layerX = layerData.x;
+      let layerY = layerData.y;
+      // 子 layer 的 x、y 相对容器的 x、y 进行定位
+      if (isNumber(layerX)) {
+        layerX += this.data.x;
       }
 
-      if (isNumber(renderY)) {
-        renderY += this.data.y
+      if (isNumber(layerY)) {
+        layerY += this.data.y;
       }
 
       // justify
-      if (isUndefined(renderX) || isUndefined(renderY)) {
-        const preRenderer = layoutedRenderers.at(-1) as undefined | ImgRender | TextRender | 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 ?
-          0 : isObject(this.data.gap) ?
-            this.data.gap.x : (this.data.gap || 0)
-
-        const gapY = !preRenderer ?
-          0 : isObject(this.data.gap) ?
-            this.data.gap.y : (this.data.gap || 0)
-
-        if (this.data.direction === 'column') {
-          renderX = renderX || x1
-          renderY = renderY || (y2 + gapY)
+      if (isUndefined(layerX) || isUndefined(layerY)) {
+        const preLayer = layoutedLayers.at(-1) as
+          | undefined
+          | ImgRender
+          | TextRender
+          | ShapeRender
+          | ContainerRenderer;
+        const { x2, y1, x1, y2 } = preLayer?.container || {
+          x1: this.data.x,
+          x2: this.data.x,
+          y1: this.data.y,
+          y2: this.data.y,
+        };
+
+        const gapX = !preLayer
+          ? 0
+          : isObject(this.data.gap)
+            ? this.data.gap.x
+            : this.data.gap || 0;
+
+        const gapY = !preLayer
+          ? 0
+          : isObject(this.data.gap)
+            ? this.data.gap.y
+            : this.data.gap || 0;
+
+        if (this.data.direction === "column") {
+          layerX = layerX || x1;
+          layerY = layerY || y2 + gapY;
         } else {
-          renderX = renderX || (x2 + gapX)
-          renderY = renderY || y1
+          layerX = layerX || x2 + gapX;
+          layerY = layerY || y1;
         }
       }
 
-      const currentRenderer = this.createRenderer({ ...renderData, x: renderX, y: renderY })
+      const currentLayer = this.createLayer({
+        ...layerData,
+        x: layerX,
+        y: layerY,
+      });
 
-      await currentRenderer.layout()
-      
-      layoutedRenderers.push(currentRenderer)
+      await currentLayer.layout();
+
+      layoutedLayers.push(currentLayer);
     }
 
     // align items
-    if (this.data.itemAlign === 'center') {
-      const squares = layoutedRenderers.map(r => {
-        const { x1, x2, y1, y2 } = r.container
-        return { ...r.container, width: x2 - x1, height: y2 - y1, renderer: r }
-      })
-
-      const maxWidth = Math.max(...squares.map(s => s.width))
-      const maxHeight = Math.max(...squares.map(s => s.height))
-
-      squares.forEach(s => {
-        if (this.data.direction === 'column') {
-          const offset = (maxWidth - s.width) / 2
-          s.renderer.setPosition(s.x1 + offset, s.y1)
+    if (this.data.itemAlign === "center") {
+      const squares = layoutedLayers.map((r) => {
+        const { x1, x2, y1, y2 } = r.container;
+        return { ...r.container, width: x2 - x1, height: y2 - y1, layer: r };
+      });
+
+      const maxWidth = Math.max(...squares.map((s) => s.width));
+      const maxHeight = Math.max(...squares.map((s) => s.height));
+
+      squares.forEach((s) => {
+        if (this.data.direction === "column") {
+          const offset = (maxWidth - s.width) / 2;
+          s.layer.setPosition(s.x1 + offset, s.y1);
         } else {
-          const offset = (maxHeight - s.height) / 2
-          s.renderer.setPosition(s.x1, s.y1 + offset)
+          const offset = (maxHeight - s.height) / 2;
+          s.layer.setPosition(s.x1, s.y1 + offset);
         }
-      })
+      });
     }
 
-    this.renderers = layoutedRenderers
-    return this
-  }
+    this.layers = layoutedLayers;
+    return this;
+  };
 
-  // TODO rotate the whole renderer
-  public draw = async() => {
-    if (!this.renderers.length) {
-      return this
+  // TODO rotate the whole layer
+  public draw = async () => {
+    if (!this.layers.length) {
+      return this;
     }
 
-    const pickedOne = this.renderers.shift()!
-    await pickedOne.draw()
+    const pickedOne = this.layers.shift()!;
+    await pickedOne.draw();
 
-    await this.draw()
+    await this.draw();
 
-    return this
-  }
+    return this;
+  };
 
-  // TODO handle the renderers wrapping, add gap;
+  // TODO handle the layers 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
+    if (!this.layers.length)
+      throw new Error("can not get container coordinates before layouted");
+    const firstChild = this.layers.at(0) as
+      | ImgRender
+      | TextRender
+      | ShapeRender;
+    const lastChild = this.layers.at(-1) as
+      | ImgRender
+      | TextRender
+      | ShapeRender;
     return {
       x1: firstChild.container.x1,
       y1: firstChild.container.y1,
       x2: lastChild.container.x2,
       y2: lastChild.container.y2,
-    }
-  }
+    };
+  };
 }

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,8 +24,8 @@ export class Renderer {
   }
 
   draw = async () => {
-    if (!this.schema.renderers.length) {
-      throw new Error("[Renderer] empty canvas with no renderers");
+    if (!this.schema.layers.length) {
+      throw new Error("[Renderer] empty canvas with no layers");
     }
     const container = new ContainerRenderer(this.ctx, {
       id: this.schema.id,
@@ -33,7 +34,7 @@ export class Renderer {
       y: 0,
       width: this.canvas.width,
       height: this.canvas.height,
-      renderers: this.schema.renderers,
+      layers: this.schema.layers,
     });
     await container.layout().then((d) => d.draw());
     return this.toBuffer();