declare-render 1.0.2 → 1.0.4

package/examples/arrow-test.ts

@@ -0,0 +1,252 @@
+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

@@ -0,0 +1,411 @@
+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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "declare-render",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "You can declare canvas shapes by JSON format.",
   "main": "index.js",
   "keywords": [
@@ -23,6 +23,10 @@
   },
   "type": "module",
   "scripts": {
-    "rebuild:canvas": "pnpm rebuild canvas"
+    "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"
   }
 }

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

@@ -1,9 +1,16 @@
-import { ContainerRenderData } from "./container-renderer";
-import { ImgRenderData } from "./img-renderer";
-import { TextRenderData } from "./text-renderer/types";
+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 };