/** Text alignment. */ type Alignment = 'left' | 'center' | 'right' | 'justify'; /** Horizontal alignment. */ type HAlignment = 'left' | 'center' | 'right'; /** Vertical alignment. */ type VAlignment = 'top' | 'middle' | 'bottom'; /** Overflow wrap behavior. */ type OverflowWrap = 'break-word' | 'normal'; /** Overflow indication symbol. */ type Overflow = 'ellipsis' | string; /** Font style. */ type FontStyle = 'normal' | 'italic'; /** Font variant. */ type FontVariant = 'normal' | 'small-caps'; /** Additional properties for linebroken text. */ type LinesProps = { /** Does any line have line-overflow? */ hasLineOverflow: boolean; /** Did the text overflow? */ hasOverflow: boolean; /** Height of the layed-out text. */ height: number; /** Width of the layed-out text. */ width: number; /** Default font properties used. */ font: FontProps; }; /** A (linebroken) line of Tokens */ type Line = Token[] & { width: number; }; /** A collection of flowed text lines & their properties. */ type Lines = Line[] & LinesProps; /** A collection of font properties or styles. */ type FontProps = { /** * Name of the font's type family. */ family?: string; /** * Style of the font (italics or not). */ style?: FontStyle; /** * Variant of the font (Small-Caps or not). */ variant?: FontVariant; /** * Weight of the font as a number (400 is regular). */ weight?: number; /** * Height of the leading (line-height). */ height?: number; /** * Size of the font in pixels. */ size?: number; /** * Size adjustment multiplier (such as for sub-/superscript). */ sizeAdjust?: number; /** * Baseline adjustment factor (such as for sub-/superscript). */ baseline?: number; /** * Tracking (multiplier) for the text. */ tracking?: number; /** * Color of the text. */ color?: string; /** * HREF URL property for the text. */ href?: string; /** * Rel identifier to be applied to emitted link elements (use with href). */ rel?: string; /** * Link target identifier to be applied to emitted link elements (use with href). */ target?: string; /** * Class identifier to be applied to emitted elements. */ class?: string; }; /** * A function accepting a line number that emits a width or height in pixels. */ type NumberLineFunc = (line?: number) => number; /** * A function that emits a width or height in pixels. */ type NumberFunc = () => number; /** * Factory function for constructing SVG elements. */ type CreateElementFunc = (name: string, props?: Record | null, ...children: (string | SVGElement | undefined | null)[]) => SVGElement; /** Options for text measuring. */ type MeasureOptions = { /** * Should the text be trimmed before measuring? * @defaultValue true */ trim?: boolean; /** * Should whitespace in the text get collapsed (like in HTML)? * @defaultValue true */ collapse?: boolean; }; /** * Options for a textbox and how text flows inside it. */ type LayoutOptions = { /** * Default font to use (as CSS shorthand). * @defaultValue Infinity */ font: string; /** * The symbol to use when indicating text overflow ("…"). * @defaultValue "ellipsis" */ overflow: Overflow; /** * Symbol to use when indicating line overflow, or "" when line overflow is off. * @defaultValue "" */ overflowLine: Overflow; /** * Whether breaks should be inserted within an otherwise unbreakable word to prevent overflowing the textbox. * @defaultValue "normal" */ overflowWrap: OverflowWrap; /** * Vertical alignment of the text. * @defaultValue "left" */ valign: VAlignment; /** * Horizontal alignment of the text. * @defaultValue "top" */ align: Alignment; /** * Width of the textbox in pixels. * @defaultValue Infinity */ width: number | NumberLineFunc; /** * Height of the textbox in pixels. * @defaultValue Infinity */ height: number | NumberFunc; /** * Line horizontal offset factor or per-line callback to control horizontal offset. * @defaultValue 0 */ x: number | NumberLineFunc; /** * Which parser to use when parsing text input. * @defaultValue Textbox.defaultparser */ parser: (text: string) => Token[]; /** * Factory function to use when constructing SVG elements. * @defaultValue Infinity */ createElement: CreateElementFunc; }; /** * Options for the Rotator class */ type RotatorOptions = { /** * An anchor point for the rotation orientation (such as `top center`) * @defaultValue "top left" */ anchor: string; /** * Width of the rotated box (in pixels) * @defaultValue Infinity */ width: number; /** * Height of the rotated box (in pixels) * @defaultValue Infinity */ height: number; /** * Rotation of the content (in degrees) * @defaultValue 0 */ rotate: number; /** * SVG Element factory * @defaultValue Rotator.createElement */ createElement: CreateElementFunc; }; /** * Minimal CanvasRenderingContext2D interface needed. */ type MinimalCanvasContext = { font: string; measureText: (text: string) => { width: number; }; }; /** * Minimal Canvas interface needed. */ type MinimalCanvas = { getContext: (contextId: '2d') => MinimalCanvasContext | null; }; /** * Represents a unit of text, typically a single word. */ declare class Token { value: string; width: number; whitespace: boolean | undefined; font: FontProps; line?: number; constructor(value?: string, font?: {}); toJSON(): any; } declare class Break extends Token { toJSON(): any; } declare class LineBreak extends Token { toJSON(): any; } declare class SoftHyphen extends Token { toJSON(): any; } /** * Set the canvas to use when measuring text. This will be needed when using {@link measureText} * in a non-browser environment. * @param canvas The canvas interface to use. */ declare function setMeasureCanvas(canvas: MinimalCanvas | null): void; /** * Measure a string of text as printed with a specified font and return its width. * * Be careful that in non-browser environments you may want to supply an alternative * canvas using {@link setMeasureCanvas} or this method will default to a crude * "best guess" method. * * @param token A string or token of text to measure. * @param font A CSS font shorthand string or a collection of font properties. * @param options Text handling options. */ declare function measureText(token: string | Token, font: string | FontProps, options?: MeasureOptions): number; declare function createElement(name: string, props?: Record | null, ...children: (SVGElement | string | undefined | null)[]): SVGElement; /** * A basic text parser that sections texts into words but also * deals with inserting appropriate breaks at correct points. */ declare function textparser(text?: string | null): Token[]; /** * A Textbox formatter that allows flowing rich text into a preset area. */ declare class Textbox { /** * Default factory function to use when constructing SVG elements. */ static createElement: typeof createElement; /** * Default parser to use when consuming text. */ static defaultparser: typeof textparser; /** * Measure a string of text as printed with a specified font and return its width. */ static measureText: typeof measureText; /** * Set the canvas to use when measuring text (in a non-browser environment). */ static setMeasureCanvas: typeof setMeasureCanvas; constructor(options?: Partial); /** * Parses text, flows it into the set dimensions and returns a list of the lines. * The returned object can then be passed on to the renderer. * * As well as a list of lines of tokens, the lines object has a height property * which is useful if you want to set the render destination to the fit the text. * * The lines object also includes a .hasOverflow property which indicates if the * text was able to fit a designated height. It will be `true` if the text did not * fit the defined space. */ linebreak(text: string): Lines; /** * Set or get a default font for the text. Parts of the text * may override the default font, but this defines the font used * when nothing else is specified. * * The method assumes a [CSS-style font declaration])(eb/CSS/Reference/Properties/font) * string. * * By default this will be set to `"12px/14px sans-serif"`. */ font(): string; font(font: string): this; /** * The symbol to use when indicating text overflow (text that * is cut off because it doesn't fit within the set boundaries). * * May be set to any string or the keyword `"ellipsis"`. * * By default this will be set to `"ellipsis"` which prints `…`. */ overflow(): Overflow; overflow(overflow: Overflow): this; /** * The symbol to use when indicating a single line text overflow. * * May be set to any string or `""` to turn off line overflow cutoff. * * By default this will be set to `""` which will allow words longer * than the width of the textbox to print in full. */ overflowLine(): Overflow; overflowLine(overflow: Overflow): this; /** * Controls whether line breaks should be inserted within an otherwise unbreakable * string to prevent text from overflowing the textbox. * * - Set this to `"break-word"` to allow extra breaks mid-word. * - Set this to `"normal"` to only allow natural breaks at whitespace, punctuation, or hyphens. * * By default this will be set to `"normal"`. */ overflowWrap(): OverflowWrap; overflowWrap(wrap: OverflowWrap): this; /** * Controls the vertical alignment of the text. * * By default this will be set to `"top"`. */ valign(): VAlignment; valign(align: VAlignment): this; /** * Controls the horizontal alignment of the text. * * By default this will be set to `"left"`. */ align(): Alignment; align(align: Alignment): this; /** * Controls the width of the textbox in which to fit the text. * * This can be a callback function if you want runaround text layout, * or to flow the text into irregular space. * * By default this will be set to `Infinity` which prints a text * without linebreaks into a single line. */ width(): LayoutOptions['width']; width(width: LayoutOptions['width']): this; /** * Controls the height of the textbox in which to fit the text. * * By default this will be set to `Infinity` which mean text will * not be subject to overflow. */ height(): LayoutOptions['height']; height(height: LayoutOptions['height']): this; /** * Controls the indentation of text lines. * * This is useful for fitting text into non-rectanglular shapes. A callback * provided as an argument this will be called every line with the line number * as a parameter. * * By default this will be set to `0`. */ x(): LayoutOptions['x']; x(x: LayoutOptions['x']): this; /** * The parser to use when parsing text input. * * - Set it to `"text"` for plaintext parsing. * - Set it to `"html"` for basic HTML parsing (it understands such things as ``, ``, ``, ...). * - Set it to `"latex"` for a very basic LaTeX parser (it understands basic text commands and punctuation - no math mode). * * An alternative parser may be provided as a callback, as long as it conforms to the parser interface. * * By default the parser is set to `"text"`. */ parser(): LayoutOptions['parser']; parser(parser: LayoutOptions['parser'] | 'html' | 'text' | 'latex'): this; /** * The element factory function to use when constructing SVG elements within the SVG renderer. * * The interface conforms to React's `React.createElement` so you may simply set that function as * the factory if you want to use the rendered text in a React render tree. */ createElement(): LayoutOptions['createElement']; createElement(factory: LayoutOptions['createElement']): this; /** * Render text or linebreak-output as an SVG element. * * The output will be a single root text element with the lines and sections contained within. */ renderSVG(text: string | Lines): SVGElement; /** * Render text or linebreak-output onto a Canvas. */ renderCanvas(text: string | Lines, target: OffscreenCanvas | HTMLCanvasElement | CanvasRenderingContext2D): void; /** * Render text or linebreak-output onto a Canvas or as an SVG element. * * This method determines which render output is desired based on whether a canvas based * target was supplied or not. * * @deprecated */ render(text: string | Lines): SVGElement; render(text: string | Lines, target: OffscreenCanvas | HTMLCanvasElement | CanvasRenderingContext2D): void; } /** * A convenience utility class to assist rotating text. */ declare class Rotator { static createElement: typeof createElement; constructor(opts: RotatorOptions); /** * Origin point of the rotation */ get origin(): [number, number]; /** * A convenience method to set or get a rotation anchor. * * A rotation anchor controls the origin point of the rotation relative to textbox. * It is a string of one or more of alignment keywords separated by spaces. * * Keywords: [ `top`, `middle`, `bottom`, `left`, `center`, `right` ]. * * By default it is set to `"top left"` */ anchor(): string; anchor(anchor: string): this; /** * Controls the vertical anchor point of the rotation. * * By default this will be set to `"top"`. */ valign(): VAlignment; valign(align: VAlignment): this; /** * Controls the horizontal alignment of the text. * * By default this will be set to `"left"`. */ align(): HAlignment; align(align: HAlignment): this; /** * Controls the width of the rotation box in pixels. * * By default this will be set to `Infinity`. */ width(): number; width(width: number): this; /** * Controls the height of the rotation box in pixels. * * By default this will be set to `Infinity`. */ height(): number; height(height: number): this; /** * Controls the angle of rotation in degrees. * * By default this will be set to `0`. */ rotate(): number; rotate(degrees: number): this; /** * The element factory function to use when constructing SVG elements within the SVG renderer. * * The interface conforms to React's `React.createElement` so you may simply set that function as * the factory if you want to use the rendered text in a React render tree. */ createElement(): LayoutOptions['createElement']; createElement(factory: LayoutOptions['createElement']): this; /** * Set up a rotated context for additional rendering. * * The method will set up a rotated context, call the supplied callback argument * with a CanvasRenderingContext2D as its argument, and then clean up. */ renderCanvas(callback: (ctx: CanvasRenderingContext2D) => void, target: OffscreenCanvas | HTMLCanvasElement | CanvasRenderingContext2D): void; /** * Render an SVG element that is rotated around its origin point and * place the given content inside it. */ renderSVG(content: SVGElement): SVGElement; /** * Render onto a Canvas or as an SVG element based on whether a canvas based * target was supplied or not. * * @deprecated */ render(contentOrCallback: SVGElement): SVGElement; render(contentOrCallback: () => void, ctx: OffscreenCanvas | HTMLCanvasElement | CanvasRenderingContext2D): void; } /** * Parse a very small subset of HTML. * * This parser can handle linebreaks, as well as inline text * instruction tags such as ``, ``, ``, ``. */ declare function htmlparser(text?: string | null): Token[]; /** * Parse a very small subset of LaTeX. * * This parser can handle linebreaks, verbatim, as well as inline text * instructions for non-math text. Math mode is not supported at all. */ declare function latexparser(text?: string | null): Token[]; export { type Alignment, Break, type FontProps, type FontStyle, type FontVariant, type HAlignment, type LayoutOptions, type Line, LineBreak, type Lines, type LinesProps, type MeasureOptions, type MinimalCanvas, type MinimalCanvasContext, type NumberFunc, type NumberLineFunc, type Overflow, type OverflowWrap, Rotator, type RotatorOptions, SoftHyphen, Textbox, Token, type VAlignment, Textbox as default, htmlparser, latexparser, measureText, setMeasureCanvas, textparser };