@codehz/draw-call 0.1.0 → 0.1.1

package/canvas-BYrCq8eS.d.mts

@@ -0,0 +1,234 @@
+//#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 LayoutConstraints {
+  minWidth: number;
+  maxWidth: number;
+  minHeight: number;
+  maxHeight: number;
+}
+//#endregion
+//#region src/types/components.d.ts
+type ElementType = "box" | "text" | "image" | "shape" | "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: string | 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";
+}
+type ShapeType = "rect" | "circle" | "ellipse" | "line" | "polygon" | "path";
+interface ShapeProps extends LayoutProps {
+  shape: ShapeType;
+  fill?: Color;
+  stroke?: StrokeProps;
+  shadow?: Shadow;
+  points?: [number, number][];
+  path?: string;
+}
+interface ShapeElement extends ElementBase, ShapeProps {
+  type: "shape";
+}
+interface StackProps extends ContainerLayoutProps {
+  children: Element[];
+  background?: Color;
+  border?: Border;
+  shadow?: Shadow;
+  opacity?: number;
+  clip?: boolean;
+}
+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;
+//#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;
+  render(element: Element): LayoutNode;
+  clear(): void;
+  getContext(): CanvasRenderingContext2D;
+  toDataURL(type?: string, quality?: number): string;
+  toBuffer(type?: "image/png" | "image/jpeg"): Promise<Buffer>;
+}
+/**
+ * 创建适用于浏览器环境的 Canvas
+ *
+ * 在浏览器环境中使用，支持传入已有的 canvas 实例
+ */
+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 };

package/canvas-CkpP3RNK.d.cts

@@ -0,0 +1,234 @@
+//#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 LayoutConstraints {
+  minWidth: number;
+  maxWidth: number;
+  minHeight: number;
+  maxHeight: number;
+}
+//#endregion
+//#region src/types/components.d.ts
+type ElementType = "box" | "text" | "image" | "shape" | "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: string | 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";
+}
+type ShapeType = "rect" | "circle" | "ellipse" | "line" | "polygon" | "path";
+interface ShapeProps extends LayoutProps {
+  shape: ShapeType;
+  fill?: Color;
+  stroke?: StrokeProps;
+  shadow?: Shadow;
+  points?: [number, number][];
+  path?: string;
+}
+interface ShapeElement extends ElementBase, ShapeProps {
+  type: "shape";
+}
+interface StackProps extends ContainerLayoutProps {
+  children: Element[];
+  background?: Color;
+  border?: Border;
+  shadow?: Shadow;
+  opacity?: number;
+  clip?: boolean;
+}
+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;
+//#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;
+  render(element: Element): LayoutNode;
+  clear(): void;
+  getContext(): CanvasRenderingContext2D;
+  toDataURL(type?: string, quality?: number): string;
+  toBuffer(type?: "image/png" | "image/jpeg"): Promise<Buffer>;
+}
+/**
+ * 创建适用于浏览器环境的 Canvas
+ *
+ * 在浏览器环境中使用，支持传入已有的 canvas 实例
+ */
+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 };