meo-canvas - v9.0.2
    Preparing search index...

    Interface TextNode

    A run of text, laid out and painted by this library rather than by the canvas.

    Wrapping, alignment, the line box, rich-text markup, decorations and ellipsis are all resolved here, against the font's own metrics — see Text for the props that drive them.

    interface TextNode {
        backgroundBitmap: Image | null;
        children: BoxNode[];
        initialProps: Partial<BoxProps>;
        key?: string;
        name?: string;
        node: Node;
        placedByLayout: boolean;
        props: TextProps & { lineGap: number };
        _renderContent(
            ctx: CanvasRenderingContext2D,
            x: number,
            y: number,
            width: number,
            height: number,
        ): Promise<void>;
        appendChild(child: BoxNode, index: number): void;
        applyDefaults(): void;
        blendMode(): string;
        filterChain(): string;
        finalizeLayout(): boolean;
        inkOverflow(): number;
        loadBackgroundImage(
            cache?: RenderImageCache,
            diskCacheKeys?: Set<string>,
        ): Promise<void>;
        processInitialChildren(): void;
        render(
            ctx: CanvasRenderingContext2D,
            offsetX?: number,
            offsetY?: number,
            suppressStacking?: boolean,
        ): Promise<void>;
        resolvedDirection(): Direction;
        resolveInheritedStyles(parentProps: BoxProps & BaseProps): void;
        setLayout(props: BoxProps): void;
        updateLayoutBasedOnComputedSize(): void;
    }

    Hierarchy (View Summary)

    Index
    backgroundBitmap: Image | null = null

    The decoded background picture, once the render's load pass has fetched it.

    children: BoxNode[]

    Child nodes.

    initialProps: Partial<BoxProps>

    Original props passed to the constructor before any modifications.

    key?: string

    Unique node identifier.

    name?: string

    Node type name.

    node: Node

    The Yoga layout engine node.

    placedByLayout: boolean = false

    Set where a layout places this node absolutely for its own reasons rather than because the caller asked. Grid does it to put items on their tracks, and a node placed that way becomes a containing block Yoga resolves against though nothing named a positionType -- CSS keeps a grid and its items static, so resolveContainingBlocks places an absolute descendant against the box above it that CSS does name instead.

    props: TextProps & { lineGap: number }

    Current props including defaults and inherited values.

    Type Declaration

    • lineGap: number

      Always present once defaults are applied, so the render path never has to check for it.

    • 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)

      Parameters

      • ctx: CanvasRenderingContext2D

        Canvas rendering context

      • x: number

        Content box left position in pixels

      • y: number

        Content box top position in pixels

      • width: number

        Content box total width including padding

      • height: number

        Content box total height including padding

      Returns Promise<void>

    • The blend mode this node composites with, or an empty string for the ordinary source-over.

      normal is the default and means exactly source-over, so it is not worth an offscreen.

      Returns string

    • The CSS filter chain this node draws through, or an empty string for none.

      saturate came first and stays a shorthand for the same machinery, so it leads the chain and filter follows — the order they would appear in if the shorthand were written out.

      Returns string

    • Performs final layout adjustments recursively after the main layout calculation.

      Returns boolean

      Whether any node was marked as dirty during finalization.

    • How far the text reaches past its own box.

      A line too long to fit still draws — nothing clips it unless overflow says so — so a group's offscreen has to allow for the part that hangs outside, or the tail is cut at a hard edge.

      Returns number

    • Fetches this node's background picture, if it has one.

      Runs in the same pass as the images, before layout, and through the same cache — so a picture used as one node's background and another's image is fetched once. A failure leaves the node without a picture rather than failing the render, which is what a missing background should do.

      Parameters

      Returns Promise<void>

    • Draws this node, through its mask when it has one.

      Every component's drawing arrives here — Text, Image, Chart and Grid override _renderContent rather than this — so masking one node type means masking all of them.

      The two kinds of mask are applied differently because they are different operations. A shape or path clips, which is a yes-or-no test per pixel and costs nothing but a save/restore. A gradient cannot: its whole purpose is the answers in between, so the node is composited through one instead. Both are applied to the node's layout box, before its own transform, which is what keeps the two consistent with each other.

      dither is held on the context around all of it, so the node's mask, background, content and children are drawn with one answer and whatever draws next is left with its own.

      Parameters

      Returns Promise<void>

    • The direction this node ends up laid out in.

      Yoga resolves Inherit while it lays out but keeps no record of the answer: getDirection hands back what was set, and there is no computed counterpart. So the chain is walked to the first ancestor that named one, which is what Yoga itself would have found.

      Returns Direction