@meonode/canvas 1.2.0 → 1.3.1

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

@@ -807,16 +807,6 @@ class TextNode extends BoxNode {
      */
     _renderContent(ctx, x, y, width, height) {
         super._renderContent(ctx, x, y, width, height);
-        const linesToRender = this.getLinesToMeasureOrRender();
-        const numLinesToRender = linesToRender.length;
-        // Validate required data is available
-        if (numLinesToRender === 0 ||
-            this.segments.length === 0 ||
-            this.lineHeights.length !== numLinesToRender ||
-            this.lineAscents.length !== numLinesToRender ||
-            this.lineContentHeights.length !== numLinesToRender) {
-            return;
-        }
         ctx.save();
         ctx.textBaseline = 'alphabetic';
         ctx.letterSpacing = this.formatSpacing(this.props.letterSpacing);
@@ -836,9 +826,80 @@ class TextNode extends BoxNode {
             ctx.restore();
             return;
         }
+        // Re-calculate lines based on the actual render width to ensure consistency
+        // This fixes issues where Yoga Layout might use a cached measurement from a different
+        // width constraint (e.g., during a flex shrink pass) but final layout is wider.
+        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 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;
+        const numLinesToRender = visibleLines.length;
+        // Recalculate line metrics for the rendered lines
+        // We cannot rely on this.lineHeights from measureText because it might correspond to different wrapping
+        const lineHeights = [];
+        const lineAscents = [];
+        const lineContentHeights = [];
+        const defaultLineHeightMultiplier = 1.2;
+        let totalTextHeight = 0;
+        for (const line of visibleLines) {
+            let maxAscent = 0;
+            let maxDescent = 0;
+            let maxFontSizeOnLine = 0;
+            if (line.length === 0) {
+                ctx.font = this.getFontString();
+                if (this.props.fontVariant)
+                    ctx.fontVariant = typeof this.props.fontVariant === 'string' ? this.props.fontVariant : 'normal';
+                const metrics = ctx.measureText(this.metricsString);
+                maxAscent = metrics.actualBoundingBoxAscent ?? baseFontSize * 0.8;
+                maxDescent = metrics.actualBoundingBoxDescent ?? baseFontSize * 0.2;
+                maxFontSizeOnLine = baseFontSize;
+            }
+            else {
+                for (const segment of line) {
+                    if (/^\s+$/.test(segment.text))
+                        continue;
+                    const segmentSize = segment.size || baseFontSize;
+                    maxFontSizeOnLine = Math.max(maxFontSizeOnLine, segmentSize);
+                    // Style context for accurate metrics
+                    ctx.font = this.getFontString(segment);
+                    if (this.props.fontVariant)
+                        ctx.fontVariant = typeof this.props.fontVariant === 'string' ? this.props.fontVariant : 'normal';
+                    const metrics = ctx.measureText(this.metricsString);
+                    const ascent = metrics.actualBoundingBoxAscent ?? segmentSize * 0.8;
+                    const descent = metrics.actualBoundingBoxDescent ?? segmentSize * 0.2;
+                    maxAscent = Math.max(maxAscent, ascent);
+                    maxDescent = Math.max(maxDescent, descent);
+                }
+            }
+            if (maxAscent === 0 && maxDescent === 0 && line.length > 0) {
+                // Fallback
+                ctx.font = this.getFontString();
+                if (this.props.fontVariant)
+                    ctx.fontVariant = typeof this.props.fontVariant === 'string' ? this.props.fontVariant : 'normal';
+                const metrics = ctx.measureText(this.metricsString);
+                maxAscent = metrics.actualBoundingBoxAscent ?? baseFontSize * 0.8;
+                maxDescent = metrics.actualBoundingBoxDescent ?? baseFontSize * 0.2;
+                maxFontSizeOnLine = maxFontSizeOnLine || baseFontSize;
+            }
+            maxFontSizeOnLine = maxFontSizeOnLine || baseFontSize;
+            const actualContentHeight = maxAscent + maxDescent;
+            const targetLineBoxHeight = typeof this.props.lineHeight === 'number' && this.props.lineHeight > 0 ? this.props.lineHeight : maxFontSizeOnLine * defaultLineHeightMultiplier;
+            const finalLineHeight = Math.max(actualContentHeight, targetLineBoxHeight);
+            lineHeights.push(finalLineHeight);
+            lineAscents.push(maxAscent);
+            lineContentHeights.push(actualContentHeight);
+            totalTextHeight += finalLineHeight;
+        }
+        if (numLinesToRender === 0) {
+            ctx.restore();
+            return;
+        }
         // Calculate vertical alignment offset
         const lineGapValue = this.props.lineGap;
-        const totalCalculatedTextHeight = this.lineHeights.reduce((sum, h) => sum + h, 0) + Math.max(0, numLinesToRender - 1) * lineGapValue;
+        const totalCalculatedTextHeight = totalTextHeight + Math.max(0, numLinesToRender - 1) * lineGapValue;
         let blockStartY;
         switch (this.props.verticalAlign) {
             case 'middle':
@@ -858,13 +919,12 @@ class TextNode extends BoxNode {
         ctx.clip();
         // Configure ellipsis if needed
         const ellipsisChar = typeof this.props.ellipsis === 'string' ? this.props.ellipsis : '...';
-        const needsEllipsis = this.props.ellipsis && this.lines.length > numLinesToRender;
         let ellipsisWidth = 0;
         let ellipsisStyle = undefined;
         if (needsEllipsis) {
-            const lastRenderedLine = linesToRender[numLinesToRender - 1];
+            const lastRenderedLine = visibleLines[visibleLines.length - 1];
+            // ... ellipsis calculation ...
             const lastTextStyleSegment = [...lastRenderedLine].reverse().find(seg => !/^\s+$/.test(seg.text));
-            // Inherit styles from last non-whitespace segment
             ellipsisStyle = lastTextStyleSegment
                 ? {
                     color: lastTextStyleSegment.color,
@@ -874,38 +934,20 @@ class TextNode extends BoxNode {
                     i: lastTextStyleSegment.i,
                 }
                 : undefined;
-            const originalFont = ctx.font;
-            const originalVariant = ctx.fontVariant;
+            ctx.save();
             ctx.font = this.getFontString(ellipsisStyle);
-            // Handle font variant setting and validation
-            if (typeof this.props.fontVariant === 'string') {
-                ctx.fontVariant = this.props.fontVariant;
-            }
-            else if (this.props.fontVariant !== undefined) {
-                console.warn(`[TextNode ${this.key || ''}] Invalid fontVariant prop type in _renderContent (ellipsis measure):`, this.props.fontVariant);
-                if (ctx.fontVariant !== 'normal')
-                    ctx.fontVariant = 'normal';
-            }
-            else {
-                if (ctx.fontVariant !== 'normal')
-                    ctx.fontVariant = 'normal';
+            if (this.props.fontVariant) {
+                ctx.fontVariant = typeof this.props.fontVariant === 'string' ? this.props.fontVariant : 'normal';
             }
             ellipsisWidth = ctx.measureText(ellipsisChar).width;
-            ctx.font = originalFont;
-            if (originalVariant !== 'normal') {
-                ctx.fontVariant = originalVariant;
-            }
-            else if (ctx.fontVariant !== 'normal') {
-                ctx.fontVariant = 'normal';
-            }
+            ctx.restore();
         }
-        const spaceWidth = this.measureSpaceWidth(ctx);
         // Render text content line by line
         for (let i = 0; i < numLinesToRender; i++) {
-            const lineSegments = linesToRender[i];
-            const currentLineFinalHeight = this.lineHeights[i];
-            const currentLineMaxAscent = this.lineAscents[i];
-            const currentLineContentHeight = this.lineContentHeights[i];
+            const lineSegments = visibleLines[i];
+            const currentLineFinalHeight = lineHeights[i];
+            const currentLineMaxAscent = lineAscents[i];
+            const currentLineContentHeight = lineContentHeights[i];
             // Calculate line spacing metrics
             const currentLineLeading = currentLineFinalHeight - currentLineContentHeight;
             const currentLineSpaceAbove = Math.max(0, currentLineLeading / 2);
@@ -1063,9 +1105,7 @@ class TextNode extends BoxNode {
                     if (applyEllipsisAfter) {
                         const ellipsisRemainingWidth = contentX + contentWidth - currentX;
                         if (ellipsisRemainingWidth >= ellipsisWidth) {
-                            const originalFont = ctx.font;
-                            const originalVariant = ctx.fontVariant;
-                            const originalFill = ctx.fillStyle;
+                            ctx.save();
                             ctx.font = this.getFontString(ellipsisStyle);
                             if (typeof this.props.fontVariant === 'string') {
                                 ctx.fontVariant = this.props.fontVariant;
@@ -1081,14 +1121,7 @@ class TextNode extends BoxNode {
                             }
                             ctx.fillStyle = ellipsisStyle?.color || this.props.color || 'black';
                             ctx.fillText(ellipsisChar, currentX, lineY, Math.max(0, ellipsisRemainingWidth + 1));
-                            ctx.font = originalFont;
-                            if (originalVariant !== 'normal') {
-                                ctx.fontVariant = originalVariant;
-                            }
-                            else if (ctx.fontVariant !== 'normal') {
-                                ctx.fontVariant = 'normal';
-                            }
-                            ctx.fillStyle = originalFill;
+                            ctx.restore();
                         }
                         break;
                     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meonode/canvas",
-  "version": "1.2.0",
-  "description": "A declarative, component-based library for server-side generation of high-quality images on a canvas, inspired by the MeoNode UI library for React. It uses skia-canvas for drawing and yoga-layout for flexbox-based layouts.",
+  "version": "1.3.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",
     "server-side",
@@ -39,46 +39,46 @@
   "scripts": {
     "build": "rm -rf ./dist && rollup -c --bundleConfigAsCjs && tsc-alias -p tsconfig.esm.json && tsc-alias -p tsconfig.cjs.json",
     "test": "node --no-experimental-webstorage --experimental-vm-modules $(yarn bin jest)",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.mjs",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.mjs --fix",
     "format": "prettier --write .",
-    "generate:samples": "npx tsx scripts/manual/generate_sample_charts.ts",
+    "generate:samples": "npx tsx scripts/generate_sample_charts.ts && npx tsx scripts/generate_sample_grids.ts",
     "prepare": "husky"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@jest/globals": "^30.2.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
+    "@eslint/js": "^9.39.4",
+    "@jest/globals": "^30.3.0",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/exec": "^7.1.0",
-    "@semantic-release/gitlab": "^13.2.9",
-    "@semantic-release/npm": "^13.1.3",
+    "@semantic-release/gitlab": "^13.3.2",
+    "@semantic-release/npm": "^13.1.5",
     "@semantic-release/release-notes-generator": "^14.1.0",
     "@types/jest": "^30.0.0",
     "@types/sharp": "^0.32.0",
-    "@typescript-eslint/eslint-plugin": "^8.50.0",
-    "@typescript-eslint/parser": "^8.50.0",
-    "eslint": "^9.39.2",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-jsdoc": "^61.5.0",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-unused-imports": "^4.3.0",
+    "eslint-plugin-jsdoc": "^62.7.1",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-unused-imports": "^4.4.1",
     "husky": "^9.1.7",
-    "jest": "^30.2.0",
-    "prettier": "^3.7.4",
-    "rollup": "^4.53.4",
+    "jest": "^30.3.0",
+    "prettier": "^3.8.1",
+    "rollup": "^4.59.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
-    "semantic-release": "^25.0.2",
+    "semantic-release": "^25.0.3",
     "ts-jest": "^29.4.6",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.0"
+    "typescript-eslint": "^8.57.0"
   },
   "packageManager": "yarn@4.11.0",
   "dependencies": {
-    "file-type": "^21.1.1",
-    "lodash-es": "^4.17.21",
+    "file-type": "^21.3.1",
+    "lodash-es": "^4.17.23",
     "sharp": "^0.34.5",
     "skia-canvas": "^3.0.8",
     "tinycolor2": "^1.6.0",