declare-render 1.0.5 → 1.0.7

package/examples/test.ts

@@ -0,0 +1,456 @@
+/**
+ * Declare-render examples: all test schemas in one file.
+ * Each schema is commented with what it demonstrates and which output file it produces.
+ */
+import { Renderer } from "../src/index";
+import { RenderData, RendererType, type ShapeRenderData } 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);
+
+// ---------------------------------------------------------------------------
+// Helper: create an arrow shape (used by arrow-test schema)
+// ---------------------------------------------------------------------------
+function createArrow(
+  id: string | number,
+  x: number,
+  y: number,
+  endX: number,
+  endY: number,
+  arrowLength: number = 20,
+  arrowAngle: number = Math.PI / 6,
+): ShapeRenderData {
+  const dx = endX - x;
+  const dy = endY - y;
+  const angle = Math.atan2(dy, dx);
+  const arrowX1 = endX - arrowLength * Math.cos(angle - arrowAngle);
+  const arrowY1 = endY - arrowLength * Math.sin(angle - arrowAngle);
+  const arrowX2 = endX - arrowLength * Math.cos(angle + arrowAngle);
+  const arrowY2 = endY - arrowLength * Math.sin(angle + arrowAngle);
+  const minX = Math.min(x, endX, arrowX1, arrowX2);
+  const minY = Math.min(y, endY, arrowY1, arrowY2);
+  const maxX = Math.max(x, endX, arrowX1, arrowX2);
+  const maxY = Math.max(y, endY, arrowY1, arrowY2);
+  const normalizedX = x - minX;
+  const normalizedY = y - minY;
+  const normalizedEndX = endX - minX;
+  const normalizedEndY = endY - minY;
+  const normalizedArrowX1 = arrowX1 - minX;
+  const normalizedArrowY1 = arrowY1 - minY;
+  const normalizedArrowX2 = arrowX2 - minX;
+  const normalizedArrowY2 = arrowY2 - minY;
+  return {
+    id,
+    type: RendererType.SHAPE,
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+    style: {
+      strokeStyle: "#000000",
+      fillStyle: "#000000",
+      lineWidth: 3,
+      lineCap: "round",
+      lineJoin: "round",
+    },
+    shapes: [
+      { type: "beginPath" },
+      { type: "moveTo", x: normalizedX, y: normalizedY },
+      { type: "lineTo", x: normalizedEndX, y: normalizedEndY },
+      { type: "stroke" },
+      { type: "beginPath" },
+      { type: "moveTo", x: normalizedEndX, y: normalizedEndY },
+      { type: "lineTo", x: normalizedArrowX1, y: normalizedArrowY1 },
+      { type: "lineTo", x: normalizedArrowX2, y: normalizedArrowY2 },
+      { type: "closePath" },
+      { type: "fill" },
+    ],
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Schema 1: Shape test
+// Purpose: Rectangles, circles (arc), triangles (lines), star, heart (bezier),
+//   smiley (multiple arcs), rotated rect, shadow, quadratic curves, dashed line,
+//   multiple shapes in one layer. Output: shape-test.png
+// ---------------------------------------------------------------------------
+const shapeTestSchema: RenderData = {
+  id: "shape-test",
+  width: 800,
+  height: 1200,
+  layers: [
+    {
+      id: "rect1",
+      type: RendererType.SHAPE,
+      x: 50,
+      y: 50,
+      width: 200,
+      height: 150,
+      style: { fillStyle: "#3498db", strokeStyle: "#2980b9", lineWidth: 3 },
+      shapes: [
+        { type: "fillRect", x: 0, y: 0, width: 200, height: 150 },
+        { type: "strokeRect", x: 0, y: 0, width: 200, height: 150 },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "circle1",
+      type: RendererType.SHAPE,
+      x: 300,
+      y: 50,
+      width: 150,
+      height: 150,
+      style: { fillStyle: "#e74c3c", strokeStyle: "#c0392b", lineWidth: 2 },
+      shapes: [
+        { type: "beginPath" },
+        { type: "arc", x: 75, y: 75, radius: 70, startAngle: 0, endAngle: Math.PI * 2, counterclockwise: false },
+        { type: "fillAndStroke" },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "triangle1",
+      type: RendererType.SHAPE,
+      x: 500,
+      y: 50,
+      width: 200,
+      height: 200,
+      style: { fillStyle: "#2ecc71", strokeStyle: "#27ae60", lineWidth: 4 },
+      shapes: [
+        { type: "beginPath" },
+        { type: "moveTo", x: 100, y: 0 },
+        { type: "lineTo", x: 200, y: 200 },
+        { type: "lineTo", x: 0, y: 200 },
+        { type: "closePath" },
+        { type: "fillAndStroke" },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "star1",
+      type: RendererType.SHAPE,
+      x: 50,
+      y: 250,
+      width: 200,
+      height: 200,
+      style: { fillStyle: "#f39c12", strokeStyle: "#e67e22", lineWidth: 2 },
+      shapes: [
+        { type: "beginPath" },
+        { type: "moveTo", x: 100, y: 0 },
+        { type: "lineTo", x: 120, y: 70 },
+        { type: "lineTo", x: 200, y: 70 },
+        { type: "lineTo", x: 135, y: 115 },
+        { type: "lineTo", x: 160, y: 200 },
+        { type: "lineTo", x: 100, y: 150 },
+        { type: "lineTo", x: 40, y: 200 },
+        { type: "lineTo", x: 65, y: 115 },
+        { type: "lineTo", x: 0, y: 70 },
+        { type: "lineTo", x: 80, y: 70 },
+        { type: "closePath" },
+        { type: "fillAndStroke" },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "heart1",
+      type: RendererType.SHAPE,
+      x: 300,
+      y: 250,
+      width: 200,
+      height: 180,
+      style: { fillStyle: "#e91e63", strokeStyle: "#c2185b", lineWidth: 2 },
+      shapes: [
+        { type: "beginPath" },
+        { type: "moveTo", x: 100, y: 60 },
+        { type: "bezierCurveTo", cp1x: 100, cp1y: 30, cp2x: 50, cp2y: 30, x: 50, y: 60 },
+        { type: "bezierCurveTo", cp1x: 50, cp1y: 100, cp2x: 100, cp2y: 140, x: 100, y: 180 },
+        { type: "bezierCurveTo", cp1x: 100, cp1y: 140, cp2x: 150, cp2y: 100, x: 150, y: 60 },
+        { type: "bezierCurveTo", cp1x: 150, cp1y: 30, cp2x: 100, cp2y: 30, x: 100, y: 60 },
+        { type: "fillAndStroke" },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "smiley1",
+      type: RendererType.SHAPE,
+      x: 550,
+      y: 250,
+      width: 200,
+      height: 200,
+      style: { fillStyle: "#ffeb3b", strokeStyle: "#fbc02d", lineWidth: 3 },
+      shapes: [
+        { type: "beginPath" },
+        { type: "arc", x: 100, y: 100, radius: 80, startAngle: 0, endAngle: Math.PI * 2, counterclockwise: false },
+        { type: "fill" },
+        { type: "stroke" },
+        { type: "beginPath" },
+        { type: "arc", x: 70, y: 80, radius: 10, startAngle: 0, endAngle: Math.PI * 2, counterclockwise: false },
+        { type: "fill" },
+        { type: "beginPath" },
+        { type: "arc", x: 130, y: 80, radius: 10, startAngle: 0, endAngle: Math.PI * 2, counterclockwise: false },
+        { type: "fill" },
+        { type: "beginPath" },
+        { type: "arc", x: 100, y: 100, radius: 50, startAngle: 0, endAngle: Math.PI, counterclockwise: false },
+        { type: "stroke" },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "rotated-rect",
+      type: RendererType.SHAPE,
+      x: 50,
+      y: 500,
+      width: 150,
+      height: 100,
+      rotate: 45,
+      style: { fillStyle: "#9b59b6", strokeStyle: "#8e44ad", lineWidth: 2 },
+      shapes: [
+        { type: "fillRect", x: 0, y: 0, width: 150, height: 100 },
+        { type: "strokeRect", x: 0, y: 0, width: 150, height: 100 },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "shadow-shape",
+      type: RendererType.SHAPE,
+      x: 250,
+      y: 500,
+      width: 150,
+      height: 150,
+      style: { fillStyle: "#16a085", strokeStyle: "#138d75", lineWidth: 2 },
+      shadow: { color: "rgba(0, 0, 0, 0.5)", blur: 10, X: 5, Y: 5 },
+      shapes: [
+        { type: "beginPath" },
+        { type: "arc", x: 75, y: 75, radius: 60, startAngle: 0, endAngle: Math.PI * 2, counterclockwise: false },
+        { type: "fillAndStroke" },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "curve-shape",
+      type: RendererType.SHAPE,
+      x: 450,
+      y: 500,
+      width: 200,
+      height: 150,
+      style: { fillStyle: "#34495e", strokeStyle: "#2c3e50", lineWidth: 3, lineCap: "round", lineJoin: "round" },
+      shapes: [
+        { type: "beginPath" },
+        { type: "moveTo", x: 0, y: 75 },
+        { type: "quadraticCurveTo", cp1x: 50, cp1y: 0, x: 100, y: 75 },
+        { type: "quadraticCurveTo", cp1x: 150, cp1y: 150, x: 200, y: 75 },
+        { type: "stroke" },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "dashed-rect",
+      type: RendererType.SHAPE,
+      x: 50,
+      y: 700,
+      width: 200,
+      height: 150,
+      style: { strokeStyle: "#e74c3c", lineWidth: 4, lineDash: [10, 5], lineDashOffset: 0 },
+      shapes: [{ type: "strokeRect", x: 0, y: 0, width: 200, height: 150 }],
+    } as ShapeRenderData,
+    {
+      id: "multi-shape",
+      type: RendererType.SHAPE,
+      x: 300,
+      y: 700,
+      width: 300,
+      height: 200,
+      style: { fillStyle: "#95a5a6", strokeStyle: "#7f8c8d", lineWidth: 2 },
+      shapes: [
+        { type: "fillRect", x: 0, y: 0, width: 300, height: 200 },
+        { type: "beginPath" },
+        { type: "arc", x: 75, y: 75, radius: 50, startAngle: 0, endAngle: Math.PI * 2, counterclockwise: false },
+        { type: "fill" },
+        { type: "fillRect", x: 150, y: 25, width: 100, height: 100 },
+        { type: "beginPath" },
+        { type: "moveTo", x: 275, y: 25 },
+        { type: "lineTo", x: 300, y: 125 },
+        { type: "lineTo", x: 250, y: 125 },
+        { type: "closePath" },
+        { type: "fill" },
+      ],
+    } as ShapeRenderData,
+  ],
+  output: { type: "png" },
+};
+
+// ---------------------------------------------------------------------------
+// Schema 2: Arrow test
+// Purpose: Directional arrows (createArrow), curved arrow, circles/rects/triangles,
+//   arrows pointing to shapes, flow diagram. Output: arrow-test.png
+// ---------------------------------------------------------------------------
+const arrowTestSchema: RenderData = {
+  id: "arrow-test",
+  width: 800,
+  height: 600,
+  layers: [
+    createArrow("arrow1", 50, 100, 200, 100, 25),
+    createArrow("arrow2", 250, 50, 250, 200, 25),
+    createArrow("arrow3", 50, 300, 200, 200, 30),
+    createArrow("arrow4", 50, 400, 200, 500, 30),
+    {
+      id: "curved-arrow",
+      type: RendererType.SHAPE,
+      x: 300,
+      y: 100,
+      width: 200,
+      height: 200,
+      style: { strokeStyle: "#000000", fillStyle: "#000000", lineWidth: 3, lineCap: "round" },
+      shapes: [
+        { type: "beginPath" },
+        { type: "moveTo", x: 0, y: 0 },
+        { type: "bezierCurveTo", cp1x: 50, cp1y: 0, cp2x: 150, cp2y: 200, x: 200, y: 200 },
+        { type: "stroke" },
+        { type: "beginPath" },
+        { type: "moveTo", x: 200, y: 200 },
+        { type: "lineTo", x: 180, y: 185 },
+        { type: "lineTo", x: 185, y: 195 },
+        { type: "closePath" },
+        { type: "fill" },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "circle1",
+      type: RendererType.SHAPE,
+      x: 550,
+      y: 50,
+      width: 100,
+      height: 100,
+      style: { fillStyle: "#000000", strokeStyle: "#000000", lineWidth: 2 },
+      shapes: [
+        { type: "beginPath" },
+        { type: "arc", x: 50, y: 50, radius: 45, startAngle: 0, endAngle: Math.PI * 2, counterclockwise: false },
+        { type: "fillAndStroke" },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "rect1",
+      type: RendererType.SHAPE,
+      x: 550,
+      y: 200,
+      width: 150,
+      height: 100,
+      style: { fillStyle: "#000000", strokeStyle: "#000000", lineWidth: 2 },
+      shapes: [
+        { type: "fillRect", x: 0, y: 0, width: 150, height: 100 },
+        { type: "strokeRect", x: 0, y: 0, width: 150, height: 100 },
+      ],
+    } as ShapeRenderData,
+    {
+      id: "triangle1",
+      type: RendererType.SHAPE,
+      x: 550,
+      y: 350,
+      width: 150,
+      height: 150,
+      style: { fillStyle: "#000000", strokeStyle: "#000000", lineWidth: 2 },
+      shapes: [
+        { type: "beginPath" },
+        { type: "moveTo", x: 75, y: 0 },
+        { type: "lineTo", x: 150, y: 150 },
+        { type: "lineTo", x: 0, y: 150 },
+        { type: "closePath" },
+        { type: "fillAndStroke" },
+      ],
+    } as ShapeRenderData,
+    createArrow("arrow-to-circle", 300, 350, 550, 100, 30),
+    createArrow("arrow-to-rect", 300, 400, 550, 250, 30),
+    createArrow("arrow-to-triangle", 300, 450, 550, 425, 30),
+    createArrow("flow1", 50, 550, 150, 550, 20),
+    createArrow("flow2", 150, 550, 250, 550, 20),
+    createArrow("flow3", 250, 550, 350, 550, 20),
+    createArrow("flow4", 350, 550, 450, 550, 20),
+  ],
+  output: { type: "png" },
+};
+
+// ---------------------------------------------------------------------------
+// Schema 3: Canvas-1 test
+// Purpose: Minimal agent-style layout: circle + square + arrow line, with
+//   per-command style (fillStyle/strokeStyle on fill/stroke commands). Output: canvas-1-test.png
+// ---------------------------------------------------------------------------
+const canvas1Schema: RenderData = {
+  id: "canvas-1",
+  width: 400,
+  height: 300,
+  layers: [
+    {
+      id: "circle",
+      type: "shape",
+      x: 120,
+      y: 150,
+      shapes: [
+        { type: "beginPath" },
+        { type: "arc", x: 0, y: 0, radius: 40, startAngle: 0, endAngle: 6.283185307179586, counterclockwise: false },
+        { type: "closePath" },
+        { type: "fill", style: { fillStyle: "#4A90D9" } },
+      ],
+    },
+    {
+      id: "square",
+      type: "shape",
+      x: 280,
+      y: 150,
+      shapes: [
+        { type: "beginPath" },
+        { type: "rect", x: -40, y: -40, width: 80, height: 80 },
+        { type: "closePath" },
+        { type: "fill", style: { fillStyle: "#4A90D9" } },
+      ],
+    },
+    {
+      id: "arrow-line",
+      type: "shape",
+      x: 0,
+      y: 0,
+      shapes: [
+        { type: "beginPath" },
+        { type: "moveTo", x: 160, y: 150 },
+        { type: "lineTo", x: 240, y: 150 },
+        { type: "stroke", style: { strokeStyle: "#333333", lineWidth: 3 } },
+        { type: "beginPath" },
+        { type: "moveTo", x: 240, y: 150 },
+        { type: "lineTo", x: 230, y: 140 },
+        { type: "lineTo", x: 230, y: 160 },
+        { type: "closePath" },
+        { type: "fill", style: { strokeStyle: "#333333", lineWidth: 3 } },
+      ],
+    },
+  ],
+};
+
+// ---------------------------------------------------------------------------
+// Run all tests: render each schema and write to output/<name>.png
+// ---------------------------------------------------------------------------
+const TESTS: { name: string; schema: RenderData }[] = [
+  { name: "shape-test", schema: shapeTestSchema },
+  { name: "arrow-test", schema: arrowTestSchema },
+  { name: "canvas-1-test", schema: canvas1Schema },
+];
+
+async function main() {
+  const outputDir = path.join(__dirname, "output");
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  for (const { name, schema } of TESTS) {
+    try {
+      const renderer = new Renderer(schema);
+      const buffer = await renderer.draw();
+      const outputPath = path.join(outputDir, `${name}.png`);
+      fs.writeFileSync(outputPath, buffer);
+      console.log(`Rendered: ${outputPath}`);
+    } catch (error) {
+      console.error(`Error rendering ${name}:`, error);
+      if (error instanceof Error) console.error(error.stack);
+      process.exit(1);
+    }
+  }
+
+  console.log("All tests passed.");
+}
+
+main().catch((error) => {
+  console.error("Unhandled error:", error);
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "declare-render",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "You can declare canvas shapes by JSON format.",
   "main": "index.js",
   "keywords": [
@@ -24,9 +24,6 @@
   "type": "module",
   "scripts": {
     "rebuild:canvas": "pnpm rebuild canvas",
-    "test:shape": "tsx examples/shape-test.ts",
-    "test:shape:ts-node": "NODE_OPTIONS='--loader ts-node/esm' node examples/shape-test.ts",
-    "test:arrow": "tsx examples/arrow-test.ts",
-    "test:arrow:ts-node": "NODE_OPTIONS='--loader ts-node/esm' node examples/arrow-test.ts"
+    "test": "tsx examples/test.ts"
   }
 }

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

@@ -1,5 +1,5 @@
 import { BaseRender } from "../base-renderer";
-import type { ShapeRenderData, ShapeCommand } from "../../types";
+import type { ShapeRenderData, ShapeCommand, ShapeStyle } from "../../types";
 import { cloneDeep, isNumber } from "lodash-es";
 import { type CanvasRenderingContext2D } from "canvas";
 
@@ -20,8 +20,8 @@ export class ShapeRender extends BaseRender<ShapeRenderData> {
     return this.getContainerCoordinates();
   }
 
-  private applyStyle() {
-    const style = this.data.style;
+  /** Apply style to ctx. Used for layer style (inherit) and per-command override. */
+  private applyStyle(style: ShapeStyle | undefined) {
     if (!style) return;
 
     if (style.fillStyle) {
@@ -236,15 +236,17 @@ export class ShapeRender extends BaseRender<ShapeRenderData> {
     const offsetY = y;
 
     const drawImpl = () => {
-      this.ctx.save();
-      this.applyStyle();
       this.applyShadow();
 
+      this.applyStyle(this.data.style);
+      this.ctx.save();
       for (const cmd of this.data.shapes) {
+        if ("style" in cmd && cmd.style) {
+          this.applyStyle(cmd.style);
+        }
         this.executeCommand(cmd, offsetX, offsetY);
+        this.ctx.restore();
       }
-
-      this.ctx.restore();
     };
 
     if (!rotate) {

package/src/index.ts

@@ -6,6 +6,8 @@ export type {
   ContainerRenderData,
   ImgRenderData,
   ShapeRenderData,
+  ShapeStyle,
+  ShapeCommand,
   TextRenderData,
   RenderData,
 } from "./types";

package/src/types.ts

@@ -71,6 +71,19 @@ export interface ContainerRenderData {
   layers: ChildRenderers;
 }
 
+/** Style for shape layer or per-command override. Commands inherit layer style; command.style overrides for that command only. */
+export interface ShapeStyle {
+  fillStyle?: string;
+  strokeStyle?: string;
+  lineWidth?: number;
+  lineCap?: "butt" | "round" | "square";
+  lineJoin?: "bevel" | "round" | "miter";
+  miterLimit?: number;
+  lineDash?: number[];
+  lineDashOffset?: number;
+  globalAlpha?: number;
+}
+
 export interface ShapeRenderData {
   id: string | number;
   type: "shape";
@@ -79,17 +92,7 @@ export interface ShapeRenderData {
   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;
-  };
+  style?: ShapeStyle;
   shadow?: {
     color: string;
     blur: number;
@@ -100,14 +103,14 @@ export interface ShapeRenderData {
 }
 
 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: "rect"; x: number; y: number; width: number; height: number; style?: ShapeStyle }
+  | { type: "fillRect"; x: number; y: number; width: number; height: number; style?: ShapeStyle }
+  | { type: "strokeRect"; x: number; y: number; width: number; height: number; style?: ShapeStyle }
+  | { type: "clearRect"; x: number; y: number; width: number; height: number; style?: ShapeStyle }
+  | { type: "beginPath"; style?: ShapeStyle }
+  | { type: "closePath"; style?: ShapeStyle }
+  | { type: "moveTo"; x: number; y: number; style?: ShapeStyle }
+  | { type: "lineTo"; x: number; y: number; style?: ShapeStyle }
   | {
       type: "arc";
       x: number;
@@ -116,6 +119,7 @@ export type ShapeCommand =
       startAngle: number;
       endAngle: number;
       counterclockwise?: boolean;
+      style?: ShapeStyle;
     }
   | {
       type: "arcTo";
@@ -124,6 +128,7 @@ export type ShapeCommand =
       x2: number;
       y2: number;
       radius: number;
+      style?: ShapeStyle;
     }
   | {
       type: "quadraticCurveTo";
@@ -131,6 +136,7 @@ export type ShapeCommand =
       cp1y: number;
       x: number;
       y: number;
+      style?: ShapeStyle;
     }
   | {
       type: "bezierCurveTo";
@@ -140,10 +146,11 @@ export type ShapeCommand =
       cp2y: number;
       x: number;
       y: number;
+      style?: ShapeStyle;
     }
-  | { type: "fill" }
-  | { type: "stroke" }
-  | { type: "fillAndStroke" };
+  | { type: "fill"; style?: ShapeStyle }
+  | { type: "stroke"; style?: ShapeStyle }
+  | { type: "fillAndStroke"; style?: ShapeStyle };
 
 export type ChildRenderers = (
   | ImgRenderData
@@ -180,7 +187,7 @@ ContainerRenderData: { "id": string|number, "type": "container", "x": number, "y
 
 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 }
+ShapeCommand: { "type": "rect"|"fillRect"|"strokeRect"|"clearRect"|"beginPath"|"closePath"|"moveTo"|"lineTo"|"arc"|"arcTo"|"quadraticCurveTo"|"bezierCurveTo"|"fill"|"stroke"|"fillAndStroke", "style"?: ShapeStyle (optional; overrides layer style for this command), ...additional properties based on type }
 `.trim();
 
 // ----- Metrics (canvas-dependent) -----

package/examples/arrow-test.ts

@@ -1,252 +0,0 @@
-import { Renderer } from "../src/index";
-import { RenderData, RendererType, type ShapeRenderData } 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);
-
-// Helper function to create an arrow shape
-function createArrow(
-  id: string | number,
-  x: number,
-  y: number,
-  endX: number,
-  endY: number,
-  arrowLength: number = 20,
-  arrowAngle: number = Math.PI / 6, // 30 degrees
-): ShapeRenderData {
-  // Calculate arrow direction
-  const dx = endX - x;
-  const dy = endY - y;
-  const angle = Math.atan2(dy, dx);
-
-  // Calculate arrowhead points
-  const arrowX1 = endX - arrowLength * Math.cos(angle - arrowAngle);
-  const arrowY1 = endY - arrowLength * Math.sin(angle - arrowAngle);
-  const arrowX2 = endX - arrowLength * Math.cos(angle + arrowAngle);
-  const arrowY2 = endY - arrowLength * Math.sin(angle + arrowAngle);
-
-  // Calculate bounds
-  const minX = Math.min(x, endX, arrowX1, arrowX2);
-  const minY = Math.min(y, endY, arrowY1, arrowY2);
-  const maxX = Math.max(x, endX, arrowX1, arrowX2);
-  const maxY = Math.max(y, endY, arrowY1, arrowY2);
-
-  // Normalize coordinates relative to shape position
-  const normalizedX = x - minX;
-  const normalizedY = y - minY;
-  const normalizedEndX = endX - minX;
-  const normalizedEndY = endY - minY;
-  const normalizedArrowX1 = arrowX1 - minX;
-  const normalizedArrowY1 = arrowY1 - minY;
-  const normalizedArrowX2 = arrowX2 - minX;
-  const normalizedArrowY2 = arrowY2 - minY;
-
-  return {
-    id,
-    type: RendererType.SHAPE,
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY,
-    style: {
-      strokeStyle: "#000000",
-      fillStyle: "#000000",
-      lineWidth: 3,
-      lineCap: "round",
-      lineJoin: "round",
-    },
-    shapes: [
-      { type: "beginPath" },
-      { type: "moveTo", x: normalizedX, y: normalizedY },
-      { type: "lineTo", x: normalizedEndX, y: normalizedEndY },
-      { type: "stroke" },
-      // Arrowhead
-      { type: "beginPath" },
-      { type: "moveTo", x: normalizedEndX, y: normalizedEndY },
-      { type: "lineTo", x: normalizedArrowX1, y: normalizedArrowY1 },
-      { type: "lineTo", x: normalizedArrowX2, y: normalizedArrowY2 },
-      { type: "closePath" },
-      { type: "fill" },
-    ],
-  };
-}
-
-// Test file with black shapes including arrows
-const arrowTestSchema: RenderData = {
-  id: "arrow-test",
-  width: 800,
-  height: 600,
-  layers: [
-    // Horizontal arrow pointing right
-    createArrow("arrow1", 50, 100, 200, 100, 25),
-
-    // Vertical arrow pointing down
-    createArrow("arrow2", 250, 50, 250, 200, 25),
-
-    // Diagonal arrow pointing up-right
-    createArrow("arrow3", 50, 300, 200, 200, 30),
-
-    // Diagonal arrow pointing down-right
-    createArrow("arrow4", 50, 400, 200, 500, 30),
-
-    // Curved arrow (using bezier curve)
-    {
-      id: "curved-arrow",
-      type: RendererType.SHAPE,
-      x: 300,
-      y: 100,
-      width: 200,
-      height: 200,
-      style: {
-        strokeStyle: "#000000",
-        fillStyle: "#000000",
-        lineWidth: 3,
-        lineCap: "round",
-      },
-      shapes: [
-        { type: "beginPath" },
-        { type: "moveTo", x: 0, y: 0 },
-        {
-          type: "bezierCurveTo",
-          cp1x: 50,
-          cp1y: 0,
-          cp2x: 150,
-          cp2y: 200,
-          x: 200,
-          y: 200,
-        },
-        { type: "stroke" },
-        // Arrowhead at end
-        { type: "beginPath" },
-        { type: "moveTo", x: 200, y: 200 },
-        { type: "lineTo", x: 180, y: 185 },
-        { type: "lineTo", x: 185, y: 195 },
-        { type: "closePath" },
-        { type: "fill" },
-      ],
-    } as ShapeRenderData,
-
-    // Simple black circle
-    {
-      id: "circle1",
-      type: RendererType.SHAPE,
-      x: 550,
-      y: 50,
-      width: 100,
-      height: 100,
-      style: {
-        fillStyle: "#000000",
-        strokeStyle: "#000000",
-        lineWidth: 2,
-      },
-      shapes: [
-        { type: "beginPath" },
-        {
-          type: "arc",
-          x: 50,
-          y: 50,
-          radius: 45,
-          startAngle: 0,
-          endAngle: Math.PI * 2,
-          counterclockwise: false,
-        },
-        { type: "fillAndStroke" },
-      ],
-    } as ShapeRenderData,
-
-    // Black rectangle
-    {
-      id: "rect1",
-      type: RendererType.SHAPE,
-      x: 550,
-      y: 200,
-      width: 150,
-      height: 100,
-      style: {
-        fillStyle: "#000000",
-        strokeStyle: "#000000",
-        lineWidth: 2,
-      },
-      shapes: [
-        { type: "fillRect", x: 0, y: 0, width: 150, height: 100 },
-        { type: "strokeRect", x: 0, y: 0, width: 150, height: 100 },
-      ],
-    } as ShapeRenderData,
-
-    // Black triangle
-    {
-      id: "triangle1",
-      type: RendererType.SHAPE,
-      x: 550,
-      y: 350,
-      width: 150,
-      height: 150,
-      style: {
-        fillStyle: "#000000",
-        strokeStyle: "#000000",
-        lineWidth: 2,
-      },
-      shapes: [
-        { type: "beginPath" },
-        { type: "moveTo", x: 75, y: 0 },
-        { type: "lineTo", x: 150, y: 150 },
-        { type: "lineTo", x: 0, y: 150 },
-        { type: "closePath" },
-        { type: "fillAndStroke" },
-      ],
-    } as ShapeRenderData,
-
-    // Arrow pointing to the circle
-    createArrow("arrow-to-circle", 300, 350, 550, 100, 30),
-
-    // Arrow pointing to the rectangle
-    createArrow("arrow-to-rect", 300, 400, 550, 250, 30),
-
-    // Arrow pointing to the triangle
-    createArrow("arrow-to-triangle", 300, 450, 550, 425, 30),
-
-    // Multiple arrows forming a flow diagram
-    createArrow("flow1", 50, 550, 150, 550, 20),
-    createArrow("flow2", 150, 550, 250, 550, 20),
-    createArrow("flow3", 250, 550, 350, 550, 20),
-    createArrow("flow4", 350, 550, 450, 550, 20),
-  ],
-  output: {
-    type: "png",
-  },
-};
-
-async function main() {
-  try {
-    console.log("Creating renderer...");
-    const renderer = new Renderer(arrowTestSchema);
-    console.log("Drawing shapes...");
-    const buffer = await renderer.draw();
-    const outputPath = path.join(__dirname, "output", "arrow-test.png");
-
-    // Ensure output directory exists
-    const outputDir = path.dirname(outputPath);
-    if (!fs.existsSync(outputDir)) {
-      fs.mkdirSync(outputDir, { recursive: true });
-    }
-
-    console.log("Writing file...");
-    fs.writeFileSync(outputPath, buffer);
-    console.log(`Arrow test rendered successfully: ${outputPath}`);
-  } catch (error) {
-    console.error("Error rendering arrow test:");
-    console.error(error);
-    if (error instanceof Error) {
-      console.error("Stack:", error.stack);
-    }
-    process.exit(1);
-  }
-}
-
-main().catch((error) => {
-  console.error("Unhandled error:", error);
-  process.exit(1);
-});

package/examples/shape-test.ts

@@ -1,411 +0,0 @@
-import { Renderer } from "../src/index";
-import { RenderData, RendererType, type ShapeRenderData } 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);
-
-// Test various canvas shapes
-const shapeTestSchema: RenderData = {
-  id: "shape-test",
-  width: 800,
-  height: 1200,
-  layers: [
-    // Rectangle shapes
-    {
-      id: "rect1",
-      type: RendererType.SHAPE,
-      x: 50,
-      y: 50,
-      width: 200,
-      height: 150,
-      style: {
-        fillStyle: "#3498db",
-        strokeStyle: "#2980b9",
-        lineWidth: 3,
-      },
-      shapes: [
-        { type: "fillRect", x: 0, y: 0, width: 200, height: 150 },
-        { type: "strokeRect", x: 0, y: 0, width: 200, height: 150 },
-      ],
-    } as ShapeRenderData,
-
-    // Circle using arc
-    {
-      id: "circle1",
-      type: RendererType.SHAPE,
-      x: 300,
-      y: 50,
-      width: 150,
-      height: 150,
-      style: {
-        fillStyle: "#e74c3c",
-        strokeStyle: "#c0392b",
-        lineWidth: 2,
-      },
-      shapes: [
-        { type: "beginPath" },
-        {
-          type: "arc",
-          x: 75,
-          y: 75,
-          radius: 70,
-          startAngle: 0,
-          endAngle: Math.PI * 2,
-          counterclockwise: false,
-        },
-        { type: "fillAndStroke" },
-      ],
-    } as ShapeRenderData,
-
-    // Triangle using lines
-    {
-      id: "triangle1",
-      type: RendererType.SHAPE,
-      x: 500,
-      y: 50,
-      width: 200,
-      height: 200,
-      style: {
-        fillStyle: "#2ecc71",
-        strokeStyle: "#27ae60",
-        lineWidth: 4,
-      },
-      shapes: [
-        { type: "beginPath" },
-        { type: "moveTo", x: 100, y: 0 },
-        { type: "lineTo", x: 200, y: 200 },
-        { type: "lineTo", x: 0, y: 200 },
-        { type: "closePath" },
-        { type: "fillAndStroke" },
-      ],
-    } as ShapeRenderData,
-
-    // Star shape using lines
-    {
-      id: "star1",
-      type: RendererType.SHAPE,
-      x: 50,
-      y: 250,
-      width: 200,
-      height: 200,
-      style: {
-        fillStyle: "#f39c12",
-        strokeStyle: "#e67e22",
-        lineWidth: 2,
-      },
-      shapes: [
-        { type: "beginPath" },
-        { type: "moveTo", x: 100, y: 0 },
-        { type: "lineTo", x: 120, y: 70 },
-        { type: "lineTo", x: 200, y: 70 },
-        { type: "lineTo", x: 135, y: 115 },
-        { type: "lineTo", x: 160, y: 200 },
-        { type: "lineTo", x: 100, y: 150 },
-        { type: "lineTo", x: 40, y: 200 },
-        { type: "lineTo", x: 65, y: 115 },
-        { type: "lineTo", x: 0, y: 70 },
-        { type: "lineTo", x: 80, y: 70 },
-        { type: "closePath" },
-        { type: "fillAndStroke" },
-      ],
-    } as ShapeRenderData,
-
-    // Heart shape using bezier curves
-    {
-      id: "heart1",
-      type: RendererType.SHAPE,
-      x: 300,
-      y: 250,
-      width: 200,
-      height: 180,
-      style: {
-        fillStyle: "#e91e63",
-        strokeStyle: "#c2185b",
-        lineWidth: 2,
-      },
-      shapes: [
-        { type: "beginPath" },
-        { type: "moveTo", x: 100, y: 60 },
-        {
-          type: "bezierCurveTo",
-          cp1x: 100,
-          cp1y: 30,
-          cp2x: 50,
-          cp2y: 30,
-          x: 50,
-          y: 60,
-        },
-        {
-          type: "bezierCurveTo",
-          cp1x: 50,
-          cp1y: 100,
-          cp2x: 100,
-          cp2y: 140,
-          x: 100,
-          y: 180,
-        },
-        {
-          type: "bezierCurveTo",
-          cp1x: 100,
-          cp1y: 140,
-          cp2x: 150,
-          cp2y: 100,
-          x: 150,
-          y: 60,
-        },
-        {
-          type: "bezierCurveTo",
-          cp1x: 150,
-          cp1y: 30,
-          cp2x: 100,
-          cp2y: 30,
-          x: 100,
-          y: 60,
-        },
-        { type: "fillAndStroke" },
-      ],
-    } as ShapeRenderData,
-
-    // Smiley face using arcs
-    {
-      id: "smiley1",
-      type: RendererType.SHAPE,
-      x: 550,
-      y: 250,
-      width: 200,
-      height: 200,
-      style: {
-        fillStyle: "#ffeb3b",
-        strokeStyle: "#fbc02d",
-        lineWidth: 3,
-      },
-      shapes: [
-        { type: "beginPath" },
-        {
-          type: "arc",
-          x: 100,
-          y: 100,
-          radius: 80,
-          startAngle: 0,
-          endAngle: Math.PI * 2,
-          counterclockwise: false,
-        },
-        { type: "fill" },
-        { type: "stroke" },
-        // Left eye
-        { type: "beginPath" },
-        {
-          type: "arc",
-          x: 70,
-          y: 80,
-          radius: 10,
-          startAngle: 0,
-          endAngle: Math.PI * 2,
-          counterclockwise: false,
-        },
-        { type: "fill" },
-        // Right eye
-        { type: "beginPath" },
-        {
-          type: "arc",
-          x: 130,
-          y: 80,
-          radius: 10,
-          startAngle: 0,
-          endAngle: Math.PI * 2,
-          counterclockwise: false,
-        },
-        { type: "fill" },
-        // Mouth
-        { type: "beginPath" },
-        {
-          type: "arc",
-          x: 100,
-          y: 100,
-          radius: 50,
-          startAngle: 0,
-          endAngle: Math.PI,
-          counterclockwise: false,
-        },
-        { type: "stroke" },
-      ],
-    } as ShapeRenderData,
-
-    // Rotated rectangle
-    {
-      id: "rotated-rect",
-      type: RendererType.SHAPE,
-      x: 50,
-      y: 500,
-      width: 150,
-      height: 100,
-      rotate: 45,
-      style: {
-        fillStyle: "#9b59b6",
-        strokeStyle: "#8e44ad",
-        lineWidth: 2,
-      },
-      shapes: [
-        { type: "fillRect", x: 0, y: 0, width: 150, height: 100 },
-        { type: "strokeRect", x: 0, y: 0, width: 150, height: 100 },
-      ],
-    } as ShapeRenderData,
-
-    // Shape with shadow
-    {
-      id: "shadow-shape",
-      type: RendererType.SHAPE,
-      x: 250,
-      y: 500,
-      width: 150,
-      height: 150,
-      style: {
-        fillStyle: "#16a085",
-        strokeStyle: "#138d75",
-        lineWidth: 2,
-      },
-      shadow: {
-        color: "rgba(0, 0, 0, 0.5)",
-        blur: 10,
-        X: 5,
-        Y: 5,
-      },
-      shapes: [
-        { type: "beginPath" },
-        {
-          type: "arc",
-          x: 75,
-          y: 75,
-          radius: 60,
-          startAngle: 0,
-          endAngle: Math.PI * 2,
-          counterclockwise: false,
-        },
-        { type: "fillAndStroke" },
-      ],
-    } as ShapeRenderData,
-
-    // Complex path with quadratic curves
-    {
-      id: "curve-shape",
-      type: RendererType.SHAPE,
-      x: 450,
-      y: 500,
-      width: 200,
-      height: 150,
-      style: {
-        fillStyle: "#34495e",
-        strokeStyle: "#2c3e50",
-        lineWidth: 3,
-        lineCap: "round",
-        lineJoin: "round",
-      },
-      shapes: [
-        { type: "beginPath" },
-        { type: "moveTo", x: 0, y: 75 },
-        {
-          type: "quadraticCurveTo",
-          cp1x: 50,
-          cp1y: 0,
-          x: 100,
-          y: 75,
-        },
-        {
-          type: "quadraticCurveTo",
-          cp1x: 150,
-          cp1y: 150,
-          x: 200,
-          y: 75,
-        },
-        { type: "stroke" },
-      ],
-    } as ShapeRenderData,
-
-    // Dashed line rectangle
-    {
-      id: "dashed-rect",
-      type: RendererType.SHAPE,
-      x: 50,
-      y: 700,
-      width: 200,
-      height: 150,
-      style: {
-        strokeStyle: "#e74c3c",
-        lineWidth: 4,
-        lineDash: [10, 5],
-        lineDashOffset: 0,
-      },
-      shapes: [
-        { type: "strokeRect", x: 0, y: 0, width: 200, height: 150 },
-      ],
-    } as ShapeRenderData,
-
-    // Multiple shapes in one renderer (same style)
-    {
-      id: "multi-shape",
-      type: RendererType.SHAPE,
-      x: 300,
-      y: 700,
-      width: 300,
-      height: 200,
-      style: {
-        fillStyle: "#95a5a6",
-        strokeStyle: "#7f8c8d",
-        lineWidth: 2,
-      },
-      shapes: [
-        // Background rectangle
-        { type: "fillRect", x: 0, y: 0, width: 300, height: 200 },
-        // Circle
-        { type: "beginPath" },
-        {
-          type: "arc",
-          x: 75,
-          y: 75,
-          radius: 50,
-          startAngle: 0,
-          endAngle: Math.PI * 2,
-          counterclockwise: false,
-        },
-        { type: "fill" },
-        // Square
-        { type: "fillRect", x: 150, y: 25, width: 100, height: 100 },
-        // Triangle
-        { type: "beginPath" },
-        { type: "moveTo", x: 275, y: 25 },
-        { type: "lineTo", x: 300, y: 125 },
-        { type: "lineTo", x: 250, y: 125 },
-        { type: "closePath" },
-        { type: "fill" },
-      ],
-    } as ShapeRenderData,
-  ],
-  output: {
-    type: "png",
-  },
-};
-
-async function main() {
-  try {
-    const renderer = new Renderer(shapeTestSchema);
-    const buffer = await renderer.draw();
-    const outputPath = path.join(__dirname, "output", "shape-test.png");
-    
-    // Ensure output directory exists
-    const outputDir = path.dirname(outputPath);
-    if (!fs.existsSync(outputDir)) {
-      fs.mkdirSync(outputDir, { recursive: true });
-    }
-    
-    fs.writeFileSync(outputPath, buffer);
-    console.log(`Shape test rendered successfully: ${outputPath}`);
-  } catch (error) {
-    console.error("Error rendering shape test:", error);
-    process.exit(1);
-  }
-}
-
-main();