@meonode/canvas 2.0.1 → 2.0.3

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/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/esm/canvas/layout.canvas.js

@@ -95,9 +95,12 @@ class BoxNode {
             'maxLines',
             'fontVariant',
         ];
+        const initialPropsRec = this.initialProps;
+        const parentPropsRec = parentProps;
+        const propsRec = this.props;
         for (const key of inheritableKeys) {
-            if (this.initialProps[key] === undefined && parentProps[key] !== undefined) {
-                this.props[key] = parentProps[key];
+            if (initialPropsRec[key] === undefined && parentPropsRec[key] !== undefined) {
+                propsRec[key] = parentPropsRec[key];
             }
         }
         if (!this.node.isDirty()) {
@@ -198,11 +201,12 @@ class BoxNode {
             else {
                 for (const [edge, value] of Object.entries(position)) {
                     if (edge in Style.Edge) {
+                        const edgeKey = edge;
                         if (typeof value === 'string' && value.endsWith('%')) {
-                            this.node.setPositionPercent(Style.Edge[edge], parseFloat(value));
+                            this.node.setPositionPercent(Style.Edge[edgeKey], parseFloat(value));
                         }
                         else {
-                            this.node.setPosition(Style.Edge[edge], value);
+                            this.node.setPosition(Style.Edge[edgeKey], value);
                         }
                     }
                 }
@@ -218,11 +222,12 @@ class BoxNode {
             else {
                 for (const [gutter, value] of Object.entries(gap)) {
                     if (gutter in Style.Gutter) {
+                        const gutterKey = gutter;
                         if (typeof value === 'string' && value.endsWith('%')) {
-                            this.node.setGapPercent(Style.Gutter[gutter], parseFloat(value));
+                            this.node.setGapPercent(Style.Gutter[gutterKey], parseFloat(value));
                         }
                         else {
-                            this.node.setGap(Style.Gutter[gutter], value);
+                            this.node.setGap(Style.Gutter[gutterKey], value);
                         }
                     }
                 }
@@ -238,11 +243,12 @@ class BoxNode {
             else {
                 for (const [edge, value] of Object.entries(margin)) {
                     if (edge in Style.Edge) {
+                        const edgeKey = edge;
                         if (typeof value === 'string' && value.endsWith('%')) {
-                            this.node.setMarginPercent(Style.Edge[edge], parseFloat(value));
+                            this.node.setMarginPercent(Style.Edge[edgeKey], parseFloat(value));
                         }
                         else {
-                            this.node.setMargin(Style.Edge[edge], value);
+                            this.node.setMargin(Style.Edge[edgeKey], value);
                         }
                     }
                 }
@@ -258,11 +264,12 @@ class BoxNode {
             else {
                 for (const [edge, value] of Object.entries(padding)) {
                     if (edge in Style.Edge) {
+                        const edgeKey = edge;
                         if (typeof value === 'string' && value.endsWith('%')) {
-                            this.node.setPaddingPercent(Style.Edge[edge], parseFloat(value));
+                            this.node.setPaddingPercent(Style.Edge[edgeKey], parseFloat(value));
                         }
                         else {
-                            this.node.setPadding(Style.Edge[edge], value);
+                            this.node.setPadding(Style.Edge[edgeKey], value);
                         }
                     }
                 }
@@ -299,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;
@@ -354,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 = [];
@@ -411,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 ---
@@ -455,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) {