@codehz/draw-call 0.5.1 → 0.5.3

package/dist/browser/index.d.ts

@@ -0,0 +1,454 @@
+import { Canvas } from "@napi-rs/canvas";
+
+//#region src/types/base.d.ts
+type Size = number | `${number}%` | "auto" | "fill";
+interface ColorStop {
+  offset: number;
+  color: string;
+}
+interface LinearGradientDescriptor {
+  type: "linear-gradient";
+  angle: number;
+  stops: ColorStop[];
+}
+interface RadialGradientDescriptor {
+  type: "radial-gradient";
+  startX?: number;
+  startY?: number;
+  startRadius?: number;
+  endX?: number;
+  endY?: number;
+  endRadius?: number;
+  stops: ColorStop[];
+}
+type GradientDescriptor = LinearGradientDescriptor | RadialGradientDescriptor;
+type Color = string | CanvasGradient | CanvasPattern | GradientDescriptor;
+declare function linearGradient(angle: number, ...stops: (string | [number, string])[]): LinearGradientDescriptor;
+declare function radialGradient(options: {
+  startX?: number;
+  startY?: number;
+  startRadius?: number;
+  endX?: number;
+  endY?: number;
+  endRadius?: number;
+}, ...stops: (string | [number, string])[]): RadialGradientDescriptor;
+interface Spacing {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+interface Border {
+  width?: number;
+  color?: Color;
+  radius?: number | [number, number, number, number];
+}
+interface Shadow {
+  offsetX?: number;
+  offsetY?: number;
+  blur?: number;
+  color?: Color;
+}
+interface FontProps {
+  family?: string;
+  size?: number;
+  weight?: number | "normal" | "bold";
+  style?: "normal" | "italic";
+}
+interface StrokeProps {
+  color: Color;
+  width: number;
+  dash?: number[];
+  cap?: "butt" | "round" | "square";
+  join?: "miter" | "round" | "bevel";
+}
+interface Bounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+//#endregion
+//#region src/layout/utils/measure.d.ts
+interface MeasureTextResult {
+  width: number;
+  height: number;
+  offset: number;
+  ascent: number;
+  descent: number;
+}
+interface MeasureContext {
+  measureText(text: string, font: FontProps): MeasureTextResult;
+}
+declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
+//#endregion
+//#region src/types/layout.d.ts
+type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+type JustifyContent = "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly";
+type AlignItems = "start" | "end" | "center" | "stretch" | "baseline";
+type AlignSelf = "auto" | AlignItems;
+interface LayoutProps {
+  width?: Size;
+  height?: Size;
+  minWidth?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  margin?: number | Spacing;
+  padding?: number | Spacing;
+  flex?: number;
+  alignSelf?: AlignSelf;
+}
+interface ContainerLayoutProps extends LayoutProps {
+  direction?: FlexDirection;
+  justify?: JustifyContent;
+  align?: AlignItems;
+  gap?: number;
+  wrap?: boolean;
+}
+interface ComputedLayout {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  contentX: number;
+  contentY: number;
+  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;
+  minHeight: number;
+  maxHeight: number;
+}
+//#endregion
+//#region src/types/components.d.ts
+type ElementType = "box" | "text" | "richtext" | "image" | "svg" | "stack" | "transform" | "customdraw";
+interface ProxiedCanvasContextOptions {
+  inner?: () => void;
+  width: number;
+  height: number;
+}
+interface ElementBase {
+  type: ElementType;
+}
+interface BoxProps extends ContainerLayoutProps {
+  background?: Color;
+  border?: Border;
+  shadow?: Shadow;
+  opacity?: number;
+  clip?: boolean;
+  children?: Element[];
+}
+interface BoxElement extends ElementBase, BoxProps {
+  type: "box";
+}
+interface TextProps extends LayoutProps {
+  content: string;
+  font?: FontProps;
+  color?: Color;
+  align?: "left" | "center" | "right";
+  verticalAlign?: "top" | "middle" | "bottom";
+  lineHeight?: number;
+  maxLines?: number;
+  ellipsis?: boolean;
+  wrap?: boolean;
+  shadow?: Shadow;
+  stroke?: StrokeProps;
+}
+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: ImageBitmap | CanvasImageSource;
+  fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+  position?: {
+    x?: "left" | "center" | "right" | number;
+    y?: "top" | "center" | "bottom" | number;
+  };
+  border?: Border;
+  shadow?: Shadow;
+  opacity?: number;
+}
+interface ImageElement extends ElementBase, ImageProps {
+  type: "image";
+}
+interface SvgStyleProps {
+  fill?: Color | "none";
+  stroke?: StrokeProps;
+  opacity?: number;
+}
+interface SvgTransformProps {
+  transform?: {
+    translate?: [number, number]; /** 旋转角度（弧度）或 [angle(弧度), cx, cy](绕点旋转) */
+    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;
+}
+interface SvgElement extends ElementBase, SvgProps {
+  type: "svg";
+}
+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";
+}
+interface TransformSimpleObject {
+  translate?: [number, number];
+  /** 旋转角度（弧度）或 [angle(弧度), cx, cy](绕点旋转) */
+  rotate?: number | [number, number, number];
+  scale?: number | [number, number];
+  /** 水平偏移角度（弧度） */
+  skewX?: number;
+  /** 垂直偏移角度（弧度） */
+  skewY?: number;
+}
+interface DOMMatrix2DInit {
+  a?: number;
+  b?: number;
+  c?: number;
+  d?: number;
+  e?: number;
+  f?: number;
+}
+type TransformValue = TransformSimpleObject | DOMMatrix2DInit | [number, number, number, number, number, number];
+interface TransformProps {
+  children: Element;
+  /** 变换值（rotate/skew 使用弧度） */
+  transform?: TransformValue;
+  /** 变换原点，默认为 [0, 0]（左上角） */
+  transformOrigin?: [number | string, number | string];
+}
+interface TransformElement extends ElementBase, TransformProps {
+  type: "transform";
+}
+interface CustomDrawProps extends LayoutProps {
+  draw: (ctx: CanvasRenderingContext2D, options: ProxiedCanvasContextOptions) => void;
+  children?: Element;
+}
+interface CustomDrawElement extends ElementBase, CustomDrawProps {
+  type: "customdraw";
+}
+type LayoutElement = BoxElement | TextElement | RichTextElement | ImageElement | SvgElement | StackElement | CustomDrawElement;
+type Element = LayoutElement | TransformElement;
+//#endregion
+//#region src/canvas.d.ts
+interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
+  width: number;
+  height: number;
+  pixelRatio?: number;
+  /** 根据内容调整画布大小 */
+  fitContent?: boolean;
+  updateStyles?: boolean;
+  imageSmoothingEnabled?: boolean;
+  imageSmoothingQuality?: "low" | "medium" | "high";
+  canvas?: T;
+}
+interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement> {
+  readonly width: number;
+  readonly height: number;
+  readonly pixelRatio: number;
+  readonly canvas: T;
+  render(element: LayoutElement): LayoutNode;
+  clear(): void;
+  getContext(): CanvasRenderingContext2D;
+  toDataURL(type?: string, quality?: number): string;
+  toBuffer(type?: "image/png" | "image/jpeg"): Buffer;
+}
+/**
+ * 创建适用于浏览器环境的 Canvas
+ *
+ * 在浏览器环境中使用，支持传入已有的 canvas 实例
+ */
+declare function createCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement>(options: CanvasOptions<T>): DrawCallCanvas<T>;
+//#endregion
+//#region src/components/Box.d.ts
+declare function Box(props: BoxProps): BoxElement;
+//#endregion
+//#region src/components/CustomDraw.d.ts
+declare function CustomDraw(props: CustomDrawProps): CustomDrawElement;
+//#endregion
+//#region src/components/Image.d.ts
+declare function Image(props: ImageProps): ImageElement;
+//#endregion
+//#region src/components/RichText.d.ts
+declare function RichText(props: RichTextProps): RichTextElement;
+//#endregion
+//#region src/components/Stack.d.ts
+declare function Stack(props: StackProps): StackElement;
+//#endregion
+//#region src/components/Svg.d.ts
+declare function Svg(props: SvgProps): SvgElement;
+declare const svg: {
+  rect: (props: Omit<SvgRectChild, "type">) => SvgRectChild;
+  circle: (props: Omit<SvgCircleChild, "type">) => SvgCircleChild;
+  ellipse: (props: Omit<SvgEllipseChild, "type">) => SvgEllipseChild;
+  line: (props: Omit<SvgLineChild, "type">) => SvgLineChild;
+  polyline: (props: Omit<SvgPolylineChild, "type">) => SvgPolylineChild;
+  polygon: (props: Omit<SvgPolygonChild, "type">) => SvgPolygonChild;
+  path: (props: Omit<SvgPathChild, "type">) => SvgPathChild;
+  text: (props: Omit<SvgTextChild, "type">) => SvgTextChild;
+  g: (props: Omit<SvgGroupChild, "type">) => SvgGroupChild;
+};
+//#endregion
+//#region src/components/Text.d.ts
+declare function Text(props: TextProps): TextElement;
+//#endregion
+//#region src/components/Transform.d.ts
+declare function Transform(props: TransformProps): TransformElement;
+//#endregion
+//#region src/layout/engine.d.ts
+/**
+ * 布局计算主函数
+ * 内部使用 Element 类型以支持 Transform，外部通过 LayoutElement 约束类型
+ */
+declare function computeLayout(element: LayoutElement, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
+//#endregion
+//#region src/layout/utils/print.d.ts
+/**
+ * 打印 LayoutNode 树结构到控制台
+ */
+declare function printLayout(node: LayoutNode): void;
+/**
+ * 将 LayoutNode 转换为美观的字符串
+ * @param node LayoutNode 根节点
+ * @param indent 缩进字符串，默认为两个空格
+ * @returns 格式化的字符串
+ */
+declare function layoutToString(node: LayoutNode, _indent?: string): string;
+//#endregion
+export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, CustomDraw, type CustomDrawElement, type CustomDrawProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutElement, type LayoutNode, type LayoutProps, type LinearGradientDescriptor, type MeasureContext, type ProxiedCanvasContextOptions, type RadialGradientDescriptor, RichText, type RichTextElement, type RichTextProps, type RichTextSpan, type Shadow, type Size, type Spacing, Stack, type StackAlign, type StackElement, type StackProps, type StrokeProps, Svg, type SvgAlign, type SvgChild, type SvgCircleChild, type SvgElement, type SvgEllipseChild, type SvgGroupChild, type SvgLineChild, type SvgPathChild, type SvgPolygonChild, type SvgPolylineChild, type SvgProps, type SvgRectChild, type SvgStyleProps, type SvgTextChild, type SvgTransformProps, Text, type TextElement, type TextProps, Transform, type TransformElement, type TransformProps, computeLayout, createCanvas, createCanvasMeasureContext, layoutToString, linearGradient, printLayout, radialGradient, svg };