@meonode/canvas 1.0.0-beta.3 → 1.0.0-beta.5

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

@@ -2,6 +2,7 @@ import { Canvas } from 'skia-canvas';
 import { BoxNode } from './layout.canvas.util.js';
 import { Style } from '../constant/common.const.js';
 
+// TODO: Add comprehensive unit tests for this file.
 /**
  * Node for rendering text content with rich text styling support
  * Supports color and weight variations through HTML-like tags
@@ -10,7 +11,7 @@ class TextNode extends BoxNode {
     segments = [];
     lines = [];
     static measurementContext = null;
-    metricsString = 'Ag|\``';
+    metricsString = 'Ag|``';
     lineHeights = [];
     lineAscents = [];
     lineContentHeights = [];
@@ -92,8 +93,7 @@ class TextNode extends BoxNode {
      * - \b - Backspace (removed)
      * - \f - Form feed (treated as newline)
      * - \v - Vertical tab (treated as newline)
-     *
-     * @param input - Raw text string potentially containing escape sequences
+     * @param input Raw text string potentially containing escape sequences
      * @returns Processed string with escape sequences converted
      */
     processEscapeSequences(input) {
@@ -139,9 +139,8 @@ class TextNode extends BoxNode {
      * <color="red">, <color='red'>, <color=red>
      *
      * Tags can be nested and must be properly closed with </tag>
-     *
-     * @param input - Text string containing markup tags
-     * @param baseStyle - Default style properties to apply to all segments
+     * @param input Text string containing markup tags
+     * @param baseStyle Default style properties to apply to all segments
      * @returns Array of styled text segments with consistent style properties
      */
     parseRichText(input, baseStyle) {
@@ -251,8 +250,7 @@ class TextNode extends BoxNode {
      * - Style: segment <i> > base fontStyle
      * - Size: segment size > base fontSize
      * - Family: base fontFamily
-     *
-     * @param segmentStyle - Optional TextSegment styling to override base props
+     * @param segmentStyle Optional TextSegment styling to override base props
      * @returns Formatted CSS font string for canvas context
      */
     getFontString(segmentStyle) {
@@ -303,12 +301,11 @@ class TextNode extends BoxNode {
      * 2. Otherwise calculating dynamic height based on largest font size per line
      * 3. Adding leading space above/below text content
      * 4. Including specified line gaps between lines
-     *
-     * @param widthConstraint - Maximum allowed width in pixels for text layout
-     * @param widthMode - YogaLayout mode determining how width constraint is applied
+     * @param widthConstraint Maximum allowed width in pixels for text layout
+     * @param widthMode YogaLayout mode determining how width constraint is applied
      * @returns Calculated minimum dimensions required to render text content
-     *   - width: Total width needed for text layout
-     *   - height: Total height including line heights and gaps
+     * - width: Total width needed for text layout
+     * - height: Total height including line heights and gaps
      */
     measureText(widthConstraint, widthMode) {
         // Create measurement canvas if not exists
@@ -428,9 +425,7 @@ class TextNode extends BoxNode {
             // Calculate total content height for line
             const actualContentHeight = maxAscent + maxDescent;
             // Determine final line box height with leading
-            const targetLineBoxHeight = typeof this.props.lineHeight === 'number' && this.props.lineHeight > 0
-                ? this.props.lineHeight
-                : maxFontSizeOnLine * defaultLineHeightMultiplier;
+            const targetLineBoxHeight = typeof this.props.lineHeight === 'number' && this.props.lineHeight > 0 ? this.props.lineHeight : maxFontSizeOnLine * defaultLineHeightMultiplier;
             // Use larger of target height or content height to prevent clipping
             const finalLineHeight = Math.max(actualContentHeight, targetLineBoxHeight);
             // Store line metrics for rendering
@@ -534,11 +529,10 @@ class TextNode extends BoxNode {
      * Wraps text segments into multiple lines while respecting width constraints and preserving styling.
      * Handles rich text attributes (color, weight, size, bold, italic) and proper word wrapping.
      * Also respects explicit newline characters (\n) for forced line breaks.
-     *
-     * @param ctx - Canvas rendering context used for text measurements
-     * @param segments - Array of text segments with styling information
-     * @param maxWidth - Maximum allowed width for each line in pixels
-     * @param parsedWordSpacingPx - Additional spacing to add between words in pixels
+     * @param ctx Canvas rendering context used for text measurements
+     * @param segments Array of text segments with styling information
+     * @param maxWidth Maximum allowed width for each line in pixels
+     * @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) {
@@ -552,8 +546,7 @@ class TextNode extends BoxNode {
         const finalizeLine = (forceEmpty = false) => {
             // Remove trailing whitespace segments unless we're forcing an empty line
             if (!forceEmpty) {
-                while (currentLineSegments.length > 0 &&
-                    /^\s+$/.test(currentLineSegments[currentLineSegments.length - 1].text)) {
+                while (currentLineSegments.length > 0 && /^\s+$/.test(currentLineSegments[currentLineSegments.length - 1].text)) {
                     currentLineSegments.pop();
                 }
             }
@@ -596,8 +589,7 @@ class TextNode extends BoxNode {
                                 wordWidth = ctx.measureText(wordOrSpace).width;
                                 wordSegment = { text: wordOrSpace, ...segmentStyle, width: wordWidth };
                             }
-                            const needsSpace = currentLineSegments.length > 0 &&
-                                !/^\s+$/.test(currentLineSegments[currentLineSegments.length - 1].text);
+                            const needsSpace = currentLineSegments.length > 0 && !/^\s+$/.test(currentLineSegments[currentLineSegments.length - 1].text);
                             const spaceToAdd = needsSpace ? spaceWidth + parsedWordSpacingPx : 0;
                             if (currentLineWidth + spaceToAdd + wordWidth <= maxWidth || currentLineSegments.length === 0) {
                                 if (needsSpace) {
@@ -703,10 +695,9 @@ class TextNode extends BoxNode {
     /**
      * Breaks a word segment into multiple segments that each fit within the specified width constraint.
      * Maintains all styling properties (color, weight, size, bold, italic) across broken segments.
-     *
-     * @param ctx - Canvas rendering context used for text measurements
-     * @param segmentToBreak - Original text segment to split
-     * @param maxWidth - Maximum width allowed for each resulting segment
+     * @param ctx Canvas rendering context used for text measurements
+     * @param segmentToBreak Original text segment to split
+     * @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) {
@@ -789,12 +780,11 @@ class TextNode extends BoxNode {
      * - Ellipsis truncation
      * - Rich text styling per segment (color, weight, size, etc)
      * - Performance optimizations (clipping, visibility checks)
-     *
-     * @param ctx - Canvas rendering context
-     * @param x - Content box left position in pixels
-     * @param y - Content box top position in pixels
-     * @param width - Content box total width including padding
-     * @param height - Content box total height including padding
+     * @param ctx Canvas rendering context
+     * @param x Content box left position in pixels
+     * @param y Content box top position in pixels
+     * @param width Content box total width including padding
+     * @param height Content box total height including padding
      */
     _renderContent(ctx, x, y, width, height) {
         super._renderContent(ctx, x, y, width, height);
@@ -995,11 +985,7 @@ class TextNode extends BoxNode {
                     let applyEllipsisAfter = false;
                     if (isLastRenderedLine && needsEllipsis && !isSpaceSegment) {
                         const currentTotalWidth = accumulatedWidth + spaceToAddBefore + segmentWidth;
-                        const spaceNeededAfter = isLastSegmentOnLine
-                            ? 0
-                            : isJustify
-                                ? spacePerWordGapPlusSpacing
-                                : spaceWidth + parsedWordSpacingPx;
+                        const spaceNeededAfter = isLastSegmentOnLine ? 0 : isJustify ? spacePerWordGapPlusSpacing : spaceWidth + parsedWordSpacingPx;
                         if (currentTotalWidth > contentWidth - spaceNeededAfter) {
                             const availableWidthForSegment = contentWidth - accumulatedWidth - spaceToAddBefore - ellipsisWidth;
                             if (availableWidthForSegment > 0) {
@@ -1033,11 +1019,7 @@ class TextNode extends BoxNode {
                     const remainingRenderWidth = contentX + contentWidth - currentX;
                     if (currentSegmentRenderWidth > 0 && remainingRenderWidth > 0 && !isSpaceSegment) {
                         ctx.textAlign = 'left';
-                        const shadows = this.props.textShadow
-                            ? Array.isArray(this.props.textShadow)
-                                ? this.props.textShadow
-                                : [this.props.textShadow]
-                            : [];
+                        const shadows = this.props.textShadow ? (Array.isArray(this.props.textShadow) ? this.props.textShadow : [this.props.textShadow]) : [];
                         ctx.save();
                         // Draw shadows
                         for (const shadow of shadows) {

package/package.json

@@ -1,7 +1,18 @@
 {
   "name": "@meonode/canvas",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "A declarative, component-based library for generating high-quality images on a canvas, inspired by the MeoNode UI library for React. It leverages skia-canvas for rendering and yoga-layout for flexible, CSS-like layouts.",
+  "keywords": [
+    "canvas",
+    "server-side",
+    "image-generation",
+    "declarative",
+    "component-based",
+    "skia-canvas",
+    "yoga-layout",
+    "node",
+    "typescript"
+  ],
   "license": "MIT",
   "author": "Ukasyah Rahmatullah Zada",
   "publishConfig": {
@@ -25,7 +36,8 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@rollup/plugin-alias": "^6.0.0",
+    "@eslint/js": "^9.39.1",
+    "@jest/globals": "^30.2.0",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
@@ -35,17 +47,12 @@
     "@semantic-release/npm": "^13.1.1",
     "@semantic-release/release-notes-generator": "^14.1.0",
     "@types/jest": "^30.0.0",
-    "@types/lodash-es": "^4.17.12",
-    "@types/module-alias": "^2.0.4",
     "@types/sharp": "^0.32.0",
-    "@types/skia-canvas": "^0.9.28",
-    "@types/tinycolor2": "^1.4.6",
-    "@types/yoga-layout": "^3.1.0",
     "@typescript-eslint/eslint-plugin": "^8.46.3",
     "@typescript-eslint/parser": "^8.46.3",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsdoc": "^61.1.12",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-unused-imports": "^4.3.0",
     "husky": "^9.1.7",
@@ -64,7 +71,7 @@
   "dependencies": {
     "file-type": "^21.0.0",
     "lodash-es": "^4.17.21",
-    "module-alias": "^2.2.3",
+    "sharp": "^0.34.5",
     "skia-canvas": "^3.0.8",
     "tinycolor2": "^1.6.0",
     "tslib": "^2.8.1",