@meonode/canvas 2.0.2 → 2.0.4

package/dist/esm/canvas/chart.canvas.js

@@ -1,29 +1,7 @@
-import { BoxNode, RowNode, ColumnNode } from './layout.canvas.js';
+import { BoxNode, RowNode } from './layout.canvas.js';
 import { Style } from '../constant/common.const.js';
 import { TextNode } from './text.canvas.js';
-import { ImageNode } from './image.canvas.js';
 
-/**
- * Local buildTree for pre-computed render function results.
- * Handles only node types that render functions would return (Box, Column, Row, Text, Image).
- * Avoids circular dependency with root.canvas.ts.
- */
-function buildDescriptorTree(descriptor) {
-    switch (descriptor.__type) {
-        case 'Box':
-            return new BoxNode({ ...descriptor.props, children: descriptor.children?.map(buildDescriptorTree) });
-        case 'Column':
-            return new ColumnNode({ ...descriptor.props, children: descriptor.children?.map(buildDescriptorTree) });
-        case 'Row':
-            return new RowNode({ ...descriptor.props, children: descriptor.children?.map(buildDescriptorTree) });
-        case 'Image':
-            return new ImageNode(descriptor.props);
-        case 'Text':
-            return new TextNode(descriptor.text, descriptor.props);
-        default:
-            return new BoxNode({});
-    }
-}
 class ChartNode extends BoxNode {
     chartData;
     chartType;
@@ -68,9 +46,9 @@ class ChartNode extends BoxNode {
             }
         }
     }
-    _renderContent(ctx, x, y, width, height) {
+    async _renderContent(ctx, x, y, width, height) {
         // First render background/borders from parent
-        super._renderContent(ctx, x, y, width, height);
+        await super._renderContent(ctx, x, y, width, height);
         // Then render chart-specific content
         const paddingLeft = this.node.getComputedPadding(Style.Edge.Left);
         const paddingRight = this.node.getComputedPadding(Style.Edge.Right);
@@ -82,16 +60,16 @@ class ChartNode extends BoxNode {
         const contentHeight = height - paddingTop - paddingBottom;
         switch (this.chartType) {
             case 'bar':
-                this.renderBarChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                await this.renderBarChart(ctx, contentX, contentY, contentWidth, contentHeight);
                 break;
             case 'line':
-                this.renderLineChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                await this.renderLineChart(ctx, contentX, contentY, contentWidth, contentHeight);
                 break;
             case 'pie':
-                this.renderPieChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                await this.renderPieChart(ctx, contentX, contentY, contentWidth, contentHeight);
                 break;
             case 'doughnut':
-                this.renderDoughnutChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                await this.renderDoughnutChart(ctx, contentX, contentY, contentWidth, contentHeight);
                 break;
         }
     }
@@ -211,7 +189,7 @@ class ChartNode extends BoxNode {
             chartY: chartAreaY,
         };
     }
-    renderBarChart(ctx, x, y, width, height) {
+    async renderBarChart(ctx, x, y, width, height) {
         if (this.chartType !== 'bar')
             return;
         const chartData = this.chartData;
@@ -226,8 +204,7 @@ class ChartNode extends BoxNode {
         if (chartOptions?.showYAxis) {
             const fontSize = chartOptions.yAxisFontSize || 12;
             ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
-            const maxLabel = chartOptions._preComputedYAxisLabels?.[0] ??
-                (chartOptions.yAxisLabelFormatter ? chartOptions.yAxisLabelFormatter(maxValue) : this.getSmartYAxisFormatter(maxValue)(maxValue));
+            const maxLabel = chartOptions.yAxisLabelFormatter ? await chartOptions.yAxisLabelFormatter(maxValue) : this.getSmartYAxisFormatter(maxValue)(maxValue);
             const yAxisWidth = ctx.measureText(maxLabel).width + 10;
             chartX += yAxisWidth;
             chartWidth -= yAxisWidth;
@@ -261,8 +238,7 @@ class ChartNode extends BoxNode {
                 ctx.stroke();
                 if (chartOptions?.showYAxis) {
                     const value = maxValue - (maxValue / 5) * i;
-                    const label = chartOptions._preComputedYAxisLabels?.[i] ??
-                        (chartOptions.yAxisLabelFormatter ? chartOptions.yAxisLabelFormatter(value) : this.getSmartYAxisFormatter(maxValue)(value));
+                    const label = chartOptions.yAxisLabelFormatter ? await chartOptions.yAxisLabelFormatter(value) : this.getSmartYAxisFormatter(maxValue)(value);
                     TextNode.renderSimpleText(ctx, label, chartX - 5, gridY, {
                         color: chartOptions.yAxisColor || chartOptions.axisColor || '#000',
                         fontSize: chartOptions.yAxisFontSize || 12,
@@ -275,9 +251,11 @@ class ChartNode extends BoxNode {
             ctx.setLineDash([]);
         }
         // Render bars
-        labels.forEach((label, index) => {
+        for (let index = 0; index < labels.length; index++) {
+            const label = labels[index];
             const groupX = chartX + index * groupWidth + barSpacing / 2;
-            datasets.forEach((dataset, datasetIndex) => {
+            for (let datasetIndex = 0; datasetIndex < datasets.length; datasetIndex++) {
+                const dataset = datasets[datasetIndex];
                 const barHeight = (dataset.data[index] / maxValue) * finalChartHeight;
                 const barX = groupX + datasetIndex * barWidth;
                 const barY = chartY + finalChartHeight - barHeight;
@@ -288,21 +266,13 @@ class ChartNode extends BoxNode {
                     const value = dataset.data[index];
                     const valueX = barX + barWidth / 2;
                     const valueY = barY - 5; // 5px padding above bar
-                    const preComputedValueDesc = chartOptions._preComputedValueItems?.[datasetIndex]?.[index];
-                    if (preComputedValueDesc) {
-                        const valueNode = buildDescriptorTree(preComputedValueDesc);
-                        valueNode.processInitialChildren();
-                        valueNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
-                        const layout = valueNode.node.getComputedLayout();
-                        valueNode.render(ctx, valueX - layout.width / 2, valueY - layout.height);
-                    }
-                    else if (chartOptions.renderValueItem) {
-                        const valueNode = chartOptions.renderValueItem({ item: value, index, datasetIndex });
+                    if (chartOptions.renderValueItem) {
+                        const valueNode = await chartOptions.renderValueItem({ item: value, index, datasetIndex });
                         if (valueNode) {
                             valueNode.processInitialChildren();
                             valueNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
                             const layout = valueNode.node.getComputedLayout();
-                            valueNode.render(ctx, valueX - layout.width / 2, valueY - layout.height);
+                            await valueNode.render(ctx, valueX - layout.width / 2, valueY - layout.height);
                         }
                     }
                     else {
@@ -315,25 +285,17 @@ class ChartNode extends BoxNode {
                         });
                     }
                 }
-            });
+            }
             // Render labels
             if (chartOptions?.showLabels) {
-                const displayLabel = chartOptions._preComputedXAxisLabels?.[index] ?? (chartOptions.xAxisLabelFormatter ? chartOptions.xAxisLabelFormatter(label, index) : label);
-                const preComputedLabelDesc = chartOptions._preComputedLabelItems?.[index];
-                if (preComputedLabelDesc) {
-                    const labelNode = buildDescriptorTree(preComputedLabelDesc);
-                    labelNode.processInitialChildren();
-                    labelNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
-                    const layout = labelNode.node.getComputedLayout();
-                    labelNode.render(ctx, groupX + (groupWidth - barSpacing) / 2 - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
-                }
-                else if (chartOptions.renderLabelItem) {
-                    const labelNode = chartOptions.renderLabelItem({ item: label, index });
+                const displayLabel = chartOptions.xAxisLabelFormatter ? await chartOptions.xAxisLabelFormatter(label, index) : label;
+                if (chartOptions.renderLabelItem) {
+                    const labelNode = await chartOptions.renderLabelItem({ item: label, index });
                     if (labelNode) {
                         labelNode.processInitialChildren();
                         labelNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
                         const layout = labelNode.node.getComputedLayout();
-                        labelNode.render(ctx, groupX + (groupWidth - barSpacing) / 2 - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
+                        await labelNode.render(ctx, groupX + (groupWidth - barSpacing) / 2 - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
                     }
                 }
                 else {
@@ -346,13 +308,13 @@ class ChartNode extends BoxNode {
                     });
                 }
             }
-        });
+        }
         // Render legend
         if (chartOptions?.showLegend) {
-            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+            await this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
         }
     }
-    renderLineChart(ctx, x, y, width, height) {
+    async renderLineChart(ctx, x, y, width, height) {
         if (this.chartType !== 'line')
             return;
         const chartData = this.chartData;
@@ -367,8 +329,7 @@ class ChartNode extends BoxNode {
         if (chartOptions?.showYAxis) {
             const fontSize = chartOptions.yAxisFontSize || 12;
             ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
-            const maxLabel = chartOptions._preComputedYAxisLabels?.[0] ??
-                (chartOptions.yAxisLabelFormatter ? chartOptions.yAxisLabelFormatter(maxValue) : this.getSmartYAxisFormatter(maxValue)(maxValue));
+            const maxLabel = chartOptions.yAxisLabelFormatter ? await chartOptions.yAxisLabelFormatter(maxValue) : this.getSmartYAxisFormatter(maxValue)(maxValue);
             const yAxisWidth = ctx.measureText(maxLabel).width + 10;
             chartX += yAxisWidth;
             chartWidth -= yAxisWidth;
@@ -400,8 +361,7 @@ class ChartNode extends BoxNode {
                 ctx.stroke();
                 if (chartOptions?.showYAxis) {
                     const value = maxValue - (maxValue / 5) * i;
-                    const label = chartOptions._preComputedYAxisLabels?.[i] ??
-                        (chartOptions.yAxisLabelFormatter ? chartOptions.yAxisLabelFormatter(value) : this.getSmartYAxisFormatter(maxValue)(value));
+                    const label = chartOptions.yAxisLabelFormatter ? await chartOptions.yAxisLabelFormatter(value) : this.getSmartYAxisFormatter(maxValue)(value);
                     TextNode.renderSimpleText(ctx, label, chartX - 5, gridY, {
                         color: chartOptions.yAxisColor || chartOptions.axisColor || '#000',
                         fontSize: chartOptions.yAxisFontSize || 12,
@@ -414,11 +374,13 @@ class ChartNode extends BoxNode {
             ctx.setLineDash([]);
         }
         // Render lines and points
-        datasets.forEach((dataset, datasetIndex) => {
+        for (let datasetIndex = 0; datasetIndex < datasets.length; datasetIndex++) {
+            const dataset = datasets[datasetIndex];
             ctx.strokeStyle = dataset.color || this.generateColor(datasetIndex);
             ctx.lineWidth = 2;
             ctx.beginPath();
-            dataset.data.forEach((value, index) => {
+            for (let index = 0; index < dataset.data.length; index++) {
+                const value = dataset.data[index];
                 const pointX = chartX + index * pointSpacing;
                 const pointY = chartY + finalChartHeight - (value / maxValue) * finalChartHeight;
                 if (index === 0) {
@@ -427,38 +389,31 @@ class ChartNode extends BoxNode {
                 else {
                     ctx.lineTo(pointX, pointY);
                 }
-            });
+            }
             ctx.stroke();
             // Render points
-            dataset.data.forEach((value, index) => {
+            for (let index = 0; index < dataset.data.length; index++) {
                 const pointX = chartX + index * pointSpacing;
-                const pointY = chartY + finalChartHeight - (value / maxValue) * finalChartHeight;
+                const pointY = chartY + finalChartHeight - (dataset.data[index] / maxValue) * finalChartHeight;
                 ctx.fillStyle = dataset.color || this.generateColor(datasetIndex);
                 ctx.beginPath();
                 ctx.arc(pointX, pointY, 4, 0, Math.PI * 2);
                 ctx.fill();
-            });
-        });
+            }
+        }
         // Render labels
         if (chartOptions?.showLabels) {
-            labels.forEach((label, index) => {
+            for (let index = 0; index < labels.length; index++) {
+                const label = labels[index];
                 const pointX = chartX + index * pointSpacing;
-                const displayLabel = chartOptions._preComputedXAxisLabels?.[index] ?? (chartOptions.xAxisLabelFormatter ? chartOptions.xAxisLabelFormatter(label, index) : label);
-                const preComputedLabelDesc = chartOptions._preComputedLabelItems?.[index];
-                if (preComputedLabelDesc) {
-                    const labelNode = buildDescriptorTree(preComputedLabelDesc);
-                    labelNode.processInitialChildren();
-                    labelNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
-                    const layout = labelNode.node.getComputedLayout();
-                    labelNode.render(ctx, pointX - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
-                }
-                else if (chartOptions.renderLabelItem) {
-                    const labelNode = chartOptions.renderLabelItem({ item: label, index });
+                const displayLabel = chartOptions.xAxisLabelFormatter ? await chartOptions.xAxisLabelFormatter(label, index) : label;
+                if (chartOptions.renderLabelItem) {
+                    const labelNode = await chartOptions.renderLabelItem({ item: label, index });
                     if (labelNode) {
                         labelNode.processInitialChildren();
                         labelNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
                         const layout = labelNode.node.getComputedLayout();
-                        labelNode.render(ctx, pointX - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
+                        await labelNode.render(ctx, pointX - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
                     }
                 }
                 else {
@@ -470,13 +425,13 @@ class ChartNode extends BoxNode {
                         textBaseline: 'middle',
                     });
                 }
-            });
+            }
         }
         if (chartOptions?.showLegend) {
-            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+            await this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
         }
     }
-    renderPieChart(ctx, x, y, width, height) {
+    async renderPieChart(ctx, x, y, width, height) {
         if (this.chartType !== 'pie')
             return;
         const data = this.chartData;
@@ -491,7 +446,8 @@ class ChartNode extends BoxNode {
         const radius = Math.min(chartWidth, chartHeight) / 2 - 10;
         const total = data.reduce((sum, point) => sum + point.value, 0);
         let currentAngle = -Math.PI / 2; // Start at top
-        data.forEach((point, index) => {
+        for (let index = 0; index < data.length; index++) {
+            const point = data[index];
             const sliceAngle = (point.value / total) * Math.PI * 2;
             const startAngle = currentAngle;
             const endAngle = currentAngle + sliceAngle;
@@ -511,21 +467,13 @@ class ChartNode extends BoxNode {
                 const labelRadius = radius * 0.7;
                 const labelX = centerX + Math.cos(labelAngle) * labelRadius;
                 const labelY = centerY + Math.sin(labelAngle) * labelRadius;
-                const preComputedLabelDesc = chartOptions._preComputedLabelItems?.[index];
-                if (preComputedLabelDesc) {
-                    const labelNode = buildDescriptorTree(preComputedLabelDesc);
-                    labelNode.processInitialChildren();
-                    labelNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
-                    const layout = labelNode.node.getComputedLayout();
-                    labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
-                }
-                else if (chartOptions.renderLabelItem) {
-                    const labelNode = chartOptions.renderLabelItem({ item: point, index });
+                if (chartOptions.renderLabelItem) {
+                    const labelNode = await chartOptions.renderLabelItem({ item: point, index });
                     if (labelNode) {
                         labelNode.processInitialChildren();
                         labelNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
                         const layout = labelNode.node.getComputedLayout();
-                        labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
+                        await labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
                     }
                 }
                 else {
@@ -539,12 +487,12 @@ class ChartNode extends BoxNode {
                 }
             }
             currentAngle = endAngle;
-        });
+        }
         if (chartOptions?.showLegend) {
-            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+            await this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
         }
     }
-    renderDoughnutChart(ctx, x, y, width, height) {
+    async renderDoughnutChart(ctx, x, y, width, height) {
         if (this.chartType !== 'doughnut')
             return;
         const data = this.chartData;
@@ -560,7 +508,8 @@ class ChartNode extends BoxNode {
         const innerRadius = outerRadius * (chartOptions?.innerRadius ?? 0.6);
         const total = data.reduce((sum, point) => sum + point.value, 0);
         let currentAngle = -Math.PI / 2;
-        data.forEach((point, index) => {
+        for (let index = 0; index < data.length; index++) {
+            const point = data[index];
             const sliceAngle = (point.value / total) * Math.PI * 2;
             const startAngle = currentAngle;
             const endAngle = currentAngle + sliceAngle;
@@ -579,21 +528,13 @@ class ChartNode extends BoxNode {
                 const labelRadius = innerRadius + (outerRadius - innerRadius) / 2;
                 const labelX = centerX + Math.cos(labelAngle) * labelRadius;
                 const labelY = centerY + Math.sin(labelAngle) * labelRadius;
-                const preComputedLabelDesc = chartOptions._preComputedLabelItems?.[index];
-                if (preComputedLabelDesc) {
-                    const labelNode = buildDescriptorTree(preComputedLabelDesc);
-                    labelNode.processInitialChildren();
-                    labelNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
-                    const layout = labelNode.node.getComputedLayout();
-                    labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
-                }
-                else if (chartOptions.renderLabelItem) {
-                    const labelNode = chartOptions.renderLabelItem({ item: point, index });
+                if (chartOptions.renderLabelItem) {
+                    const labelNode = await chartOptions.renderLabelItem({ item: point, index });
                     if (labelNode) {
                         labelNode.processInitialChildren();
                         labelNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
                         const layout = labelNode.node.getComputedLayout();
-                        labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
+                        await labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
                     }
                 }
                 else {
@@ -607,48 +548,31 @@ class ChartNode extends BoxNode {
                 }
             }
             currentAngle = endAngle;
-        });
+        }
         if (chartOptions?.showLegend) {
-            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+            await this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
         }
     }
-    renderLegend(ctx, x, y, width, height) {
-        const { renderLegendItem, _preComputedLegendItems } = this.chartOptions;
-        if (_preComputedLegendItems) {
-            const finalNodes = _preComputedLegendItems.filter((desc) => !!desc).map(desc => buildDescriptorTree(desc));
-            if (finalNodes.length > 0) {
-                const legendContainer = new RowNode({
-                    children: finalNodes,
-                    width,
-                    height,
-                    justifyContent: Style.Justify.Center,
-                    alignItems: Style.Align.Center,
-                    flexWrap: Style.Wrap.Wrap,
-                    gap: 10,
-                });
-                legendContainer.processInitialChildren();
-                legendContainer.node.calculateLayout(width, height, Style.Direction.LTR);
-                legendContainer.render(ctx, x, y);
-            }
-            return;
-        }
+    async renderLegend(ctx, x, y, width, height) {
+        const chartOptions = this.chartOptions;
+        const renderLegendItem = chartOptions?.renderLegendItem;
         if (renderLegendItem) {
             let legendNodes;
             if (this.chartType === 'bar' || this.chartType === 'line') {
                 const items = this.chartData.datasets;
                 const render = renderLegendItem;
-                legendNodes = items.map((item, index) => {
+                legendNodes = await Promise.all(items.map(async (item, index) => {
                     const color = item.color || this.generateColor(index);
                     return render({ item, index, color });
-                });
+                }));
             }
             else {
                 const items = this.chartData;
                 const render = renderLegendItem;
-                legendNodes = items.map((item, index) => {
+                legendNodes = await Promise.all(items.map(async (item, index) => {
                     const color = item.color || this.generateColor(index);
                     return render({ item, index, color });
-                });
+                }));
             }
             const finalNodes = legendNodes.filter((node) => !!node);
             if (finalNodes.length > 0) {
@@ -663,11 +587,13 @@ class ChartNode extends BoxNode {
                 });
                 legendContainer.processInitialChildren();
                 legendContainer.node.calculateLayout(width, height, Style.Direction.LTR);
-                legendContainer.render(ctx, x, y);
+                await legendContainer.render(ctx, x, y);
             }
             return;
         }
         // Fallback to default rendering if renderLegendItem is not provided
+        if (!this.chartData)
+            return;
         const legendItems = 'datasets' in this.chartData
             ? this.chartData.datasets.map(d => ({ label: d.label, value: d.data.reduce((a, b) => a + b, 0) }))
             : this.chartData;
@@ -677,7 +603,7 @@ class ChartNode extends BoxNode {
         const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
         const itemHeight = Math.ceil(textHeight + 8);
         const boxSize = Math.min(15, itemHeight - 2);
-        const position = this.chartOptions.legendPosition;
+        const position = this.chartOptions?.legendPosition;
         if (position === 'top' || position === 'bottom') {
             const itemPadding = 20; // horizontal padding between items
             const rows = [];

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/grid.canvas.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAiB,aAAa,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAErG,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAU5D;;;;GAIG;AACH,qBAAa,YAAa,SAAQ,OAAO;gBAC3B,KAAK,EAAE,aAAa;CAMjC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,uBAAuB,aAAa,KAAG,aAI9D,CAAA;AAEF;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC;;;OAGG;gBACS,KAAK,EAAE,SAAS;IAQ5B;;OAEG;IACH,OAAO,CAAC,UAAU;IAwBlB;;OAEG;IACH,OAAO,CAAC,YAAY;IAmBpB;;OAEG;cACgB,+BAA+B;IAoTlD;;OAEG;IACH,OAAO,CAAC,aAAa;CAkCtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,uBAAuB,SAAS,KAAG,aAItD,CAAA"}

package/dist/{cjs/src → esm}/canvas/image.canvas.d.ts

@@ -45,7 +45,7 @@ export declare class ImageNode extends BoxNode {
      * 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;
+    protected _renderContent(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number): Promise<void>;
 }
 /**
  * Factory function to create ImageNode instances

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/image.canvas.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACnF,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,IAAI,WAAW,EAAa,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAuBnD;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,CAAA;AAEhE;;;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,cAAc,CAA6B;gBAEvC,KAAK,EAAE,UAAU;IAYtB,IAAI,CAAC,KAAK,CAAC,EAAE,gBAAgB,EAAE,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAOjF;;;;;;OAMG;YACW,iBAAiB;IA4E/B;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,UAAU;IAoEX,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;IAIzC;;;OAGG;cACsB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CAoJ3H;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,KAAG,aAGxC,CAAA"}

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

@@ -203,8 +203,8 @@ class ImageNode extends BoxNode {
      * 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);
+    async _renderContent(ctx, x, y, width, height) {
+        await super._renderContent(ctx, x, y, width, height);
         if (!this.loadedImage || width <= 0 || height <= 0)
             return;
         const img = this.loadedImage;

package/dist/{cjs/src → esm}/canvas/layout.canvas.d.ts

@@ -75,7 +75,7 @@ export declare class BoxNode {
      * @param {number} offsetX X offset for rendering.
      * @param {number} offsetY Y offset for rendering.
      */
-    render(ctx: CanvasRenderingContext2D, offsetX?: number, offsetY?: number): void;
+    render(ctx: CanvasRenderingContext2D, offsetX?: number, offsetY?: number): Promise<void>;
     /**
      * Renders the node's visual content including background fills, shadows, and borders.
      * This is an internal method used by the render() pipeline.
@@ -85,7 +85,7 @@ export declare class BoxNode {
      * @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;
+    protected _renderContent(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number): Promise<void>;
 }
 /**
  * Creates a new BoxNode instance.

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/layout.canvas.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAkB,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAGjG,OAAa,EAAS,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAE9D;;;;GAIG;AACH,qBAAa,OAAO;IAClB;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAA;IAE/B;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IAEV;;OAEG;IACH,QAAQ,EAAE,OAAO,EAAE,CAAA;IAEnB;;OAEG;IACH,KAAK,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ;;;OAGG;gBACS,KAAK,GAAE,QAAQ,GAAG,SAAc;IAqB5C;;OAEG;IACI,sBAAsB;IAW7B;;;OAGG;IACH,SAAS,CAAC,sBAAsB,CAAC,WAAW,EAAE,QAAQ,GAAG,SAAS;IAqClE;;OAEG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B;;;;OAIG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;IAanD;;;OAGG;IACI,cAAc,IAAI,OAAO;IAiBhC;;OAEG;IACH,SAAS,CAAC,+BAA+B;IAIzC;;;OAGG;IACH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ;IAyInC;;;;;OAKG;IACG,MAAM,CAAC,GAAG,EAAE,wBAAwB,EAAE,OAAO,GAAE,MAAU,EAAE,OAAO,GAAE,MAAU;IA+JpF;;;;;;;;OAQG;cACa,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CAoRlH;AAWD;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,uBAAuB,QAAQ,KAAG,aAIpD,CAAA;AAEF;;;GAGG;AACH,qBAAa,UAAW,SAAQ,OAAO;gBACzB,KAAK,GAAE,QAAQ,GAAG,SAAc;CAS7C;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,uBAAuB,QAAQ,KAAG,aAIvD,CAAA;AAEF;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,OAAO;gBACtB,KAAK,GAAE,QAAQ,GAAG,SAAc;CAS7C;AAED;;;;GAIG;AACH,eAAO,MAAM,GAAG,GAAI,uBAAuB,QAAQ,KAAG,aAIpD,CAAA"}

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

@@ -306,7 +306,7 @@ class BoxNode {
      * @param {number} offsetX X offset for rendering.
      * @param {number} offsetY Y offset for rendering.
      */
-    render(ctx, offsetX = 0, offsetY = 0) {
+    async render(ctx, offsetX = 0, offsetY = 0) {
         const layout = this.node.getComputedLayout();
         const x = layout.left + offsetX;
         const y = layout.top + offsetY;
@@ -361,7 +361,7 @@ class BoxNode {
             // --- End Transformation Setup ---
             // --- Step 1: Render Parent Background/Borders/Content ---
             // This renders the current node's own visual appearance first.
-            this._renderContent(ctx, x, y, width, height);
+            await this._renderContent(ctx, x, y, width, height);
             // --- Step 2: Prepare Children for Stacking ---
             const positionedChildren = [];
             const inFlowChildren = [];
@@ -418,19 +418,19 @@ class BoxNode {
             for (const item of positionedChildren) {
                 if (item.zIndex < 0) {
                     // Pass parent's layout origin (x, y) as offset
-                    item.node.render(ctx, x, y);
+                    await item.node.render(ctx, x, y);
                 }
             }
             // 4b: Render in-flow children (recursively)
             for (const child of inFlowChildren) {
                 // Pass parent's layout origin (x, y) as offset
-                child.render(ctx, x, y);
+                await child.render(ctx, x, y);
             }
             // 4c: Render positioned children with zero or positive zIndex
             for (const item of positionedChildren) {
                 if (item.zIndex >= 0) {
                     // Pass parent's layout origin (x, y) as offset
-                    item.node.render(ctx, x, y);
+                    await item.node.render(ctx, x, y);
                 }
             }
             // --- End Child Rendering ---
@@ -462,7 +462,7 @@ class BoxNode {
      * @param width The width of the content area to render
      * @param height The height of the content area to render
      */
-    _renderContent(ctx, x, y, width, height) {
+    async _renderContent(ctx, x, y, width, height) {
         // Calculate border radius values for all corners
         const radii = { TopLeft: 0, TopRight: 0, BottomRight: 0, BottomLeft: 0 };
         if (this.props.borderRadius) {

package/dist/{cjs/src → esm}/canvas/root.canvas.d.ts

@@ -1,4 +1,4 @@
-import { Canvas } from 'skia-canvas';
+import { Canvas, type CanvasRenderingContext2D } from 'skia-canvas';
 import { ColumnNode, BoxNode } from '../canvas/layout.canvas.js';
 import type { BaseProps, RootProps, CanvasElement, RootPropsWithWorker, RootPropsWithoutWorker } from '../canvas/canvas.type.js';
 export declare const _clearRegisteredFonts: () => void;
@@ -58,7 +58,8 @@ export declare class RootNode extends ColumnNode {
      * and final drawing
      * @returns Promise resolving to the rendered Canvas instance
      */
-    render(): Promise<Canvas>;
+    render(ctx: CanvasRenderingContext2D, offsetX?: number, offsetY?: number): Promise<void>;
+    render(ctx?: CanvasRenderingContext2D, offsetX?: number, offsetY?: number): Promise<Canvas>;
 }
 /**
  * Creates and renders a new root node with the given properties.

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/root.canvas.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAe,KAAK,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAEhF,OAAO,EAAE,UAAU,EAAE,OAAO,EAAW,MAAM,2BAA2B,CAAA;AACxE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAgB/H,eAAO,MAAM,qBAAqB,YAEjC,CAAA;AAmBD,MAAM,WAAW,kBAAkB;IACjC,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,kBAAkB,QAGpD;AAED;;;;GAIG;AACH,wBAAgB,SAAS,SAKxB;AAqFD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,UAAU,EAAE,aAAa,GAAG,OAAO,CAmB5D;AAED;;;GAGG;AACH,qBAAa,QAAS,SAAQ,UAAU;IAC9B,KAAK,EAAE,SAAS,GAAG,SAAS,CAAA;IACpC,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAoB;IAClC,8CAA8C;IAC9C,OAAO,CAAC,GAAG,CAAwC;IACnD,4CAA4C;IAC5C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IACpC,6CAA6C;IAC7C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoB;IACjD,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAQ;IAE9B;;;;OAIG;gBACS,KAAK,EAAE,SAAS,GAAG,SAAS;IAoDxC;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAazB;;;;OAIG;IACY,MAAM,CAAC,GAAG,EAAE,wBAAwB,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IACjG,MAAM,CAAC,GAAG,CAAC,EAAE,wBAAwB,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;CA4DlG;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,mBAAmB,GAAG,OAAO,CAAC,MAAM,GAAG;IAAE,OAAO,IAAI,IAAI,CAAA;CAAE,CAAC,CAAA;AACvF,wBAAgB,IAAI,CAAC,KAAK,EAAE,sBAAsB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA"}