@meonode/canvas 1.0.0-beta.1

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

@@ -0,0 +1,42 @@
+import { Canvas } from 'skia-canvas';
+import { ColumnNode } from '../canvas/layout.canvas.util.js';
+import type { BaseProps, RootProps } from '../canvas/canvas.type.js';
+export declare const _clearRegisteredFonts: () => void;
+/**
+ * Root node that manages the canvas rendering context and coordinates overall layout and drawing.
+ * Inherits from ColumnNode to provide vertical layout capabilities.
+ */
+export declare class RootNode extends ColumnNode {
+    /** The canvas instance used for rendering */
+    private canvas;
+    /** The 2D rendering context for the canvas */
+    private ctx;
+    /** Target width for the canvas in pixels */
+    private readonly targetWidth;
+    /** Scale factor for rendering (e.g. 2 for 2x resolution) */
+    private readonly scale;
+    /**
+     * Creates a new root node for canvas rendering
+     * @param props - Configuration properties for the root node
+     * @throws Error if width property is not provided
+     */
+    constructor(props: RootProps & BaseProps);
+    /**
+     * Traverses the node tree to find all ImageNode instances using breadth-first search
+     * @returns Array of all ImageNode instances found in the tree
+     */
+    private findAllImageNodes;
+    /**
+     * Renders the entire node tree to a canvas, handling image loading, layout calculation,
+     * and final drawing
+     * @returns Promise resolving to the rendered Canvas instance
+     */
+    render(): Promise<Canvas>;
+}
+/**
+ * Creates and renders a new root node with the given properties
+ * @param props - Configuration properties for the root node
+ * @returns Promise resolving to the rendered Canvas instance
+ */
+export declare const Root: (props: RootProps) => Promise<Canvas>;
+//# sourceMappingURL=root.canvas.util.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/root.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA8C,MAAM,aAAa,CAAA;AAChF,OAAO,EAAE,UAAU,EAAW,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAUnE,eAAO,MAAM,qBAAqB,YAEjC,CAAA;AAED;;;GAGG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,6CAA6C;IAC7C,OAAO,CAAC,MAAM,CAAoB;IAClC,8CAA8C;IAC9C,OAAO,CAAC,GAAG,CAAwC;IACnD,4CAA4C;IAC5C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAQ;IACpC,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAQ;IAE9B;;;;OAIG;gBACS,KAAK,EAAE,SAAS,GAAG,SAAS;IAsCxC;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAazB;;;;OAIG;IACG,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC;CAqChC;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAU,OAAO,SAAS,oBAAuC,CAAA"}

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

@@ -0,0 +1,116 @@
+import { FontLibrary, Canvas } from 'skia-canvas';
+import { ColumnNode } from './layout.canvas.util.js';
+import { ImageNode } from './image.canvas.util.js';
+import { Style } from '../constant/common.const.js';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+
+/** Registry to track fonts that have already been loaded */
+const registeredFonts = new Map();
+/**
+ * Root node that manages the canvas rendering context and coordinates overall layout and drawing.
+ * Inherits from ColumnNode to provide vertical layout capabilities.
+ */
+class RootNode extends ColumnNode {
+    /** The canvas instance used for rendering */
+    canvas;
+    /** The 2D rendering context for the canvas */
+    ctx = null;
+    /** Target width for the canvas in pixels */
+    targetWidth;
+    /** Scale factor for rendering (e.g. 2 for 2x resolution) */
+    scale;
+    /**
+     * Creates a new root node for canvas rendering
+     * @param props - Configuration properties for the root node
+     * @throws Error if width property is not provided
+     */
+    constructor(props) {
+        // Call the parent constructor with root name and props
+        super({ name: 'Root', ...props });
+        // Validate the required width property
+        if (!props.width) {
+            throw new Error('Width and height are required for Root');
+        }
+        // Register provided fonts with caching
+        if (props.fonts?.length) {
+            for (const font of props.fonts) {
+                const family = font.family;
+                const paths = font.paths.map(p => path.resolve(p));
+                if (!registeredFonts.has(family)) {
+                    registeredFonts.set(family, new Set());
+                }
+                const cachedPaths = registeredFonts.get(family);
+                const newPaths = paths.filter(p => !cachedPaths.has(p) && fs.existsSync(p));
+                if (newPaths.length > 0) {
+                    FontLibrary.use({ [family]: newPaths });
+                    newPaths.forEach(p => cachedPaths.add(p));
+                }
+            }
+        }
+        // Set up scale and width
+        this.scale = props.scale || 1;
+        this.targetWidth = props.width;
+        this.node.setWidth(this.targetWidth);
+        // Initialize children nodes
+        this.processInitialChildren();
+    }
+    /**
+     * Traverses the node tree to find all ImageNode instances using breadth-first search
+     * @returns Array of all ImageNode instances found in the tree
+     */
+    findAllImageNodes() {
+        const imageNodes = [];
+        const queue = [this];
+        while (queue.length > 0) {
+            const node = queue.shift();
+            if (node instanceof ImageNode) {
+                imageNodes.push(node);
+            }
+            queue.push(...node.children);
+        }
+        return imageNodes;
+    }
+    /**
+     * Renders the entire node tree to a canvas, handling image loading, layout calculation,
+     * and final drawing
+     * @returns Promise resolving to the rendered Canvas instance
+     */
+    async render() {
+        // Step 1: Load all images
+        const imageNodes = this.findAllImageNodes();
+        const loadingPromises = imageNodes.map(node => node.getLoadingPromise());
+        if (loadingPromises.length > 0) {
+            await Promise.allSettled(loadingPromises);
+        }
+        // Step 2: Calculate initial layout
+        this.node.calculateLayout(this.targetWidth, undefined, Style.Direction.LTR);
+        // Step 3: Allow nodes to finalize their layout
+        const needRecalculate = this.finalizeLayout();
+        if (needRecalculate) {
+            this.node.calculateLayout(this.targetWidth, undefined, Style.Direction.LTR);
+        }
+        // Step 4: Create a canvas with calculated dimensions
+        const calculatedContentHeight = this.node.getComputedHeight();
+        const finalCanvasWidth = Math.ceil(this.targetWidth * this.scale);
+        const finalCanvasHeight = Math.max(1, Math.ceil(calculatedContentHeight * this.scale));
+        // Step 5: Set up canvas context
+        this.canvas = new Canvas(finalCanvasWidth, finalCanvasHeight);
+        this.ctx = this.canvas.getContext('2d');
+        this.ctx.scale(this.scale, this.scale);
+        // Step 6: Render content
+        super.render(this.ctx, 0, 0);
+        if (!this.canvas) {
+            throw new Error('Canvas not initialized');
+        }
+        return this.canvas;
+    }
+}
+/**
+ * Creates and renders a new root node with the given properties
+ * @param props - Configuration properties for the root node
+ * @returns Promise resolving to the rendered Canvas instance
+ */
+const Root = async (props) => await new RootNode(props).render();
+
+export { Root, RootNode };

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

@@ -0,0 +1,148 @@
+import type { TextProps } from '../canvas/canvas.type.js';
+import { type CanvasRenderingContext2D } from 'skia-canvas';
+import { BoxNode } from '../canvas/layout.canvas.util.js';
+/**
+ * Node for rendering text content with rich text styling support
+ * Supports color and weight variations through HTML-like tags
+ */
+export declare class TextNode extends BoxNode {
+    private readonly segments;
+    private lines;
+    private static measurementContext;
+    private readonly metricsString;
+    private lineHeights;
+    private lineAscents;
+    private lineContentHeights;
+    props: TextProps & {
+        lineGap: number;
+    };
+    constructor(text?: number | string, props?: TextProps);
+    protected applyDefaults(): void;
+    /**
+     * Processes Unix-like escape sequences in text strings.
+     * Converts escaped characters into their actual representations.
+     *
+     * Supported escape sequences:
+     * - \n - Newline (line feed)
+     * - \t - Tab (converted to 4 spaces)
+     * - \r - Carriage return (treated as newline)
+     * - \\ - Literal backslash
+     * - \' - Single quote
+     * - \" - Double quote
+     * - \0 - Null character (removed)
+     * - \b - Backspace (removed)
+     * - \f - Form feed (treated as newline)
+     * - \v - Vertical tab (treated as newline)
+     *
+     * @param input - Raw text string potentially containing escape sequences
+     * @returns Processed string with escape sequences converted
+     */
+    private processEscapeSequences;
+    /**
+     * Parses input text with HTML-style markup into styled text segments.
+     *
+     * Supported tags:
+     * - <color="value"> - Sets text color (hex code or CSS color name)
+     * - <weight="value"> - Sets font weight (100-900 or keywords like "bold")
+     * - <size="value"> - Sets font size in pixels
+     * - <b> - Makes text bold (shorthand for weight="bold")
+     * - <i> - Makes text italic
+     *
+     * Tag values can use double quotes, single quotes, or no quotes:
+     * <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
+     * @returns Array of styled text segments with consistent style properties
+     */
+    private parseRichText;
+    private formatSpacing;
+    private parseSpacingToPx;
+    /**
+     * 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"
+     *
+     * Priority for style properties:
+     * - Weight: segment <weight> tag > segment <b> tag > base fontWeight prop
+     * - Style: segment <i> > base fontStyle
+     * - Size: segment size > base fontSize
+     * - Family: base fontFamily
+     *
+     * @param segmentStyle - Optional TextSegment styling to override base props
+     * @returns Formatted CSS font string for canvas context
+     */
+    private getFontString;
+    /**
+     * Gets lines to process respecting maxLines constraint
+     */
+    private getLinesToMeasureOrRender;
+    /**
+     * Measures text dimensions and calculates layout metrics for the YogaLayout engine.
+     * Handles text wrapping, line height calculations, and dynamic leading.
+     *
+     * Line heights are determined by:
+     * 1. Using props.lineHeight as fixed pixel value if provided
+     * 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
+     * @returns Calculated minimum dimensions required to render text content
+     *   - width: Total width needed for text layout
+     *   - height: Total height including line heights and gaps
+     */
+    private measureText;
+    /**
+     * 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
+     * @returns Array of lines, where each line contains styled text segments
+     */
+    private wrapTextRich;
+    /**
+     * 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
+     * @returns Array of TextSegments, each fitting maxWidth, or original segment if no breaking needed
+     */
+    private breakWordRich;
+    /**
+     * Measures width of space character using base font
+     */
+    private measureSpaceWidth;
+    /**
+     * Renders multi-line text content with rich text styling and layout features
+     *
+     * Core features:
+     * - Dynamic line heights with leading/spacing controls
+     * - Vertical text alignment (top/middle/bottom)
+     * - Horizontal text alignment (left/center/right/justify)
+     * - Text wrapping within bounds
+     * - 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
+     */
+    protected _renderContent(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number): void;
+}
+/**
+ * Creates a new TextNode instance with rich text support
+ */
+export declare const Text: (text: number | string, props?: TextProps) => TextNode;
+//# sourceMappingURL=text.canvas.util.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/text.canvas.util.ts"],"names":[],"mappings":"AAAA,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,CAAW;IACzC,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;cAuB1C,aAAa,IAAI,IAAI;IA+DxC;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,sBAAsB;IA8B9B;;;;;;;;;;;;;;;;;;OAkBG;IACH,OAAO,CAAC,aAAa;IA+ErB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAyBxB;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,aAAa;IAiCrB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAQjC;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,WAAW;IA+OnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,YAAY;IAkLpB;;;;;;;;OAQG;IACH,OAAO,CAAC,aAAa;IAmErB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB;;;;;;;;;;;;;;;;;OAiBG;cACgB,cAAc,CAC/B,GAAG,EAAE,wBAAwB,EAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM;CAiWjB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,SAAS,aAA8B,CAAA"}