@meonode/canvas 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/esm/canvas/image.canvas.util.js

@@ -4,6 +4,7 @@ import { parseBorderRadius, drawRoundedRectPath } from './canvas.helper.js';
 import { promises } from 'fs';
 import { Style } from '../constant/common.const.js';
 
+// TODO: Add comprehensive unit tests for this file.
 /**
  * Calculates pixel offset for image positioning based on percentage or pixel values.
  * This handles centering, edge alignment, and percentage-based positioning.
@@ -43,7 +44,6 @@ class ImageNode extends BoxNode {
     /**
      * Loads and processes an image from various sources (URL, file path, or Buffer).
      * Handles SVG color modifications and sets natural dimensions with an aspect ratio.
-     *
      * @returns Promise that resolves when image loading completes
      * @throws Error if image loading fails
      */
@@ -59,92 +59,92 @@ class ImageNode extends BoxNode {
             this.naturalHeight = 0;
             return Promise.resolve();
         }
-        return new Promise(async (resolve) => {
-            const { fileTypeFromBuffer, fileTypeFromFile } = await import('file-type');
-            let finalSource = this.props.src;
-            let isSvg = false;
-            let contentBuffer = null;
-            let detectedMime;
-            try {
-                if (typeof this.props.src === 'string') {
-                    if (this.props.src.startsWith('http')) {
-                        const response = await fetch(this.props.src);
-                        if (!response.ok) {
-                            throw new Error(`HTTP error ${response.status} fetching image: ${this.props.src}`);
-                        }
-                        const imageArrayBuffer = await response.arrayBuffer();
-                        contentBuffer = Buffer.from(imageArrayBuffer);
-                        finalSource = contentBuffer;
-                        const fileTypeResult = await fileTypeFromBuffer(contentBuffer);
-                        detectedMime = fileTypeResult?.mime;
-                        isSvg = detectedMime === 'image/svg+xml';
-                        if ((!detectedMime || detectedMime === 'application/xml') &&
-                            contentBuffer.toString('utf-8').includes('<svg')) {
-                            isSvg = true;
-                        }
-                    }
-                    else {
-                        finalSource = this.props.src;
-                        const filePath = this.props.src;
-                        try {
-                            const fileTypeResult = await fileTypeFromFile(filePath);
+        return new Promise(resolve => {
+            const load = async () => {
+                const { fileTypeFromBuffer, fileTypeFromFile } = await import('file-type');
+                let finalSource = this.props.src;
+                let isSvg = false;
+                let contentBuffer = null;
+                let detectedMime;
+                try {
+                    if (typeof this.props.src === 'string') {
+                        if (this.props.src.startsWith('http')) {
+                            const response = await fetch(this.props.src);
+                            if (!response.ok) {
+                                throw new Error(`HTTP error ${response.status} fetching image: ${this.props.src}`);
+                            }
+                            const imageArrayBuffer = await response.arrayBuffer();
+                            contentBuffer = Buffer.from(imageArrayBuffer);
+                            finalSource = contentBuffer;
+                            const fileTypeResult = await fileTypeFromBuffer(contentBuffer);
                             detectedMime = fileTypeResult?.mime;
                             isSvg = detectedMime === 'image/svg+xml';
-                            if ((!detectedMime || detectedMime === 'application/xml') && filePath.toLowerCase().endsWith('.svg')) {
+                            if ((!detectedMime || detectedMime === 'application/xml') && contentBuffer.toString('utf-8').includes('<svg')) {
                                 isSvg = true;
                             }
                         }
-                        catch {
-                            isSvg = filePath.toLowerCase().endsWith('.svg');
-                        }
-                        if (isSvg && this.props.color) {
+                        else {
+                            finalSource = this.props.src;
+                            const filePath = this.props.src;
                             try {
-                                contentBuffer = await promises.readFile(filePath);
+                                const fileTypeResult = await fileTypeFromFile(filePath);
+                                detectedMime = fileTypeResult?.mime;
+                                isSvg = detectedMime === 'image/svg+xml';
+                                if ((!detectedMime || detectedMime === 'application/xml') && filePath.toLowerCase().endsWith('.svg')) {
+                                    isSvg = true;
+                                }
                             }
                             catch {
-                                isSvg = false;
-                                contentBuffer = null;
+                                isSvg = filePath.toLowerCase().endsWith('.svg');
+                            }
+                            if (isSvg && this.props.color) {
+                                try {
+                                    contentBuffer = await promises.readFile(filePath);
+                                }
+                                catch {
+                                    isSvg = false;
+                                    contentBuffer = null;
+                                }
                             }
                         }
                     }
-                }
-                else {
-                    contentBuffer = this.props.src;
-                    finalSource = contentBuffer;
-                    const fileTypeResult = await fileTypeFromBuffer(contentBuffer);
-                    detectedMime = fileTypeResult?.mime;
-                    isSvg = detectedMime === 'image/svg+xml';
-                }
-                if (isSvg && this.props.color && contentBuffer) {
-                    const svgString = contentBuffer.toString('utf-8');
-                    const modifiedSvgString = svgString.replace(/fill="[^"]*"/g, `fill="${this.props.color}"`);
-                    if (modifiedSvgString !== svgString) {
-                        finalSource = Buffer.from(modifiedSvgString);
-                    }
                     else {
+                        contentBuffer = this.props.src;
                         finalSource = contentBuffer;
+                        const fileTypeResult = await fileTypeFromBuffer(contentBuffer);
+                        detectedMime = fileTypeResult?.mime;
+                        isSvg = detectedMime === 'image/svg+xml';
                     }
+                    if (isSvg && this.props.color && contentBuffer) {
+                        const svgString = contentBuffer.toString('utf-8');
+                        const modifiedSvgString = svgString.replace(/fill="[^"]*"/g, `fill="${this.props.color}"`);
+                        if (modifiedSvgString !== svgString) {
+                            finalSource = Buffer.from(modifiedSvgString);
+                        }
+                        else {
+                            finalSource = contentBuffer;
+                        }
+                    }
+                    const img = await loadImage(finalSource);
+                    this.loadedImage = img;
+                    this.naturalWidth = img.width;
+                    this.naturalHeight = img.height;
+                    const calculatedAspectRatio = this.naturalWidth > 0 && this.naturalHeight > 0 ? this.naturalWidth / this.naturalHeight : undefined;
+                    const finalAspectRatio = typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0 ? this.props.aspectRatio : calculatedAspectRatio;
+                    this.node.setAspectRatio(finalAspectRatio);
+                    this.props.onLoad?.();
+                    resolve();
                 }
-                const img = await loadImage(finalSource);
-                this.loadedImage = img;
-                this.naturalWidth = img.width;
-                this.naturalHeight = img.height;
-                const calculatedAspectRatio = this.naturalWidth > 0 && this.naturalHeight > 0 ? this.naturalWidth / this.naturalHeight : undefined;
-                const finalAspectRatio = typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0
-                    ? this.props.aspectRatio
-                    : calculatedAspectRatio;
-                this.node.setAspectRatio(finalAspectRatio);
-                this.props.onLoad?.();
-                resolve();
-            }
-            catch (error) {
-                this.naturalWidth = 0;
-                this.naturalHeight = 0;
-                const finalAspectRatioOnError = typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0 ? this.props.aspectRatio : undefined;
-                this.node.setAspectRatio(finalAspectRatioOnError);
-                this.props.onError?.(error);
-                resolve();
-            }
+                catch (error) {
+                    this.naturalWidth = 0;
+                    this.naturalHeight = 0;
+                    const finalAspectRatioOnError = typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0 ? this.props.aspectRatio : undefined;
+                    this.node.setAspectRatio(finalAspectRatioOnError);
+                    this.props.onError?.(error);
+                    resolve();
+                }
+            };
+            load();
         });
     }
     getLoadingPromise() {

package/dist/esm/canvas/layout.canvas.util.d.ts

@@ -33,7 +33,7 @@ export declare class BoxNode {
     key?: string;
     /**
      * Creates a new BoxNode instance
-     * @param props - Initial box properties and styling
+     * @param props Initial box properties and styling
      */
     constructor(props?: BoxProps & BaseProps);
     /**
@@ -42,7 +42,7 @@ export declare class BoxNode {
     processInitialChildren(): void;
     /**
      * Inherits styles from the parent node.
-     * @param {BoxProps & BaseProps} parentProps - Parent node properties to inherit from.
+     * @param {BoxProps & BaseProps} parentProps Parent node properties to inherit from.
      */
     protected resolveInheritedStyles(parentProps: BoxProps & BaseProps): void;
     /**
@@ -51,8 +51,8 @@ export declare class BoxNode {
     protected applyDefaults(): void;
     /**
      * Appends a child node at the specified index.
-     * @param {BoxNode} child - Child node to append.
-     * @param index - Index to insert child at
+     * @param {BoxNode} child Child node to append.
+     * @param index Index to insert child at
      */
     protected appendChild(child: BoxNode, index: number): void;
     /**
@@ -66,31 +66,30 @@ export declare class BoxNode {
     protected updateLayoutBasedOnComputedSize(): void;
     /**
      * Applies layout properties to the Yoga node.
-     * @param props - Box properties containing layout values
+     * @param props Box properties containing layout values
      */
     protected setLayout(props: BoxProps): void;
     /**
      * Renders the node and its children to the canvas.
-     * @param {CanvasRenderingContext2D} ctx - Canvas rendering context (from skia-canvas).
-     * @param {number} offsetX - X offset for rendering.
-     * @param {number} offsetY - Y offset for rendering.
+     * @param {CanvasRenderingContext2D} ctx Canvas rendering context (from skia-canvas).
+     * @param {number} offsetX X offset for rendering.
+     * @param {number} offsetY Y offset for rendering.
      */
     render(ctx: CanvasRenderingContext2D, offsetX?: number, offsetY?: number): void;
     /**
      * Renders the node's visual content including background fills, shadows, and borders.
      * This is an internal method used by the render() pipeline.
-     *
-     * @param ctx - The skia-canvas 2D rendering context to draw into
-     * @param x - The absolute x-coordinate where drawing should begin
-     * @param y - The absolute y-coordinate where drawing should begin
-     * @param width - The width of the content area to render
-     * @param height - The height of the content area to render
+     * @param ctx The skia-canvas 2D rendering context to draw into
+     * @param x The absolute x-coordinate where drawing should begin
+     * @param y The absolute y-coordinate where drawing should begin
+     * @param width The width of the content area to render
+     * @param height The height of the content area to render
      */
     protected _renderContent(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number): void;
 }
 /**
  * Creates a new BoxNode instance.
- * @param {BoxProps} props - Box properties and configuration.
+ * @param {BoxProps} props Box properties and configuration.
  * @returns {BoxNode} New BoxNode instance.
  */
 export declare const Box: (props: BoxProps) => BoxNode;
@@ -103,7 +102,7 @@ export declare class ColumnNode extends BoxNode {
 }
 /**
  * Creates a new ColumnNode instance.
- * @param {BoxProps} props - Column properties and configuration.
+ * @param {BoxProps} props Column properties and configuration.
  * @returns {ColumnNode} New ColumnNode instance.
  */
 export declare const Column: (props: BoxProps) => ColumnNode;
@@ -116,7 +115,7 @@ export declare class RowNode extends BoxNode {
 }
 /**
  * Creates a new RowNode instance.
- * @param {BoxProps} props - Row properties and configuration.
+ * @param {BoxProps} props Row properties and configuration.
  * @returns {RowNode} New RowNode instance.
  */
 export declare const Row: (props: BoxProps) => RowNode;

package/dist/esm/canvas/layout.canvas.util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/layout.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,yBAAyB,CAAA;AAGlF,OAAa,EAAS,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAE9D;;;;GAIG;AACH,qBAAa,OAAO;IAClB;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;IAC/B;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IACV;;OAEG;IACH,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB;;OAEG;IACH,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAA;IAC3B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;gBACS,KAAK,GAAE,QAAQ,GAAG,SAAc;IAqB5C;;OAEG;IACI,sBAAsB;IAW7B;;;OAGG;IACH,SAAS,CAAC,sBAAsB,CAAC,WAAW,EAAE,QAAQ,GAAG,SAAS;IAkClE;;OAEG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B;;;;OAIG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;IAanD;;;OAGG;IACI,cAAc;IAiBrB;;OAEG;IACH,SAAS,CAAC,+BAA+B;IAIzC;;;OAGG;IACH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ;IAqInC;;;;;OAKG;IACH,MAAM,CAAC,GAAG,EAAE,wBAAwB,EAAE,OAAO,SAAI,EAAE,OAAO,SAAI;IAqK9D;;;;;;;;;OASG;IACH,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CA6R5G;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,YAAuB,CAAA;AAE1D;;;GAGG;AACH,qBAAa,UAAW,SAAQ,OAAO;gBACzB,KAAK,GAAE,QAAQ,GAAG,SAAc;CAS7C;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,QAAQ,eAA0B,CAAA;AAEhE;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,OAAO;gBACtB,KAAK,GAAE,QAAQ,GAAG,SAAc;CAS7C;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,YAAuB,CAAA"}
+{"version":3,"file":"layout.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/layout.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,yBAAyB,CAAA;AAGlF,OAAa,EAAS,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAE9D;;;;GAIG;AACH,qBAAa,OAAO;IAClB;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;IAE/B;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IAEV;;OAEG;IACH,QAAQ,EAAE,OAAO,EAAE,CAAA;IAEnB;;OAEG;IACH,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;;OAGG;gBACS,KAAK,GAAE,QAAQ,GAAG,SAAc;IAqB5C;;OAEG;IACI,sBAAsB;IAW7B;;;OAGG;IACH,SAAS,CAAC,sBAAsB,CAAC,WAAW,EAAE,QAAQ,GAAG,SAAS;IAkClE;;OAEG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B;;;;OAIG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;IAanD;;;OAGG;IACI,cAAc,IAAI,OAAO;IAiBhC;;OAEG;IACH,SAAS,CAAC,+BAA+B;IAIzC;;;OAGG;IACH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ;IAqInC;;;;;OAKG;IACH,MAAM,CAAC,GAAG,EAAE,wBAAwB,EAAE,OAAO,GAAE,MAAU,EAAE,OAAO,GAAE,MAAU;IA+J9E;;;;;;;;OAQG;IACH,SAAS,CAAC,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CAoR5G;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,KAAG,OAA6B,CAAA;AAEnE;;;GAGG;AACH,qBAAa,UAAW,SAAQ,OAAO;gBACzB,KAAK,GAAE,QAAQ,GAAG,SAAc;CAS7C;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,QAAQ,KAAG,UAAmC,CAAA;AAE5E;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,OAAO;gBACtB,KAAK,GAAE,QAAQ,GAAG,SAAc;CAS7C;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,KAAG,OAA6B,CAAA"}

package/dist/esm/canvas/layout.canvas.util.js

@@ -37,7 +37,7 @@ class BoxNode {
     key;
     /**
      * Creates a new BoxNode instance
-     * @param props - Initial box properties and styling
+     * @param props Initial box properties and styling
      */
     constructor(props = {}) {
         const children = (Array.isArray(props?.children) ? props.children : [props.children]).filter(child => child);
@@ -72,7 +72,7 @@ class BoxNode {
     }
     /**
      * Inherits styles from the parent node.
-     * @param {BoxProps & BaseProps} parentProps - Parent node properties to inherit from.
+     * @param {BoxProps & BaseProps} parentProps Parent node properties to inherit from.
      */
     resolveInheritedStyles(parentProps) {
         if (parentProps.key) {
@@ -112,8 +112,8 @@ class BoxNode {
     }
     /**
      * Appends a child node at the specified index.
-     * @param {BoxNode} child - Child node to append.
-     * @param index - Index to insert child at
+     * @param {BoxNode} child Child node to append.
+     * @param index Index to insert child at
      */
     appendChild(child, index) {
         if (!child || !child.node) {
@@ -152,7 +152,7 @@ class BoxNode {
     }
     /**
      * Applies layout properties to the Yoga node.
-     * @param props - Box properties containing layout values
+     * @param props Box properties containing layout values
      */
     setLayout(props) {
         // --- Yoga layout property application ---
@@ -295,9 +295,9 @@ class BoxNode {
     }
     /**
      * Renders the node and its children to the canvas.
-     * @param {CanvasRenderingContext2D} ctx - Canvas rendering context (from skia-canvas).
-     * @param {number} offsetX - X offset for rendering.
-     * @param {number} offsetY - Y offset for rendering.
+     * @param {CanvasRenderingContext2D} ctx Canvas rendering context (from skia-canvas).
+     * @param {number} offsetX X offset for rendering.
+     * @param {number} offsetY Y offset for rendering.
      */
     render(ctx, offsetX = 0, offsetY = 0) {
         const layout = this.node.getComputedLayout();
@@ -322,13 +322,7 @@ class BoxNode {
         try {
             // --- Transformation Setup ---
             const transform = this.props.transform;
-            const needsTransform = transform &&
-                (transform.translateX ||
-                    transform.translateY ||
-                    transform.rotate ||
-                    transform.scale ||
-                    transform.scaleX ||
-                    transform.scaleY);
+            const needsTransform = transform && (transform.translateX || transform.translateY || transform.rotate || transform.scale || transform.scaleX || transform.scaleY);
             let savedContextForTransform = false;
             if (needsTransform) {
                 ctx.save();
@@ -455,12 +449,11 @@ class BoxNode {
     /**
      * Renders the node's visual content including background fills, shadows, and borders.
      * This is an internal method used by the render() pipeline.
-     *
-     * @param ctx - The skia-canvas 2D rendering context to draw into
-     * @param x - The absolute x-coordinate where drawing should begin
-     * @param y - The absolute y-coordinate where drawing should begin
-     * @param width - The width of the content area to render
-     * @param height - The height of the content area to render
+     * @param ctx The skia-canvas 2D rendering context to draw into
+     * @param x The absolute x-coordinate where drawing should begin
+     * @param y The absolute y-coordinate where drawing should begin
+     * @param width The width of the content area to render
+     * @param height The height of the content area to render
      */
     _renderContent(ctx, x, y, width, height) {
         // Calculate border radius values for all corners
@@ -727,7 +720,7 @@ class BoxNode {
 }
 /**
  * Creates a new BoxNode instance.
- * @param {BoxProps} props - Box properties and configuration.
+ * @param {BoxProps} props Box properties and configuration.
  * @returns {BoxNode} New BoxNode instance.
  */
 const Box = (props) => new BoxNode(props);
@@ -748,7 +741,7 @@ class ColumnNode extends BoxNode {
 }
 /**
  * Creates a new ColumnNode instance.
- * @param {BoxProps} props - Column properties and configuration.
+ * @param {BoxProps} props Column properties and configuration.
  * @returns {ColumnNode} New ColumnNode instance.
  */
 const Column = (props) => new ColumnNode(props);
@@ -769,7 +762,7 @@ class RowNode extends BoxNode {
 }
 /**
  * Creates a new RowNode instance.
- * @param {BoxProps} props - Row properties and configuration.
+ * @param {BoxProps} props Row properties and configuration.
  * @returns {RowNode} New RowNode instance.
  */
 const Row = (props) => new RowNode(props);

package/dist/esm/canvas/root.canvas.util.d.ts

@@ -13,11 +13,13 @@ export declare class RootNode extends ColumnNode {
     private ctx;
     /** Target width for the canvas in pixels */
     private readonly targetWidth;
+    /** Target height for the canvas in pixels */
+    private readonly targetHeight;
     /** Scale factor for rendering (e.g. 2 for 2x resolution) */
     private readonly scale;
     /**
      * Creates a new root node for canvas rendering
-     * @param props - Configuration properties for the root node
+     * @param props Configuration properties for the root node
      * @throws Error if width property is not provided
      */
     constructor(props: RootProps & BaseProps);
@@ -35,7 +37,7 @@ export declare class RootNode extends ColumnNode {
 }
 /**
  * Creates and renders a new root node with the given properties
- * @param props - Configuration properties for the root node
+ * @param props Configuration properties for the root node
  * @returns Promise resolving to the rendered Canvas instance
  */
 export declare const Root: (props: RootProps) => Promise<Canvas>;

package/dist/esm/canvas/root.canvas.util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/root.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA8C,MAAM,aAAa,CAAA;AAChF,OAAO,EAAE,UAAU,EAAW,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAUnE,eAAO,MAAM,qBAAqB,YAEjC,CAAA;AAED;;;GAGG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAoB;IAClC,8CAA8C;IAC9C,OAAO,CAAC,GAAG,CAAwC;IACnD,4CAA4C;IAC5C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IACpC,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAQ;IAE9B;;;;OAIG;gBACS,KAAK,EAAE,SAAS,GAAG,SAAS;IAsCxC;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAazB;;;;OAIG;IACG,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;CAqChC;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAU,OAAO,SAAS,oBAAuC,CAAA"}
+{"version":3,"file":"root.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/root.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA8C,MAAM,aAAa,CAAA;AAChF,OAAO,EAAE,UAAU,EAAW,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAUnE,eAAO,MAAM,qBAAqB,YAEjC,CAAA;AAED;;;GAGG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAoB;IAClC,8CAA8C;IAC9C,OAAO,CAAC,GAAG,CAAwC;IACnD,4CAA4C;IAC5C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IACpC,6CAA6C;IAC7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAQ;IACrC,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAQ;IAE9B;;;;OAIG;gBACS,KAAK,EAAE,SAAS,GAAG,SAAS;IAyCxC;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAazB;;;;OAIG;IACG,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;CAqChC;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAU,OAAO,SAAS,oBAAuC,CAAA"}

package/dist/esm/canvas/root.canvas.util.js

@@ -18,16 +18,19 @@ class RootNode extends ColumnNode {
     ctx = null;
     /** Target width for the canvas in pixels */
     targetWidth;
+    /** Target height for the canvas in pixels */
+    targetHeight;
     /** Scale factor for rendering (e.g. 2 for 2x resolution) */
     scale;
     /**
      * Creates a new root node for canvas rendering
-     * @param props - Configuration properties for the root node
+     * @param props Configuration properties for the root node
      * @throws Error if width property is not provided
      */
     constructor(props) {
         // Call the parent constructor with root name and props
         super({ name: 'Root', ...props });
+        this.props = props;
         // Validate the required width property
         if (!props.width) {
             throw new Error('Width and height are required for Root');
@@ -51,6 +54,7 @@ class RootNode extends ColumnNode {
         // Set up scale and width
         this.scale = props.scale || 1;
         this.targetWidth = props.width;
+        this.targetHeight = props.height;
         this.node.setWidth(this.targetWidth);
         // Initialize children nodes
         this.processInitialChildren();
@@ -93,7 +97,7 @@ class RootNode extends ColumnNode {
         // Step 4: Create a canvas with calculated dimensions
         const calculatedContentHeight = this.node.getComputedHeight();
         const finalCanvasWidth = Math.ceil(this.targetWidth * this.scale);
-        const finalCanvasHeight = Math.max(1, Math.ceil(calculatedContentHeight * this.scale));
+        const finalCanvasHeight = this.targetHeight ? Math.ceil(this.targetHeight * this.scale) : Math.max(1, Math.ceil(calculatedContentHeight * this.scale));
         // Step 5: Set up canvas context
         this.canvas = new Canvas(finalCanvasWidth, finalCanvasHeight);
         this.ctx = this.canvas.getContext('2d');
@@ -108,7 +112,7 @@ class RootNode extends ColumnNode {
 }
 /**
  * Creates and renders a new root node with the given properties
- * @param props - Configuration properties for the root node
+ * @param props Configuration properties for the root node
  * @returns Promise resolving to the rendered Canvas instance
  */
 const Root = async (props) => await new RootNode(props).render();

package/dist/esm/canvas/text.canvas.util.d.ts

@@ -33,8 +33,7 @@ export declare class TextNode extends BoxNode {
      * - \b - Backspace (removed)
      * - \f - Form feed (treated as newline)
      * - \v - Vertical tab (treated as newline)
-     *
-     * @param input - Raw text string potentially containing escape sequences
+     * @param input Raw text string potentially containing escape sequences
      * @returns Processed string with escape sequences converted
      */
     private processEscapeSequences;
@@ -52,9 +51,8 @@ export declare class TextNode extends BoxNode {
      * <color="red">, <color='red'>, <color=red>
      *
      * Tags can be nested and must be properly closed with </tag>
-     *
-     * @param input - Text string containing markup tags
-     * @param baseStyle - Default style properties to apply to all segments
+     * @param input Text string containing markup tags
+     * @param baseStyle Default style properties to apply to all segments
      * @returns Array of styled text segments with consistent style properties
      */
     private parseRichText;
@@ -69,8 +67,7 @@ export declare class TextNode extends BoxNode {
      * - Style: segment <i> > base fontStyle
      * - Size: segment size > base fontSize
      * - Family: base fontFamily
-     *
-     * @param segmentStyle - Optional TextSegment styling to override base props
+     * @param segmentStyle Optional TextSegment styling to override base props
      * @returns Formatted CSS font string for canvas context
      */
     private getFontString;
@@ -87,33 +84,30 @@ export declare class TextNode extends BoxNode {
      * 2. Otherwise calculating dynamic height based on largest font size per line
      * 3. Adding leading space above/below text content
      * 4. Including specified line gaps between lines
-     *
-     * @param widthConstraint - Maximum allowed width in pixels for text layout
-     * @param widthMode - YogaLayout mode determining how width constraint is applied
+     * @param widthConstraint Maximum allowed width in pixels for text layout
+     * @param widthMode YogaLayout mode determining how width constraint is applied
      * @returns Calculated minimum dimensions required to render text content
-     *   - width: Total width needed for text layout
-     *   - height: Total height including line heights and gaps
+     * - width: Total width needed for text layout
+     * - height: Total height including line heights and gaps
      */
     private measureText;
     /**
      * Wraps text segments into multiple lines while respecting width constraints and preserving styling.
      * Handles rich text attributes (color, weight, size, bold, italic) and proper word wrapping.
      * Also respects explicit newline characters (\n) for forced line breaks.
-     *
-     * @param ctx - Canvas rendering context used for text measurements
-     * @param segments - Array of text segments with styling information
-     * @param maxWidth - Maximum allowed width for each line in pixels
-     * @param parsedWordSpacingPx - Additional spacing to add between words in pixels
+     * @param ctx Canvas rendering context used for text measurements
+     * @param segments Array of text segments with styling information
+     * @param maxWidth Maximum allowed width for each line in pixels
+     * @param parsedWordSpacingPx Additional spacing to add between words in pixels
      * @returns Array of lines, where each line contains styled text segments
      */
     private wrapTextRich;
     /**
      * Breaks a word segment into multiple segments that each fit within the specified width constraint.
      * Maintains all styling properties (color, weight, size, bold, italic) across broken segments.
-     *
-     * @param ctx - Canvas rendering context used for text measurements
-     * @param segmentToBreak - Original text segment to split
-     * @param maxWidth - Maximum width allowed for each resulting segment
+     * @param ctx Canvas rendering context used for text measurements
+     * @param segmentToBreak Original text segment to split
+     * @param maxWidth Maximum width allowed for each resulting segment
      * @returns Array of TextSegments, each fitting maxWidth, or original segment if no breaking needed
      */
     private breakWordRich;
@@ -132,12 +126,11 @@ export declare class TextNode extends BoxNode {
      * - Ellipsis truncation
      * - Rich text styling per segment (color, weight, size, etc)
      * - Performance optimizations (clipping, visibility checks)
-     *
-     * @param ctx - Canvas rendering context
-     * @param x - Content box left position in pixels
-     * @param y - Content box top position in pixels
-     * @param width - Content box total width including padding
-     * @param height - Content box total height including padding
+     * @param ctx Canvas rendering context
+     * @param x Content box left position in pixels
+     * @param y Content box top position in pixels
+     * @param width Content box total width including padding
+     * @param height Content box total height including padding
      */
     protected _renderContent(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number): void;
 }

package/dist/esm/canvas/text.canvas.util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/text.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAU,KAAK,wBAAwB,EAA2B,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAW;IACzC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,kBAAkB,CAAe;IAEjC,KAAK,EAAE,SAAS,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;gBAElC,IAAI,GAAE,MAAM,GAAG,MAAW,EAAE,KAAK,GAAE,SAAc;cAuB1C,aAAa,IAAI,IAAI;IA+DxC;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,sBAAsB;IA8B9B;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,aAAa;IA+ErB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAyBxB;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,aAAa;IAiCrB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAQjC;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,WAAW;IA+OnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,YAAY;IAkLpB;;;;;;;;OAQG;IACH,OAAO,CAAC,aAAa;IAmErB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB;;;;;;;;;;;;;;;;;OAiBG;cACgB,cAAc,CAC/B,GAAG,EAAE,wBAAwB,EAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM;CAiWjB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,SAAS,aAA8B,CAAA"}
+{"version":3,"file":"text.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/text.canvas.util.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAU,KAAK,wBAAwB,EAA2B,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,kBAAkB,CAAe;IAEjC,KAAK,EAAE,SAAS,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;gBAElC,IAAI,GAAE,MAAM,GAAG,MAAW,EAAE,KAAK,GAAE,SAAc;cAuB1C,aAAa,IAAI,IAAI;IAoDxC;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,sBAAsB;IA8B9B;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,aAAa;IA+ErB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAyBxB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,aAAa;IAiCrB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAQjC;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,WAAW;IA8NnB;;;;;;;;;OASG;IACH,OAAO,CAAC,YAAY;IAuKpB;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAmErB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB;;;;;;;;;;;;;;;;OAgBG;cACgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CA8UrH;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,SAAS,aAA8B,CAAA"}