@meonode/canvas 1.0.0-beta.1

package/dist/cjs/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/cjs/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/cjs/canvas/grid.canvas.util.js

@@ -0,0 +1,263 @@
+'use strict';
+
+var layout_canvas_util = require('./layout.canvas.util.js');
+var common_const = require('../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 layout_canvas_util.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 = common_const.Style.FlexDirection.Row;
+                break;
+            case 'column':
+                flexDirection = common_const.Style.FlexDirection.Column;
+                break;
+            case 'row-reverse':
+                flexDirection = common_const.Style.FlexDirection.RowReverse;
+                break;
+            case 'column-reverse':
+                flexDirection = common_const.Style.FlexDirection.ColumnReverse;
+                break;
+            default:
+                console.warn(`[GridNode] Invalid direction "${direction}". Defaulting to "row".`);
+                flexDirection = common_const.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: common_const.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(common_const.Style.Edge.Left);
+        const paddingRight = this.node.getComputedPadding(common_const.Style.Edge.Right);
+        const paddingTop = this.node.getComputedPadding(common_const.Style.Edge.Top);
+        const paddingBottom = this.node.getComputedPadding(common_const.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 === common_const.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(common_const.Style.Edge.Bottom).unit !== common_const.Style.Unit.Undefined) {
+                child.node.setMargin(common_const.Style.Edge.Bottom, undefined);
+                childChanged = true;
+            }
+            if (child.node.getMargin(common_const.Style.Edge.Right).unit !== common_const.Style.Unit.Undefined) {
+                child.node.setMargin(common_const.Style.Edge.Right, undefined);
+                childChanged = true;
+            }
+            if (child.node.getMargin(common_const.Style.Edge.Top).unit !== common_const.Style.Unit.Undefined) {
+                child.node.setMargin(common_const.Style.Edge.Top, undefined);
+                childChanged = true;
+            }
+            if (child.node.getMargin(common_const.Style.Edge.Left).unit !== common_const.Style.Unit.Undefined) {
+                child.node.setMargin(common_const.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(common_const.Style.Gutter.Column).value;
+        const currentRowGap = this.node.getGap(common_const.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(common_const.Style.Gutter.Column, columnGapPixels);
+            gapsChanged = true;
+        }
+        if (Math.abs(currentRowGap - rowGapPixels) > 0.001) {
+            this.node.setGap(common_const.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);
+
+exports.Grid = Grid;
+exports.GridNode = GridNode;
+//# sourceMappingURL=grid.canvas.util.js.map

package/dist/cjs/canvas/grid.canvas.util.js.map

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

package/dist/cjs/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/cjs/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"}