declare-render 1.0.2 → 1.0.3

package/package.json

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

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

@@ -1,6 +1,8 @@
-import { ContainerRenderData } from "./container-renderer";
-import { ImgRenderData } from "./img-renderer";
-import { TextRenderData } from "./text-renderer/types";
+import type {
+  ContainerRenderData,
+  ImgRenderData,
+  TextRenderData,
+} from "../types";
 
 export abstract class BaseRender<
   T extends TextRenderData | ImgRenderData | ContainerRenderData,

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

@@ -1,24 +1,17 @@
-import { ChildRenderers, RendererType } from "../../types";
+import {
+  ChildRenderers,
+  ImgRenderData,
+  RendererType,
+  TextRenderData,
+} from "../../types";
+import type { ContainerRenderData } from "../../types";
 import { type CanvasRenderingContext2D } from "canvas";
 import { cloneDeep, isNumber, isObject, isUndefined } from "lodash-es";
 import { BaseRender } from "../base-renderer";
-import { ImgRenderData, ImgRender } from "../img-renderer/index";
-import { TextRenderData } from "../text-renderer/types";
+import { ImgRender } from "../img-renderer/index";
 import { TextRender } from "../text-renderer/index";
 
-export interface ContainerRenderData {
-  id: string | number
-  type: RendererType.CONTAINER,
-  x: number, // The x coordinate of the container's start point. In container renderers, as a child renderer, 0 means relative to the container's 0; if not declared, its position depends on adjacent renderers and spacing.
-  y: number, // The y coordinate of the container's start point. As a child renderer, 0 means relative to the container's 0; if not declared, its position depends on adjacent renderers and spacing.
-  width: number, // The width of the container renderer
-  height: number // The height of the container renderer
-  direction?: "row" | "column" // The layout direction of the container (horizontal/vertical)
-  itemAlign?: "center" // The alignment of container elements in the secondary direction (vertical/horizontal)
-  gap?: number | {x: number, y: number} // The distance between elements
-  wrap?: boolean; // Whether elements wrap if overflow
-  renderers: ChildRenderers // Child renderers declaration
-}
+export type { ContainerRenderData } from "../../types";
 
 export class ContainerRenderer extends BaseRender<ContainerRenderData> {
   private ctx: CanvasRenderingContext2D

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

@@ -1,34 +1,10 @@
 import { BaseRender } from "../base-renderer";
+import type { ImgRenderData } from "../../types";
 import { cloneDeep, isNumber } from "lodash-es";
 import { loadImage, Image, type CanvasRenderingContext2D } from "canvas";
 import { getImageHeight, getImageRatio, getImageWidth } from "./utils";
 
-export type ImgRenderData = {
-  id: string;
-  type: "img";
-  x: number; // The x-coordinate of the image container's starting point. When used as a child in a container renderer, 0 means positioned relative to the container's 0. If not specified, the position is determined by adjacent renderers and gap.
-  y: number; // The y-coordinate of the image container's starting point. As a child, 0 means positioned relative to the container's 0. If not specified, the position is determined by adjacent renderers and gap.
-  /*
-  If both width and height are provided, they determine the image's width and height.
-  If only width or height is provided, the other will be determined proportionally.
-  If neither width nor height is provided, the image will be rendered at its original dimensions.
-  */
-  width?: number; // The width of the image container
-  height?: number; // The height of the image container
-  shadow?: {
-    // The shadow of the image container. Can be added directly to the rendered shape, instead of rendering a separate renderer.
-    color: string; // The shadow color
-    blur: number; // Shadow blur
-    X: number; // Shadow offset on the x-axis
-    Y: number; // Shadow offset on the y-axis
-  };
-  radius?: number; // The corner radius of the image container
-  url?: string; // Image source
-  color?: string; // Background color. If url is not provided, a pure color block will be rendered.
-  rotate?: number; // The angle, calculated from the center point
-  globalAlpha?: number; // Opacity
-  objectFit: "contain" | "cover"; // If both width and height are provided, determines how the image fits within the container
-};
+export type { ImgRenderData } from "../../types";
 
 export class ImgRender extends BaseRender<ImgRenderData> {
   ctx: CanvasRenderingContext2D;

package/src/canvas-renderers/text-renderer/types.ts

@@ -1,48 +1,6 @@
-import { RendererType } from "../../types";
-import { HighlightType } from "./highlighter";
+export { RendererType } from "../../types";
+export type { TextRenderData } from "../../types";
 
 export enum highlightLogics {
   word = "word",
 }
-
-export interface TextRenderData {
-  id: string | number;
-  type: RendererType.TEXT; // Always "text"
-  x: number; // The x-coordinate of the text container's starting point. As a child, 0 means relative to the container's origin. If not specified, the position depends on adjacent renderers and spacing.
-  y: number; // The y-coordinate of the text container's starting point. As a child, 0 means relative to the container's origin. If not specified, the position depends on adjacent renderers and spacing.
-  width: number; // The width of the text container. Exceeding text will wrap.
-  height: number; // The height of the text container. Exceeding text will overflow.
-  rotate?: number; // Rotation angle, calculated from the center of the object
-  content: string; // Text content
-  style: {
-    // Text style customization
-    /* This property should currently be disabled when under a container; */
-    align?: "center" | "right"; // Text horizontal alignment
-    /* This property should currently be disabled when under a container; */
-    verticalAlign?: "center" | "top" | "bottom"; // Text vertical alignment
-    fontName: string; // Font name. Supported fonts are:
-    fontSize: number | { max: number; min: number }; // Font size. Supports objects for adaptive width to fill container.
-    backgroundColor?: string; // Text background color
-    padding?: number | { x: number; y: number }; // Text padding
-    border?: { color: string; width?: number }; // Text border
-    color: string; // Text color
-    radius?: number; // Text background border radius
-    verticalGap?: number; // Line gap
-    horizonalGap?: number; // Gap between characters in the same line
-    fontWeight?: string; // Font weight, same as CSS
-    highlight?: {
-      // Text highlight style
-      logics: highlightLogics; // Highlight word logic
-      color?: string; // Highlight color. When highlight type is not svg, this field is optional.
-      content?: string; // Highlighted text content. When highlight type is not svg, this field is optional.
-      type?: HighlightType; // Highlight style
-      style?: {
-        // When highlight type is not svg, this field should be empty
-        height?: number; // Height of the highlight graphic
-        offsetY?: number; // Vertical offset of the highlight graphic from the top, starting at the text rectangle point
-        coverText?: boolean; // Whether the highlight should cover the text. If true, height is set to text height
-        url: string; // Source of the highlight graphic
-      };
-    };
-  };
-}

package/src/index.ts

@@ -2,6 +2,14 @@ import { Canvas, createCanvas, type CanvasRenderingContext2D } from "canvas";
 import { RenderData, RendererType } from "./types";
 import { ContainerRenderer } from "./canvas-renderers/container-renderer/index";
 
+export type {
+  ContainerRenderData,
+  ImgRenderData,
+  TextRenderData,
+  RenderData,
+} from "./types";
+export { RendererType, RENDER_DATA_SCHEMA as RENDER_DATA_SCHEMA_FOR_AI } from "./types";
+
 export class Renderer {
   canvas: Canvas;
   schema: RenderData;

package/src/types.ts

@@ -1,9 +1,76 @@
-import { ContainerRenderData } from "./canvas-renderers/container-renderer";
-import { ImgRenderData } from "./canvas-renderers/img-renderer";
-import { TextRenderData } from "./canvas-renderers/text-renderer/types";
 import type { TextMetrics } from "canvas";
 
-export type { ContainerRenderData, ImgRenderData, TextRenderData };
+export enum RendererType {
+  CONTAINER = "container",
+  TEXT = "text",
+  IMG = "img",
+}
+
+// ----- TypeScript types (primitives only) -----
+
+export interface TextRenderData {
+  id: string | number;
+  type: "text";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  content: string;
+  rotate?: number;
+  style: {
+    align?: "center" | "right";
+    verticalAlign?: "center" | "top" | "bottom";
+    fontName: string;
+    fontSize: number | { max: number; min: number };
+    backgroundColor?: string;
+    padding?: number | { x: number; y: number };
+    border?: { color: string; width?: number };
+    color: string;
+    radius?: number;
+    verticalGap?: number;
+    horizonalGap?: number;
+    fontWeight?: string;
+    highlight?: {
+      logics?: string;
+      color?: string;
+      content?: string;
+      type?: string;
+      style?: { height?: number; offsetY?: number; coverText?: boolean; url: string };
+    };
+  };
+}
+
+export interface 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 };
+}
+
+export interface ContainerRenderData {
+  id: string | number;
+  type: "container";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  direction?: "row" | "column";
+  itemAlign?: "center";
+  gap?: number | { x: number; y: number };
+  wrap?: boolean;
+  renderers: ChildRenderers;
+}
+
+export type ChildRenderers = (ImgRenderData | TextRenderData | ContainerRenderData)[];
 
 export interface RenderData {
   id: string;
@@ -15,11 +82,19 @@ export interface RenderData {
   };
 }
 
-export enum RendererType {
-  CONTAINER = "container",
-  TEXT = "text",
-  IMG = "img",
-}
+// ----- 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" } }
+
+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 }
+`.trim();
+
+// ----- Metrics (canvas-dependent) -----
 
 export interface MetricsChar {
   char: string;
@@ -38,5 +113,3 @@ export interface MetricsCharWithCoordinates extends MetricsChar {
   X: number;
   Y: number;
 }
-
-export type ChildRenderers = (ImgRenderData | TextRenderData | ContainerRenderData)[];