/* tslint:disable */ /* eslint-disable */ /** * Available space constraint for layout computation. * * Specifies how much space is available for a node during layout calculation. * This is passed to `computeLayout()` to define the container constraints. * * @remarks * - Use `number` when you have a fixed container size * - Use `"min-content"` to shrink-wrap to the minimum content size * - Use `"max-content"` to expand to fit all content without wrapping * * @example * ```typescript * import init, { TaffyTree, Style, type AvailableSpace, type Size } from 'taffy-layout'; * * await init(); * const tree = new TaffyTree(); * const root: bigint = tree.newLeaf(new Style()); * * // Fixed size container with type annotation * const fixedSpace: Size = { * width: 800, * height: 600 * }; * tree.computeLayout(root, fixedSpace); * * // Flexible width, fixed height * const flexibleSpace: Size = { * width: "max-content", * height: 400 * }; * tree.computeLayout(root, flexibleSpace); * ``` */ export type AvailableSpace = number | "min-content" | "max-content"; /** * Generic size type with width and height. * * A two-dimensional container for width and height values. The type parameter `T` * determines what kind of values are stored. * * @typeParam T - The type of each dimension (e.g., `number`, `Dimension`, `AvailableSpace`) * * @property width - The horizontal dimension value * @property height - The vertical dimension value * * @example * ```typescript * import type { Size, Dimension, AvailableSpace } from 'taffy-layout'; * * // Size with explicit type parameters * const pixelSize: Size = { width: 200, height: 100 }; * * const dimensionSize: Size = { * width: 200, * height: "50%" * }; * * const availableSize: Size = { * width: 800, * height: "max-content" * }; * ``` */ export type Size = { /** The horizontal dimension value */ width: T; /** The vertical dimension value */ height: T; }; /** * Custom measure function for leaf nodes with text or other dynamic content. * * This callback is invoked during layout computation for leaf nodes that need * custom sizing based on their content (e.g., text nodes that need text measurement). * * @param knownDimensions - Dimensions already determined by constraints. Each dimension * is `number` if known, or `undefined` if needs to be measured. * @param availableSpace - The available space constraints for the node. Can be definite * pixels, "min-content", or "max-content". * @param node - The node ID (`bigint`) of the node being measured * @param context - User-provided context attached to the node via `newLeafWithContext()` * @param style - The node's current Style configuration * * @returns - The measured size of the content in pixels * * @example * ```typescript * import init, { TaffyTree, Style, type MeasureFunction, type Size } from 'taffy-layout'; * * interface TextContext { * text: string; * fontSize: number; * } * * await init(); * const tree = new TaffyTree(); * * const style = new Style(); * const context: TextContext = { text: "Hello, World!", fontSize: 16 }; * const textNode: bigint = tree.newLeafWithContext(style, context); * * // Helper function to measure text width * const measureTextWidth = (text: string, fontSize: number) => text.length * fontSize * 0.6; * * // Typed measure function * const measureText: MeasureFunction = ( * knownDimensions, * availableSpace, * node, * context, * style * ): Size => { * const ctx = context as TextContext | undefined; * if (!ctx?.text) return { width: 0, height: 0 }; * * const width = knownDimensions.width ?? measureTextWidth(ctx.text, ctx.fontSize); * const height = knownDimensions.height ?? ctx.fontSize * 1.2; * * return { width, height }; * }; * * tree.computeLayoutWithMeasure( * textNode, * { width: 200, height: "max-content" }, * measureText * ); * ``` */ export type MeasureFunction = ( knownDimensions: Size, availableSpace: Size, node: bigint, context: any, style: Style, ) => Size; /** * Dimension type supporting length, percentage, or auto values. * * Used for sizing properties like `width`, `height`, `flexBasis`, etc. * * @remarks * - `number`: Fixed size in pixels * - `"{number}%"`: Percentage of parent's size (0-100) * - `"auto"`: Size determined by content or layout algorithm * * @example * ```typescript * import { Style, type Dimension, type Size } from 'taffy-layout'; * * const style = new Style(); * * // With explicit type annotations * const fixedSize: Size = { * width: 200, * height: 100 * }; * * const percentSize: Size = { * width: "50%", * height: "100%" * }; * * const autoSize: Size = { * width: "auto", * height: "auto" * }; * * style.size = fixedSize; * ``` */ export type Dimension = number | `${number}%` | "auto"; /** * Length or percentage value (no auto support). * * Used for properties that require explicit values, such as `padding`, `border`, and `gap`. * * @remarks * - `number`: Fixed size in pixels * - `"{number}%"`: Percentage of parent's size (0-100) * * @example * ```typescript * import { Style, type LengthPercentage, type Rect, type Size } from 'taffy-layout'; * * const style = new Style(); * * const padding: Rect = { * left: 10, * right: 10, * top: 5, * bottom: 5 * }; * * const gap: Size = { * width: "5%", * height: "5%" * }; * * style.padding = padding; * style.gap = gap; * ``` */ export type LengthPercentage = number | `${number}%`; /** * Length, percentage, or auto value. * * Used for properties that support auto values, such as `margin` and `inset`. * * @remarks * - `number`: Fixed size in pixels * - `"{number}%"`: Percentage of parent's size (0-100) * - `"auto"`: Automatic value (behavior depends on property) * * @example * ```typescript * import { Style, type LengthPercentageAuto, type Rect } from 'taffy-layout'; * * const style = new Style(); * * // Auto margins for horizontal centering * const centerMargin: Rect = { * left: "auto", * right: "auto", * top: 0, * bottom: 0 * }; * * style.margin = centerMargin; * ``` */ export type LengthPercentageAuto = number | `${number}%` | "auto"; /** * Point with x and y coordinates/values. * * Used for properties that have separate horizontal (x) and vertical (y) values, * such as `overflow`. * * @typeParam T - The type of each coordinate * * @property x - The horizontal value * @property y - The vertical value * * @example * ```typescript * import { Style, Overflow, type Point } from 'taffy-layout'; * * const style = new Style(); * * const overflow: Point = { * x: Overflow.Hidden, * y: Overflow.Scroll * }; * * style.overflow = overflow; * ``` */ export type Point = { /** The horizontal (x-axis) value */ x: T; /** The vertical (y-axis) value */ y: T; }; /** * Rectangle with left, right, top, and bottom values. * * Used for box model properties like `margin`, `padding`, `border`, and `inset`. * * @typeParam T - The type of each side value * * @property left - The left side value * @property right - The right side value * @property top - The top side value * @property bottom - The bottom side value * * @example * ```typescript * import { Style, type Rect, type LengthPercentage, type LengthPercentageAuto } from 'taffy-layout'; * * const style = new Style(); * * // Typed padding * const padding: Rect = { * left: 10, * right: 10, * top: 10, * bottom: 10 * }; * * // Typed margin with auto * const margin: Rect = { * left: "auto", * right: "auto", * top: 10, * bottom: 30 * }; * * style.padding = padding; * style.margin = margin; * ``` */ export type Rect = { /** The left side value */ left: T; /** The right side value */ right: T; /** The top side value */ top: T; /** The bottom side value */ bottom: T; }; /** * Detailed layout information (for grid layouts). * * Returned by `detailedLayoutInfo()` for nodes using CSS Grid layout. * Contains detailed information about grid tracks and item placement. * * @remarks * This is only available when the `detailed_layout_info` feature is enabled. * * @example * ```typescript * import { TaffyTree, Style, Display, type DetailedLayoutInfo, type DetailedGridInfo } from 'taffy-layout'; * * const tree = new TaffyTree(); * const style = new Style(); * style.display = Display.Grid; * const gridNode = tree.newLeaf(style); * tree.computeLayout(gridNode, { width: 100, height: 100 }); * * const info: DetailedLayoutInfo = tree.detailedLayoutInfo(gridNode); * * if (info && typeof info === 'object' && 'Grid' in info) { * const grid = info.Grid as DetailedGridInfo; * console.log('Rows:', grid.rows.sizes); * console.log('Columns:', grid.columns.sizes); * } * ``` */ export type DetailedLayoutInfo = DetailedGridInfo | undefined; /** * Detailed information about a grid layout. * * Contains information about grid rows, columns, and item placement. * * @property rows - Information about row tracks * @property columns - Information about column tracks * @property items - Array of item placement information */ export type DetailedGridInfo = { /** Information about the grid's row tracks */ rows: DetailedGridTracksInfo; /** Information about the grid's column tracks */ columns: DetailedGridTracksInfo; /** Placement information for each grid item */ items: DetailedGridItemsInfo[]; }; /** * Information about grid tracks (rows or columns). * * Provides detailed sizing and gutter information for a set of grid tracks. * * @property negativeImplicitTracks - Number of implicit tracks before explicit tracks * @property explicitTracks - Number of explicitly defined tracks * @property positiveImplicitTracks - Number of implicit tracks after explicit tracks * @property gutters - Array of gutter sizes between tracks (in pixels) * @property sizes - Array of track sizes (in pixels) */ export type DetailedGridTracksInfo = { /** Number of implicit tracks before explicit tracks (for negative line numbers) */ negativeImplicitTracks: number; /** Number of tracks explicitly defined in grid-template-rows/columns */ explicitTracks: number; /** Number of implicit tracks created after explicit tracks */ positiveImplicitTracks: number; /** Gap sizes between tracks in pixels */ gutters: number[]; /** Computed sizes of each track in pixels */ sizes: number[]; }; /** * Information about a grid item's placement. * * Specifies which grid lines the item spans on both axes. * Line numbers are 1-indexed, with 1 being the first line. * * @property rowStart - Starting row line number (1-indexed) * @property rowEnd - Ending row line number (exclusive) * @property columnStart - Starting column line number (1-indexed) * @property columnEnd - Ending column line number (exclusive) */ export type DetailedGridItemsInfo = { /** Starting row line (1-indexed) */ rowStart: number; /** Ending row line (exclusive) */ rowEnd: number; /** Starting column line (1-indexed) */ columnStart: number; /** Ending column line (exclusive) */ columnEnd: number; }; /** * Grid placement type for positioning grid items. * * Specifies how an item is placed on a grid track (row or column). * Follows CSS `grid-row-start` / `grid-column-start` specification. * * @remarks * - `"auto"`: Auto-placement using the grid's flow algorithm * - `number`: Place at a specific line index (1-indexed, can be negative) * - `{ span: number }`: Span a specified number of tracks * * @example * ```typescript * import type { GridPlacement, Line } from 'taffy-layout'; * * // Line index (CSS: grid-row-start: 2) * const lineIndex: GridPlacement = 2; * * // Auto placement (CSS: grid-row-start: auto) * const auto: GridPlacement = "auto"; * * // Span (CSS: grid-row-start: span 3) * const span: GridPlacement = { span: 3 }; * * // Named line (CSS: grid-row-start: header 2) * const named: GridPlacement = { line: 2, ident: "header" }; * * // Named span (CSS: grid-row-start: span 2 header) * const namedSpan: GridPlacement = { span: 2, ident: "header" }; * ``` */ export type GridPlacement = "auto" | number | {line: number; ident: string} | {span: number; ident?: string}; /** * Line type representing start and end positions. * * A container for start and end values, used for CSS grid-row and grid-column * shorthand properties. * * @typeParam T - The type of start and end values * * @property start - The starting line/position * @property end - The ending line/position * * @example * ```typescript * import { Style, Display, type Line, type GridPlacement } from 'taffy-layout'; * * const style = new Style(); * style.display = Display.Grid; * * // CSS: grid-row: 1 / 3 * style.gridRow = { start: 1, end: 3 }; * * // CSS: grid-column: 1 / span 2 * style.gridColumn = { start: 1, end: { span: 2 } }; * * // CSS: grid-row: auto / auto * style.gridRow = { start: "auto", end: "auto" }; * ``` */ export type Line = { /** The starting position (CSS: *-start) */ start: T; /** The ending position (CSS: *-end) */ end: T; } /** * Grid track repetition parameter. * * Defines how many times a track pattern should repeat. * * @remarks * - `number`: Exact number of repetitions (e.g. `repeat(3, ...)`). * - `"autoFill"`: Fills the container with as many tracks as possible. * - `"autoFit"`: Fills the container, collapsing empty tracks. */ export type RepetitionCount = number | "auto-fill" | "auto-fit"; /** * Minumum track sizing function. * * Defines the minimum size of a grid track. */ export type MinTrackSizingFunction = number | `${number}%` | "auto" | "min-content" | "max-content"; /** * Maximum track sizing function. * * Defines the maximum size of a grid track. */ export type MaxTrackSizingFunction = number | `${number}%` | `${number}fr` | "auto" | "min-content" | "max-content" | "fit-content"; /** * Track sizing function (min/max pair). * * Defines the size range for a single grid track. */ export type TrackSizingFunction = {min: MinTrackSizingFunction; max: MaxTrackSizingFunction}; /** * Grid track repetition definition. */ export type GridTemplateRepetition = { count: RepetitionCount; tracks: TrackSizingFunction[]; lineNames?: string[][]; }; /** * Grid track sizing definition. * * Can be a single track sizing function or a repetition of tracks. */ export type GridTemplateComponent = TrackSizingFunction | GridTemplateRepetition; /** * Named grid area definition. * * Defines a named area within the grid and its boundaries. */ export type GridTemplateArea = { /** The name of the grid area */ name: string; /** Start row line */ rowStart: number; /** End row line */ rowEnd: number; /** Start column line */ columnStart: number; /** End column line */ columnEnd: number; }; /** * Valid property keys for Style.get() method. * * Supports both object properties and individual flat properties. * * @example * ```typescript * const style = new Style(); * // Top-level properties * style.get("display", "flexGrow"); * * // Individual flat properties * style.get("width", "marginLeft", "paddingTop"); * * // Object properties * style.get("size", "margin"); * ``` */ export type StyleProperty = // Layout Mode | "display" | "position" | "boxSizing" // Overflow | "overflow" | "overflowX" | "overflowY" // Flexbox | "flexDirection" | "flexWrap" | "flexGrow" | "flexShrink" | "flexBasis" // Alignment | "alignItems" | "alignSelf" | "alignContent" | "justifyContent" | "justifyItems" | "justifySelf" // Sizing | "aspectRatio" | "size" | "width" | "height" | "minSize" | "minWidth" | "minHeight" | "maxSize" | "maxWidth" | "maxHeight" // Spacing | "margin" | "marginLeft" | "marginRight" | "marginTop" | "marginBottom" | "padding" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "border" | "borderLeft" | "borderRight" | "borderTop" | "borderBottom" | "inset" | "left" | "right" | "top" | "bottom" | "gap" | "columnGap" | "rowGap" // Block layout | "itemIsTable" | "itemIsReplaced" | "scrollbarWidth" | "textAlign" // Grid layout | "gridAutoFlow" | "gridRow" | "gridRowStart" | "gridRowEnd" | "gridColumn" | "gridColumnStart" | "gridColumnEnd" | "gridTemplateRows" | "gridTemplateColumns" | "gridAutoRows" | "gridAutoColumns" | "gridTemplateAreas" | "gridTemplateRowNames" | "gridTemplateColumnNames"; /** * Valid property keys for Layout.get() method. * * Supports both object properties and individual flat properties. * * @example * ```typescript * import { TaffyTree, Style } from "taffy-layout"; * * const tree = new TaffyTree(); * const root = tree.newLeaf(new Style()); * tree.computeLayout(root, { width: 100, height: 100 }); * const layout = tree.getLayout(root); * // Object properties * layout.get("position", "size"); * * // Individual flat properties * layout.get("width", "height", "marginLeft"); * * // Mixed * layout.get("position", "width", "paddingTop"); * * tree.free(); * ``` */ export type LayoutProperty = // Rendering order | "order" // Position | "position" | "x" | "y" // Size | "size" | "width" | "height" // Content size | "contentSize" | "contentWidth" | "contentHeight" // Scrollbar size | "scrollbarSize" | "scrollbarWidth" | "scrollbarHeight" // Border | "border" | "borderLeft" | "borderRight" | "borderTop" | "borderBottom" // Padding | "padding" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" // Margin | "margin" | "marginLeft" | "marginRight" | "marginTop" | "marginBottom"; /** * Type-safe property values for Layout.get(). * * Maps property paths to their expected value types. */ export type LayoutPropertyValues = { [K in LayoutProperty]: K extends "order" ? number : K extends "position" ? Point : K extends "x" | "y" ? number : K extends "size" ? Size : K extends "width" | "height" ? number : K extends "contentSize" ? Size : K extends "contentWidth" | "contentHeight" ? number : K extends "scrollbarSize" ? Size : K extends "scrollbarWidth" | "scrollbarHeight" ? number : K extends "border" ? Rect : K extends "borderLeft" | "borderRight" | "borderTop" | "borderBottom" ? number : K extends "padding" ? Rect : K extends "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" ? number : K extends "margin" ? Rect : K extends "marginLeft" | "marginRight" | "marginTop" | "marginBottom" ? number : unknown; }; /** * Type-safe property values for batch setting. * * Maps property paths to their expected value types. */ export type StylePropertyValues = { [K in StyleProperty]?: K extends "display" ? Display : K extends "position" ? Position : K extends "boxSizing" ? BoxSizing : K extends "overflow" ? Point : K extends "overflowX" | "overflowY" ? Overflow : K extends "flexDirection" ? FlexDirection : K extends "flexWrap" ? FlexWrap : K extends "flexGrow" | "flexShrink" | "scrollbarWidth" ? number : K extends "flexBasis" ? Dimension : K extends "alignItems" | "justifyItems" ? AlignItems | undefined : K extends "alignSelf" | "justifySelf" ? AlignSelf | undefined : K extends "alignContent" ? AlignContent | undefined : K extends "justifyContent" ? JustifyContent | undefined : K extends "aspectRatio" ? number | undefined : K extends "size" | "minSize" | "maxSize" ? Size : K extends "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" ? Dimension : K extends "margin" | "inset" ? Rect : K extends "marginLeft" | "marginRight" | "marginTop" | "marginBottom" | "left" | "right" | "top" | "bottom" ? LengthPercentageAuto : K extends "padding" | "border" ? Rect : K extends "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "borderLeft" | "borderRight" | "borderTop" | "borderBottom" ? LengthPercentage : K extends "gap" ? Size : K extends "columnGap" | "rowGap" ? LengthPercentage : K extends "itemIsTable" | "itemIsReplaced" ? boolean : K extends "textAlign" ? TextAlign : K extends "gridAutoFlow" ? GridAutoFlow : K extends "gridRow" | "gridColumn" ? Line : K extends "gridRowStart" | "gridRowEnd" | "gridColumnStart" | "gridColumnEnd" ? GridPlacement : K extends "gridTemplateRows" | "gridTemplateColumns" ? GridTemplateComponent[] : K extends "gridAutoRows" | "gridAutoColumns" ? TrackSizingFunction[] : K extends "gridTemplateAreas" ? GridTemplateArea[] : K extends "gridTemplateRowNames" | "gridTemplateColumnNames" ? string[][] : unknown; }; // Module augmentation for stronger typing on Style class methods declare module "./taffy_wasm" { interface Style { /** * Reads multiple style properties in a single WASM call. * Supports both object properties and individual flat properties. * * @returns Single value for one key, tuple for 2-3 keys, array for 4+ keys * * @throws Error if any property key is unknown. * * @remarks * - Single property: returns exact value type (including `undefined` for optional properties) * - 2-3 properties: returns typed tuple for destructuring * - 4+ properties: returns array of union types * * @example * ```typescript * const style = new Style(); * style.display = Display.Flex; * * // Single property - returns exact type (includes undefined for optional properties) * const display = style.get("display"); // Display | undefined * * // Individual flat property - returns exact type * const width = style.get("width"); // Dimension * * // Optional properties return undefined when not set * const alignItems = style.get("alignItems"); // AlignItems | undefined * * // Two properties - returns tuple for destructuring * const [d, w] = style.get("display", "width"); // [Display | undefined, Dimension] * * // Three properties - returns tuple for destructuring * const [d2, w2, f] = style.get("display", "width", "flexGrow"); * * // Four or more properties - returns array * const values = style.get("display", "width", "flexGrow", "flexShrink"); * // values type is: (Display | Dimension | number | undefined)[] * ``` */ get(...keys: [K]): StylePropertyValues[K]; get( ...keys: [K1, K2] ): [StylePropertyValues[K1], StylePropertyValues[K2]]; get( ...keys: [K1, K2, K3] ): [StylePropertyValues[K1], StylePropertyValues[K2], StylePropertyValues[K3]]; get(...keys: Keys): StylePropertyArrayValues; /** * Sets multiple style properties in a single WASM call. * Supports both object properties and individual flat properties. * * @param props - Object mapping property keys to their values * * @remarks * Only accepts valid property keys with their corresponding value types. * * @throws Error if any property key is unknown. * * @example * ```typescript * const style = new Style(); * style.set({ * display: Display.Flex, * width: 200, * marginLeft: 10, * marginRight: "auto" * }); * ``` */ set(props: StylePropertyValues): void; } interface Layout { /** * Reads multiple layout properties in a single WASM call. * Supports both object properties and individual flat properties. * * @returns Single value for one key, tuple for 2-3 keys, array for 4+ keys * * @throws Error if any property key is unknown. * * @remarks * - Single property: returns exact value type * - 2-3 properties: returns typed tuple for destructuring * - 4+ properties: returns array of union types * * @example * ```typescript * import { TaffyTree, Style } from "taffy-layout"; * * const tree = new TaffyTree(); * const root = tree.newLeaf(new Style()); * tree.computeLayout(root, { width: 100, height: 100 }); * const layout = tree.getLayout(root); * * // Single property - returns exact type * const width = layout.get("width"); // number * * // Two properties - returns tuple for destructuring * const [pos, size] = layout.get("position", "size"); * // pos: Point, size: Size * * // Three properties - returns tuple for destructuring * const [x, y, w] = layout.get("x", "y", "width"); * * // Four or more properties - returns array * const values = layout.get("x", "y", "width", "height"); * // values type is: number[] * * tree.free(); * ``` */ get(...keys: [K]): LayoutPropertyValues[K]; get( ...keys: [K1, K2] ): [LayoutPropertyValues[K1], LayoutPropertyValues[K2]]; get( ...keys: [K1, K2, K3] ): [LayoutPropertyValues[K1], LayoutPropertyValues[K2], LayoutPropertyValues[K3]]; get(...keys: Keys): LayoutPropertyArrayValues; } } /** * Helper type to convert an array of property keys to an array of their value types. * Unlike `TupleToStyleValues`, this returns an array type instead of a tuple. */ type StylePropertyArrayValues = { [K in keyof Keys]: Keys[K] extends StyleProperty ? StylePropertyValues[Keys[K]] : unknown; }; /** * Helper type to convert an array of layout property keys to an array of their value types. */ type LayoutPropertyArrayValues = { [K in keyof Keys]: Keys[K] extends LayoutProperty ? LayoutPropertyValues[Keys[K]] : unknown; }; /** * Multi-line content alignment enumeration * * Controls the distribution of space between and around content items along the cross axis * in a multi-line flex container. This corresponds to the CSS `align-content` property. * * **Note**: This property only has effect when `flex-wrap` is set to `Wrap` or `WrapReverse`. * * @example * ```typescript * import { Style, AlignContent, FlexWrap } from 'taffy-layout'; * * const style = new Style(); * style.flexWrap = FlexWrap.Wrap; * style.alignContent = AlignContent.SpaceBetween; // Distribute lines evenly * ``` */ export enum AlignContent { /** * Lines packed toward the start of the cross axis */ Start = 0, /** * Lines packed toward the end of the cross axis */ End = 1, /** * Lines packed toward the start of the flex container */ FlexStart = 2, /** * Lines packed toward the end of the flex container */ FlexEnd = 3, /** * Lines centered within the container */ Center = 4, /** * Lines stretched to fill the container */ Stretch = 5, /** * Lines evenly distributed with first/last at edges */ SpaceBetween = 6, /** * Lines evenly distributed with equal space around each */ SpaceAround = 7, /** * Lines evenly distributed with equal space between each */ SpaceEvenly = 8, } /** * Cross-axis alignment enumeration for all children * * Defines the default alignment for all flex/grid items along the cross axis. * This corresponds to the CSS `align-items` property. * * @example * ```typescript * import { Style, AlignItems } from 'taffy-layout'; * * const style = new Style(); * style.alignItems = AlignItems.Center; // Center items on cross axis * style.alignItems = AlignItems.Stretch; // Stretch items to fill container * ``` */ export enum AlignItems { /** * Items aligned to the start of the cross axis */ Start = 0, /** * Items aligned to the end of the cross axis */ End = 1, /** * Items aligned to the start of the flex container */ FlexStart = 2, /** * Items aligned to the end of the flex container */ FlexEnd = 3, /** * Items centered along the cross axis */ Center = 4, /** * Items aligned to their text baselines */ Baseline = 5, /** * Items stretched to fill the container */ Stretch = 6, } /** * Cross-axis alignment enumeration for a single element * * Overrides the parent's `align-items` value for a specific child element. * This corresponds to the CSS `align-self` property. * * @example * ```typescript * import { Style, AlignSelf } from 'taffy-layout'; * * const style = new Style(); * style.alignSelf = AlignSelf.Auto; // Use parent's align-items * style.alignSelf = AlignSelf.Center; // Override to center this item * ``` */ export enum AlignSelf { /** * Inherits the parent container's `align-items` value */ Auto = 0, /** * Item aligned to the start of the cross axis */ Start = 1, /** * Item aligned to the end of the cross axis */ End = 2, /** * Item aligned to the start of the flex container */ FlexStart = 3, /** * Item aligned to the end of the flex container */ FlexEnd = 4, /** * Item centered along the cross axis */ Center = 5, /** * Item aligned to its text baseline */ Baseline = 6, /** * Item stretched to fill the container */ Stretch = 7, } /** * Box sizing enumeration * * Controls how the total width and height of an element is calculated. * This corresponds to the CSS `box-sizing` property. * * @example * ```typescript * import { Style, BoxSizing } from 'taffy-layout'; * * const style = new Style(); * style.boxSizing = BoxSizing.BorderBox; // Size includes padding and border * style.boxSizing = BoxSizing.ContentBox; // Size is content only * ``` */ export enum BoxSizing { /** * The width and height properties include padding and border */ BorderBox = 0, /** * The width and height properties include only the content */ ContentBox = 1, } /** * Display mode enumeration * * Controls the layout algorithm type for an element. This corresponds to the CSS `display` property * and determines how an element and its children are laid out. * * @example * ```typescript * import { Style, Display } from 'taffy-layout'; * * const style = new Style(); * style.display = Display.Flex; // Enable flexbox layout * style.display = Display.Grid; // Enable grid layout * style.display = Display.None; // Hide element from layout * ``` */ export enum Display { /** * Block-level layout where element takes the full available width */ Block = 0, /** * Flexbox layout for one-dimensional item arrangement */ Flex = 1, /** * CSS Grid layout for two-dimensional item arrangement */ Grid = 2, /** * Element is removed from layout calculation entirely */ None = 3, } /** * Flex direction enumeration * * Defines the main axis direction for flex item layout. This corresponds to the CSS * `flex-direction` property and determines how flex items are placed within the container. * * @example * ```typescript * import { Style, FlexDirection } from 'taffy-layout'; * * const style = new Style(); * style.flexDirection = FlexDirection.Row; // Horizontal, left to right * style.flexDirection = FlexDirection.Column; // Vertical, top to bottom * ``` */ export enum FlexDirection { /** * Main axis runs horizontally from left to right */ Row = 0, /** * Main axis runs vertically from top to bottom */ Column = 1, /** * Main axis runs horizontally from right to left */ RowReverse = 2, /** * Main axis runs vertically from bottom to top */ ColumnReverse = 3, } /** * Flex wrap mode enumeration * * Controls whether flex items wrap onto multiple lines when they overflow the container. * This corresponds to the CSS `flex-wrap` property. * * @example * ```typescript * import { Style, FlexWrap } from 'taffy-layout'; * * const style = new Style(); * style.flexWrap = FlexWrap.NoWrap; // All items on single line * style.flexWrap = FlexWrap.Wrap; // Items wrap to new lines * ``` */ export enum FlexWrap { /** * All flex items are placed on a single line */ NoWrap = 0, /** * Flex items wrap onto multiple lines from top to bottom */ Wrap = 1, /** * Flex items wrap onto multiple lines from bottom to top */ WrapReverse = 2, } /** * Grid auto flow enumeration * * Controls whether grid items are placed row-wise or column-wise, and whether * the sparse or dense packing algorithm is used. * * @example * ```typescript * import { Style, GridAutoFlow } from 'taffy-layout'; * * const style = new Style(); * style.gridAutoFlow = GridAutoFlow.Row; // Fill rows first * style.gridAutoFlow = GridAutoFlow.Column; // Fill columns first * style.gridAutoFlow = GridAutoFlow.RowDense; // Fill rows, pack densely * ``` */ export enum GridAutoFlow { /** * Items are placed by filling each row in turn, adding new rows as necessary */ Row = 0, /** * Items are placed by filling each column in turn, adding new columns as necessary */ Column = 1, /** * Combines `Row` with the dense packing algorithm */ RowDense = 2, /** * Combines `Column` with the dense packing algorithm */ ColumnDense = 3, } /** * Main axis alignment enumeration * * Defines how flex items are aligned and spaced along the main axis. * This corresponds to the CSS `justify-content` property. * * @example * ```typescript * import { Style, JustifyContent } from 'taffy-layout'; * * const style = new Style(); * style.justifyContent = JustifyContent.Center; // Center items * style.justifyContent = JustifyContent.SpaceBetween; // Distribute evenly * ``` */ export enum JustifyContent { /** * Items packed toward the start of the main axis */ Start = 0, /** * Items packed toward the end of the main axis */ End = 1, /** * Items packed toward the start of the flex container */ FlexStart = 2, /** * Items packed toward the end of the flex container */ FlexEnd = 3, /** * Items centered along the main axis */ Center = 4, /** * Items stretched along the main axis */ Stretch = 5, /** * Items evenly distributed with first/last at edges */ SpaceBetween = 6, /** * Items evenly distributed with equal space around each */ SpaceAround = 7, /** * Items evenly distributed with equal space between each */ SpaceEvenly = 8, } /** * Computed layout result containing position, size, and spacing values for a node. * * This class wraps the native [`taffy::Layout`] and provides read-only access * to all computed layout values. All dimensions are in pixels. * * @example * ```typescript * const tree = new TaffyTree(); * const rootId = tree.newLeaf(new Style()); * const node = rootId; * * tree.computeLayout(rootId, { width: 800, height: 600 }); * const layout = tree.getLayout(node); * * console.log("Position:", layout.x, layout.y); * console.log("Size:", layout.width, layout.height); * console.log("Content:", layout.contentWidth, layout.contentHeight); * console.log("Padding:", layout.paddingTop, layout.paddingRight, layout.paddingBottom, layout.paddingLeft); * console.log("Border:", layout.borderTop, layout.borderRight, layout.borderBottom, layout.borderLeft); * console.log("Margin:", layout.marginTop, layout.marginRight, layout.marginBottom, layout.marginLeft); * console.log("Scrollbar:", layout.scrollbarWidth, layout.scrollbarHeight); * console.log("Order:", layout.order); * ``` */ export class Layout { private constructor(); free(): void; [Symbol.dispose](): void; /** * Gets the top border width * * @returns - The computed top border width in pixels */ readonly borderTop: number; /** * Gets the top margin * * @returns - The computed top margin in pixels */ readonly marginTop: number; /** * Gets the left border width * * @returns - The computed left border width in pixels */ readonly borderLeft: number; /** * Gets the left margin * * @returns - The computed left margin in pixels */ readonly marginLeft: number; /** * Gets the top padding * * @returns - The computed top padding in pixels */ readonly paddingTop: number; /** * Gets the right border width * * @returns - The computed right border width in pixels */ readonly borderRight: number; /** * Gets the content size as a Size with contentWidth and contentHeight * * If the node has overflow content, this represents the total size of all content * (may exceed the node's width/height). * * @returns - A Size with contentWidth and contentHeight in pixels * * @example * ```typescript * import { TaffyTree, Style } from "taffy-layout"; * * const tree = new TaffyTree(); * const root = tree.newLeaf(new Style()); * tree.computeLayout(root, { width: 100, height: 100 }); * const layout = tree.getLayout(root); * const contentSize = layout.contentSize; * console.log(`Content: ${contentSize.width} x ${contentSize.height}`); * tree.free(); * ``` */ readonly contentSize: any; /** * Gets the right margin * * @returns - The computed right margin in pixels */ readonly marginRight: number; /** * Gets the left padding * * @returns - The computed left padding in pixels */ readonly paddingLeft: number; /** * Gets the bottom border width * * @returns - The computed bottom border width in pixels */ readonly borderBottom: number; /** * Gets the width of the scrollable content * * If the node has overflow content, this represents the total * width of all content (may exceed `width`). * * @returns - The content width in pixels */ readonly contentWidth: number; /** * Gets the bottom margin * * @returns - The computed bottom margin in pixels */ readonly marginBottom: number; /** * Gets the right padding * * @returns - The computed right padding in pixels */ readonly paddingRight: number; /** * Gets the height of the scrollable content * * If the node has overflow content, this represents the total * height of all content (may exceed `height`). * * @returns - The content height in pixels */ readonly contentHeight: number; /** * Gets the bottom padding * * @returns - The computed bottom padding in pixels */ readonly paddingBottom: number; /** * Gets the scrollbar size as a Size with scrollbarWidth and scrollbarHeight * * When overflow is set to scroll, this indicates the space reserved for scrollbars. * * @returns - A Size with scrollbarWidth and scrollbarHeight in pixels * * @example * ```typescript * import { TaffyTree, Style } from "taffy-layout"; * * const tree = new TaffyTree(); * const root = tree.newLeaf(new Style()); * tree.computeLayout(root, { width: 100, height: 100 }); * const layout = tree.getLayout(root); * const scrollbarSize = layout.scrollbarSize; * console.log(`Scrollbar: ${scrollbarSize.width} x ${scrollbarSize.height}`); * tree.free(); * ``` */ readonly scrollbarSize: any; /** * Gets the width of the vertical scrollbar * * When overflow is set to scroll, this indicates the space * reserved for the vertical scrollbar. * * @returns - The scrollbar width in pixels (0 if no scrollbar) */ readonly scrollbarWidth: number; /** * Gets the height of the horizontal scrollbar * * When overflow is set to scroll, this indicates the space * reserved for the horizontal scrollbar. * * @returns - The scrollbar height in pixels (0 if no scrollbar) */ readonly scrollbarHeight: number; /** * Gets the X coordinate of the node's top-left corner * * This value is relative to the node's parent. For the root node, * this is always 0. * * @returns - The horizontal position in pixels */ readonly x: number; /** * Gets the Y coordinate of the node's top-left corner * * This value is relative to the node's parent. For the root node, * this is always 0. * * @returns - The vertical position in pixels */ readonly y: number; /** * Gets the size as a Size with width and height * * @returns - A Size with width and height in pixels * * @example * ```typescript * import { TaffyTree, Style } from "taffy-layout"; * * const tree = new TaffyTree(); * const root = tree.newLeaf(new Style()); * tree.computeLayout(root, { width: 100, height: 100 }); * const layout = tree.getLayout(root); * const size = layout.size; * console.log(`Size: ${size.width} x ${size.height}`); * tree.free(); * ``` */ readonly size: any; /** * Gets the rendering order of the node * * This value determines the z-order for overlapping elements. * Lower values are rendered first (behind higher values). * * @returns - The rendering order as an unsigned 32-bit integer */ readonly order: number; /** * Gets the computed width of the node * * This is the final width after layout computation, including * any constraints from min/max size or flex properties. * * @returns - The width in pixels */ readonly width: number; /** * Gets the border as a Rect with left, right, top, bottom border widths * * @returns - A Rect with border widths in pixels * * @example * ```typescript * import { TaffyTree, Style } from "taffy-layout"; * * const tree = new TaffyTree(); * const root = tree.newLeaf(new Style()); * tree.computeLayout(root, { width: 100, height: 100 }); * const layout = tree.getLayout(root); * const border = layout.border; * console.log(`Border: ${border.left} ${border.right} ${border.top} ${border.bottom}`); * tree.free(); * ``` */ readonly border: any; /** * Gets the computed height of the node * * This is the final height after layout computation, including * any constraints from min/max size or flex properties. * * @returns - The height in pixels */ readonly height: number; /** * Gets the margin as a Rect with left, right, top, bottom margins * * @returns - A Rect with margin values in pixels * * @example * ```typescript * import { TaffyTree, Style } from "taffy-layout"; * * const tree = new TaffyTree(); * const root = tree.newLeaf(new Style()); * tree.computeLayout(root, { width: 100, height: 100 }); * const layout = tree.getLayout(root); * const margin = layout.margin; * console.log(`Margin: ${margin.left} ${margin.right} ${margin.top} ${margin.bottom}`); * tree.free(); * ``` */ readonly margin: any; /** * Gets the padding as a Rect with left, right, top, bottom padding * * @returns - A Rect with padding values in pixels * * @example * ```typescript * import { TaffyTree, Style } from "taffy-layout"; * * const tree = new TaffyTree(); * const root = tree.newLeaf(new Style()); * tree.computeLayout(root, { width: 100, height: 100 }); * const layout = tree.getLayout(root); * const padding = layout.padding; * console.log(`Padding: ${padding.left} ${padding.right} ${padding.top} ${padding.bottom}`); * tree.free(); * ``` */ readonly padding: any; /** * Gets the position as a Point with x and y coordinates * * @returns - A Point with x and y coordinates in pixels * * @example * ```typescript * import { TaffyTree, Style } from "taffy-layout"; * * const tree = new TaffyTree(); * const root = tree.newLeaf(new Style()); * tree.computeLayout(root, { width: 100, height: 100 }); * const layout = tree.getLayout(root); * const pos = layout.position; * console.log(`Position: (${pos.x}, ${pos.y})`); * tree.free(); * ``` */ readonly position: any; } /** * Overflow handling enumeration * * Defines how content that exceeds the container boundaries is handled. * This corresponds to the CSS `overflow` property. * * @example * ```typescript * import { Style, Overflow } from 'taffy-layout'; * * const style = new Style(); * style.overflow = { x: Overflow.Hidden, y: Overflow.Scroll }; * ``` */ export enum Overflow { /** * Content is not clipped and may render outside the container */ Visible = 0, /** * Content is clipped at the container boundary, but unlike Hidden, this forbids all scrolling */ Clip = 1, /** * Content is clipped at the container boundary */ Hidden = 2, /** * Always display scrollbars for scrollable content */ Scroll = 3, } /** * Position mode enumeration * * Controls how an element is positioned within its parent container. * This corresponds to the CSS `position` property. * * @example * ```typescript * import { Style, Position } from 'taffy-layout'; * * const style = new Style(); * style.position = Position.Relative; // Normal document flow * style.position = Position.Absolute; // Removed from flow, uses inset values * ``` */ export enum Position { /** * Element participates in normal document flow */ Relative = 0, /** * Element is positioned relative to its nearest positioned ancestor */ Absolute = 1, } /** * CSS layout configuration for a node, including flexbox, sizing, spacing, and alignment properties. * * This class holds all CSS layout properties for a node. Create an instance with * `new Style()` and configure properties before passing to `TaffyTree.newLeaf()`. * * @defaultValue * When created, all properties are set to their CSS default values: * - `display`: `Display.Block` * - `position`: `Position.Relative` * - `flexDirection`: `FlexDirection.Row` * - `flexWrap`: `FlexWrap.NoWrap` * - `flexGrow`: `0` * - `flexShrink`: `1` * - All alignment properties: `undefined` (use default behavior) * - All dimensions: `"auto"` * - All spacing: `0` * */ export class Style { free(): void; [Symbol.dispose](): void; /** * Creates a new Style instance with default values * * @param props - Optional object with initial style properties * @returns - A new `Style` object with all properties set to CSS defaults * * @example * ```typescript * // Create with defaults * const style = new Style(); * console.log(style.display); // Display.Block * * // Create with initial properties * const style2 = new Style({ * display: Display.Flex, * flexDirection: FlexDirection.Column, * width: 200, * marginLeft: 10 * }); * ``` */ constructor(props?: any | null); /** * Gets the align-self property * * Overrides the parent's align-items for this specific element. * * @returns - The current [`AlignSelf`](JsAlignSelf) value (returns `Auto` if not set) */ alignSelf: AlignSelf | undefined; /** * Gets the top border width * * @returns - The current top border width as a [`LengthPercentage`](JsLengthPercentage) */ borderTop: any; /** * Gets the box sizing mode * * Determines whether padding and border are included in dimensions. * * @returns - The current [`BoxSizing`](JsBoxSizing) value * * @defaultValue `BoxSizing.BorderBox` */ boxSizing: BoxSizing; /** * Gets the column gap (horizontal spacing between items) * * @returns - The current column gap as a [`LengthPercentage`](JsLengthPercentage) */ columnGap: any; /** * Gets the flex-basis * * The initial size of a flex item before growing/shrinking. * * @returns - A `Dimension` value (`number`, `\"{number}%\"`, or `\"auto\"`) */ flexBasis: Dimension; /** * Gets the top margin * * @returns - The current top margin as a [`LengthPercentageAuto`](JsLengthPercentageAuto) */ marginTop: any; /** * Gets the maximum height * * @returns - The current maximum height as a [`Dimension`](JsDimension) */ maxHeight: Dimension; /** * Gets the minimum height * * @returns - The current minimum height as a [`Dimension`](JsDimension) */ minHeight: Dimension; /** * Gets the horizontal overflow behavior * * @returns - The current [`Overflow`](JsOverflow) value for the x-axis */ overflowX: Overflow; /** * Gets the vertical overflow behavior * * @returns - The current [`Overflow`](JsOverflow) value for the y-axis */ overflowY: Overflow; /** * Gets the border width * * Width of the element's border on each side. * * @returns - A `Rect` with left, right, top, bottom border widths */ border: Rect; /** * Gets the bottom inset offset * * @returns - The current bottom offset as a [`LengthPercentageAuto`](JsLengthPercentageAuto) */ bottom: any; /** * Gets the height * * @returns - The current height as a [`Dimension`](JsDimension) */ height: Dimension; /** * Gets the margin * * Outer spacing around the element. * * @returns - A `Rect` with left, right, top, bottom margins */ margin: Rect; /** * Gets the text-align property * * Used by block layout to implement legacy text alignment behavior. * * @returns - The current [`TextAlign`](JsTextAlign) value * * @defaultValue - `TextAlign.Auto` */ textAlign: TextAlign; /** * Gets the align-items property * * Defines the default alignment for all children on the cross axis. * * @returns - The current [`AlignItems`](JsAlignItems) value, or `undefined` if not set */ alignItems: AlignItems | undefined; /** * Gets the left border width * * @returns - The current left border width as a [`LengthPercentage`](JsLengthPercentage) */ borderLeft: any; /** * Gets the flex shrink factor * * Determines how much the item shrinks relative to siblings when * there is insufficient space. * * @returns - The flex shrink factor (default: 1) */ flexShrink: number; /** * Gets the grid-column property * * Defines which column in the grid the item should start and end at. * Corresponds to CSS `grid-column` shorthand. * * @returns - A `Line` with start and end placements */ gridColumn: Line; /** * Gets the left margin * * @returns - The current left margin as a [`LengthPercentageAuto`](JsLengthPercentageAuto) */ marginLeft: any; /** * Gets the top padding * * @returns - The current top padding as a [`LengthPercentage`](JsLengthPercentage) */ paddingTop: any; /** * Gets the display mode * * Determines the layout algorithm used for this element and its children. * * @returns - The current [`Display`](JsDisplay) value * * @defaultValue - `Display.Block` */ display: Display; /** * Gets the padding * * Inner spacing between the element's border and content. * * @returns - A `Rect` with left, right, top, bottom padding */ padding: Rect; /** * Gets the row gap (vertical spacing between items) * * @returns - The current row gap as a [`LengthPercentage`](JsLengthPercentage) */ rowGap: any; /** * Gets the aspect ratio * * The ratio of width to height. Used to maintain proportions. * * @returns - The aspect ratio value, or `undefined` if not set */ aspectRatio: number | undefined; /** * Gets the right border width * * @returns - The current right border width as a [`LengthPercentage`](JsLengthPercentage) */ borderRight: any; /** * Gets the grid-row-end property * * @returns - The current grid row end placement as a [`GridPlacement`](JsGridPlacement) */ gridRowEnd: any; /** * Gets the justify-self property * * Overrides the parent's justify-items for this specific element in the inline axis. * * @returns - The current [`AlignSelf`](JsAlignSelf) value (returns `Auto` if not set) */ justifySelf: AlignSelf | undefined; /** * Gets the right margin * * @returns - The current right margin as a [`LengthPercentageAuto`](JsLengthPercentageAuto) */ marginRight: any; /** * Gets the left padding * * @returns - The current left padding as a [`LengthPercentage`](JsLengthPercentage) */ paddingLeft: any; /** * Gets the grid-row property * * Defines which row in the grid the item should start and end at. * Corresponds to CSS `grid-row` shorthand. * * @returns - A `Line` with start and end placements */ gridRow: Line; /** * Gets the maximum size constraints * * @returns - A `Size` object with maximum width and height */ maxSize: Size; /** * Gets the minimum size constraints * * @returns - A `Size` object with minimum width and height */ minSize: Size; /** * Gets the overflow behavior * * Controls how content that exceeds the container is handled. * * @returns - A `Point` with `x` and `y` overflow settings */ overflow: Point; /** * Gets the position mode * * Determines how the element is positioned within its parent. * * @returns - The current [`Position`](JsPosition) value * * @defaultValue - `Position.Relative` */ position: Position; /** * Gets the align-content property * * Controls distribution of space between lines in a multi-line flex container. * * @returns - The current [`AlignContent`](JsAlignContent) value, or `undefined` if not set */ alignContent: AlignContent | undefined; /** * Gets the bottom border width * * @returns - The current bottom border width as a [`LengthPercentage`](JsLengthPercentage) */ borderBottom: any; /** * Gets whether this item is a table * * Table children are handled specially in block layout. * * @returns - Whether the item is treated as a table * * @defaultValue - `false` */ itemIsTable: boolean; /** * Gets the justify-items property * * Defines the default justify-self for all children in the inline axis. * This is primarily used for CSS Grid layout. * * @returns - The current [`AlignItems`](JsAlignItems) value, or `undefined` if not set */ justifyItems: AlignItems | undefined; /** * Gets the bottom margin * * @returns - The current bottom margin as a [`LengthPercentageAuto`](JsLengthPercentageAuto) */ marginBottom: any; /** * Gets the right padding * * @returns - The current right padding as a [`LengthPercentage`](JsLengthPercentage) */ paddingRight: any; /** * Gets the flex grow factor * * Determines how much the item grows relative to siblings when * there is extra space available. * * @returns - The flex grow factor (default: 0) */ flexGrow: number; /** * Gets the flex wrap mode * * Controls whether flex items wrap to new lines. * * @returns - The current [`FlexWrap`](JsFlexWrap) value * * @defaultValue - `FlexWrap.NoWrap` */ flexWrap: FlexWrap; /** * Gets the maximum width * * @returns - The current maximum width as a [`Dimension`](JsDimension) */ maxWidth: Dimension; /** * Gets the minimum width * * @returns - The current minimum width as a [`Dimension`](JsDimension) */ minWidth: Dimension; /** * Gets the flex direction * * Defines the main axis direction for flex items. * * @returns - The current [`FlexDirection`](JsFlexDirection) value * * @defaultValue - `FlexDirection.Row` */ flexDirection: FlexDirection; /** * Gets the grid-auto-flow property * * Controls how auto-placed items are inserted into the grid. * * @returns - The current [`GridAutoFlow`](JsGridAutoFlow) value * * @defaultValue - `GridAutoFlow.Row` */ gridAutoFlow: GridAutoFlow; /** * Gets the grid-auto-rows property * * Defines the size of implicitly created rows. * * @returns - An array of track sizing functions */ gridAutoRows: TrackSizingFunction[]; /** * Gets the grid-row-start property * * @returns - The current grid row start placement as a [`GridPlacement`](JsGridPlacement) */ gridRowStart: any; /** * Gets the bottom padding * * @returns - The current bottom padding as a [`LengthPercentage`](JsLengthPercentage) */ paddingBottom: any; /** * Gets the grid-column-end property * * @returns - The current grid column end placement as a [`GridPlacement`](JsGridPlacement) */ gridColumnEnd: any; /** * Gets the justify-content property * * Defines alignment and spacing of items along the main axis. * * @returns - The current [`JustifyContent`](JsJustifyContent) value, or `undefined` if not set */ justifyContent: JustifyContent | undefined; /** * Gets the scrollbar width * * The width of the scrollbar gutter when `overflow` is set to `Scroll`. * * @returns - The scrollbar width in pixels * * @defaultValue - `0` */ scrollbarWidth: number; /** * Gets whether this item is a replaced element * * Replaced elements have special sizing behavior (e.g., ``, `