@meonode/canvas 1.0.0-beta.1

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

@@ -0,0 +1,39 @@
+import type { GridProps } from '../canvas/canvas.type.js';
+import { BoxNode, RowNode } from '../canvas/layout.canvas.util.js';
+/**
+ * Grid layout node that arranges children in a configurable number of columns or rows.
+ * Uses Yoga's flexbox capabilities with wrapping and gap properties to simulate a grid.
+ * @extends RowNode
+ */
+export declare class GridNode extends RowNode {
+    private readonly columns;
+    private readonly columnGapValue;
+    private readonly rowGapValue;
+    private readonly isVertical;
+    /**
+     * Creates a new grid layout node
+     * @param props - Grid configuration properties
+     */
+    constructor(props: GridProps);
+    /**
+     * Appends a child node to this grid.
+     * Overridden primarily for documentation/clarity, functionality is inherited.
+     * @param child - Child node to append
+     * @param index - Index at which to insert the child
+     */
+    protected appendChild(child: BoxNode, index: number): void;
+    /**
+     * Update layout calculations after the initial layout is computed.
+     * This method calculates the appropriate flex-basis for children based on the
+     * number of columns and gaps, respecting the container's padding,
+     * and applies the gaps using Yoga's built-in properties.
+     */
+    protected updateLayoutBasedOnComputedSize(): void;
+}
+/**
+ * Factory function to create a new GridNode instance.
+ * @param props - Grid configuration properties.
+ * @returns A new GridNode instance.
+ */
+export declare const Grid: (props: GridProps) => GridNode;
+//# sourceMappingURL=grid.canvas.util.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/grid.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGjE;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAQ;IAChC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAuB;IACtD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAuB;IACnD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAS;IAEpC;;;OAGG;gBACS,KAAK,EAAE,SAAS;IAsD5B;;;;;OAKG;cACgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;IAI5D;;;;;OAKG;cACgB,+BAA+B;CAsMnD;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,aAAwB,CAAA"}

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

@@ -0,0 +1,259 @@
+import { RowNode } from './layout.canvas.util.js';
+import { Style } from '../constant/common.const.js';
+
+/**
+ * Grid layout node that arranges children in a configurable number of columns or rows.
+ * Uses Yoga's flexbox capabilities with wrapping and gap properties to simulate a grid.
+ * @extends RowNode
+ */
+class GridNode extends RowNode {
+    columns;
+    columnGapValue;
+    rowGapValue;
+    isVertical; // True if the main axis is vertical (flexDirection: column or column-reverse)
+    /**
+     * Creates a new grid layout node
+     * @param props - Grid configuration properties
+     */
+    constructor(props) {
+        const columns = Math.max(1, props.columns || 1);
+        const direction = props.direction || 'row'; // Default to horizontal row
+        const isVertical = direction === 'column' || direction === 'column-reverse';
+        // Map direction string to Yoga FlexDirection
+        let flexDirection;
+        switch (direction) {
+            case 'row':
+                flexDirection = Style.FlexDirection.Row;
+                break;
+            case 'column':
+                flexDirection = Style.FlexDirection.Column;
+                break;
+            case 'row-reverse':
+                flexDirection = Style.FlexDirection.RowReverse;
+                break;
+            case 'column-reverse':
+                flexDirection = Style.FlexDirection.ColumnReverse;
+                break;
+            default:
+                console.warn(`[GridNode] Invalid direction "${direction}". Defaulting to "row".`);
+                flexDirection = Style.FlexDirection.Row;
+        }
+        // Determine the column and row gap values from props
+        let columnGap = 0;
+        let rowGap = 0;
+        if (typeof props.gap === 'number' || (typeof props.gap === 'string' && props.gap.trim() !== '')) {
+            // Single value applies to both row and column gaps
+            columnGap = props.gap;
+            rowGap = props.gap;
+        }
+        else if (props.gap && typeof props.gap === 'object') {
+            // Object format: prioritize a specific direction (Column/Row), then All
+            columnGap = props.gap.Column ?? props.gap.All ?? 0;
+            rowGap = props.gap.Row ?? props.gap.All ?? 0;
+        }
+        super({
+            name: 'Grid',
+            flexWrap: Style.Wrap.Wrap, // Essential for grid behavior
+            flexDirection,
+            ...props,
+            // Explicitly remove the 'direction' prop passed to super, as it's handled by flexDirection
+            direction: undefined,
+        });
+        this.columns = columns;
+        this.columnGapValue = columnGap;
+        this.rowGapValue = rowGap;
+        this.isVertical = isVertical;
+    }
+    /**
+     * Appends a child node to this grid.
+     * Overridden primarily for documentation/clarity, functionality is inherited.
+     * @param child - Child node to append
+     * @param index - Index at which to insert the child
+     */
+    appendChild(child, index) {
+        super.appendChild(child, index);
+    }
+    /**
+     * Update layout calculations after the initial layout is computed.
+     * This method calculates the appropriate flex-basis for children based on the
+     * number of columns and gaps, respecting the container's padding,
+     * and applies the gaps using Yoga's built-in properties.
+     */
+    updateLayoutBasedOnComputedSize() {
+        // Step 1: Early return if the grid is empty or invalid
+        if (this.columns <= 0 || this.children.length === 0) {
+            return;
+        }
+        // Step 2: Get container dimensions and padding after the initial layout
+        const width = this.node.getComputedWidth();
+        const height = this.node.getComputedHeight();
+        const paddingLeft = this.node.getComputedPadding(Style.Edge.Left);
+        const paddingRight = this.node.getComputedPadding(Style.Edge.Right);
+        const paddingTop = this.node.getComputedPadding(Style.Edge.Top);
+        const paddingBottom = this.node.getComputedPadding(Style.Edge.Bottom);
+        // Calculate content box dimensions
+        const contentWidth = Math.max(0, width - paddingLeft - paddingRight);
+        const contentHeight = Math.max(0, height - paddingTop - paddingBottom);
+        // Step 3: Validate dimensions needed for calculations
+        if (!this.isVertical && contentWidth <= 0 && width > 0) {
+            console.warn(`[GridNode ${this.props.key} - Finalize] Grid content width (${contentWidth}) is zero or negative after accounting for padding (${paddingLeft}+${paddingRight}) on total width ${width}. Cannot calculate basis.`);
+            if (this.columns > 1)
+                return;
+        }
+        if (this.isVertical && contentHeight <= 0 && height > 0) {
+            console.warn(`[GridNode ${this.props.key} - Finalize] Grid content height (${contentHeight}) is zero or negative after accounting for padding (${paddingTop}+${paddingBottom}) on total height ${height}. Cannot calculate basis.`);
+            if (this.columns > 1)
+                return;
+        }
+        // Step 4: Calculate Gap Values in Pixels
+        let columnGapPixels = 0;
+        if (typeof this.columnGapValue === 'number') {
+            columnGapPixels = this.columnGapValue;
+        }
+        else if (typeof this.columnGapValue === 'string' && this.columnGapValue.trim().endsWith('%')) {
+            try {
+                const percent = parseFloat(this.columnGapValue);
+                if (!isNaN(percent) && contentWidth > 0) {
+                    columnGapPixels = (percent / 100) * contentWidth;
+                }
+                else if (isNaN(percent)) {
+                    console.warn(`[GridNode ${this.props.key}] Invalid percentage column gap format: "${this.columnGapValue}". Using 0px.`);
+                }
+                else if (contentWidth <= 0) {
+                    console.warn(`[GridNode ${this.props.key}] Cannot calculate percentage column gap (${this.columnGapValue}) because content width is zero. Using 0px.`);
+                }
+            }
+            catch (e) {
+                console.warn(`[GridNode ${this.props.key}] Error parsing percentage column gap: "${this.columnGapValue}". Using 0px.`, e);
+            }
+        }
+        else if (typeof this.columnGapValue === 'string' && this.columnGapValue.trim() !== '') {
+            console.warn(`[GridNode ${this.props.key}] Unsupported string column gap format: "${this.columnGapValue}". Using 0px. Only numbers and percentages ('%') are supported.`);
+        }
+        let rowGapPixels = 0;
+        if (typeof this.rowGapValue === 'number') {
+            rowGapPixels = this.rowGapValue;
+        }
+        else if (typeof this.rowGapValue === 'string' && this.rowGapValue.trim().endsWith('%')) {
+            try {
+                const percent = parseFloat(this.rowGapValue);
+                if (!isNaN(percent) && contentHeight > 0) {
+                    rowGapPixels = (percent / 100) * contentHeight;
+                }
+                else if (isNaN(percent)) {
+                    console.warn(`[GridNode ${this.props.key}] Invalid percentage row gap format: "${this.rowGapValue}". Using 0px.`);
+                }
+                else if (contentHeight <= 0) {
+                    console.warn(`[GridNode ${this.props.key}] Cannot calculate percentage row gap (${this.rowGapValue}) because content height is zero. Using 0px.`);
+                }
+            }
+            catch (e) {
+                console.warn(`[GridNode ${this.props.key}] Error parsing percentage row gap: "${this.rowGapValue}". Using 0px.`, e);
+            }
+        }
+        else if (typeof this.rowGapValue === 'string' && this.rowGapValue.trim() !== '') {
+            console.warn(`[GridNode ${this.props.key}] Unsupported string row gap format: "${this.rowGapValue}". Using 0px. Only numbers and percentages ('%') are supported.`);
+        }
+        // Ensure gaps are not negative
+        columnGapPixels = Math.max(0, columnGapPixels);
+        rowGapPixels = Math.max(0, rowGapPixels);
+        // Step 5: Calculate flex-basis percentage for children
+        const mainAxisGapPixels = this.isVertical ? rowGapPixels : columnGapPixels;
+        const mainAxisContentSize = this.isVertical ? contentHeight : contentWidth;
+        let childWidth = 0;
+        if (mainAxisContentSize > 0 && this.columns > 0) {
+            // Total space taken up by gaps on the main axis
+            const totalGapSpaceOnMainAxis = this.columns > 1 ? mainAxisGapPixels * (this.columns - 1) : 0;
+            // Calculate the space available *only* for the items themselves
+            const availableSpaceOnMainAxis = Math.max(0, mainAxisContentSize - totalGapSpaceOnMainAxis);
+            // Calculate the exact pixel of the total content size that each item should occupy
+            const exactItemWidth = availableSpaceOnMainAxis / this.columns;
+            // Ensure it's not negative (shouldn't happen, but safety)
+            childWidth = Math.max(0, exactItemWidth - 0.5); // Slightly reduce to avoid rounding issues
+        }
+        else if (this.columns === 1) {
+            // If only one column, it takes up the full basis (gaps don't apply)
+            childWidth = mainAxisContentSize;
+        }
+        // Clamp basis percentage between 0 and 100 (mostly redundant after floor/max(0) but safe)
+        childWidth = Math.max(0, Math.min(mainAxisContentSize, childWidth));
+        // Step 6: Apply layout properties to children
+        let childrenNeedRecalculation = false;
+        for (const child of this.children) {
+            let childChanged = false;
+            const currentLayoutWidth = child.node.getWidth();
+            const currentWidthValue = currentLayoutWidth.value;
+            const currentWidthUnit = currentLayoutWidth.unit;
+            let widthNeedsUpdate = false;
+            if (currentWidthUnit === Style.Unit.Point) {
+                // If current width is in points, check if the value is significantly different
+                if (Math.abs(currentWidthValue - childWidth) > 0.01) {
+                    widthNeedsUpdate = true;
+                }
+            }
+            else {
+                // If current width is not in points (e.g., Auto, Percent, Undefined), it needs to be set to points
+                widthNeedsUpdate = true;
+            }
+            if (widthNeedsUpdate) {
+                child.node.setWidth(childWidth);
+                childChanged = true;
+            }
+            // Ensure grow/shrink are set correctly for grid items
+            if (child.node.getFlexGrow() !== 0) {
+                child.node.setFlexGrow(0);
+                childChanged = true;
+            }
+            if (child.node.getFlexShrink() !== 1) {
+                child.node.setFlexShrink(1); // Allow shrinking
+                childChanged = true;
+            }
+            // Remove margins that might interfere with gap property
+            if (child.node.getMargin(Style.Edge.Bottom).unit !== Style.Unit.Undefined) {
+                child.node.setMargin(Style.Edge.Bottom, undefined);
+                childChanged = true;
+            }
+            if (child.node.getMargin(Style.Edge.Right).unit !== Style.Unit.Undefined) {
+                child.node.setMargin(Style.Edge.Right, undefined);
+                childChanged = true;
+            }
+            if (child.node.getMargin(Style.Edge.Top).unit !== Style.Unit.Undefined) {
+                child.node.setMargin(Style.Edge.Top, undefined);
+                childChanged = true;
+            }
+            if (child.node.getMargin(Style.Edge.Left).unit !== Style.Unit.Undefined) {
+                child.node.setMargin(Style.Edge.Left, undefined);
+                childChanged = true;
+            }
+            if (childChanged && !child.node.isDirty()) {
+                child.node.markDirty();
+                childrenNeedRecalculation = true;
+            }
+        }
+        // Step 7: Apply gaps using Yoga's built-in gap properties
+        const currentColumnGap = this.node.getGap(Style.Gutter.Column).value;
+        const currentRowGap = this.node.getGap(Style.Gutter.Row).value;
+        let gapsChanged = false;
+        // Use a small tolerance for comparing gap pixels
+        if (Math.abs(currentColumnGap - columnGapPixels) > 0.001) {
+            this.node.setGap(Style.Gutter.Column, columnGapPixels);
+            gapsChanged = true;
+        }
+        if (Math.abs(currentRowGap - rowGapPixels) > 0.001) {
+            this.node.setGap(Style.Gutter.Row, rowGapPixels);
+            gapsChanged = true;
+        }
+        // Step 8: Mark the grid node itself as dirty if gaps changed or children changed
+        if ((gapsChanged || childrenNeedRecalculation) && !this.node.isDirty()) {
+            this.node.markDirty();
+        }
+    }
+}
+/**
+ * Factory function to create a new GridNode instance.
+ * @param props - Grid configuration properties.
+ * @returns A new GridNode instance.
+ */
+const Grid = (props) => new GridNode(props);
+
+export { Grid, GridNode };

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

@@ -0,0 +1,34 @@
+import type { BaseProps, ImageProps } from '../canvas/canvas.type.js';
+import { type CanvasRenderingContext2D } from 'skia-canvas';
+import { BoxNode } from '../canvas/layout.canvas.util.js';
+/**
+ * Renders images with configurable sizing, positioning, and effects.
+ * Supports object-fit modes, positioning, border radius, and saturation filters.
+ */
+export declare class ImageNode extends BoxNode {
+    props: ImageProps & BaseProps;
+    private loadedImage;
+    private naturalWidth;
+    private naturalHeight;
+    private readonly loadingPromise;
+    constructor(props: ImageProps);
+    /**
+     * 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
+     */
+    private _loadImage;
+    getLoadingPromise(): Promise<void>;
+    /**
+     * Renders the image with correct sizing, clipping, and positioning.
+     * Handles object-fit, object-position, and visual effects like saturation.
+     */
+    protected _renderContent(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number): void;
+}
+/**
+ * Factory function to create ImageNode instances
+ */
+export declare const Image: (props: ImageProps) => ImageNode;
+//# sourceMappingURL=image.canvas.util.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/image.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpE,OAAO,EAAE,KAAK,wBAAwB,EAAmC,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAsBxD;;;GAGG;AACH,qBAAa,SAAU,SAAQ,OAAO;IAC5B,KAAK,EAAE,UAAU,GAAG,SAAS,CAAA;IACrC,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,YAAY,CAAI;IACxB,OAAO,CAAC,aAAa,CAAI;IACzB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAA6B;gBAEhD,KAAK,EAAE,UAAU;IAc7B;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAoHX,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;IAIzC;;;OAGG;cACgB,cAAc,CAC/B,GAAG,EAAE,wBAAwB,EAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM;CAuJjB;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,cAAyB,CAAA"}

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

@@ -0,0 +1,306 @@
+import { loadImage } from 'skia-canvas';
+import { BoxNode } from './layout.canvas.util.js';
+import { parseBorderRadius, drawRoundedRectPath } from './canvas.helper.js';
+import { promises } from 'fs';
+import { Style } from '../constant/common.const.js';
+
+/**
+ * Calculates pixel offset for image positioning based on percentage or pixel values.
+ * This handles centering, edge alignment, and percentage-based positioning.
+ */
+function calculateOffsetFromValue(positionValue, availableSpace) {
+    const value = positionValue ?? '50%';
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (typeof value === 'string' && value.endsWith('%')) {
+        const percentage = parseFloat(value) / 100;
+        return availableSpace * percentage;
+    }
+    console.warn(`[ImageNode] Invalid objectPosition value format: ${value}. Defaulting to 50%.`);
+    return availableSpace * 0.5;
+}
+/**
+ * Renders images with configurable sizing, positioning, and effects.
+ * Supports object-fit modes, positioning, border radius, and saturation filters.
+ */
+class ImageNode extends BoxNode {
+    loadedImage = null;
+    naturalWidth = 0;
+    naturalHeight = 0;
+    loadingPromise = null;
+    constructor(props) {
+        super({ name: 'Image', ...props, children: undefined });
+        this.props = {
+            objectFit: 'fill',
+            overflow: Style.Overflow.Hidden,
+            saturate: 1,
+            objectPosition: { Left: '50%', Top: '50%' },
+            ...props,
+        };
+        this.loadingPromise = this._loadImage();
+    }
+    /**
+     * 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
+     */
+    _loadImage() {
+        if (this.loadingPromise)
+            return this.loadingPromise;
+        if (this.loadedImage)
+            return Promise.resolve();
+        if (!this.props.src) {
+            const aspectRatioFromProps = typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0 ? this.props.aspectRatio : undefined;
+            this.node.setAspectRatio(aspectRatioFromProps);
+            this.naturalWidth = 0;
+            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);
+                            detectedMime = fileTypeResult?.mime;
+                            isSvg = detectedMime === 'image/svg+xml';
+                            if ((!detectedMime || detectedMime === 'application/xml') && filePath.toLowerCase().endsWith('.svg')) {
+                                isSvg = true;
+                            }
+                        }
+                        catch {
+                            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 {
+                        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();
+            }
+            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();
+            }
+        });
+    }
+    getLoadingPromise() {
+        return this.loadingPromise ?? Promise.resolve();
+    }
+    /**
+     * Renders the image with correct sizing, clipping, and positioning.
+     * Handles object-fit, object-position, and visual effects like saturation.
+     */
+    _renderContent(ctx, x, y, width, height) {
+        super._renderContent(ctx, x, y, width, height);
+        if (!this.loadedImage || width <= 0 || height <= 0)
+            return;
+        const img = this.loadedImage;
+        const imgW = this.naturalWidth;
+        const imgH = this.naturalHeight;
+        if (imgW <= 0 || imgH <= 0)
+            return;
+        // Calculate content box accounting for padding and borders
+        const paddingLeft = this.node.getComputedPadding(Style.Edge.Left);
+        const paddingTop = this.node.getComputedPadding(Style.Edge.Top);
+        const paddingRight = this.node.getComputedPadding(Style.Edge.Right);
+        const paddingBottom = this.node.getComputedPadding(Style.Edge.Bottom);
+        const borderLeft = this.node.getComputedBorder(Style.Edge.Left);
+        const borderTop = this.node.getComputedBorder(Style.Edge.Top);
+        const borderRight = this.node.getComputedBorder(Style.Edge.Right);
+        const borderBottom = this.node.getComputedBorder(Style.Edge.Bottom);
+        const contentX = x + borderLeft + paddingLeft;
+        const contentY = y + borderTop + paddingTop;
+        const contentWidth = Math.max(0, width - borderLeft - paddingLeft - borderRight - paddingRight);
+        const contentHeight = Math.max(0, height - borderTop - paddingTop - borderBottom - paddingBottom);
+        if (contentWidth <= 0 || contentHeight <= 0)
+            return;
+        // Apply clipping for border radius
+        ctx.save();
+        const outerRadii = parseBorderRadius(this.props.borderRadius);
+        const innerBorderRadii = {
+            TopLeft: Math.max(0, outerRadii.TopLeft - borderTop),
+            TopRight: Math.max(0, outerRadii.TopRight - borderTop),
+            BottomRight: Math.max(0, outerRadii.BottomRight - borderBottom),
+            BottomLeft: Math.max(0, outerRadii.BottomLeft - borderBottom),
+        };
+        const contentRadii = {
+            TopLeft: Math.max(0, innerBorderRadii.TopLeft - Math.max(paddingLeft, paddingTop)),
+            TopRight: Math.max(0, innerBorderRadii.TopRight - Math.max(paddingRight, paddingTop)),
+            BottomRight: Math.max(0, innerBorderRadii.BottomRight - Math.max(paddingRight, paddingBottom)),
+            BottomLeft: Math.max(0, innerBorderRadii.BottomLeft - Math.max(paddingLeft, paddingBottom)),
+        };
+        drawRoundedRectPath(ctx, contentX, contentY, contentWidth, contentHeight, contentRadii);
+        ctx.clip();
+        // Calculate image dimensions based on object-fit
+        const nodeRatio = contentWidth / contentHeight;
+        const imgRatio = imgW / imgH;
+        const objectFit = this.props.objectFit;
+        let dw = contentWidth;
+        let dh = contentHeight;
+        if (objectFit === 'contain') {
+            if (imgRatio > nodeRatio) {
+                dw = contentWidth;
+                dh = contentWidth / imgRatio;
+            }
+            else {
+                dh = contentHeight;
+                dw = contentHeight * imgRatio;
+            }
+        }
+        else if (objectFit === 'cover') {
+            if (imgRatio > nodeRatio) {
+                dh = contentHeight;
+                dw = contentHeight * imgRatio;
+            }
+            else {
+                dw = contentWidth;
+                dh = contentWidth / imgRatio;
+            }
+        }
+        else if (objectFit === 'none') {
+            dw = imgW;
+            dh = imgH;
+        }
+        else if (objectFit === 'scale-down') {
+            if (imgW <= contentWidth && imgH <= contentHeight) {
+                dw = imgW;
+                dh = imgH;
+            }
+            else {
+                if (imgRatio > nodeRatio) {
+                    dw = contentWidth;
+                    dh = contentWidth / imgRatio;
+                }
+                else {
+                    dh = contentHeight;
+                    dw = contentHeight * imgRatio;
+                }
+            }
+        }
+        // Calculate image position based on object-position
+        const sx = 0;
+        const sy = 0;
+        const sw = imgW;
+        const sh = imgH;
+        const availableWidth = contentWidth - dw;
+        const availableHeight = contentHeight - dh;
+        const posProps = this.props.objectPosition || {};
+        const horizontalValue = posProps.Left !== undefined ? posProps.Left : posProps.Right !== undefined ? posProps.Right : '50%';
+        const verticalValue = posProps.Top !== undefined ? posProps.Top : posProps.Bottom !== undefined ? posProps.Bottom : '50%';
+        let offsetX = calculateOffsetFromValue(horizontalValue, availableWidth);
+        let offsetY = calculateOffsetFromValue(verticalValue, availableHeight);
+        if (posProps.Left === undefined && posProps.Right !== undefined) {
+            offsetX = availableWidth - offsetX;
+        }
+        if (posProps.Top === undefined && posProps.Bottom !== undefined) {
+            offsetY = availableHeight - offsetY;
+        }
+        const dx = contentX + offsetX;
+        const dy = contentY + offsetY;
+        // Draw image with filters
+        ctx.save();
+        try {
+            if (this.props.dropShadow) {
+                const shadow = this.props.dropShadow;
+                const shadowBlur = Math.max(shadow.offsetX ?? 0, shadow.offsetY ?? 0);
+                ctx.shadowOffsetX = shadow.offsetX ?? 0;
+                ctx.shadowOffsetY = shadow.offsetY ?? 0;
+                ctx.shadowBlur = Math.max(0, shadow.blur ?? shadowBlur);
+                ctx.shadowColor = shadow.color ?? 'black';
+            }
+            const saturateValue = this.props.saturate ?? 1;
+            let filterString = '';
+            if (saturateValue !== 1) {
+                filterString += `saturate(${saturateValue * 100}%) `;
+            }
+            if (filterString) {
+                const currentFilter = ctx.filter && ctx.filter !== 'none' ? ctx.filter + ' ' : '';
+                ctx.filter = currentFilter + filterString.trim();
+            }
+            const finalDX = Math.floor(dx);
+            const finalDY = Math.floor(dy);
+            const finalDW = Math.ceil(dw + (dx - finalDX));
+            const finalDH = Math.ceil(dh + (dy - finalDY));
+            if (finalDW > 0 && finalDH > 0) {
+                ctx.drawImage(img, sx, sy, sw, sh, finalDX, finalDY, finalDW, finalDH);
+            }
+        }
+        catch (drawError) {
+            console.error('[ImageNode] Error drawing image:', drawError);
+        }
+        finally {
+            ctx.restore();
+        }
+        ctx.restore();
+    }
+}
+/**
+ * Factory function to create ImageNode instances
+ */
+const Image = (props) => new ImageNode(props);
+
+export { Image, ImageNode };