@codehz/draw-call 0.1.0 → 0.1.2

package/canvas.d.cts

@@ -0,0 +1,304 @@
+//#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/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 LayoutNode {
+  element: Element;
+  layout: ComputedLayout;
+  children: LayoutNode[];
+  lines?: string[];
+  lineOffsets?: number[];
+}
+interface LayoutConstraints {
+  minWidth: number;
+  maxWidth: number;
+  minHeight: number;
+  maxHeight: number;
+}
+//#endregion
+//#region src/types/components.d.ts
+type ElementType = "box" | "text" | "image" | "svg" | "stack";
+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 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];
+    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";
+}
+type Element = BoxElement | TextElement | ImageElement | SvgElement | StackElement;
+//#endregion
+//#region src/canvas.d.ts
+interface CanvasOptions {
+  width: number;
+  height: number;
+  pixelRatio?: number;
+  canvas?: {
+    getContext(type: "2d"): CanvasRenderingContext2D | null;
+    width: number;
+    height: number;
+  };
+}
+interface LayoutSize {
+  width: number;
+  height: number;
+}
+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"): Buffer;
+}
+/**
+ * 创建适用于浏览器环境的 Canvas
+ *
+ * 在浏览器环境中使用，支持传入已有的 canvas 实例
+ */
+declare function createCanvas(options: CanvasOptions): DrawCallCanvas;
+//#endregion
+export { AlignItems as A, Color as B, SvgProps as C, SvgTransformProps as D, SvgTextChild as E, LayoutConstraints as F, RadialGradientDescriptor as G, FontProps as H, LayoutNode as I, Spacing as J, Shadow as K, LayoutProps as L, ContainerLayoutProps as M, FlexDirection as N, TextElement as O, JustifyContent as P, Border as R, SvgPolylineChild as S, SvgStyleProps as T, GradientDescriptor as U, ColorStop as V, LinearGradientDescriptor as W, linearGradient as X, StrokeProps as Y, radialGradient as Z, SvgEllipseChild as _, BoxElement as a, SvgPathChild as b, ImageElement as c, StackElement as d, StackProps as f, SvgElement as g, SvgCircleChild as h, createCanvas as i, AlignSelf as j, TextProps as k, ImageProps as l, SvgChild as m, DrawCallCanvas as n, BoxProps as o, SvgAlign as p, Size as q, LayoutSize as r, Element as s, CanvasOptions as t, StackAlign as u, SvgGroupChild as v, SvgRectChild as w, SvgPolygonChild as x, SvgLineChild as y, Bounds as z };

package/canvas.d.mts

@@ -0,0 +1,304 @@
+//#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/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 LayoutNode {
+  element: Element;
+  layout: ComputedLayout;
+  children: LayoutNode[];
+  lines?: string[];
+  lineOffsets?: number[];
+}
+interface LayoutConstraints {
+  minWidth: number;
+  maxWidth: number;
+  minHeight: number;
+  maxHeight: number;
+}
+//#endregion
+//#region src/types/components.d.ts
+type ElementType = "box" | "text" | "image" | "svg" | "stack";
+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 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];
+    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";
+}
+type Element = BoxElement | TextElement | ImageElement | SvgElement | StackElement;
+//#endregion
+//#region src/canvas.d.ts
+interface CanvasOptions {
+  width: number;
+  height: number;
+  pixelRatio?: number;
+  canvas?: {
+    getContext(type: "2d"): CanvasRenderingContext2D | null;
+    width: number;
+    height: number;
+  };
+}
+interface LayoutSize {
+  width: number;
+  height: number;
+}
+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"): Buffer;
+}
+/**
+ * 创建适用于浏览器环境的 Canvas
+ *
+ * 在浏览器环境中使用，支持传入已有的 canvas 实例
+ */
+declare function createCanvas(options: CanvasOptions): DrawCallCanvas;
+//#endregion
+export { AlignItems as A, Color as B, SvgProps as C, SvgTransformProps as D, SvgTextChild as E, LayoutConstraints as F, RadialGradientDescriptor as G, FontProps as H, LayoutNode as I, Spacing as J, Shadow as K, LayoutProps as L, ContainerLayoutProps as M, FlexDirection as N, TextElement as O, JustifyContent as P, Border as R, SvgPolylineChild as S, SvgStyleProps as T, GradientDescriptor as U, ColorStop as V, LinearGradientDescriptor as W, linearGradient as X, StrokeProps as Y, radialGradient as Z, SvgEllipseChild as _, BoxElement as a, SvgPathChild as b, ImageElement as c, StackElement as d, StackProps as f, SvgElement as g, SvgCircleChild as h, createCanvas as i, AlignSelf as j, TextProps as k, ImageProps as l, SvgChild as m, DrawCallCanvas as n, BoxProps as o, SvgAlign as p, Size as q, LayoutSize as r, Element as s, CanvasOptions as t, StackAlign as u, SvgGroupChild as v, SvgRectChild as w, SvgPolygonChild as x, SvgLineChild as y, Bounds as z };