Skip to main content

components

import {...} from "@canvas-commons/2d/lib/components";

Classes​

Interfaces​

Type Aliases​

ComponentChild​

type ComponentChild = Nodeobjectstringnumberbigintbooleannullundefined

ComponentChildren​

type ComponentChildren = ComponentChildComponentChild[]

HyphenateFn​

type HyphenateFn = word: string => string[]

Function that splits a single word into syllable-like pieces. Pieces are joined with U+00AD (soft hyphen), which the line breaker uses as optional break points.

KnotAuto​

type KnotAuto

Properties

endHandle​

endHandle: number

startHandle​

startHandle: number

KnotAutoSignal​

type KnotAutoSignalTOwner = SignalPossibleKnotAutoKnotAutoTOwnerendHandle: SignalnumbernumberTOwnerstartHandle: SignalnumbernumberTOwner

Type Parameters

LatexTransition​

type LatexTransition = 'morph''partialFade''fade'

How a fragment animates into the fragment that replaced it.

morph and partialFade pair up the two fragments' glyphs, so a glyph that survives the change moves to its new place and one that was replaced either morphs into its replacement or crosses over with it. fade pairs nothing and crosses the whole fragment over.

LayoutAnimateCallback​

type LayoutAnimateCallback = node: Layoutduration: numbertiming: TimingFunction => ThreadGenerator

Override the per-node entrance or exit animation used by Layout.add, Layout.insert, and Layout.remove.

NodeChildren​

type NodeChildren = NodeNode[]

NodeState​

type NodeState = NodePropsRecordstringany

OverflowWrapMode​

type OverflowWrapMode = 'normal''anywhere'

What happens to a unit wider than the line, as CSS overflow-wrap.

PathAlign​

type PathAlign = 'baseline''top''middle''bottom''smooth'number

Where each glyph sits across Txt.textPath: the alphabetic baseline (default), an edge keyword (top / middle / bottom), 'smooth' to push glyphs to the outside of every turn automatically, or a number in [-1, 1] (-1 top, 0 middle, 1 bottom). The number is the tweenable form — animate it directly instead of switching states.

PathSplit​

type PathSplit = 'grapheme''word'

Unit the text breaks into when laid on Txt.textPath: grapheme (default) places each glyph for the tightest curve following, word paints each word as one run so contextual shaping and ligatures survive (at the cost of words staying rigid through a bend).

PossibleKnotAuto​

type PossibleKnotAuto = KnotAutonumbernumbernumber

PropsOf​

type PropsOfT = T extends NodeConstructorinfer P ? P : T extends FunctionComponentinfer P ? P : never

Type Parameters

StyledFragment​

type StyledFragment

A single styled slice of laid-out text on one line of a Txt.

x is the fragment's left edge in block space (0 is the left edge of the text block, before the Txt's own anchor is applied). style mirrors the owning Txt node's text properties at layout time.

Properties

inline​

inline?: Layout

Set when this fragment is an inline non-text node placeholder. The owning Txt derives inline's position from the fragment's slot center.

inlineWidth​

inlineWidth?: number

Slot width allocated to an inline element. Only set when inline is present.

style​

style: FragmentStyle

text​

text: string

x​

x: number

TextLayoutResult​

type TextLayoutResult

Result of laying out a Txt.

Returned by Txt.textLines; the same shape backs the internal measure pipeline used during yoga sizing and draw().

  • lines is one entry per visual line, with its fragments and line box.
  • width / height are the natural rendered size of the text block.
  • lineHeight is the base per-line advance before any line grows.

Properties

height​

height: number

lineHeight​

lineHeight: number

lines​

lines: TextLine[]

width​

width: number

TextLine​

type TextLine

A single laid-out line of a Txt block.

top is the line box's top edge in block space (0 is the top of the text block). height is the line box height — the tallest line height the runs on it ask for, grown by a taller inline element.

Properties

fragments​

fragments: StyledFragment[]

height​

height: number

top​

top: number

TextUnit​

type TextUnit

A positioned slice of text within a Txt. Coordinates are in Txt-local center-origin space (the same coordinate system used for draw()), so the unit's center is at (x, y) relative to the Txt's own position.

Properties

height​

height: number

indexInLine​

indexInLine: number

lineIndex​

lineIndex: number

text​

text: string

width​

width: number

x​

x: number

y​

y: number

TxtPath​

type TxtPath = CurveProfilestringCurve

A path for Txt.textPath: SVG path data, a pre-built CurveProfile, or a live Curve node. Strings and profiles are read in the Txt's own local space; a Curve node is sampled in its space and mapped into the Txt's automatically.

TxtWrapMode​

type TxtWrapMode = 'greedy''knuth-plass'

Functions​

fade​

public fadebefore: stringafter: string: LatexEditFragment

Create an edit fragment that crosses over with its replacement.

Glyphs the two states share fade with the rest; use partialFade to keep them. An empty before inserts the fragment and an empty after removes it.

Parameters

  • before: string

    The sub-tex to change from.

  • after: string

    The sub-tex to change to.

morph​

public morphbefore: stringafter: string: LatexEditFragment

Create an edit fragment whose glyphs morph into their replacements.

An empty before inserts the fragment and an empty after removes it.

Parameters

  • before: string

    The sub-tex to change from.

  • after: string

    The sub-tex to change to.

partialFade​

public partialFadebefore: stringafter: string: LatexEditFragment

Create an edit fragment whose replaced glyphs cross over while the rest move.

Glyphs the two states share travel to their new place instead of fading, so x^2 becoming y^2 keeps its exponent. An empty before inserts the fragment and an empty after removes it.

Parameters

  • before: string

    The sub-tex to change from.

  • after: string

    The sub-tex to change to.