@codehz/draw-call 0.5.1 → 0.5.3

package/{node → dist/node}/index.mjs

@@ -1,10 +1,8 @@
 import { DOMMatrix, Path2D, createCanvas as createCanvas$1 } from "@napi-rs/canvas";
-
 //#region src/compat/index.ts
 function createRawCanvas(width, height) {
 	return createCanvas$1(width, height);
 }
-
 //#endregion
 //#region src/types/base.ts
 function linearGradient(angle, ...stops) {
@@ -75,7 +73,6 @@ function normalizeBorderRadius(value) {
 	];
 	return value;
 }
-
 //#endregion
 //#region src/layout/components/box.ts
 /**
@@ -188,7 +185,6 @@ function measureBoxSize(element, ctx, availableWidth, measureChild) {
 		height: typeof element.height === "number" ? element.height : intrinsicHeight
 	};
 }
-
 //#endregion
 //#region src/layout/components/customDraw.ts
 /**
@@ -205,7 +201,6 @@ function measureCustomDrawSize(element, ctx, availableWidth, measureChild) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/layout/components/image.ts
 /**
@@ -231,7 +226,6 @@ function measureImageSize(element, _ctx, _availableWidth) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/layout/components/richtext.ts
 /**
@@ -399,7 +393,6 @@ function wrapRichText(ctx, spans, maxWidth, lineHeightScale = 1.2, elementStyle
 	}];
 	return lines;
 }
-
 //#endregion
 //#region src/layout/components/stack.ts
 /**
@@ -436,7 +429,6 @@ function measureStackSize(element, ctx, availableWidth, measureChild) {
 		height: typeof element.height === "number" ? element.height : intrinsicHeight
 	};
 }
-
 //#endregion
 //#region src/layout/components/svg.ts
 /**
@@ -470,7 +462,6 @@ function measureSvgSize(element, _ctx, _availableWidth) {
 		height: 0
 	};
 }
-
 //#endregion
 //#region src/render/utils/font.ts
 /**
@@ -481,7 +472,6 @@ function measureSvgSize(element, _ctx, _availableWidth) {
 function buildFontString(font) {
 	return `${font.style ?? "normal"} ${font.weight ?? "normal"} ${font.size ?? 16}px ${font.family ?? "sans-serif"}`;
 }
-
 //#endregion
 //#region src/layout/utils/measure.ts
 function createCanvasMeasureContext(ctx) {
@@ -573,7 +563,6 @@ function truncateText(ctx, text, maxWidth, font, ellipsis = "...") {
 		offset
 	};
 }
-
 //#endregion
 //#region src/layout/components/text.ts
 /**
@@ -599,7 +588,6 @@ function measureTextSize(element, ctx, availableWidth) {
 		height: Math.max(height, lineHeightPx)
 	};
 }
-
 //#endregion
 //#region src/layout/components/transform.ts
 /**
@@ -610,7 +598,6 @@ function measureTextSize(element, ctx, availableWidth) {
 function measureTransformSize(element, ctx, availableWidth, measureIntrinsicSize) {
 	return measureIntrinsicSize(element.children, ctx, availableWidth);
 }
-
 //#endregion
 //#region src/layout/components/index.ts
 /**
@@ -632,7 +619,6 @@ function measureIntrinsicSize(element, ctx, availableWidth) {
 		};
 	}
 }
-
 //#endregion
 //#region src/layout/utils/offset.ts
 /**
@@ -645,7 +631,6 @@ function applyOffset(node, dx, dy) {
 	node.layout.contentY += dy;
 	for (const child of node.children) applyOffset(child, dx, dy);
 }
-
 //#endregion
 //#region src/types/layout.ts
 function resolveSize(size, available, auto) {
@@ -660,7 +645,6 @@ function sizeNeedsParent(size) {
 	if (typeof size === "string" && size.endsWith("%")) return true;
 	return false;
 }
-
 //#endregion
 //#region src/layout/engine.ts
 /**
@@ -1078,7 +1062,6 @@ function computeLayoutImpl(element, ctx, constraints, x = 0, y = 0) {
 	}
 	return node;
 }
-
 //#endregion
 //#region src/render/utils/colors.ts
 function isGradientDescriptor$1(color) {
@@ -1114,7 +1097,6 @@ function resolveColor$1(ctx, color, x, y, width, height) {
 	if (isGradientDescriptor$1(color)) return resolveGradient$1(ctx, color, x, y, width, height);
 	return color;
 }
-
 //#endregion
 //#region src/render/utils/shadows.ts
 function applyShadow$1(ctx, shadow) {
@@ -1136,7 +1118,6 @@ function clearShadow$1(ctx) {
 	ctx.shadowBlur = 0;
 	ctx.shadowColor = "transparent";
 }
-
 //#endregion
 //#region src/render/utils/shapes.ts
 function roundRectPath(ctx, x, y, width, height, radius) {
@@ -1153,7 +1134,6 @@ function roundRectPath(ctx, x, y, width, height, radius) {
 	ctx.quadraticCurveTo(x, y, x + tl, y);
 	ctx.closePath();
 }
-
 //#endregion
 //#region src/render/components/box.ts
 function renderBox(ctx, node) {
@@ -1182,7 +1162,6 @@ function renderBox(ctx, node) {
 	}
 	if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = 1;
 }
-
 //#endregion
 //#region src/render/components/ProxiedCanvasContext.ts
 /**
@@ -1300,7 +1279,6 @@ function createProxiedCanvasContext(ctx, baseTransform) {
 		}
 	});
 }
-
 //#endregion
 //#region src/render/components/customDraw.ts
 /**
@@ -1328,7 +1306,6 @@ function renderCustomDraw(ctx, node) {
 	proxyCtx.destroy();
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/components/image.ts
 function renderImage(ctx, node) {
@@ -1414,7 +1391,6 @@ function renderImage(ctx, node) {
 	}
 	if (element.opacity !== void 0 && element.opacity < 1) ctx.globalAlpha = 1;
 }
-
 //#endregion
 //#region src/render/components/richtext.ts
 function renderRichText(ctx, node) {
@@ -1465,7 +1441,6 @@ function renderRichText(ctx, node) {
 		currentY += line.height;
 	}
 }
-
 //#endregion
 //#region src/render/components/svg.ts
 function isGradientDescriptor(color) {
@@ -1737,7 +1712,6 @@ function renderSvg(ctx, node) {
 	for (const child of element.children) renderSvgChild(ctx, child, transform, bounds, baseTransform);
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/components/text.ts
 function renderText(ctx, node) {
@@ -1772,7 +1746,6 @@ function renderText(ctx, node) {
 	}
 	if (element.shadow) clearShadow$1(ctx);
 }
-
 //#endregion
 //#region src/render/components/transform.ts
 /**
@@ -1848,7 +1821,6 @@ function renderTransform(ctx, node) {
 	renderNode(ctx, childNode);
 	ctx.restore();
 }
-
 //#endregion
 //#region src/render/index.ts
 function renderNode(ctx, node) {
@@ -1888,7 +1860,6 @@ function renderNode(ctx, node) {
 			break;
 	}
 }
-
 //#endregion
 //#region src/canvas.ts
 /**
@@ -1958,7 +1929,6 @@ function createCanvas(options) {
 		}
 	};
 }
-
 //#endregion
 //#region src/components/Box.ts
 function Box(props) {
@@ -1967,7 +1937,6 @@ function Box(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/CustomDraw.ts
 function CustomDraw(props) {
@@ -1976,7 +1945,6 @@ function CustomDraw(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Image.ts
 function Image(props) {
@@ -1985,7 +1953,6 @@ function Image(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/RichText.ts
 function RichText(props) {
@@ -1994,7 +1961,6 @@ function RichText(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Stack.ts
 function Stack(props) {
@@ -2003,7 +1969,6 @@ function Stack(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Svg.ts
 function Svg(props) {
@@ -2050,7 +2015,6 @@ const svg = {
 		...props
 	})
 };
-
 //#endregion
 //#region src/components/Text.ts
 function Text(props) {
@@ -2059,7 +2023,6 @@ function Text(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/components/Transform.ts
 function Transform(props) {
@@ -2068,7 +2031,6 @@ function Transform(props) {
 		...props
 	};
 }
-
 //#endregion
 //#region src/layout/utils/print.ts
 /**
@@ -2128,6 +2090,5 @@ function printLayout(node) {
 function layoutToString(node, _indent = "  ") {
 	return printLayoutToString(node, "", true).join("\n");
 }
-
 //#endregion
-export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };
+export { Box, CustomDraw, Image, RichText, Stack, Svg, Text, Transform, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };

package/examples/card.ts

@@ -2,7 +2,7 @@
  * 示例：使用 draw-call 绘制一个卡片
  * 运行: bun examples/card.ts
  */
-import { Box, createCanvas, linearGradient, printLayout, Svg, svg, Text } from "@codehz/draw-call";
+import { Box, createCanvas, linearGradient, printLayout, Svg, svg, Text } from "@/index";
 import { GlobalFonts } from "@napi-rs/canvas";
 import { fileURLToPath } from "bun";
 

package/examples/customdraw-basic.ts

@@ -3,7 +3,7 @@
  * 展示如何使用 CustomDraw 进行简单的自定义绘制
  * 运行: bun examples/customdraw-basic.ts
  */
-import { Box, createCanvas, CustomDraw, printLayout, Text } from "@codehz/draw-call";
+import { Box, createCanvas, CustomDraw, printLayout, Text } from "@/index";
 import { GlobalFonts } from "@napi-rs/canvas";
 import { fileURLToPath } from "bun";
 

package/examples/customdraw.ts

@@ -3,7 +3,7 @@
  * 展示直接调用 Canvas API、Transform 管理和子元素渲染功能
  * 运行: bun examples/customdraw.ts
  */
-import { Box, createCanvas, CustomDraw, printLayout, Text } from "@codehz/draw-call";
+import { Box, createCanvas, CustomDraw, printLayout, Text } from "@/index";
 import { GlobalFonts } from "@napi-rs/canvas";
 import { fileURLToPath } from "bun";
 

package/examples/demo.html

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>draw-call 演示</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+      }
+
+      .container {
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        padding: 40px;
+        max-width: 860px;
+        width: 100%;
+      }
+
+      h1 {
+        margin-bottom: 10px;
+        color: #333;
+        font-size: 28px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 30px;
+        font-size: 14px;
+      }
+
+      .canvas-wrapper {
+        background: #f9f9f9;
+        border-radius: 12px;
+        padding: 20px;
+        border: 1px solid #e0e0e0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 30px;
+        min-height: 420px;
+      }
+
+      canvas {
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      .features {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 15px;
+        margin-top: 30px;
+      }
+
+      .feature-item {
+        background: #f5f5f5;
+        padding: 12px;
+        border-radius: 8px;
+        font-size: 12px;
+        color: #666;
+        border-left: 3px solid #667eea;
+      }
+
+      .feature-item strong {
+        color: #333;
+      }
+
+      .loading {
+        text-align: center;
+        color: #999;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>🎨 draw-call 演示</h1>
+      <p class="subtitle">使用声明式 Canvas 绘图库展示现代 UI 绘制能力</p>
+
+      <div class="canvas-wrapper">
+        <canvas id="canvas"></canvas>
+      </div>
+
+      <div class="features">
+        <div class="feature-item"><strong>📐 Flexbox 布局</strong><br />支持现代化布局引擎</div>
+        <div class="feature-item"><strong>🎨 丰富样式</strong><br />背景、边框、阴影、渐变等</div>
+        <div class="feature-item"><strong>📝 文本排版</strong><br />支持换行、对齐、字体自定义</div>
+        <div class="feature-item"><strong>🎯 声明式 API</strong><br />类似 React 的组件化方式</div>
+        <div class="feature-item"><strong>✨ 高清显示</strong><br />支持高 DPI 设备自适应</div>
+        <div class="feature-item"><strong>🚀 TypeScript</strong><br />完整的类型支持和开发体验</div>
+      </div>
+    </div>
+
+    <script src="demo.ts"></script>
+  </body>
+</html>

package/examples/demo.ts

@@ -2,7 +2,7 @@
  * draw-call 网页演示
  * 展示库的各项功能：逐句布局、样式、文本排版、图片渲染等
  */
-import { Box, createCanvas, Image, linearGradient, Svg, svg, Text } from "@codehz/draw-call";
+import { Box, createCanvas, Image, linearGradient, Svg, svg, Text } from "@/index";
 
 // 创建一个 canvas 并绘制图片内容，返回用于 Image 组件的 canvas
 function createDemoImage(): HTMLCanvasElement {

package/examples/image-smoothing.ts

@@ -1,4 +1,4 @@
-import { Box, createCanvas } from "@codehz/draw-call";
+import { Box, createCanvas } from "@/index";
 
 // 创建 Canvas，禁用图像平滑
 const canvas1 = createCanvas({

package/examples/richtext.ts

@@ -2,7 +2,7 @@
  * 示例：使用 draw-call 的 RichText 组件
  * 运行: bun examples/richtext.ts
  */
-import { Box, createCanvas, RichText, Text } from "@codehz/draw-call";
+import { Box, createCanvas, RichText, Text } from "@/index";
 import { GlobalFonts } from "@napi-rs/canvas";
 import { fileURLToPath } from "bun";
 

package/examples/transform.ts

@@ -3,7 +3,7 @@
  * 展示移动（translate）、旋转（rotate）、放大（scale）等变换效果
  * 运行: bun examples/transform.ts
  */
-import { Box, createCanvas, printLayout, Text, Transform } from "@codehz/draw-call";
+import { Box, createCanvas, printLayout, Text, Transform } from "@/index";
 import { GlobalFonts } from "@napi-rs/canvas";
 import { fileURLToPath } from "bun";
 

package/package.json

@@ -1,47 +1,70 @@
 {
   "name": "@codehz/draw-call",
-  "module": "./node/index.mjs",
+  "version": "0.5.3",
   "type": "module",
+  "main": "./dist/node/index.cjs",
+  "module": "./dist/node/index.mjs",
+  "types": "./dist/node/index.d.mts",
+  "exports": {
+    ".": {
+      "browser": {
+        "types": "./dist/browser/index.d.ts",
+        "import": "./dist/browser/index.js",
+        "require": "./dist/browser/index.cjs"
+      },
+      "bun": {
+        "types": "./dist/node/index.d.mts",
+        "import": "./dist/node/index.mjs"
+      },
+      "types": "./dist/node/index.d.mts",
+      "import": "./dist/node/index.mjs",
+      "require": "./dist/node/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "examples",
+    "README.md",
+    "LICENSE"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/codehz/draw-call.git"
   },
+  "scripts": {
+    "lint": "eslint --ext .ts,.tsx,.js --quiet",
+    "lint:fix": "eslint --ext .ts,.tsx,.js --fix",
+    "format": "prettier --write .",
+    "test": "bun test",
+    "release": "bun scripts/release.ts",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  },
   "devDependencies": {
     "@fontpkg/unifont": "^15.0.1",
-    "@types/bun": "latest",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "eslint": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "husky": "^9.0.0",
-    "lint-staged": "^15.0.0",
-    "prettier": "^3.0.0",
-    "prettier-plugin-organize-imports": "^4.0.0",
-    "tsdown": "^0.20.1"
+    "@types/bun": "^1.3.13",
+    "@typescript-eslint/eslint-plugin": "^8.59.2",
+    "@typescript-eslint/parser": "^8.59.2",
+    "eslint": "^10.3.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.0.2",
+    "prettier": "^3.8.3",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "tsdown": "^0.22.0"
   },
   "peerDependencies": {
-    "typescript": "^5"
+    "typescript": "^6.0.3"
   },
   "optionalDependencies": {
-    "@napi-rs/canvas": "^0.1.88"
-  },
-  "version": "0.5.1",
-  "main": "./node/index.cjs",
-  "types": "./node/index.d.cts",
-  "exports": {
-    ".": {
-      "browser": {
-        "types": "./browser/index.d.ts",
-        "import": "./browser/index.js",
-        "require": "./browser/index.cjs"
-      },
-      "bun": {
-        "types": "./node/index.d.mts",
-        "import": "./node/index.mjs"
-      },
-      "types": "./node/index.d.mts",
-      "import": "./node/index.mjs",
-      "require": "./node/index.cjs"
-    }
+    "@napi-rs/canvas": "^1.0.0"
   }
 }