import { Config } from "./Config.js"; import { Align, BoxSizing, Direction, Display, Edge, FlexDirection, Wrap, Gutter, Justify, MeasureMode, Overflow, PositionType, Unit } from "./enums.js"; /** * Represents a size with width and height. */ export type Size = { width: number; height: number; }; /** * Function type for custom measurement logic. * Used to calculate the size of leaf nodes (like text) based on available space. * * @param width - The available width. * @param widthMode - The measure mode for width (Undefined, Exactly, AtMost). * @param height - The available height. * @param heightMode - The measure mode for height. * @returns The measured size. */ export type MeasureFunction = (width: number, widthMode: MeasureMode, height: number, heightMode: MeasureMode) => Size; /** * A Wrapper around a TaffyTree node, implementing the Yoga Layout Node API. * * Provides style setting, layout calculation, and tree management to match Yoga's interface. */ export declare class Node { /** * The unique identifier for the node in the Taffy tree. */ private id; /** * The underlying Taffy tree instance. */ private tree; /** * The configuration associated with this node. */ private config; /** * Global cache of Node instances by their ID. * Ensures that retrieving a node by ID (e.g., via `getChild`) always returns the same JavaScript object instance. * This mimics Yoga's behavior and is crucial for object identity comparisons. */ private static instanceCache; /** * List of children nodes. * Maintained to ensure consistent order and easy access to child instances. */ private childList; /** * The parent node of this node. * Used for dirty state propagation. */ private parent; /** * Custom function to measure the node's dimensions. * Used for leaf nodes like text. */ private measureFunc; /** * Callback function triggered when the node becomes dirty. */ private dirtiedFunc; /** * Internal flag tracking the dirty state of the node. * Used to prevent redundant callbacks. */ private _isDirty; /** * Flag tracking if a new layout has been calculated but not yet "seen" by the user. */ private _hasNewLayout; /** * Flag indicating if this node is a reference baseline for its parent. * This is a Yoga-specific feature not natively supported by Taffy, but stored for API compatibility. */ private _isReferenceBaseline; /** * Creates a new Node instance with an optional configuration. * @param config - Optional configuration object. * @returns A new Node instance. */ static create(config?: Config): Node; /** * Creates a new Node instance with default configuration. * @returns A new Node instance. */ static createDefault(): Node; /** * Creates a new Node instance with strict configuration. * @param config - The configuration object. * @returns A new Node instance. */ static createWithConfig(config: Config): Node; /** * Destroys a node, freeing its underlying resources. * @param node - The node to destroy. */ static destroy(node: Node): void; /** * Initializes a new Node. * Internal constructor; use static `create` methods instead. * @param config - Optional configuration. */ constructor(config?: Config); /** * Frees the node from the underlying Taffy tree. * Does NOT recursively free children (unlike `freeRecursive`). */ free(): void; /** * Recursively frees the node and all its children. */ freeRecursive(): void; /** * Internal helper to update Taffy style and mark dirtiness. * @param updater - Function to mutate the style object. */ private updateStyle; /** * Copies the style from another node to this one. * Performs a deep copy of style properties. * @param node - The source node to copy from. */ copyStyle(node: Node): void; /** * Sets the flex direction (Row, Column, etc.). * @param flexDirection - The direction to set. */ setFlexDirection(flexDirection: FlexDirection): void; /** * Gets the current flex direction. * @returns The flex direction. */ getFlexDirection(): FlexDirection; /** * Sets the flex wrap property (NoWrap, Wrap, WrapReverse). * @param flexWrap - The wrap mode. */ setFlexWrap(flexWrap: Wrap): void; /** * Sets the align-items property (how children are aligned on the cross axis). * @param alignItems - The alignment mode. */ setAlignItems(alignItems: Align): void; /** * Sets the align-self property (overrides parent's align-items). * @param alignSelf - The alignment mode. */ setAlignSelf(alignSelf: Align): void; /** * Sets the text direction (LTR or RTL). * @param direction - The direction to set. */ setDirection(direction: Direction): void; /** * Gets the current text direction. * @returns The direction. */ getDirection(): Direction; /** * Sets the align-content property (distribution of lines on cross axis). * @param alignContent - The alignment mode. */ setAlignContent(alignContent: Align): void; /** * Sets the justify-content property (alignment along the main axis). * @param justifyContent - The justification mode. */ setJustifyContent(justifyContent: Justify): void; /** * Sets the display property (Flex, None). * @param display - The display mode. */ setDisplay(display: Display): void; /** * Sets the flex grow factor. * @param flexGrow - The growth factor (>= 0). */ setFlexGrow(flexGrow: number): void; /** * Sets the flex shrink factor. * @param flexShrink - The shrink factor (>= 0). */ setFlexShrink(flexShrink: number): void; /** * Sets the flex basis (initial main size). * @param flexBasis - The size (number for points, string for %, or 'auto'). */ setFlexBasis(flexBasis: number | string): void; /** * Sets the flex basis as a percentage. * @param flexBasis - Percentage value (0-100). */ setFlexBasisPercent(flexBasis: number): void; /** * Sets flex basis to 'auto'. */ setFlexBasisAuto(): void; /** * Gets the current flex basis. * @returns Value object with unit and value. */ getFlexBasis(): { unit: number; value: number; }; /** * Sets the overflow property (Visible, Hidden, Scroll). * @param overflow - The overflow mode. */ setOverflow(overflow: Overflow): void; /** * Sets whether this node always forms a containing block. * Currently a stub (not supported in Taffy). * @param alwaysFormsContainingBlock - Boolean flag. */ setAlwaysFormsContainingBlock(alwaysFormsContainingBlock: boolean): void; /** * Helper to parse a value (number, "auto", "50%") into a Yoga-compatible format. * @param value - The value to parse. * @returns A Taffy-compatible length/percentage object or "Auto". */ private parseValue; /** * Internal cache for style properties that require JavaScript-side logic. * * Taffy doesn't support all Yoga features natively (like direction-aware resolution for some properties * or "Static" positioning affecting insets in specific ways), so we cache them here * and resolve them before syncing to Taffy. */ private _styleCache; /** * Synchronizes the cached style properties (position, insets) to the underlying Taffy node. * Should be called whenever these properties in `_styleCache` change. */ private syncStyle; /** * Resolves logical edges (Start/End) and physical edges to Taffy's expected Rect { left, right, top, bottom }. * Handles the current text direction (LTR/RTL). * @returns An object with resolved Taffy inset values. */ private resolveInsets; /** * Sets the position type (Relative, Absolute, etc.). * @param positionType - The position type. */ setPositionType(positionType: PositionType): void; /** * Gets the current position type. * @returns The position type. */ getPositionType(): PositionType; /** * Sets a position value for a specific edge. * @param edge - The edge to set. * @param value - The value (number, percentage string, or "auto"). */ setPosition(edge: Edge, value: number | string): void; /** * Sets a position value as a percentage. * @param edge - The edge to set. * @param value - The percentage value. */ setPositionPercent(edge: Edge, value: number): void; /** * Sets a position value to "auto". * @param edge - The edge to set. */ setPositionAuto(edge: Edge): void; /** * Recursively resolves cached insets to Taffy based on the node's direction. * Updates the underlying Taffy style for this node and all children. */ private resolveInsetsToTaffy; /** * Gets the position value for a specific edge. * @param edge - The edge to retrieve. * @returns The position value (Length object, Percent object, or Auto). */ getPosition(edge: Edge): any; /** * Sets the margin for a specific edge. * @param edge - The edge to set. * @param value - The margin value (number, percent string, or "auto"). */ setMargin(edge: Edge, value: number | string): void; /** * Sets the margin for a specific edge as a percentage. * @param edge - The edge to set. * @param value - The percentage value. */ setMarginPercent(edge: Edge, value: number): void; /** * Sets the margin for a specific edge to "auto". * @param edge - The edge to set. */ setMarginAuto(edge: Edge): void; /** * Resolves cached margins to Taffy style. * Handles converting logical edges to physical ones based on direction. */ private resolveMarginsToTaffy; /** * Gets the computed margin for a specific edge in pixels. * @param edge - The edge to retrieve. * @returns The computed margin value. */ getComputedMargin(edge: Edge): number; /** * Sets the padding for a specific edge. * @param edge - The edge to set. * @param value - The padding value (number or percent string). */ setPadding(edge: Edge, value: number | string): void; /** * Sets the padding for a specific edge as a percentage. * @param edge - The edge to set. * @param value - The percentage value. */ setPaddingPercent(edge: Edge, value: number): void; /** * Resolves cached paddings to Taffy style. * Handles converting logical edges to physical ones based on direction. */ private resolvePaddingsToTaffy; /** * Gets the computed padding for a specific edge in pixels. * @param edge - The edge to retrieve. * @returns The computed padding value. */ getComputedPadding(edge: Edge): number; /** * Sets the border width for a specific edge. * @param edge - The edge to set. * @param value - The border width. */ setBorder(edge: Edge, value: number): void; /** * Resolves cached borders to Taffy style. * Handles converting logical edges to physical ones based on direction. */ private resolveBordersToTaffy; /** * Gets the computed border width for a specific edge in pixels. * @param edge - The edge to retrieve. * @returns The computed border width. */ getComputedBorder(edge: Edge): number; /** * Sets the gap (gutter) between items. * @param gutter - The gap type (Column, Row, All). * @param value - The gap size. */ setGap(gutter: Gutter, value: number): void; /** * Gets the gap value for a specific gutter type. * @param gutter - The gutter type. * @returns The gap value with unit. */ getGap(gutter: Gutter): { unit: Unit; value: number; }; /** * Sets the width of the node. * @param width - The width (number, percentage string, or "auto"). */ setWidth(width: number | string): void; /** * Sets the width as a percentage. * @param width - The percentage value. */ setWidthPercent(width: number): void; /** * Sets the width to "auto". */ setWidthAuto(): void; /** * Sets the height of the node. * @param height - The height (number, percentage string, or "auto"). */ setHeight(height: number | string): void; /** * Sets the height as a percentage. * @param height - The percentage value. */ setHeightPercent(height: number): void; /** * Sets the height to "auto". */ setHeightAuto(): void; /** * Sets the minimum width. * @param minWidth - The minimum width. */ setMinWidth(minWidth: number | string): void; /** * Sets the minimum width as a percentage. * @param minWidth - The percentage value. */ setMinWidthPercent(minWidth: number): void; /** * Sets the maximum width. * @param maxWidth - The maximum width. */ setMaxWidth(maxWidth: number | string): void; /** * Sets the maximum width as a percentage. * @param maxWidth - The percentage value. */ setMaxWidthPercent(maxWidth: number): void; /** * Sets the minimum height. * @param minHeight - The minimum height. */ setMinHeight(minHeight: number | string): void; /** * Sets the minimum height as a percentage. * @param minHeight - The percentage value. */ setMinHeightPercent(minHeight: number): void; /** * Sets the maximum height. * @param maxHeight - The maximum height. */ setMaxHeight(maxHeight: number | string): void; /** * Sets the maximum height as a percentage. * @param maxHeight - The percentage value. */ setMaxHeightPercent(maxHeight: number): void; /** * Sets the aspect ratio. * @param aspectRatio - The aspect ratio (width / height). */ setAspectRatio(aspectRatio: number): void; /** * Gets the current aspect ratio. * @returns The aspect ratio. */ getAspectRatio(): number; /** * Set the box-sizing model for this node. * Taffy supports box-sizing: BorderBox (default) or ContentBox. */ setBoxSizing(boxSizing: BoxSizing): void; getBoxSizing(): BoxSizing; /** * Inserts a child node at the specified index. * @param child - The child node to insert. * @param index - The index to insert at. */ insertChild(child: Node, index: number): void; /** * Removes a child node. * @param child - The child node to remove. */ removeChild(child: Node): void; /** * Gets the number of children. * @returns The child count. */ getChildCount(): number; /** * Gets the child at the specified index. * @param index - The index of the child. * @returns The child Node. */ getChild(index: number): Node; /** * Calculates the layout for this node and its descendants. * @param width - The available width (or NaN for undefined). * @param height - The available height (or NaN for undefined). * @param direction - The layout direction (LTR/RTL). */ calculateLayout(width?: number, height?: number, direction?: number): void; private markNewLayoutRecursive; /** * Internal helper to apply RTL flip (Row <-> RowReverse) for layout calculation. * Taffy doesn't native support automatic Direction flipping, so we handle it here. */ private applyRTLFlip; /** * Internal helper to restore original flex direction after RTL flip. */ private restoreFlexDirection; /** * Gets the computed left layout position (absolute X coordinate). * @returns The left position. */ getComputedLeft(): number; /** * Gets the computed top layout position (absolute Y coordinate). * @returns The top position. */ getComputedTop(): number; /** * Gets the computed right layout position. * @returns The right position (left + width). */ getComputedRight(): number; /** * Gets the computed bottom layout position. * @returns The bottom position (top + height). */ getComputedBottom(): number; /** * Gets the computed width. * @returns The width. */ getComputedWidth(): number; /** * Gets the computed height. * @returns The height. */ getComputedHeight(): number; /** * Gets the full computed layout object. * @returns Object with left, top, width, height, right, bottom. */ getComputedLayout(): { left: any; top: any; width: any; height: any; right: any; bottom: any; }; /** * Sets a custom measure function for this node. * Used for leaf nodes (like text) to calculate their size based on constraints. * @param measureFunc - The measure function, or null to unset. */ setMeasureFunc(measureFunc: MeasureFunction | null): void; /** * Unsets the measure function. */ unsetMeasureFunc(): void; /** * Unsets the dirtied function. */ unsetDirtiedFunc(): void; /** * Set a callback function that will be called when this node becomes dirty. * The callback is only called once when transitioning from clean to dirty state. */ setDirtiedFunc(dirtiedFunc: DirtiedFunction | null): void; /** * Internal method to mark node as dirty and trigger callback. * Called by updateStyle and other style-modifying methods. */ private markDirtyInternal; /** * Manually mark this node as dirty, requiring re-layout. * This is typically only callable on nodes with a measure function. */ markDirty(): void; /** * Propagate dirty state up to parent chain, triggering their callbacks. */ private propagateDirtyToParent; /** * Check if this node is dirty (needs re-layout). */ isDirty(): boolean; /** * Reset the node to its initial state. * Clears all styles, children, measure function, and dirtied callback. */ reset(): void; /** * Check if this node has a new layout since the last call to markLayoutSeen(). * Returns true if calculateLayout has been called and markLayoutSeen has not been called since. */ hasNewLayout(): boolean; /** * Mark the current layout as "seen". * After calling this, hasNewLayout() will return false until the next calculateLayout(). */ markLayoutSeen(): void; /** * Set whether this node should be used as the baseline reference for its parent. * * NOTE: This is a Yoga-specific feature. Taffy ALWAYS uses the first child * as the baseline reference and cannot be overridden. This flag is stored * for API compatibility but has no effect on Taffy layout. */ setIsReferenceBaseline(isReferenceBaseline: boolean): void; /** * Check if this node is marked as the baseline reference for its parent. */ isReferenceBaseline(): boolean; /** * Set a custom baseline function for this node. * * NOTE: This is a Yoga-specific feature. Taffy calculates baselines * automatically from child content and doesn't support custom functions. */ setBaselineFunc(_baselineFunc: ((width: number, height: number) => number) | null): void; /** * Get the computed baseline of this node. * Returns the distance from the top of the node to its baseline. * * NOTE: Taffy doesn't expose explicit baseline offset in layout results. * This returns height as a reasonable approximation (baseline at bottom). */ getBaseline(): number; /** * Internal helper to lookup node by ID for measure dispatch. * @param id - The node ID. * @returns The Node instance. */ static getNodeById(id: bigint): Node | undefined; } export type DirtiedFunction = (node: Node) => void;