meo-canvas - v8.1.4
    Preparing search index...

    Interface GridNode

    Grid layout node that arranges children in a 2D grid. Implements a simplified version of the CSS Grid Layout algorithm.

    interface GridNode {
        backgroundBitmap: Image | null;
        children: BoxNode[];
        initialProps: Partial<BoxProps>;
        key?: string;
        name?: string;
        node: Node;
        props: BoxProps & BaseProps;
        _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,
        ): Promise<void>;
        resolveInheritedStyles(parentProps: BoxProps & BaseProps): void;
        setLayout(props: BoxProps): void;
        updateLayoutBasedOnComputedSize(): void;
    }

    Hierarchy

    • RowNode
      • GridNode
    Index
    backgroundBitmap children initialProps key? name? node props
    _renderContent appendChild applyDefaults blendMode filterChain finalizeLayout inkOverflow loadBackgroundImage processInitialChildren render resolveInheritedStyles setLayout updateLayoutBasedOnComputedSize
    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.

    props: BoxProps & BaseProps

    Current props including defaults and inherited values.

    Protected_renderContent

    • _renderContent(
          ctx: CanvasRenderingContext2D,
          x: number,
          y: number,
          width: number,
          height: number,
      ): Promise<void>

      Renders the node's visual content including background fills, shadows, and borders. This is an internal method used by the render() pipeline.

      Parameters

      • ctx: CanvasRenderingContext2D

        The skia-canvas 2D rendering context to draw into

      • x: number

        The absolute x-coordinate where drawing should begin

      • y: number

        The absolute y-coordinate where drawing should begin

      • width: number

        The width of the content area to render

      • height: number

        The height of the content area to render

      Returns Promise<void>

    • Appends a child node at the specified index.

      Parameters

      • child: BoxNode

        Child node to append.

      • index: number

        Index to insert child at

      Returns void

    • Applies node type-specific default values after inheritance.

      Returns 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 this node's own drawing reaches past its box, beyond what its box model accounts for.

      Zero for a box, which paints within its bounds; TextNode overrides it, since a line too long for its box still draws unless something clips it. Used to size a group's offscreen, where anything unaccounted for is cut off 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>

    • Processes and appends any children passed in the initial props.

      Returns 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>

    • Update layout calculations after the initial layout is computed.

      Returns void

    Settings
    Member Visibility

    On This Page
    Properties
    Methods