@codehz/draw-call 0.1.1 → 0.2.0

package/{canvas-CkpP3RNK.d.cts → canvas.d.mts}

@@ -101,6 +101,33 @@ interface ComputedLayout {
   contentWidth: number;
   contentHeight: number;
 }
+interface RichTextSpanSegment {
+  text: string;
+  font: FontProps;
+  color: Color;
+  background: Color;
+  underline: boolean;
+  strikethrough: boolean;
+  width: number;
+  height: number;
+  ascent: number;
+  descent: number;
+  offset: number;
+}
+interface RichTextLine {
+  segments: RichTextSpanSegment[];
+  width: number;
+  height: number;
+  baseline: number;
+}
+interface LayoutNode {
+  element: Element;
+  layout: ComputedLayout;
+  children: LayoutNode[];
+  lines?: string[];
+  lineOffsets?: number[];
+  richLines?: RichTextLine[];
+}
 interface LayoutConstraints {
   minWidth: number;
   maxWidth: number;
@@ -109,7 +136,7 @@ interface LayoutConstraints {
 }
 //#endregion
 //#region src/types/components.d.ts
-type ElementType = "box" | "text" | "image" | "shape" | "stack";
+type ElementType = "box" | "text" | "richtext" | "image" | "svg" | "stack";
 interface ElementBase {
   type: ElementType;
 }
@@ -140,8 +167,29 @@ interface TextProps extends LayoutProps {
 interface TextElement extends ElementBase, TextProps {
   type: "text";
 }
+interface RichTextStyleProps {
+  font?: FontProps;
+  color?: Color;
+  background?: Color;
+  underline?: boolean;
+  strikethrough?: boolean;
+}
+interface RichTextSpan extends RichTextStyleProps {
+  text: string;
+}
+interface RichTextProps extends LayoutProps, RichTextStyleProps {
+  spans: RichTextSpan[];
+  lineHeight?: number;
+  align?: "left" | "center" | "right";
+  verticalAlign?: "top" | "middle" | "bottom";
+  maxLines?: number;
+  ellipsis?: boolean;
+}
+interface RichTextElement extends ElementBase, RichTextProps {
+  type: "richtext";
+}
 interface ImageProps extends LayoutProps {
-  src: string | ImageBitmap | CanvasImageSource;
+  src: ImageBitmap | CanvasImageSource;
   fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
   position?: {
     x?: "left" | "center" | "right" | number;
@@ -154,50 +202,112 @@ interface ImageProps extends LayoutProps {
 interface ImageElement extends ElementBase, ImageProps {
   type: "image";
 }
-type ShapeType = "rect" | "circle" | "ellipse" | "line" | "polygon" | "path";
-interface ShapeProps extends LayoutProps {
-  shape: ShapeType;
-  fill?: Color;
+interface SvgStyleProps {
+  fill?: Color | "none";
   stroke?: StrokeProps;
+  opacity?: number;
+}
+interface SvgTransformProps {
+  transform?: {
+    translate?: [number, number];
+    rotate?: number | [number, number, number];
+    scale?: number | [number, number];
+    skewX?: number;
+    skewY?: number;
+    matrix?: [number, number, number, number, number, number];
+  };
+}
+interface SvgRectChild extends SvgStyleProps, SvgTransformProps {
+  type: "rect";
+  x?: number;
+  y?: number;
+  width: number;
+  height: number;
+  rx?: number;
+  ry?: number;
+}
+interface SvgCircleChild extends SvgStyleProps, SvgTransformProps {
+  type: "circle";
+  cx: number;
+  cy: number;
+  r: number;
+}
+interface SvgEllipseChild extends SvgStyleProps, SvgTransformProps {
+  type: "ellipse";
+  cx: number;
+  cy: number;
+  rx: number;
+  ry: number;
+}
+interface SvgLineChild extends SvgStyleProps, SvgTransformProps {
+  type: "line";
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+interface SvgPolylineChild extends SvgStyleProps, SvgTransformProps {
+  type: "polyline";
+  points: [number, number][];
+}
+interface SvgPolygonChild extends SvgStyleProps, SvgTransformProps {
+  type: "polygon";
+  points: [number, number][];
+}
+interface SvgPathChild extends SvgStyleProps, SvgTransformProps {
+  type: "path";
+  d: string;
+}
+interface SvgTextChild extends SvgStyleProps, SvgTransformProps {
+  type: "text";
+  x?: number;
+  y?: number;
+  content: string;
+  font?: FontProps;
+  textAnchor?: "start" | "middle" | "end";
+  dominantBaseline?: "auto" | "middle" | "hanging";
+}
+interface SvgGroupChild extends SvgStyleProps, SvgTransformProps {
+  type: "g";
+  children: SvgChild[];
+}
+type SvgChild = SvgRectChild | SvgCircleChild | SvgEllipseChild | SvgLineChild | SvgPolylineChild | SvgPolygonChild | SvgPathChild | SvgTextChild | SvgGroupChild;
+type SvgAlign = "none" | "xMinYMin" | "xMidYMin" | "xMaxYMin" | "xMinYMid" | "xMidYMid" | "xMaxYMid" | "xMinYMax" | "xMidYMax" | "xMaxYMax";
+interface SvgProps extends LayoutProps {
+  viewBox?: {
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+  };
+  preserveAspectRatio?: {
+    align?: SvgAlign;
+    meetOrSlice?: "meet" | "slice";
+  };
+  children: SvgChild[];
+  background?: Color;
   shadow?: Shadow;
-  points?: [number, number][];
-  path?: string;
 }
-interface ShapeElement extends ElementBase, ShapeProps {
-  type: "shape";
+interface SvgElement extends ElementBase, SvgProps {
+  type: "svg";
 }
-interface StackProps extends ContainerLayoutProps {
+type StackAlign = "start" | "end" | "center";
+interface StackProps extends LayoutProps {
   children: Element[];
   background?: Color;
   border?: Border;
   shadow?: Shadow;
   opacity?: number;
   clip?: boolean;
+  /** 水平对齐方式（默认 start） */
+  align?: StackAlign;
+  /** 垂直对齐方式（默认 start） */
+  justify?: StackAlign;
 }
 interface StackElement extends ElementBase, StackProps {
   type: "stack";
 }
-type Element = BoxElement | TextElement | ImageElement | ShapeElement | StackElement;
-//#endregion
-//#region src/layout/measure.d.ts
-interface MeasureContext {
-  measureText(text: string, font: FontProps): {
-    width: number;
-    height: number;
-    offset: number;
-  };
-}
-declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
-//#endregion
-//#region src/layout/engine.d.ts
-interface LayoutNode {
-  element: Element;
-  layout: ComputedLayout;
-  children: LayoutNode[];
-  lines?: string[];
-  lineOffsets?: number[];
-}
-declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
+type Element = BoxElement | TextElement | RichTextElement | ImageElement | SvgElement | StackElement;
 //#endregion
 //#region src/canvas.d.ts
 interface CanvasOptions {
@@ -218,11 +328,12 @@ interface DrawCallCanvas {
   readonly width: number;
   readonly height: number;
   readonly pixelRatio: number;
+  readonly canvas: HTMLCanvasElement;
   render(element: Element): LayoutNode;
   clear(): void;
   getContext(): CanvasRenderingContext2D;
   toDataURL(type?: string, quality?: number): string;
-  toBuffer(type?: "image/png" | "image/jpeg"): Promise<Buffer>;
+  toBuffer(type?: "image/png" | "image/jpeg"): Buffer;
 }
 /**
  * 创建适用于浏览器环境的 Canvas
@@ -231,4 +342,4 @@ interface DrawCallCanvas {
  */
 declare function createCanvas(options: CanvasOptions): DrawCallCanvas;
 //#endregion
-export { Shadow as A, Bounds as C, GradientDescriptor as D, FontProps as E, radialGradient as F, Spacing as M, StrokeProps as N, LinearGradientDescriptor as O, linearGradient as P, Border as S, ColorStop as T, AlignSelf as _, LayoutNode as a, JustifyContent as b, createCanvasMeasureContext as c, Element as d, StackElement as f, AlignItems as g, TextProps as h, createCanvas as i, Size as j, RadialGradientDescriptor as k, BoxElement as l, TextElement as m, DrawCallCanvas as n, computeLayout as o, StackProps as p, LayoutSize as r, MeasureContext as s, CanvasOptions as t, BoxProps as u, ContainerLayoutProps as v, Color as w, LayoutProps as x, FlexDirection as y };
+export { linearGradient as $, SvgTransformProps as A, LayoutProps as B, SvgPathChild as C, SvgRectChild as D, SvgProps as E, ContainerLayoutProps as F, FontProps as G, Bounds as H, FlexDirection as I, RadialGradientDescriptor as J, GradientDescriptor as K, JustifyContent as L, TextProps as M, AlignItems as N, SvgStyleProps as O, AlignSelf as P, StrokeProps as Q, LayoutConstraints as R, SvgLineChild as S, SvgPolylineChild as T, Color as U, Border as V, ColorStop as W, Size as X, Shadow as Y, Spacing as Z, SvgChild as _, BoxElement as a, SvgEllipseChild as b, ImageElement as c, RichTextProps as d, radialGradient as et, RichTextSpan as f, SvgAlign as g, StackProps as h, createCanvas as i, TextElement as j, SvgTextChild as k, ImageProps as l, StackElement as m, DrawCallCanvas as n, BoxProps as o, StackAlign as p, LinearGradientDescriptor as q, LayoutSize as r, Element as s, CanvasOptions as t, RichTextElement as u, SvgCircleChild as v, SvgPolygonChild as w, SvgGroupChild as x, SvgElement as y, LayoutNode as z };

package/examples/card.ts

@@ -0,0 +1,155 @@
+/**
+ * 示例：使用 draw-call 绘制一个卡片
+ * 运行: bun examples/card.ts
+ */
+import { Box, linearGradient, printLayout, Svg, svg, Text } from "@codehz/draw-call";
+import { createNodeCanvas } from "@codehz/draw-call/node";
+import { GlobalFonts } from "@napi-rs/canvas";
+import { fileURLToPath } from "bun";
+
+GlobalFonts.registerFromPath(fileURLToPath(import.meta.resolve("@fontpkg/unifont/unifont-15.0.01.ttf")), "unifont");
+
+const canvas = createNodeCanvas({
+  width: 400,
+  height: 320,
+  pixelRatio: 2,
+});
+
+// 绘制背景
+const layout = canvas.render(
+  Box({
+    width: "fill",
+    height: "fill",
+    background: "#f0f2f5",
+    padding: 20,
+    justify: "center",
+    align: "center",
+    children: [
+      // 卡片
+      Box({
+        width: 360,
+        background: "#ffffff",
+        border: { radius: 12 },
+        shadow: { offsetY: 4, blur: 16, color: "rgba(0,0,0,0.12)" },
+        direction: "column",
+        clip: true,
+        children: [
+          // 卡片头部
+          Box({
+            height: 100,
+            background: linearGradient(135, "#667eea", "#764ba2"),
+            padding: 20,
+            justify: "space-between",
+            align: "end",
+            children: [
+              // SVG 图标演示
+              Svg({
+                width: 48,
+                height: 48,
+                viewBox: { width: 24, height: 24 },
+                children: [
+                  // 绘制一个简单的画笔图标
+                  svg.circle({ cx: 12, cy: 12, r: 10, fill: "rgba(255,255,255,0.2)" }),
+                  svg.path({
+                    d: "M4 20h4l10.5-10.5a1.5 1.5 0 0 0-4-4L4 16v4z",
+                    fill: "#ffffff",
+                  }),
+                  svg.line({
+                    x1: 13.5,
+                    y1: 6.5,
+                    x2: 17.5,
+                    y2: 10.5,
+                    stroke: { color: "#ffffff", width: 1.5 },
+                  }),
+                ],
+              }),
+              Text({
+                content: "draw-call",
+                font: { size: 28, weight: "bold", family: "unifont" },
+                color: "#ffffff",
+                shadow: {
+                  offsetX: 1,
+                  offsetY: 1,
+                  blur: 2,
+                  color: "rgba(0,0,0,0.3)",
+                },
+              }),
+            ],
+          }),
+          // 卡片内容
+          Box({
+            padding: 20,
+            direction: "column",
+            gap: 12,
+            children: [
+              Text({
+                content: "声明式 Canvas 绘图",
+                font: { size: 18, weight: "bold", family: "unifont" },
+                color: "#333333",
+              }),
+              Text({
+                content: "使用类似 UI 框架的方式来绘制 Canvas 内容，支持 Flexbox 布局、文本自动换行等特性。",
+                font: { size: 14, family: "unifont" },
+                color: "#666666",
+                lineHeight: 1.6,
+                wrap: true,
+              }),
+              // 标签
+              Box({
+                direction: "row",
+                gap: 8,
+                children: [
+                  Box({
+                    padding: { left: 10, right: 10, top: 4, bottom: 4 },
+                    background: "#e8f4ff",
+                    border: { radius: 4 },
+                    children: [
+                      Text({
+                        content: "Canvas",
+                        font: { size: 12, family: "unifont" },
+                        color: "#1890ff",
+                      }),
+                    ],
+                  }),
+                  Box({
+                    padding: { left: 10, right: 10, top: 4, bottom: 4 },
+                    background: "#f6ffed",
+                    border: { radius: 4 },
+                    children: [
+                      Text({
+                        content: "TypeScript",
+                        font: { size: 12, family: "unifont" },
+                        color: "#52c41a",
+                      }),
+                    ],
+                  }),
+                  Box({
+                    padding: { left: 10, right: 10, top: 4, bottom: 4 },
+                    background: "#fff7e6",
+                    border: { radius: 4 },
+                    children: [
+                      Text({
+                        content: "声明式",
+                        font: { size: 12, family: "unifont" },
+                        color: "#fa8c16",
+                      }),
+                    ],
+                  }),
+                ],
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  })
+);
+
+// 保存到文件
+const buffer = await canvas.toBuffer("image/png");
+await Bun.write("examples/card.png", buffer);
+console.log("Card saved to examples/card.png");
+
+// 美观打印布局树
+console.log("\n=== Layout Tree ===");
+printLayout(layout);