declare-render 1.0.2 → 1.0.4

package/src/types.ts

@@ -1,25 +1,189 @@
-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",
+  SHAPE = "shape",
+}
+
+// ----- 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 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";
   };
 }
 
-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, "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) -----
 
 export interface MetricsChar {
   char: string;
@@ -38,5 +202,3 @@ export interface MetricsCharWithCoordinates extends MetricsChar {
   X: number;
   Y: number;
 }
-
-export type ChildRenderers = (ImgRenderData | TextRenderData | ContainerRenderData)[];

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"]
 }

package/examples/sunscreen-guide.ts

@@ -1,206 +0,0 @@
-import { Renderer } from "../src/index";
-import { RenderData, RendererType } from "../src/types";
-import * as fs from "fs";
-import * as path from "path";
-import { fileURLToPath } from "url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Content data in JSON format for easy reading and maintenance
-const contentData = {
-  title: "防晒指南",
-  sections: [
-    {
-      question: "该不该防晒：",
-      answer: "适度防晒"
-    },
-    {
-      question: "怎么防晒：",
-      answer: "做好物理防晒，选适配防晒霜（矿物款更安全，适合敏感肌/儿童，化学款慎选成分），避开正午强紫外线，早晚适度日晒。"
-    },
-    {
-      question: "为什么适度：",
-      answer: "紫外线会致皮肤DNA突变、加速老化，防晒对护肤和防病至关重要；但完全避光不利健康，且长波长光能穿透防晒和衣物，足够满足合成需求，不用刻意不防晒。维生素D能够调节激素，还与更好的生活质量和寿命相关。"
-    }
-  ]
-};
-
-// Dark & Elegant theme canvas configuration (4:3 aspect ratio)
-const CANVAS_CONFIG = {
-  width: 1200,
-  height: 900, // 4:3 ratio
-  padding: 50,
-  colors: {
-    background: "#121212",  // Deep black
-    title: "#FFD700",       // Gold
-    question: "#FFFFFF",    // White
-    answer: "#B0B0B0",      // Light Gray
-    cardBg: "#1E1E1E",      // Dark Gray Card
-    accent: "#FFD700",      // Gold
-    highlight: "#333333"    // Subtle Dark Circle
-  },
-  fonts: {
-    title: "PingFang SC",
-    body: "PingFang SC"
-  }
-};
-
-// Calculate text height based on content and width
-function calcTextHeight(text: string, fontSize: number, containerWidth: number, lineGap = 8): number {
-  // CJK characters are roughly square (width ≈ fontSize)
-  const charsPerLine = Math.floor(containerWidth / fontSize);
-  const lines = Math.ceil(text.length / charsPerLine);
-  return lines * (fontSize + lineGap);
-}
-
-// Build renderers from content data
-function buildRenderers() {
-  const renderers: RenderData["renderers"] = [];
-  const contentWidth = CANVAS_CONFIG.width - CANVAS_CONFIG.padding * 2;
-  let currentY = CANVAS_CONFIG.padding;
-
-  // 1. Background
-  renderers.push({
-    id: "background",
-    type: RendererType.IMG,
-    x: 0,
-    y: 0,
-    width: CANVAS_CONFIG.width,
-    height: CANVAS_CONFIG.height,
-    color: CANVAS_CONFIG.colors.background,
-    objectFit: "cover"
-  });
-
-  // 2. Decorative Dark Sun Circle (top right)
-  renderers.push({
-    id: "sun-circle",
-    type: RendererType.IMG,
-    x: CANVAS_CONFIG.width - 180,
-    y: -60,
-    width: 240,
-    height: 240,
-    color: CANVAS_CONFIG.colors.highlight,
-    radius: 120,
-    objectFit: "cover"
-  });
-
-  // 3. Title
-  const titleHeight = 80;
-  renderers.push({
-    id: "title",
-    type: RendererType.TEXT,
-    x: CANVAS_CONFIG.padding,
-    y: currentY,
-    width: contentWidth,
-    height: titleHeight,
-    content: "☀️ " + contentData.title,
-    style: {
-      fontName: CANVAS_CONFIG.fonts.title,
-      fontSize: 48,
-      color: CANVAS_CONFIG.colors.title,
-      fontWeight: "bold",
-      verticalAlign: "center"
-    }
-  });
-  currentY += titleHeight + 20;
-
-  // 4. Content Sections
-  const questionFontSize = 24;
-  const answerFontSize = 20;
-  const cardPadding = 24;
-
-  contentData.sections.forEach((section, index) => {
-    // Card background first (dark rounded rectangle)
-    const answerTextWidth = contentWidth - cardPadding * 2;
-    const textHeight = calcTextHeight(section.answer, answerFontSize, answerTextWidth, 12);
-    const cardHeight = textHeight + cardPadding * 2 + 50; // Extra space for question
-
-    renderers.push({
-      id: `card-bg-${index}`,
-      type: RendererType.IMG,
-      x: CANVAS_CONFIG.padding,
-      y: currentY,
-      width: contentWidth,
-      height: cardHeight,
-      color: CANVAS_CONFIG.colors.cardBg,
-      radius: 16,
-      objectFit: "cover"
-    });
-
-    // Question label inside card
-    const questionY = currentY + cardPadding;
-    renderers.push({
-      id: `q-${index}`,
-      type: RendererType.TEXT,
-      x: CANVAS_CONFIG.padding + cardPadding,
-      y: questionY,
-      width: contentWidth - cardPadding * 2,
-      height: 32,
-      content: "▸ " + section.question,
-      style: {
-        fontName: CANVAS_CONFIG.fonts.body,
-        fontSize: questionFontSize,
-        color: CANVAS_CONFIG.colors.question,
-        fontWeight: "bold",
-        verticalAlign: "center"
-      }
-    });
-
-    // Answer text inside card
-    const answerY = questionY + 40;
-    renderers.push({
-      id: `a-${index}`,
-      type: RendererType.TEXT,
-      x: CANVAS_CONFIG.padding + cardPadding,
-      y: answerY,
-      width: answerTextWidth,
-      height: textHeight + 20,
-      content: section.answer,
-      style: {
-        fontName: CANVAS_CONFIG.fonts.body,
-        fontSize: answerFontSize,
-        color: CANVAS_CONFIG.colors.answer,
-        verticalGap: 12,
-        verticalAlign: "top"
-      }
-    });
-
-    currentY += cardHeight + 24;
-  });
-
-  return renderers;
-}
-
-// Create canvas schema
-const schema: RenderData = {
-  id: "sunscreen-guide",
-  width: CANVAS_CONFIG.width,
-  height: CANVAS_CONFIG.height,
-  renderers: buildRenderers(),
-  output: {
-    type: "png"
-  }
-};
-
-// Main execution
-async function main() {
-  console.log("Generating fresh sunscreen guide image...");
-  console.log("Content:", JSON.stringify(contentData, null, 2));
-
-  const renderer = new Renderer(schema);
-  const buffer = await renderer.draw();
-
-  // Ensure output directory exists
-  const outputDir = path.join(__dirname, "output");
-  if (!fs.existsSync(outputDir)) {
-    fs.mkdirSync(outputDir, { recursive: true });
-  }
-
-  const outputPath = path.join(outputDir, "sunscreen-guide.png");
-  fs.writeFileSync(outputPath, buffer);
-
-  console.log(`Image saved to: ${outputPath}`);
-}
-
-main().catch(console.error);