@meonode/canvas 1.0.0-beta.1

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

@@ -0,0 +1,310 @@
+'use strict';
+
+var skiaCanvas = require('skia-canvas');
+var layout_canvas_util = require('./layout.canvas.util.js');
+var canvas_helper = require('./canvas.helper.js');
+var fs = require('fs');
+var common_const = require('../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 layout_canvas_util.BoxNode {
+    loadedImage = null;
+    naturalWidth = 0;
+    naturalHeight = 0;
+    loadingPromise = null;
+    constructor(props) {
+        super({ name: 'Image', ...props, children: undefined });
+        this.props = {
+            objectFit: 'fill',
+            overflow: common_const.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 fs.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 skiaCanvas.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(common_const.Style.Edge.Left);
+        const paddingTop = this.node.getComputedPadding(common_const.Style.Edge.Top);
+        const paddingRight = this.node.getComputedPadding(common_const.Style.Edge.Right);
+        const paddingBottom = this.node.getComputedPadding(common_const.Style.Edge.Bottom);
+        const borderLeft = this.node.getComputedBorder(common_const.Style.Edge.Left);
+        const borderTop = this.node.getComputedBorder(common_const.Style.Edge.Top);
+        const borderRight = this.node.getComputedBorder(common_const.Style.Edge.Right);
+        const borderBottom = this.node.getComputedBorder(common_const.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 = canvas_helper.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)),
+        };
+        canvas_helper.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);
+
+exports.Image = Image;
+exports.ImageNode = ImageNode;
+//# sourceMappingURL=image.canvas.util.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.canvas.util.js","sources":["../../../../src/canvas/image.canvas.util.ts"],"sourcesContent":["import type { BaseProps, ImageProps } from '@/canvas/canvas.type.js'\nimport { type CanvasRenderingContext2D, Image as CanvasImage, loadImage } from 'skia-canvas'\nimport { BoxNode } from '@/canvas/layout.canvas.util.js'\nimport { drawRoundedRectPath, parseBorderRadius } from '@/canvas/canvas.helper.js'\nimport { promises as fs } from 'fs'\nimport { Style } from '@/constant/common.const.js'\n\n/**\n * Calculates pixel offset for image positioning based on percentage or pixel values.\n * This handles centering, edge alignment, and percentage-based positioning.\n */\nfunction calculateOffsetFromValue(positionValue: number | `${number}%` | undefined, availableSpace: number): number {\n  const value = positionValue ?? '50%'\n  if (typeof value === 'number') {\n    return value\n  }\n  if (typeof value === 'string' && value.endsWith('%')) {\n    const percentage = parseFloat(value) / 100\n    return availableSpace * percentage\n  }\n  console.warn(`[ImageNode] Invalid objectPosition value format: ${value}. Defaulting to 50%.`)\n  return availableSpace * 0.5\n}\n\n/**\n * Renders images with configurable sizing, positioning, and effects.\n * Supports object-fit modes, positioning, border radius, and saturation filters.\n */\nexport class ImageNode extends BoxNode {\n  declare props: ImageProps & BaseProps\n  private loadedImage: CanvasImage | null = null\n  private naturalWidth = 0\n  private naturalHeight = 0\n  private readonly loadingPromise: Promise<void> | null = null\n\n  constructor(props: ImageProps) {\n    super({ name: 'Image', ...props, children: undefined })\n\n    this.props = {\n      objectFit: 'fill',\n      overflow: Style.Overflow.Hidden,\n      saturate: 1,\n      objectPosition: { Left: '50%', Top: '50%' },\n      ...props,\n    }\n\n    this.loadingPromise = this._loadImage()\n  }\n\n  /**\n   * Loads and processes an image from various sources (URL, file path, or Buffer).\n   * Handles SVG color modifications and sets natural dimensions with an aspect ratio.\n   *\n   * @returns Promise that resolves when image loading completes\n   * @throws Error if image loading fails\n   */\n  private _loadImage(): Promise<void> {\n    if (this.loadingPromise) return this.loadingPromise\n    if (this.loadedImage) return Promise.resolve()\n\n    if (!this.props.src) {\n      const aspectRatioFromProps =\n        typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0 ? this.props.aspectRatio : undefined\n      this.node.setAspectRatio(aspectRatioFromProps)\n      this.naturalWidth = 0\n      this.naturalHeight = 0\n\n      return Promise.resolve()\n    }\n\n    return new Promise(async resolve => {\n      const { fileTypeFromBuffer, fileTypeFromFile } = await import('file-type')\n      let finalSource: string | Buffer = this.props.src\n      let isSvg = false\n      let contentBuffer: Buffer | null = null\n      let detectedMime: string | undefined\n\n      try {\n        if (typeof this.props.src === 'string') {\n          if (this.props.src.startsWith('http')) {\n            const response = await fetch(this.props.src)\n            if (!response.ok) {\n              throw new Error(`HTTP error ${response.status} fetching image: ${this.props.src}`)\n            }\n            const imageArrayBuffer = await response.arrayBuffer()\n            contentBuffer = Buffer.from(imageArrayBuffer)\n            finalSource = contentBuffer\n\n            const fileTypeResult = await fileTypeFromBuffer(contentBuffer)\n            detectedMime = fileTypeResult?.mime\n            isSvg = detectedMime === 'image/svg+xml'\n\n            if (\n              (!detectedMime || detectedMime === 'application/xml') &&\n              contentBuffer.toString('utf-8').includes('<svg')\n            ) {\n              isSvg = true\n            }\n          } else {\n            finalSource = this.props.src\n            const filePath = this.props.src\n\n            try {\n              const fileTypeResult = await fileTypeFromFile(filePath)\n              detectedMime = fileTypeResult?.mime\n              isSvg = detectedMime === 'image/svg+xml'\n\n              if ((!detectedMime || detectedMime === 'application/xml') && filePath.toLowerCase().endsWith('.svg')) {\n                isSvg = true\n              }\n            } catch {\n              isSvg = filePath.toLowerCase().endsWith('.svg')\n            }\n\n            if (isSvg && this.props.color) {\n              try {\n                contentBuffer = await fs.readFile(filePath)\n              } catch {\n                isSvg = false\n                contentBuffer = null\n              }\n            }\n          }\n        } else {\n          contentBuffer = this.props.src\n          finalSource = contentBuffer\n\n          const fileTypeResult = await fileTypeFromBuffer(contentBuffer)\n          detectedMime = fileTypeResult?.mime\n          isSvg = detectedMime === 'image/svg+xml'\n        }\n\n        if (isSvg && this.props.color && contentBuffer) {\n          const svgString = contentBuffer.toString('utf-8')\n          const modifiedSvgString = svgString.replace(/fill=\"[^\"]*\"/g, `fill=\"${this.props.color}\"`)\n\n          if (modifiedSvgString !== svgString) {\n            finalSource = Buffer.from(modifiedSvgString)\n          } else {\n            finalSource = contentBuffer\n          }\n        }\n\n        const img = await loadImage(finalSource as never)\n        this.loadedImage = img\n        this.naturalWidth = img.width\n        this.naturalHeight = img.height\n\n        const calculatedAspectRatio =\n          this.naturalWidth > 0 && this.naturalHeight > 0 ? this.naturalWidth / this.naturalHeight : undefined\n\n        const finalAspectRatio =\n          typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0\n            ? this.props.aspectRatio\n            : calculatedAspectRatio\n\n        this.node.setAspectRatio(finalAspectRatio)\n\n        this.props.onLoad?.()\n        resolve()\n      } catch (error: any) {\n        this.naturalWidth = 0\n        this.naturalHeight = 0\n        const finalAspectRatioOnError =\n          typeof this.props.aspectRatio === 'number' && this.props.aspectRatio > 0 ? this.props.aspectRatio : undefined\n        this.node.setAspectRatio(finalAspectRatioOnError)\n        this.props.onError?.(error)\n        resolve()\n      }\n    })\n  }\n\n  public getLoadingPromise(): Promise<void> {\n    return this.loadingPromise ?? Promise.resolve()\n  }\n\n  /**\n   * Renders the image with correct sizing, clipping, and positioning.\n   * Handles object-fit, object-position, and visual effects like saturation.\n   */\n  protected override _renderContent(\n    ctx: CanvasRenderingContext2D,\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n  ) {\n    super._renderContent(ctx, x, y, width, height)\n\n    if (!this.loadedImage || width <= 0 || height <= 0) return\n    const img = this.loadedImage\n    const imgW = this.naturalWidth\n    const imgH = this.naturalHeight\n    if (imgW <= 0 || imgH <= 0) return\n\n    // Calculate content box accounting for padding and borders\n    const paddingLeft = this.node.getComputedPadding(Style.Edge.Left)\n    const paddingTop = this.node.getComputedPadding(Style.Edge.Top)\n    const paddingRight = this.node.getComputedPadding(Style.Edge.Right)\n    const paddingBottom = this.node.getComputedPadding(Style.Edge.Bottom)\n    const borderLeft = this.node.getComputedBorder(Style.Edge.Left)\n    const borderTop = this.node.getComputedBorder(Style.Edge.Top)\n    const borderRight = this.node.getComputedBorder(Style.Edge.Right)\n    const borderBottom = this.node.getComputedBorder(Style.Edge.Bottom)\n    const contentX = x + borderLeft + paddingLeft\n    const contentY = y + borderTop + paddingTop\n    const contentWidth = Math.max(0, width - borderLeft - paddingLeft - borderRight - paddingRight)\n    const contentHeight = Math.max(0, height - borderTop - paddingTop - borderBottom - paddingBottom)\n\n    if (contentWidth <= 0 || contentHeight <= 0) return\n\n    // Apply clipping for border radius\n    ctx.save()\n    const outerRadii = parseBorderRadius(this.props.borderRadius)\n    const innerBorderRadii = {\n      TopLeft: Math.max(0, outerRadii.TopLeft - borderTop),\n      TopRight: Math.max(0, outerRadii.TopRight - borderTop),\n      BottomRight: Math.max(0, outerRadii.BottomRight - borderBottom),\n      BottomLeft: Math.max(0, outerRadii.BottomLeft - borderBottom),\n    }\n    const contentRadii = {\n      TopLeft: Math.max(0, innerBorderRadii.TopLeft - Math.max(paddingLeft, paddingTop)),\n      TopRight: Math.max(0, innerBorderRadii.TopRight - Math.max(paddingRight, paddingTop)),\n      BottomRight: Math.max(0, innerBorderRadii.BottomRight - Math.max(paddingRight, paddingBottom)),\n      BottomLeft: Math.max(0, innerBorderRadii.BottomLeft - Math.max(paddingLeft, paddingBottom)),\n    }\n    drawRoundedRectPath(ctx, contentX, contentY, contentWidth, contentHeight, contentRadii)\n    ctx.clip()\n\n    // Calculate image dimensions based on object-fit\n    const nodeRatio = contentWidth / contentHeight\n    const imgRatio = imgW / imgH\n    const objectFit = this.props.objectFit\n    let dw = contentWidth\n    let dh = contentHeight\n\n    if (objectFit === 'contain') {\n      if (imgRatio > nodeRatio) {\n        dw = contentWidth\n        dh = contentWidth / imgRatio\n      } else {\n        dh = contentHeight\n        dw = contentHeight * imgRatio\n      }\n    } else if (objectFit === 'cover') {\n      if (imgRatio > nodeRatio) {\n        dh = contentHeight\n        dw = contentHeight * imgRatio\n      } else {\n        dw = contentWidth\n        dh = contentWidth / imgRatio\n      }\n    } else if (objectFit === 'none') {\n      dw = imgW\n      dh = imgH\n    } else if (objectFit === 'scale-down') {\n      if (imgW <= contentWidth && imgH <= contentHeight) {\n        dw = imgW\n        dh = imgH\n      } else {\n        if (imgRatio > nodeRatio) {\n          dw = contentWidth\n          dh = contentWidth / imgRatio\n        } else {\n          dh = contentHeight\n          dw = contentHeight * imgRatio\n        }\n      }\n    }\n\n    // Calculate image position based on object-position\n    const sx = 0\n    const sy = 0\n    const sw = imgW\n    const sh = imgH\n\n    const availableWidth = contentWidth - dw\n    const availableHeight = contentHeight - dh\n    const posProps = this.props.objectPosition || {}\n    const horizontalValue =\n      posProps.Left !== undefined ? posProps.Left : posProps.Right !== undefined ? posProps.Right : '50%'\n    const verticalValue =\n      posProps.Top !== undefined ? posProps.Top : posProps.Bottom !== undefined ? posProps.Bottom : '50%'\n\n    let offsetX = calculateOffsetFromValue(horizontalValue, availableWidth)\n    let offsetY = calculateOffsetFromValue(verticalValue, availableHeight)\n\n    if (posProps.Left === undefined && posProps.Right !== undefined) {\n      offsetX = availableWidth - offsetX\n    }\n    if (posProps.Top === undefined && posProps.Bottom !== undefined) {\n      offsetY = availableHeight - offsetY\n    }\n\n    const dx = contentX + offsetX\n    const dy = contentY + offsetY\n\n    // Draw image with filters\n    ctx.save()\n    try {\n      if (this.props.dropShadow) {\n        const shadow = this.props.dropShadow\n        const shadowBlur = Math.max(shadow.offsetX ?? 0, shadow.offsetY ?? 0)\n        ctx.shadowOffsetX = shadow.offsetX ?? 0\n        ctx.shadowOffsetY = shadow.offsetY ?? 0\n        ctx.shadowBlur = Math.max(0, shadow.blur ?? shadowBlur)\n        ctx.shadowColor = shadow.color ?? 'black'\n      }\n\n      const saturateValue = this.props.saturate ?? 1\n      let filterString = ''\n      if (saturateValue !== 1) {\n        filterString += `saturate(${saturateValue * 100}%) `\n      }\n\n      if (filterString) {\n        const currentFilter = ctx.filter && ctx.filter !== 'none' ? ctx.filter + ' ' : ''\n        ctx.filter = currentFilter + filterString.trim()\n      }\n\n      const finalDX = Math.floor(dx)\n      const finalDY = Math.floor(dy)\n      const finalDW = Math.ceil(dw + (dx - finalDX))\n      const finalDH = Math.ceil(dh + (dy - finalDY))\n\n      if (finalDW > 0 && finalDH > 0) {\n        ctx.drawImage(img, sx, sy, sw, sh, finalDX, finalDY, finalDW, finalDH)\n      }\n    } catch (drawError) {\n      console.error('[ImageNode] Error drawing image:', drawError)\n    } finally {\n      ctx.restore()\n    }\n\n    ctx.restore()\n  }\n}\n\n/**\n * Factory function to create ImageNode instances\n */\nexport const Image = (props: ImageProps) => new ImageNode(props)\n"],"names":["BoxNode","Style","fs","loadImage","parseBorderRadius","drawRoundedRectPath"],"mappings":"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"}

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

@@ -0,0 +1,123 @@
+import { type CanvasRenderingContext2D } from 'skia-canvas';
+import type { BaseProps, BoxProps } from '../canvas/canvas.type.js';
+import { Node } from '../constant/common.const.js';
+/**
+ * @class BoxNode
+ * @classdesc Base node class for rendering rectangular boxes with layout, styling, and children.
+ * It uses the Yoga layout engine for positioning and sizing.
+ */
+export declare class BoxNode {
+    /**
+     * @property {Partial<BoxProps>} initialProps - Original props passed to the constructor before any modifications.
+     */
+    initialProps: Partial<BoxProps>;
+    /**
+     * @property {Node} node - The Yoga layout engine node.
+     */
+    node: Node;
+    /**
+     * @property {BoxNode[]} children - Child nodes.
+     */
+    children: BoxNode[];
+    /**
+     * @property {BoxProps & BaseProps} props - Current props including defaults and inherited values.
+     */
+    props: BoxProps & BaseProps;
+    /**
+     * @property {string} name - Node type name.
+     */
+    readonly name?: string;
+    /**
+     * @property {string} key - Unique node identifier.
+     */
+    key?: string;
+    /**
+     * Creates a new BoxNode instance
+     * @param props - Initial box properties and styling
+     */
+    constructor(props?: BoxProps & BaseProps);
+    /**
+     * Processes and appends any children passed in the initial props.
+     */
+    processInitialChildren(): void;
+    /**
+     * Inherits styles from the parent node.
+     * @param {BoxProps & BaseProps} parentProps - Parent node properties to inherit from.
+     */
+    protected resolveInheritedStyles(parentProps: BoxProps & BaseProps): void;
+    /**
+     * Applies node type-specific default values after inheritance.
+     */
+    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
+     */
+    protected appendChild(child: BoxNode, index: number): void;
+    /**
+     * Performs final layout adjustments recursively after the main layout calculation.
+     * @returns {boolean} Whether any node was marked as dirty during finalization.
+     */
+    finalizeLayout(): boolean;
+    /**
+     * Hook for subclasses to update layout based on computed size.
+     */
+    protected updateLayoutBasedOnComputedSize(): void;
+    /**
+     * Applies layout properties to the Yoga node.
+     * @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.
+     */
+    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
+     */
+    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.
+ * @returns {BoxNode} New BoxNode instance.
+ */
+export declare const Box: (props: BoxProps) => BoxNode;
+/**
+ * @class ColumnNode
+ * Node class for vertical column layout
+ */
+export declare class ColumnNode extends BoxNode {
+    constructor(props?: BoxProps & BaseProps);
+}
+/**
+ * Creates a new ColumnNode instance.
+ * @param {BoxProps} props - Column properties and configuration.
+ * @returns {ColumnNode} New ColumnNode instance.
+ */
+export declare const Column: (props: BoxProps) => ColumnNode;
+/**
+ * @class RowNode
+ * @classdesc Node class for horizontal row layout.
+ */
+export declare class RowNode extends BoxNode {
+    constructor(props?: BoxProps & BaseProps);
+}
+/**
+ * Creates a new RowNode instance.
+ * @param {BoxProps} props - Row properties and configuration.
+ * @returns {RowNode} New RowNode instance.
+ */
+export declare const Row: (props: BoxProps) => RowNode;
+//# sourceMappingURL=layout.canvas.util.d.ts.map

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

@@ -0,0 +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"}