@codehz/draw-call 0.4.3 → 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.
- package/browser/index.cjs +22 -0
- package/browser/index.d.cts +557 -16
- package/browser/index.d.ts +557 -16
- package/browser/index.js +22 -0
- package/examples/demo.ts +1 -5
- package/node/index.cjs +22 -0
- package/node/index.d.cts +11 -14
- package/node/index.d.mts +11 -14
- package/node/index.mjs +22 -0
- package/package.json +1 -1
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);
|
|
@@ -1847,6 +1856,19 @@ function createCanvas(options) {
|
|
|
1847
1856
|
minHeight: 0,
|
|
1848
1857
|
maxHeight: height
|
|
1849
1858
|
});
|
|
1859
|
+
if (options.fitContent) {
|
|
1860
|
+
const contentWidth = layoutTree.layout.width;
|
|
1861
|
+
const contentHeight = layoutTree.layout.height;
|
|
1862
|
+
if (canvas.width !== contentWidth * pixelRatio || canvas.height !== contentHeight * pixelRatio) {
|
|
1863
|
+
canvas.width = contentWidth * pixelRatio;
|
|
1864
|
+
canvas.height = contentHeight * pixelRatio;
|
|
1865
|
+
if ("style" in canvas && options.updateStyles !== false) {
|
|
1866
|
+
canvas.style.width = `${contentWidth}px`;
|
|
1867
|
+
canvas.style.height = `${contentHeight}px`;
|
|
1868
|
+
}
|
|
1869
|
+
if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
|
|
1870
|
+
}
|
|
1871
|
+
}
|
|
1850
1872
|
renderNode(ctx, layoutTree);
|
|
1851
1873
|
return layoutTree;
|
|
1852
1874
|
},
|
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,22 @@ 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;
|
|
375
|
+
updateStyles?: boolean;
|
|
371
376
|
imageSmoothingEnabled?: boolean;
|
|
372
377
|
imageSmoothingQuality?: "low" | "medium" | "high";
|
|
373
|
-
canvas?:
|
|
374
|
-
getContext(type: "2d"): CanvasRenderingContext2D | null;
|
|
375
|
-
width: number;
|
|
376
|
-
height: number;
|
|
377
|
-
};
|
|
378
|
-
}
|
|
379
|
-
interface LayoutSize {
|
|
380
|
-
width: number;
|
|
381
|
-
height: number;
|
|
378
|
+
canvas?: T;
|
|
382
379
|
}
|
|
383
|
-
interface DrawCallCanvas {
|
|
380
|
+
interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement> {
|
|
384
381
|
readonly width: number;
|
|
385
382
|
readonly height: number;
|
|
386
383
|
readonly pixelRatio: number;
|
|
387
|
-
readonly canvas:
|
|
384
|
+
readonly canvas: T;
|
|
388
385
|
render(element: Element): LayoutNode;
|
|
389
386
|
clear(): void;
|
|
390
387
|
getContext(): CanvasRenderingContext2D;
|
|
@@ -396,7 +393,7 @@ interface DrawCallCanvas {
|
|
|
396
393
|
*
|
|
397
394
|
* 在浏览器环境中使用，支持传入已有的 canvas 实例
|
|
398
395
|
*/
|
|
399
|
-
declare function createCanvas(options: CanvasOptions): DrawCallCanvas
|
|
396
|
+
declare function createCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement>(options: CanvasOptions<T>): DrawCallCanvas<T>;
|
|
400
397
|
//#endregion
|
|
401
398
|
//#region src/components/Box.d.ts
|
|
402
399
|
declare function Box(props: BoxProps): BoxElement;
|
|
@@ -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
|
|
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
|
@@ -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,22 @@ 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;
|
|
375
|
+
updateStyles?: boolean;
|
|
371
376
|
imageSmoothingEnabled?: boolean;
|
|
372
377
|
imageSmoothingQuality?: "low" | "medium" | "high";
|
|
373
|
-
canvas?:
|
|
374
|
-
getContext(type: "2d"): CanvasRenderingContext2D | null;
|
|
375
|
-
width: number;
|
|
376
|
-
height: number;
|
|
377
|
-
};
|
|
378
|
-
}
|
|
379
|
-
interface LayoutSize {
|
|
380
|
-
width: number;
|
|
381
|
-
height: number;
|
|
378
|
+
canvas?: T;
|
|
382
379
|
}
|
|
383
|
-
interface DrawCallCanvas {
|
|
380
|
+
interface DrawCallCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement> {
|
|
384
381
|
readonly width: number;
|
|
385
382
|
readonly height: number;
|
|
386
383
|
readonly pixelRatio: number;
|
|
387
|
-
readonly canvas:
|
|
384
|
+
readonly canvas: T;
|
|
388
385
|
render(element: Element): LayoutNode;
|
|
389
386
|
clear(): void;
|
|
390
387
|
getContext(): CanvasRenderingContext2D;
|
|
@@ -396,7 +393,7 @@ interface DrawCallCanvas {
|
|
|
396
393
|
*
|
|
397
394
|
* 在浏览器环境中使用，支持传入已有的 canvas 实例
|
|
398
395
|
*/
|
|
399
|
-
declare function createCanvas(options: CanvasOptions): DrawCallCanvas
|
|
396
|
+
declare function createCanvas<T extends HTMLCanvasElement | OffscreenCanvas | Canvas = HTMLCanvasElement>(options: CanvasOptions<T>): DrawCallCanvas<T>;
|
|
400
397
|
//#endregion
|
|
401
398
|
//#region src/components/Box.d.ts
|
|
402
399
|
declare function Box(props: BoxProps): BoxElement;
|
|
@@ -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
|
|
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);
|
|
@@ -1847,6 +1856,19 @@ function createCanvas(options) {
|
|
|
1847
1856
|
minHeight: 0,
|
|
1848
1857
|
maxHeight: height
|
|
1849
1858
|
});
|
|
1859
|
+
if (options.fitContent) {
|
|
1860
|
+
const contentWidth = layoutTree.layout.width;
|
|
1861
|
+
const contentHeight = layoutTree.layout.height;
|
|
1862
|
+
if (canvas.width !== contentWidth * pixelRatio || canvas.height !== contentHeight * pixelRatio) {
|
|
1863
|
+
canvas.width = contentWidth * pixelRatio;
|
|
1864
|
+
canvas.height = contentHeight * pixelRatio;
|
|
1865
|
+
if ("style" in canvas && options.updateStyles !== false) {
|
|
1866
|
+
canvas.style.width = `${contentWidth}px`;
|
|
1867
|
+
canvas.style.height = `${contentHeight}px`;
|
|
1868
|
+
}
|
|
1869
|
+
if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
|
|
1870
|
+
}
|
|
1871
|
+
}
|
|
1850
1872
|
renderNode(ctx, layoutTree);
|
|
1851
1873
|
return layoutTree;
|
|
1852
1874
|
},
|