@codehz/draw-call 0.4.2 → 0.4.5

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 +15 -2
  2. package/browser/index.d.cts +555 -11
  3. package/browser/index.d.ts +555 -11
  4. package/browser/index.js +15 -2
  5. package/examples/demo.ts +1 -0
  6. package/node/index.cjs +13 -0
  7. package/node/index.d.cts +9 -9
  8. package/node/index.d.mts +9 -9
  9. package/node/index.mjs +13 -0
  10. package/package.json +1 -1
package/node/index.d.cts CHANGED
@@ -1,3 +1,5 @@
1
+ import { Canvas } from "@napi-rs/canvas";
2
+
1
3
  //#region src/types/base.d.ts
2
4
  type Size = number | `${number}%` | "auto" | "fill";
3
5
  interface ColorStop {
@@ -364,27 +366,25 @@ interface CustomDrawElement extends ElementBase, CustomDrawProps {
364
366
  type Element = BoxElement | TextElement | RichTextElement | ImageElement | SvgElement | StackElement | TransformElement | CustomDrawElement;
365
367
  //#endregion
366
368
  //#region src/canvas.d.ts
367
- interface CanvasOptions {
369
+ interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
368
370
  width: number;
369
371
  height: number;
370
372
  pixelRatio?: number;
373
+ /** 根据内容调整画布大小 */
374
+ fitContent?: boolean;
371
375
  imageSmoothingEnabled?: boolean;
372
376
  imageSmoothingQuality?: "low" | "medium" | "high";
373
- canvas?: {
374
- getContext(type: "2d"): CanvasRenderingContext2D | null;
375
- width: number;
376
- height: number;
377
- };
377
+ canvas?: T;
378
378
  }
379
379
  interface LayoutSize {
380
380
  width: number;
381
381
  height: number;
382
382
  }
383
- interface DrawCallCanvas {
383
+ interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
384
384
  readonly width: number;
385
385
  readonly height: number;
386
386
  readonly pixelRatio: number;
387
- readonly canvas: HTMLCanvasElement;
387
+ readonly canvas: T;
388
388
  render(element: Element): LayoutNode;
389
389
  clear(): void;
390
390
  getContext(): CanvasRenderingContext2D;
@@ -396,7 +396,7 @@ interface DrawCallCanvas {
396
396
  *
397
397
  * 在浏览器环境中使用，支持传入已有的 canvas 实例
398
398
  */
399
- declare function createCanvas(options: CanvasOptions): DrawCallCanvas;
399
+ declare function createCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement>(options: CanvasOptions<T>): DrawCallCanvas<T>;
400
400
  //#endregion
401
401
  //#region src/components/Box.d.ts
402
402
  declare function Box(props: BoxProps): BoxElement;
package/node/index.d.mts CHANGED
@@ -1,3 +1,5 @@
1
+ import { Canvas } from "@napi-rs/canvas";
2
+
1
3
  //#region src/types/base.d.ts
2
4
  type Size = number | `${number}%` | "auto" | "fill";
3
5
  interface ColorStop {
@@ -364,27 +366,25 @@ interface CustomDrawElement extends ElementBase, CustomDrawProps {
364
366
  type Element = BoxElement | TextElement | RichTextElement | ImageElement | SvgElement | StackElement | TransformElement | CustomDrawElement;
365
367
  //#endregion
366
368
  //#region src/canvas.d.ts
367
- interface CanvasOptions {
369
+ interface CanvasOptions<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
368
370
  width: number;
369
371
  height: number;
370
372
  pixelRatio?: number;
373
+ /** 根据内容调整画布大小 */
374
+ fitContent?: boolean;
371
375
  imageSmoothingEnabled?: boolean;
372
376
  imageSmoothingQuality?: "low" | "medium" | "high";
373
- canvas?: {
374
- getContext(type: "2d"): CanvasRenderingContext2D | null;
375
- width: number;
376
- height: number;
377
- };
377
+ canvas?: T;
378
378
  }
379
379
  interface LayoutSize {
380
380
  width: number;
381
381
  height: number;
382
382
  }
383
- interface DrawCallCanvas {
383
+ interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement | OffscreenCanvas | Canvas> {
384
384
  readonly width: number;
385
385
  readonly height: number;
386
386
  readonly pixelRatio: number;
387
- readonly canvas: HTMLCanvasElement;
387
+ readonly canvas: T;
388
388
  render(element: Element): LayoutNode;
389
389
  clear(): void;
390
390
  getContext(): CanvasRenderingContext2D;
@@ -396,7 +396,7 @@ interface DrawCallCanvas {
396
396
  *
397
397
  * 在浏览器环境中使用，支持传入已有的 canvas 实例
398
398
  */
399
- declare function createCanvas(options: CanvasOptions): DrawCallCanvas;
399
+ declare function createCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement>(options: CanvasOptions<T>): DrawCallCanvas<T>;
400
400
  //#endregion
401
401
  //#region src/components/Box.d.ts
402
402
  declare function Box(props: BoxProps): BoxElement;
package/node/index.mjs CHANGED
@@ -1847,6 +1847,19 @@ function createCanvas(options) {
1847
1847
  minHeight: 0,
1848
1848
  maxHeight: height
1849
1849
  });
1850
+ if (options.fitContent) {
1851
+ const contentWidth = layoutTree.layout.width;
1852
+ const contentHeight = layoutTree.layout.height;
1853
+ if (canvas.width !== contentWidth * pixelRatio || canvas.height !== contentHeight * pixelRatio) {
1854
+ canvas.width = contentWidth * pixelRatio;
1855
+ canvas.height = contentHeight * pixelRatio;
1856
+ if ("style" in canvas) {
1857
+ canvas.style.width = `${contentWidth}px`;
1858
+ canvas.style.height = `${contentHeight}px`;
1859
+ }
1860
+ if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
1861
+ }
1862
+ }
1850
1863
  renderNode(ctx, layoutTree);
1851
1864
  return layoutTree;
1852
1865
  },
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.2",
28
+ "version": "0.4.5",
29
29
  "main": "./node/index.cjs",
30
30
  "types": "./node/index.d.cts",
31
31
  "exports": {