@codehz/draw-call 0.4.5 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/browser/index.cjs +10 -1
  2. package/browser/index.d.cts +3 -6
  3. package/browser/index.d.ts +3 -6
  4. package/browser/index.js +10 -1
  5. package/examples/demo.ts +0 -5
  6. package/node/index.cjs +10 -1
  7. package/node/index.d.cts +3 -6
  8. package/node/index.d.mts +3 -6
  9. package/node/index.mjs +10 -1
  10. package/package.json +1 -1
package/browser/index.cjs CHANGED
@@ -1833,8 +1833,17 @@ function renderNode(ctx, node) {
1833
1833
  function createCanvas(options) {
1834
1834
  const { width, height, pixelRatio = 1 } = options;
1835
1835
  const canvas = options.canvas ?? createRawCanvas(width * pixelRatio, height * pixelRatio);
1836
+ if (options.canvas) {
1837
+ canvas.width = width * pixelRatio;
1838
+ canvas.height = height * pixelRatio;
1839
+ if ("style" in canvas && options.updateStyles !== false) {
1840
+ canvas.style.width = `${width}px`;
1841
+ canvas.style.height = `${height}px`;
1842
+ }
1843
+ }
1836
1844
  const ctx = canvas.getContext("2d");
1837
1845
  if (!ctx) throw new Error("Failed to get 2d context");
1846
+ ctx.resetTransform();
1838
1847
  if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
1839
1848
  if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
1840
1849
  if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
@@ -1857,7 +1866,7 @@ function createCanvas(options) {
1857
1866
  if (canvas.width !== contentWidth * pixelRatio || canvas.height !== contentHeight * pixelRatio) {
1858
1867
  canvas.width = contentWidth * pixelRatio;
1859
1868
  canvas.height = contentHeight * pixelRatio;
1860
- if ("style" in canvas) {
1869
+ if ("style" in canvas && options.updateStyles !== false) {
1861
1870
  canvas.style.width = `${contentWidth}px`;
1862
1871
  canvas.style.height = `${contentHeight}px`;
1863
1872
  }
package/browser/index.d.cts CHANGED
@@ -916,15 +916,12 @@ interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas =
916
916
  pixelRatio?: number;
917
917
  /** 根据内容调整画布大小 */
918
918
  fitContent?: boolean;
919
+ updateStyles?: boolean;
919
920
  imageSmoothingEnabled?: boolean;
920
921
  imageSmoothingQuality?: "low" | "medium" | "high";
921
922
  canvas?: T;
922
923
  }
923
- interface LayoutSize {
924
- width: number;
925
- height: number;
926
- }
927
- interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
924
+ interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement> {
928
925
  readonly width: number;
929
926
  readonly height: number;
930
927
  readonly pixelRatio: number;
@@ -993,4 +990,4 @@ declare function printLayout(node: LayoutNode): void;
993
990
  */
994
991
  declare function layoutToString(node: LayoutNode, _indent?: string): string;
995
992
  //#endregion
996
- 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 LayoutNode, type LayoutProps, type LayoutSize, 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 };
993
+ 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 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 };
package/browser/index.d.ts CHANGED
@@ -916,15 +916,12 @@ interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas =
916
916
  pixelRatio?: number;
917
917
  /** 根据内容调整画布大小 */
918
918
  fitContent?: boolean;
919
+ updateStyles?: boolean;
919
920
  imageSmoothingEnabled?: boolean;
920
921
  imageSmoothingQuality?: "low" | "medium" | "high";
921
922
  canvas?: T;
922
923
  }
923
- interface LayoutSize {
924
- width: number;
925
- height: number;
926
- }
927
- interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
924
+ interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement> {
928
925
  readonly width: number;
929
926
  readonly height: number;
930
927
  readonly pixelRatio: number;
@@ -993,4 +990,4 @@ declare function printLayout(node: LayoutNode): void;
993
990
  */
994
991
  declare function layoutToString(node: LayoutNode, _indent?: string): string;
995
992
  //#endregion
996
- 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 LayoutNode, type LayoutProps, type LayoutSize, 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 };
993
+ 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 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 };
package/browser/index.js CHANGED
@@ -1832,8 +1832,17 @@ function renderNode(ctx, node) {
1832
1832
  function createCanvas(options) {
1833
1833
  const { width, height, pixelRatio = 1 } = options;
1834
1834
  const canvas = options.canvas ?? createRawCanvas(width * pixelRatio, height * pixelRatio);
1835
+ if (options.canvas) {
1836
+ canvas.width = width * pixelRatio;
1837
+ canvas.height = height * pixelRatio;
1838
+ if ("style" in canvas && options.updateStyles !== false) {
1839
+ canvas.style.width = `${width}px`;
1840
+ canvas.style.height = `${height}px`;
1841
+ }
1842
+ }
1835
1843
  const ctx = canvas.getContext("2d");
1836
1844
  if (!ctx) throw new Error("Failed to get 2d context");
1845
+ ctx.resetTransform();
1837
1846
  if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
1838
1847
  if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
1839
1848
  if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
@@ -1856,7 +1865,7 @@ function createCanvas(options) {
1856
1865
  if (canvas.width !== contentWidth * pixelRatio || canvas.height !== contentHeight * pixelRatio) {
1857
1866
  canvas.width = contentWidth * pixelRatio;
1858
1867
  canvas.height = contentHeight * pixelRatio;
1859
- if ("style" in canvas) {
1868
+ if ("style" in canvas && options.updateStyles !== false) {
1860
1869
  canvas.style.width = `${contentWidth}px`;
1861
1870
  canvas.style.height = `${contentHeight}px`;
1862
1871
  }
package/examples/demo.ts CHANGED
@@ -40,11 +40,6 @@ const dpr = window.devicePixelRatio || 1;
40
40
  const width = 720;
41
41
  const height = 600;
42
42
 
43
- canvasEl.width = width * dpr;
44
- canvasEl.height = height * dpr;
45
- canvasEl.style.width = `${width}px`;
46
- canvasEl.style.height = `${height}px`;
47
-
48
43
  // 创建 Canvas 实例
49
44
  const canvas = createCanvas({
50
45
  width,
package/node/index.cjs CHANGED
@@ -1829,8 +1829,17 @@ function renderNode(ctx, node) {
1829
1829
  function createCanvas(options) {
1830
1830
  const { width, height, pixelRatio = 1 } = options;
1831
1831
  const canvas = options.canvas ?? createRawCanvas(width * pixelRatio, height * pixelRatio);
1832
+ if (options.canvas) {
1833
+ canvas.width = width * pixelRatio;
1834
+ canvas.height = height * pixelRatio;
1835
+ if ("style" in canvas && options.updateStyles !== false) {
1836
+ canvas.style.width = `${width}px`;
1837
+ canvas.style.height = `${height}px`;
1838
+ }
1839
+ }
1832
1840
  const ctx = canvas.getContext("2d");
1833
1841
  if (!ctx) throw new Error("Failed to get 2d context");
1842
+ ctx.resetTransform();
1834
1843
  if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
1835
1844
  if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
1836
1845
  if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
@@ -1853,7 +1862,7 @@ function createCanvas(options) {
1853
1862
  if (canvas.width !== contentWidth * pixelRatio || canvas.height !== contentHeight * pixelRatio) {
1854
1863
  canvas.width = contentWidth * pixelRatio;
1855
1864
  canvas.height = contentHeight * pixelRatio;
1856
- if ("style" in canvas) {
1865
+ if ("style" in canvas && options.updateStyles !== false) {
1857
1866
  canvas.style.width = `${contentWidth}px`;
1858
1867
  canvas.style.height = `${contentHeight}px`;
1859
1868
  }
package/node/index.d.cts CHANGED
@@ -372,15 +372,12 @@ interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas =
372
372
  pixelRatio?: number;
373
373
  /** 根据内容调整画布大小 */
374
374
  fitContent?: boolean;
375
+ updateStyles?: boolean;
375
376
  imageSmoothingEnabled?: boolean;
376
377
  imageSmoothingQuality?: "low" | "medium" | "high";
377
378
  canvas?: T;
378
379
  }
379
- interface LayoutSize {
380
- width: number;
381
- height: number;
382
- }
383
- interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
380
+ interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement> {
384
381
  readonly width: number;
385
382
  readonly height: number;
386
383
  readonly pixelRatio: number;
@@ -449,4 +446,4 @@ declare function printLayout(node: LayoutNode): void;
449
446
  */
450
447
  declare function layoutToString(node: LayoutNode, _indent?: string): string;
451
448
  //#endregion
452
- 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 LayoutNode, type LayoutProps, type LayoutSize, 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 };
449
+ 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 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 };
package/node/index.d.mts CHANGED
@@ -372,15 +372,12 @@ interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas =
372
372
  pixelRatio?: number;
373
373
  /** 根据内容调整画布大小 */
374
374
  fitContent?: boolean;
375
+ updateStyles?: boolean;
375
376
  imageSmoothingEnabled?: boolean;
376
377
  imageSmoothingQuality?: "low" | "medium" | "high";
377
378
  canvas?: T;
378
379
  }
379
- interface LayoutSize {
380
- width: number;
381
- height: number;
382
- }
383
- interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
380
+ interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement> {
384
381
  readonly width: number;
385
382
  readonly height: number;
386
383
  readonly pixelRatio: number;
@@ -449,4 +446,4 @@ declare function printLayout(node: LayoutNode): void;
449
446
  */
450
447
  declare function layoutToString(node: LayoutNode, _indent?: string): string;
451
448
  //#endregion
452
- 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 LayoutNode, type LayoutProps, type LayoutSize, 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 };
449
+ 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 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 };
package/node/index.mjs CHANGED
@@ -1829,8 +1829,17 @@ function renderNode(ctx, node) {
1829
1829
  function createCanvas(options) {
1830
1830
  const { width, height, pixelRatio = 1 } = options;
1831
1831
  const canvas = options.canvas ?? createRawCanvas(width * pixelRatio, height * pixelRatio);
1832
+ if (options.canvas) {
1833
+ canvas.width = width * pixelRatio;
1834
+ canvas.height = height * pixelRatio;
1835
+ if ("style" in canvas && options.updateStyles !== false) {
1836
+ canvas.style.width = `${width}px`;
1837
+ canvas.style.height = `${height}px`;
1838
+ }
1839
+ }
1832
1840
  const ctx = canvas.getContext("2d");
1833
1841
  if (!ctx) throw new Error("Failed to get 2d context");
1842
+ ctx.resetTransform();
1834
1843
  if (options.imageSmoothingEnabled !== void 0) ctx.imageSmoothingEnabled = options.imageSmoothingEnabled;
1835
1844
  if (options.imageSmoothingQuality !== void 0) ctx.imageSmoothingQuality = options.imageSmoothingQuality;
1836
1845
  if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
@@ -1853,7 +1862,7 @@ function createCanvas(options) {
1853
1862
  if (canvas.width !== contentWidth * pixelRatio || canvas.height !== contentHeight * pixelRatio) {
1854
1863
  canvas.width = contentWidth * pixelRatio;
1855
1864
  canvas.height = contentHeight * pixelRatio;
1856
- if ("style" in canvas) {
1865
+ if ("style" in canvas && options.updateStyles !== false) {
1857
1866
  canvas.style.width = `${contentWidth}px`;
1858
1867
  canvas.style.height = `${contentHeight}px`;
1859
1868
  }
package/package.json CHANGED
@@ -25,7 +25,7 @@
25
25
  "optionalDependencies": {
26
26
  "@napi-rs/canvas": "^0.1.88"
27
27
  },
28
- "version": "0.4.5",
28
+ "version": "0.5.0",
29
29
  "main": "./node/index.cjs",
30
30
  "types": "./node/index.d.cts",
31
31
  "exports": {