@pmndrs/uikit/dist/text/layout.d.ts

Build performant 3D user interfaces with Three.js and yoga.

import { Font } from './font.js';
import { Signal } from '@preact/signals-core';
import { MergedProperties } from '../properties/merged.js';
import { CustomLayouting } from '../internals.js';
export type GlyphLayoutLine = {
    charIndexOffset: number;
    charLength: number;
    nonWhitespaceCharLength: number;
    nonWhitespaceWidth: number;
    whitespacesBetween: number;
};
export type GlyphLayout = {
    lines: Array<GlyphLayoutLine>;
    availableWidth: number;
    availableHeight: number;
} & GlyphLayoutProperties;
export type GlyphProperties = Partial<Omit<GlyphLayoutProperties, 'text' | 'font'>>;
export type GlyphLayoutProperties = {
    text: string;
    font: Font;
    letterSpacing: number;
    lineHeight: number | `${number}%`;
    fontSize: number;
    wordBreak: keyof typeof wrappers;
};
export declare function computedCustomLayouting(properties: Signal<MergedProperties>, fontSignal: Signal<Font | undefined>, textSignal: Signal<unknown | Signal<unknown> | Array<Signal<unknown> | unknown>>, propertiesRef: {
    current: GlyphLayoutProperties | undefined;
}, defaultWordBreak: GlyphLayoutProperties['wordBreak']): import("@preact/signals-core").ReadonlySignal<CustomLayouting | undefined>;
declare const wrappers: {
    'keep-all': import("./index.js").GlyphWrapper;
    'break-all': import("./index.js").GlyphWrapper;
    'break-word': import("./index.js").GlyphWrapper;
};
export declare function measureGlyphLayout(properties: GlyphLayoutProperties, availableWidth?: number): {
    width: number;
    height: number;
};
export declare function buildGlyphLayout(properties: GlyphLayoutProperties, availableWidth: number, availableHeight: number): GlyphLayout;
export {};