declare-render 1.0.4 → 1.0.5

package/README.md

@@ -20,7 +20,7 @@ const schema: RenderData = {
   id: "my-canvas",
   width: 800,
   height: 600,
-  renderers: [
+  layers: [
     {
       id: "text-1",
       type: "text",
@@ -45,7 +45,8 @@ const buffer = await renderer.draw();
 
 ## Features
 
-- **Text Renderers**: Render text with various styling options
-- **Image Renderers**: Render images or solid color rectangles
-- **Container Renderers**: Organize renderers with flexbox-like layouts
-- **Multiple Output Formats**: PNG and JPG support
+- **Text Layers**: Render text with various styling options
+- **Image Layers**: Render images or solid color rectangles
+- **Container Layers**: Organize layers with flexbox-like layouts
+- **Multiple Output Formats**: PNG and JPG support
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "declare-render",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "You can declare canvas shapes by JSON format.",
   "main": "index.js",
   "keywords": [

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

@@ -16,133 +16,174 @@ 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 | ShapeRender | 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 | ShapeRenderData | 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, renderData)
+        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 | ShapeRender | ContainerRenderer>
-
-    for (const index in this.data.renderers) {
-      const renderData = cloneDeep(this.data.renderers[index]) as ImgRenderData | TextRenderData | ShapeRenderData | 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 | 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 ?
-          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 | ShapeRender
-    const lastChild = this.renderers.at(-1) as ImgRender | TextRender | ShapeRender
+    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/index.ts

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

package/src/types.ts

@@ -68,7 +68,7 @@ export interface ContainerRenderData {
   itemAlign?: "center";
   gap?: number | { x: number; y: number };
   wrap?: boolean;
-  renderers: ChildRenderers;
+  layers: ChildRenderers;
 }
 
 export interface ShapeRenderData {
@@ -176,7 +176,7 @@ TextRenderData: { "id": string|number, "type": "text", "x": number, "y": 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 }
+ContainerRenderData: { "id": string|number, "type": "container", "x": number, "y": number, "width": number, "height": number, "layers": 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> }