@meonode/canvas 1.4.0 → 1.5.1

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

@@ -73,6 +73,30 @@ class ChartNode extends BoxNode {
                 break;
         }
     }
+    getSmartYAxisFormatter(maxValue) {
+        const absMax = Math.abs(maxValue);
+        // Thresholds with corresponding decimal places, divisors, and suffixes
+        const thresholds = [
+            { min: 1000000, decimals: 1, divisor: 1000000, suffix: 'M' },
+            { min: 1000, decimals: 0, divisor: 1, suffix: '' },
+            { min: 100, decimals: 1, divisor: 1, suffix: '' },
+            { min: 1, decimals: 2, divisor: 1, suffix: '' },
+            { min: 0, decimals: 4, divisor: 1, suffix: '' },
+        ];
+        let config = thresholds[thresholds.length - 1];
+        for (const threshold of thresholds) {
+            if (absMax >= threshold.min) {
+                config = threshold;
+                break;
+            }
+        }
+        return (v) => {
+            const scaled = v / config.divisor;
+            const factor = Math.pow(10, config.decimals);
+            const rounded = Math.round(scaled * factor) / factor;
+            return rounded.toString() + config.suffix;
+        };
+    }
     getLegendLayout(ctx, totalWidth, totalHeight) {
         if (!this.chartOptions?.showLegend) {
             return { x: 0, y: 0, width: 0, height: 0, chartWidth: totalWidth, chartHeight: totalHeight, chartX: 0, chartY: 0 };
@@ -180,7 +204,7 @@ class ChartNode extends BoxNode {
         if (chartOptions?.showYAxis) {
             const fontSize = chartOptions.yAxisFontSize || 12;
             ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
-            const formatter = chartOptions.yAxisLabelFormatter || ((v) => v.toString());
+            const formatter = chartOptions.yAxisLabelFormatter || this.getSmartYAxisFormatter(maxValue);
             const maxLabel = formatter(maxValue);
             const yAxisWidth = ctx.measureText(maxLabel).width + 10;
             chartX += yAxisWidth;
@@ -215,7 +239,7 @@ class ChartNode extends BoxNode {
                 ctx.stroke();
                 if (chartOptions?.showYAxis) {
                     const value = maxValue - (maxValue / 5) * i;
-                    const formatter = chartOptions.yAxisLabelFormatter || ((v) => (Math.round(v * 100) / 100).toString());
+                    const formatter = chartOptions.yAxisLabelFormatter || this.getSmartYAxisFormatter(maxValue);
                     const label = formatter(value);
                     TextNode.renderSimpleText(ctx, label, chartX - 5, gridY, {
                         color: chartOptions.yAxisColor || chartOptions.axisColor || '#000',
@@ -265,7 +289,8 @@ class ChartNode extends BoxNode {
             });
             // Render labels
             if (chartOptions?.showLabels) {
-                const { renderLabelItem } = chartOptions;
+                const { renderLabelItem, xAxisLabelFormatter } = chartOptions;
+                const displayLabel = xAxisLabelFormatter ? xAxisLabelFormatter(label, index) : label;
                 if (renderLabelItem) {
                     const labelNode = renderLabelItem({ item: label, index });
                     if (labelNode) {
@@ -276,7 +301,7 @@ class ChartNode extends BoxNode {
                     }
                 }
                 else {
-                    TextNode.renderSimpleText(ctx, label, groupX + (groupWidth - barSpacing) / 2, chartY + finalChartHeight + labelHeight / 2, {
+                    TextNode.renderSimpleText(ctx, displayLabel, groupX + (groupWidth - barSpacing) / 2, chartY + finalChartHeight + labelHeight / 2, {
                         color: chartOptions.labelColor || chartOptions.axisColor,
                         fontSize: chartOptions.labelFontSize,
                         fontFamily: this.props.fontFamily,
@@ -306,7 +331,7 @@ class ChartNode extends BoxNode {
         if (chartOptions?.showYAxis) {
             const fontSize = chartOptions.yAxisFontSize || 12;
             ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
-            const formatter = chartOptions.yAxisLabelFormatter || ((v) => v.toString());
+            const formatter = chartOptions.yAxisLabelFormatter || this.getSmartYAxisFormatter(maxValue);
             const maxLabel = formatter(maxValue);
             const yAxisWidth = ctx.measureText(maxLabel).width + 10;
             chartX += yAxisWidth;
@@ -339,7 +364,7 @@ class ChartNode extends BoxNode {
                 ctx.stroke();
                 if (chartOptions?.showYAxis) {
                     const value = maxValue - (maxValue / 5) * i;
-                    const formatter = chartOptions.yAxisLabelFormatter || ((v) => (Math.round(v * 100) / 100).toString());
+                    const formatter = chartOptions.yAxisLabelFormatter || this.getSmartYAxisFormatter(maxValue);
                     const label = formatter(value);
                     TextNode.renderSimpleText(ctx, label, chartX - 5, gridY, {
                         color: chartOptions.yAxisColor || chartOptions.axisColor || '#000',
@@ -380,9 +405,10 @@ class ChartNode extends BoxNode {
         });
         // Render labels
         if (chartOptions?.showLabels) {
-            const { renderLabelItem } = chartOptions;
+            const { renderLabelItem, xAxisLabelFormatter } = chartOptions;
             labels.forEach((label, index) => {
                 const pointX = chartX + index * pointSpacing;
+                const displayLabel = xAxisLabelFormatter ? xAxisLabelFormatter(label, index) : label;
                 if (renderLabelItem) {
                     const labelNode = renderLabelItem({ item: label, index });
                     if (labelNode) {
@@ -393,7 +419,7 @@ class ChartNode extends BoxNode {
                     }
                 }
                 else {
-                    TextNode.renderSimpleText(ctx, label, pointX, chartY + finalChartHeight + labelHeight / 2, {
+                    TextNode.renderSimpleText(ctx, displayLabel, pointX, chartY + finalChartHeight + labelHeight / 2, {
                         color: chartOptions.labelColor || chartOptions.axisColor,
                         fontSize: chartOptions.labelFontSize,
                         fontFamily: this.props.fontFamily,

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

@@ -1 +1 @@
-{"version":3,"file":"grid.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/grid.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAiB,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACtF,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAIjE;;;;GAIG;AACH,qBAAa,YAAa,SAAQ,OAAO;gBAC3B,KAAK,EAAE,aAAa;CAMjC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,iBAA4B,CAAA;AAEzE;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC;;;OAGG;gBACS,KAAK,EAAE,SAAS;IAQ5B;;OAEG;IACH,OAAO,CAAC,UAAU;IAqBlB;;OAEG;IACH,OAAO,CAAC,YAAY;IAmBpB;;OAEG;cACgB,+BAA+B;IAwRlD;;OAEG;IACH,OAAO,CAAC,aAAa;CAkCtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,aAAwB,CAAA"}
+{"version":3,"file":"grid.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/grid.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAiB,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACtF,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAIjE;;;;GAIG;AACH,qBAAa,YAAa,SAAQ,OAAO;gBAC3B,KAAK,EAAE,aAAa;CAMjC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,iBAA4B,CAAA;AAEzE;;;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;IA0SlD;;OAEG;IACH,OAAO,CAAC,aAAa;CAkCtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,aAAwB,CAAA"}

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

@@ -35,6 +35,9 @@ class GridNode extends RowNode {
             if (track.endsWith('%')) {
                 return { type: '%', value: parsePercentage(track, availableSpace) };
             }
+            if (track.endsWith('px')) {
+                return { type: 'px', value: parseFloat(track) };
+            }
             // Try parsing as number (px) if just string "100"
             const num = parseFloat(track);
             if (!isNaN(num))
@@ -68,7 +71,25 @@ class GridNode extends RowNode {
      */
     updateLayoutBasedOnComputedSize() {
         // 1. Get Container Dimensions
-        const width = this.node.getComputedWidth();
+        let width = this.node.getComputedWidth();
+        // Handle case where computed width is NaN or 0 (e.g., when parent uses alignItems: Center and child has minWidth)
+        // Fall back to minWidth if available
+        if ((isNaN(width) || width === 0) && this.node.getParent()) {
+            const minWidth = this.node.getMinWidth();
+            if (!isNaN(minWidth.value) && minWidth.value > 0) {
+                if (minWidth.unit === Style.Unit.Percent) {
+                    // For percentage minWidth, calculate based on parent's computed width
+                    const parentWidth = this.node.getParent().getComputedWidth();
+                    if (!isNaN(parentWidth) && parentWidth > 0) {
+                        width = (minWidth.value / 100) * parentWidth;
+                    }
+                }
+                else {
+                    // For pixel minWidth, use the value directly
+                    width = minWidth.value;
+                }
+            }
+        }
         const paddingLeft = this.node.getComputedPadding(Style.Edge.Left);
         const paddingRight = this.node.getComputedPadding(Style.Edge.Right);
         const paddingTop = this.node.getComputedPadding(Style.Edge.Top);

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

@@ -76,6 +76,12 @@ export declare class TextNode extends BoxNode {
     private parseRichText;
     private formatSpacing;
     private parseSpacingToPx;
+    /**
+     * Adds manual letter spacing compensation to a measured text width.
+     * Needed because skia-canvas ctx.measureText() does not include letterSpacing in the returned width,
+     * even though letterSpacing IS applied during rendering (fillText/strokeText).
+     */
+    private addLetterSpacingExtra;
     /**
      * Generates a CSS font string by combining base TextProps with optional TextSegment styling.
      * Follows browser font string format: "font-style font-weight font-size font-family"

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

@@ -1 +1 @@
-{"version":3,"file":"text.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/text.canvas.util.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAU,KAAK,wBAAwB,EAA2B,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,kBAAkB,CAAe;IAEjC,KAAK,EAAE,SAAS,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;gBAElC,IAAI,GAAE,MAAM,GAAG,MAAW,EAAE,KAAK,GAAE,SAAc;IAuB7D;;;;;;;;OAQG;WACW,gBAAgB,CAC5B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,GAAE;QACL,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAA;QACpC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;QAClC,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,wBAAwB,CAAC,WAAW,CAAC,CAAA;QACjD,YAAY,CAAC,EAAE,wBAAwB,CAAC,cAAc,CAAC,CAAA;KACnD;cAwBW,aAAa,IAAI,IAAI;IAoDxC;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,sBAAsB;IA8B9B;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,aAAa;IA+ErB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAyBxB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,aAAa;IAiCrB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAQjC;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,WAAW;IA8NnB;;;;;;;;;OASG;IACH,OAAO,CAAC,YAAY;IAuKpB;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAmErB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB;;;;;;;;;;;;;;;;OAgBG;cACgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CAiXrH;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,SAAS,aAA8B,CAAA"}
+{"version":3,"file":"text.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/text.canvas.util.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAU,KAAK,wBAAwB,EAA2B,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,kBAAkB,CAAe;IAEjC,KAAK,EAAE,SAAS,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;gBAElC,IAAI,GAAE,MAAM,GAAG,MAAW,EAAE,KAAK,GAAE,SAAc;IAuB7D;;;;;;;;OAQG;WACW,gBAAgB,CAC5B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,GAAE;QACL,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAA;QACpC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;QAClC,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,wBAAwB,CAAC,WAAW,CAAC,CAAA;QACjD,YAAY,CAAC,EAAE,wBAAwB,CAAC,cAAc,CAAC,CAAA;KACnD;cAwBW,aAAa,IAAI,IAAI;IAoDxC;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,sBAAsB;IA8B9B;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,aAAa;IA+ErB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAyBxB;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAM7B;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,aAAa;IAiCrB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAQjC;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,WAAW;IA+NnB;;;;;;;;;OASG;IACH,OAAO,CAAC,YAAY;IA6KpB;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAmErB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB;;;;;;;;;;;;;;;;OAgBG;cACgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CAkXrH;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,SAAS,aAA8B,CAAA"}

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

@@ -260,6 +260,17 @@ class TextNode extends BoxNode {
         }
         return 0; // Default fallback
     }
+    /**
+     * Adds manual letter spacing compensation to a measured text width.
+     * Needed because skia-canvas ctx.measureText() does not include letterSpacing in the returned width,
+     * even though letterSpacing IS applied during rendering (fillText/strokeText).
+     */
+    addLetterSpacingExtra(text, measuredWidth, letterSpacingPx) {
+        if (letterSpacingPx === 0 || text.length === 0)
+            return measuredWidth;
+        const charCount = [...text].length;
+        return measuredWidth + (charCount > 1 ? (charCount - 1) * letterSpacingPx : 0);
+    }
     /**
      * Generates a CSS font string by combining base TextProps with optional TextSegment styling.
      * Follows browser font string format: "font-style font-weight font-size font-family"
@@ -338,6 +349,7 @@ class TextNode extends BoxNode {
         ctx.letterSpacing = this.formatSpacing(this.props.letterSpacing);
         ctx.wordSpacing = 'normal'; // Handled manually via parsedWordSpacingPx
         const parsedWordSpacingPx = this.parseSpacingToPx(this.props.wordSpacing, baseFontSize);
+        const parsedLetterSpacingPx = this.parseSpacingToPx(this.props.letterSpacing, baseFontSize);
         // Pre-measure each text segment width with its specific styling
         for (const segment of this.segments) {
             ctx.font = this.getFontString(segment);
@@ -353,13 +365,13 @@ class TextNode extends BoxNode {
                 if (ctx.fontVariant !== 'normal')
                     ctx.fontVariant = 'normal';
             }
-            segment.width = ctx.measureText(segment.text).width;
+            segment.width = this.addLetterSpacingExtra(segment.text, ctx.measureText(segment.text).width, parsedLetterSpacingPx);
         }
         // Calculate available layout width
         const availableWidthForContent = widthMode === Style.MeasureMode.Undefined ? Infinity : Math.max(0, widthConstraint);
         const epsilon = 0.001; // Float precision compensation
         // Wrap text into lines based on available width
-        this.lines = this.wrapTextRich(ctx, this.segments, availableWidthForContent + epsilon, parsedWordSpacingPx);
+        this.lines = this.wrapTextRich(ctx, this.segments, availableWidthForContent + epsilon, parsedWordSpacingPx, parsedLetterSpacingPx);
         // Initialize line metrics arrays
         this.lineHeights = []; // Final heights including leading
         this.lineAscents = []; // Text ascent heights
@@ -479,7 +491,7 @@ class TextNode extends BoxNode {
                     if (ctx.fontVariant !== 'normal')
                         ctx.fontVariant = 'normal';
                 }
-                const wordWidth = ctx.measureText(word).width;
+                const wordWidth = this.addLetterSpacingExtra(word, ctx.measureText(word).width, parsedLetterSpacingPx);
                 if (!firstWordInSingleLine) {
                     singleLineWidth += spaceWidth + parsedWordSpacingPx;
                 }
@@ -554,7 +566,7 @@ class TextNode extends BoxNode {
      * @param parsedWordSpacingPx Additional spacing to add between words in pixels
      * @returns Array of lines, where each line contains styled text segments
      */
-    wrapTextRich(ctx, segments, maxWidth, parsedWordSpacingPx) {
+    wrapTextRich(ctx, segments, maxWidth, parsedWordSpacingPx, parsedLetterSpacingPx = 0) {
         const lines = [];
         if (segments.length === 0 || maxWidth <= 0)
             return lines;
@@ -605,7 +617,7 @@ class TextNode extends BoxNode {
                                 ctx.font = this.getFontString(segmentStyle);
                                 if (this.props.fontVariant)
                                     ctx.fontVariant = this.props.fontVariant;
-                                wordWidth = ctx.measureText(wordOrSpace).width;
+                                wordWidth = this.addLetterSpacingExtra(wordOrSpace, ctx.measureText(wordOrSpace).width, parsedLetterSpacingPx);
                                 wordSegment = { text: wordOrSpace, ...segmentStyle, width: wordWidth };
                             }
                             const needsSpace = currentLineSegments.length > 0 && !/^\s+$/.test(currentLineSegments[currentLineSegments.length - 1].text);
@@ -624,7 +636,7 @@ class TextNode extends BoxNode {
                                 }
                                 if (!isSpace) {
                                     if (wordWidth > maxWidth && maxWidth > 0) {
-                                        const brokenParts = this.breakWordRich(ctx, wordSegment, maxWidth);
+                                        const brokenParts = this.breakWordRich(ctx, wordSegment, maxWidth, parsedLetterSpacingPx);
                                         if (brokenParts.length > 0) {
                                             for (let k = 0; k < brokenParts.length - 1; k++) {
                                                 lines.push([brokenParts[k]]);
@@ -667,7 +679,7 @@ class TextNode extends BoxNode {
                         ctx.font = this.getFontString(segmentStyle);
                         if (this.props.fontVariant)
                             ctx.fontVariant = this.props.fontVariant;
-                        wordWidth = ctx.measureText(wordOrSpace).width;
+                        wordWidth = this.addLetterSpacingExtra(wordOrSpace, ctx.measureText(wordOrSpace).width, parsedLetterSpacingPx);
                         wordSegment = { text: wordOrSpace, ...segmentStyle, width: wordWidth };
                     }
                     const needsSpace = currentLineSegments.length > 0 && !/^\s+$/.test(currentLineSegments[currentLineSegments.length - 1].text);
@@ -686,7 +698,7 @@ class TextNode extends BoxNode {
                         }
                         if (!isSpace) {
                             if (wordWidth > maxWidth && maxWidth > 0) {
-                                const brokenParts = this.breakWordRich(ctx, wordSegment, maxWidth);
+                                const brokenParts = this.breakWordRich(ctx, wordSegment, maxWidth, parsedLetterSpacingPx);
                                 if (brokenParts.length > 0) {
                                     for (let k = 0; k < brokenParts.length - 1; k++) {
                                         lines.push([brokenParts[k]]);
@@ -719,7 +731,7 @@ class TextNode extends BoxNode {
      * @param maxWidth Maximum width allowed for each resulting segment
      * @returns Array of TextSegments, each fitting maxWidth, or original segment if no breaking needed
      */
-    breakWordRich(ctx, segmentToBreak, maxWidth) {
+    breakWordRich(ctx, segmentToBreak, maxWidth, parsedLetterSpacingPx = 0) {
         const word = segmentToBreak.text;
         // Copy all style properties to maintain consistent styling across broken segments
         const style = {
@@ -740,14 +752,14 @@ class TextNode extends BoxNode {
         // Process word character by character to find valid break points
         for (const char of word) {
             const testPartText = currentPartText + char;
-            const testPartWidth = ctx.measureText(testPartText).width;
+            const testPartWidth = this.addLetterSpacingExtra(testPartText, ctx.measureText(testPartText).width, parsedLetterSpacingPx);
             if (testPartWidth > maxWidth) {
                 // Current accumulated text exceeds width - create new segment
                 if (currentPartText) {
                     brokenSegments.push({
                         text: currentPartText,
                         ...style,
-                        width: ctx.measureText(currentPartText).width,
+                        width: this.addLetterSpacingExtra(currentPartText, ctx.measureText(currentPartText).width, parsedLetterSpacingPx),
                     });
                 }
                 // Handle current character that caused overflow
@@ -773,7 +785,7 @@ class TextNode extends BoxNode {
             brokenSegments.push({
                 text: currentPartText,
                 ...style,
-                width: ctx.measureText(currentPartText).width,
+                width: this.addLetterSpacingExtra(currentPartText, ctx.measureText(currentPartText).width, parsedLetterSpacingPx),
             });
         }
         return brokenSegments.length > 0 ? brokenSegments : [segmentToBreak];
@@ -832,7 +844,8 @@ class TextNode extends BoxNode {
         const spaceWidth = this.measureSpaceWidth(ctx);
         // Use a small epsilon for float precision issues
         const epsilon = 0.01;
-        const allLines = this.wrapTextRich(ctx, this.segments, contentWidth + epsilon, parsedWordSpacingPx);
+        const parsedLetterSpacingPx = this.parseSpacingToPx(this.props.letterSpacing, baseFontSize);
+        const allLines = this.wrapTextRich(ctx, this.segments, contentWidth + epsilon, parsedWordSpacingPx, parsedLetterSpacingPx);
         const needsEllipsis = this.props.ellipsis && this.props.maxLines !== undefined && allLines.length > this.props.maxLines;
         // Apply maxLines constraint to get the visible lines
         const visibleLines = this.props.maxLines !== undefined && this.props.maxLines > 0 ? allLines.slice(0, this.props.maxLines) : allLines;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meonode/canvas",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "A declarative, component-based library for server-side canvas image generation. Write complex visuals with simple functions, similar to the composition style of @meonode/ui.",
   "keywords": [
     "canvas",