@revideo/2d

@revideo/2d / components / Txt

Class: Txt

Defined in: 2d/src/lib/components/Txt.ts:26 

Extends

• Shape

Constructors

Constructor

new Txt(__namedParameters): Txt

Defined in: 2d/src/lib/components/Txt.ts:138 

Parameters

__namedParameters

TxtProps

Returns

Txt

Overrides

Shape.constructor

Properties

[TXT_TYPE]

readonly [TXT_TYPE]: true = true

Defined in: 2d/src/lib/components/Txt.ts:27 

absolutePosition

readonly absolutePosition: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Node.ts:196 

A helper signal for operating on the position in world space.

Remarks

Retrieving the position using this signal returns the position in world space. Similarly, setting the position using this signal transforms the new value to local space.

If the new value is a function, the position of this node will be continuously updated to always match the position returned by the function. This can be useful to “pin” the node in a specific place or to make it follow another node’s position.

Unlike position, this signal is not compound - it doesn’t contain separate signals for the x and y components.

Inherited from

Shape.absolutePosition

absoluteRotation

readonly absoluteRotation: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Node.ts:231 

A helper signal for operating on the rotation in world space.

Remarks

Retrieving the rotation using this signal returns the rotation in world space. Similarly, setting the rotation using this signal transforms the new value to local space.

If the new value is a function, the rotation of this node will be continuously updated to always match the rotation returned by the function.

Inherited from

Shape.absoluteRotation

absoluteScale

readonly absoluteScale: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Node.ts:331 

A helper signal for operating on the scale in world space.

Remarks

Retrieving the scale using this signal returns the scale in world space. Similarly, setting the scale using this signal transforms the new value to local space.

If the new value is a function, the scale of this node will be continuously updated to always match the position returned by the function.

Unlike scale, this signal is not compound - it doesn’t contain separate signals for the x and y components.

Inherited from

Shape.absoluteScale

alignContent

readonly alignContent: SimpleSignal<FlexContent, Txt>

Defined in: 2d/src/lib/components/Layout.ts:246 

Inherited from

Shape.alignContent

alignItems

readonly alignItems: SimpleSignal<FlexItems, Txt>

Defined in: 2d/src/lib/components/Layout.ts:249 

Inherited from

Shape.alignItems

alignSelf

readonly alignSelf: SimpleSignal<FlexItems, Txt>

Defined in: 2d/src/lib/components/Layout.ts:252 

Inherited from

Shape.alignSelf

antialiased

readonly antialiased: SimpleSignal<boolean, Txt>

Defined in: 2d/src/lib/components/Shape.ts:55 

Inherited from

Shape.antialiased

basis

readonly basis: SimpleSignal<FlexBasis, Txt>

Defined in: 2d/src/lib/components/Layout.ts:230 

Inherited from

Shape.basis

bottom

readonly bottom: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:562 

The position of the bottom edge of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the bottom edge ends up in the given place.

When retrieved, it will return the position of the bottom edge in the parent space.

Inherited from

Shape.bottom

bottomLeft

readonly bottomLeft: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:622 

The position of the bottom left corner of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the bottom left corner ends up in the given place.

When retrieved, it will return the position of the bottom left corner in the parent space.

Inherited from

Shape.bottomLeft

bottomRight

readonly bottomRight: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:634 

The position of the bottom right corner of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the bottom right corner ends up in the given place.

When retrieved, it will return the position of the bottom right corner in the parent space.

Inherited from

Shape.bottomRight

cache

readonly cache: SimpleSignal<boolean, Txt>

Defined in: 2d/src/lib/components/Node.ts:358 

Inherited from

Shape.cache

cachePadding

readonly cachePadding: SpacingSignal<Txt>

Defined in: 2d/src/lib/components/Node.ts:370 

Controls the padding of the cached canvas used by this node.

Remarks

By default, the size of the cache is determined based on the bounding box of the node and its children. That includes effects such as stroke or shadow. This property can be used to expand the cache area further. Usually used to account for custom effects created by shaders.

Inherited from

Shape.cachePadding

children

readonly children: Signal<ComponentChildren, Node[], Txt>

Defined in: 2d/src/lib/components/Node.ts:490 

Inherited from

Shape.children

clip

readonly clip: SimpleSignal<boolean, Txt>

Defined in: 2d/src/lib/components/Layout.ts:638 

Inherited from

Shape.clip

composite

readonly composite: SimpleSignal<boolean, Txt>

Defined in: 2d/src/lib/components/Node.ts:374 

Inherited from

Shape.composite

compositeOperation

readonly compositeOperation: SimpleSignal<GlobalCompositeOperation, Txt>

Defined in: 2d/src/lib/components/Node.ts:378 

Inherited from

Shape.compositeOperation

creationStack?

readonly optional creationStack?: string

Defined in: 2d/src/lib/components/Node.ts:534 

Inherited from

Shape.creationStack

direction

readonly direction: SimpleSignal<FlexDirection, Txt>

Defined in: 2d/src/lib/components/Layout.ts:227 

Inherited from

Shape.direction

element

element: HTMLElement

Defined in: 2d/src/lib/components/Layout.ts:640 

Inherited from

Shape.element

fill

readonly fill: CanvasStyleSignal<Txt>

Defined in: 2d/src/lib/components/Shape.ts:32 

Inherited from

Shape.fill

filters

readonly filters: FiltersSignal<Txt>

Defined in: 2d/src/lib/components/Node.ts:420 

Inherited from

Shape.filters

fontFamily

readonly fontFamily: SimpleSignal<string, Txt>

Defined in: 2d/src/lib/components/Layout.ts:265 

Inherited from

Shape.fontFamily

fontSize

readonly fontSize: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Layout.ts:268 

Inherited from

Shape.fontSize

fontStyle

readonly fontStyle: SimpleSignal<string, Txt>

Defined in: 2d/src/lib/components/Layout.ts:271 

Inherited from

Shape.fontStyle

fontWeight

readonly fontWeight: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Layout.ts:274 

Inherited from

Shape.fontWeight

gap

readonly gap: Vector2LengthSignal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:255 

Inherited from

Shape.gap

grow

readonly grow: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Layout.ts:233 

Inherited from

Shape.grow

hasSpawnedChildren

protected hasSpawnedChildren: boolean = false

Defined in: 2d/src/lib/components/Node.ts:529 

Inherited from

Shape.hasSpawnedChildren

isClass

isClass: boolean

Defined in: 2d/src/lib/components/Node.ts:135 

Inherited from

Shape.isClass

justifyContent

readonly justifyContent: SimpleSignal<FlexContent, Txt>

Defined in: 2d/src/lib/components/Layout.ts:243 

Inherited from

Shape.justifyContent

key

readonly key: string

Defined in: 2d/src/lib/components/Node.ts:533 

Inherited from

Shape.key

layout

readonly layout: SimpleSignal<LayoutMode, Txt>

Defined in: 2d/src/lib/components/Layout.ts:201 

Inherited from

Shape.layout

left

readonly left: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:574 

The position of the left edge of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the left edge ends up in the given place.

When retrieved, it will return the position of the left edge in the parent space.

Inherited from

Shape.left

letterSpacing

readonly letterSpacing: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Layout.ts:280 

Inherited from

Shape.letterSpacing

lineCap

readonly lineCap: SimpleSignal<CanvasLineCap, Txt>

Defined in: 2d/src/lib/components/Shape.ts:46 

Inherited from

Shape.lineCap

lineDash

readonly lineDash: SimpleSignal<number[], Txt>

Defined in: 2d/src/lib/components/Shape.ts:49 

Inherited from

Shape.lineDash

lineDashOffset

readonly lineDashOffset: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Shape.ts:52 

Inherited from

Shape.lineDashOffset

lineHeight

readonly lineHeight: SimpleSignal<Length, Txt>

Defined in: 2d/src/lib/components/Layout.ts:277 

Inherited from

Shape.lineHeight

lineJoin

readonly lineJoin: SimpleSignal<CanvasLineJoin, Txt>

Defined in: 2d/src/lib/components/Shape.ts:43 

Inherited from

Shape.lineJoin

lineWidth

readonly lineWidth: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Shape.ts:40 

Inherited from

Shape.lineWidth

margin

readonly margin: SpacingSignal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:220 

Inherited from

Shape.margin

maxHeight

readonly maxHeight: SimpleSignal<LengthLimit, Txt>

Defined in: 2d/src/lib/components/Layout.ts:208 

Inherited from

Shape.maxHeight

maxWidth

readonly maxWidth: SimpleSignal<LengthLimit, Txt>

Defined in: 2d/src/lib/components/Layout.ts:205 

Inherited from

Shape.maxWidth

middle

readonly middle: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:537 

The position of the center of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the center ends up in the given place.

If the offset has not been changed, this will be the same as the position.

When retrieved, it will return the position of the center in the parent space.

Inherited from

Shape.middle

minHeight

readonly minHeight: SimpleSignal<LengthLimit, Txt>

Defined in: 2d/src/lib/components/Layout.ts:214 

Inherited from

Shape.minHeight

minWidth

readonly minWidth: SimpleSignal<LengthLimit, Txt>

Defined in: 2d/src/lib/components/Layout.ts:211 

Inherited from

Shape.minWidth

offset

readonly offset: Vector2Signal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:521 

Represents the offset of this node’s origin.

Remarks

By default, the origin of a node is located at its center. The origin serves as the pivot point when rotating and scaling a node, but it doesn’t affect the placement of its children.

The value is relative to the size of this node. A value of 1 means as far to the right/bottom as possible. Here are a few examples of offsets:

• [-1, -1] - top left corner
• [1, -1] - top right corner
• [0, 1] - bottom edge
• [-1, 1] - bottom left corner

Inherited from

Shape.offset

opacity

readonly opacity: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Node.ts:412 

Represents the opacity of this node in the range 0-1.

Remarks

The value is clamped to the range 0-1.

Inherited from

Shape.opacity

padding

readonly padding: SpacingSignal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:223 

Inherited from

Shape.padding

parent

readonly parent: SimpleSignal<Node | null, void>

Defined in: 2d/src/lib/components/Node.ts:531 

Inherited from

Shape.parent

position

readonly position: Vector2Signal<Txt>

Defined in: 2d/src/lib/components/Node.ts:168 

Represents the position of this node in local space of its parent.

Example

Initializing the position:

// with a possible vector:
<Node position={[1, 2]} />
// with individual components:
<Node x={1} y={2} />

Accessing the position:

// retrieving the vector:
const position = node.position();
// retrieving an individual component:
const x = node.position.x();

Setting the position:

// with a possible vector:
node.position([1, 2]);
node.position(() => [1, 2]);
// with individual components:
node.position.x(1);
node.position.x(() => 1);

Inherited from

Shape.position

properties

readonly properties: Record<string, PropertyMetadata<any>>

Defined in: 2d/src/lib/components/Node.ts:532 

Inherited from

Shape.properties

ratio

readonly ratio: SimpleSignal<number | null, Txt>

Defined in: 2d/src/lib/components/Layout.ts:217 

Inherited from

Shape.ratio

realChildren

protected realChildren: Node[] = []

Defined in: 2d/src/lib/components/Node.ts:528 

Inherited from

Shape.realChildren

right

readonly right: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:586 

The position of the right edge of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the right edge ends up in the given place.

When retrieved, it will return the position of the right edge in the parent space.

Inherited from

Shape.right

rippleStrength

protected readonly rippleStrength: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Shape.ts:57 

Inherited from

Shape.rippleStrength

rotation

readonly rotation: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Node.ts:216 

Represents the rotation (in degrees) of this node relative to its parent.

Inherited from

Shape.rotation

scale

readonly scale: Vector2Signal<Txt>

Defined in: 2d/src/lib/components/Node.ts:278 

Represents the scale of this node in local space of its parent.

Example

Initializing the scale:

// with a possible vector:
<Node scale={[1, 2]} />
// with individual components:
<Node scaleX={1} scaleY={2} />

Accessing the scale:

// retrieving the vector:
const scale = node.scale();
// retrieving an individual component:
const scaleX = node.scale.x();

Setting the scale:

// with a possible vector:
node.scale([1, 2]);
node.scale(() => [1, 2]);
// with individual components:
node.scale.x(1);
node.scale.x(() => 1);

Inherited from

Shape.scale

shaders

readonly shaders: Signal<PossibleShaderConfig, ShaderConfig[], Txt>

Defined in: 2d/src/lib/components/Node.ts:439 

Experimental

Inherited from

Shape.shaders

shadowBlur

readonly shadowBlur: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Node.ts:428 

Inherited from

Shape.shadowBlur

shadowColor

readonly shadowColor: ColorSignal<Txt>

Defined in: 2d/src/lib/components/Node.ts:424 

Inherited from

Shape.shadowColor

shadowOffset

readonly shadowOffset: Vector2Signal<Txt>

Defined in: 2d/src/lib/components/Node.ts:431 

Inherited from

Shape.shadowOffset

shrink

readonly shrink: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Layout.ts:236 

Inherited from

Shape.shrink

size

readonly size: Vector2LengthSignal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:365 

Represents the size of this node.

Remarks

A size is a two-dimensional vector, where x represents the width, and y represents the height.

The value of both x and y is of type partials.Length which is either:

• number - the desired length in pixels
• ${number}% - a string with the desired length in percents, for example '50%'
• null - an automatic length

When retrieving the size, all units are converted to pixels, using the current state of the layout. For example, retrieving the width set to '50%', while the parent has a width of 200px will result in the number 100 being returned.

When the node is not part of the layout, setting its size using percents refers to the size of the entire scene.

Example

Initializing the size:

// with a possible vector:
<Node size={['50%', 200]} />
// with individual components:
<Node width={'50%'} height={200} />

Accessing the size:

// retrieving the vector:
const size = node.size();
// retrieving an individual component:
const width = node.size.x();

Setting the size:

// with a possible vector:
node.size(['50%', 200]);
node.size(() => ['50%', 200]);
// with individual components:
node.size.x('50%');
node.size.x(() => '50%');

Inherited from

Shape.size

sizeLockCounter

protected readonly sizeLockCounter: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Layout.ts:645 

Inherited from

Shape.sizeLockCounter

skew

readonly skew: Vector2Signal<Txt>

Defined in: 2d/src/lib/components/Node.ts:312 

Represents the skew of this node in local space of its parent.

Example

Initializing the skew:

// with a possible vector:
<Node skew={[40, 20]} />
// with individual components:
<Node skewX={40} skewY={20} />

Accessing the skew:

// retrieving the vector:
const skew = node.skew();
// retrieving an individual component:
const skewX = node.skew.x();

Setting the skew:

// with a possible vector:
node.skew([40, 20]);
node.skew(() => [40, 20]);
// with individual components:
node.skew.x(40);
node.skew.x(() => 40);

Inherited from

Shape.skew

spawner

protected readonly spawner: SimpleSignal<ComponentChildren, Txt>

Defined in: 2d/src/lib/components/Node.ts:479 

Deprecated

Use children instead.

Inherited from

Shape.spawner

stroke

readonly stroke: CanvasStyleSignal<Txt>

Defined in: 2d/src/lib/components/Shape.ts:34 

Inherited from

Shape.stroke

strokeFirst

readonly strokeFirst: SimpleSignal<boolean, Txt>

Defined in: 2d/src/lib/components/Shape.ts:37 

Inherited from

Shape.strokeFirst

styles

styles: CSSStyleDeclaration

Defined in: 2d/src/lib/components/Layout.ts:641 

Inherited from

Shape.styles

text

readonly text: SimpleSignal<string, Txt>

Defined in: 2d/src/lib/components/Txt.ts:61 

textAlign

readonly textAlign: SimpleSignal<CanvasTextAlign, Txt>

Defined in: 2d/src/lib/components/Layout.ts:290 

Inherited from

Shape.textAlign

textDirection

readonly textDirection: SimpleSignal<CanvasDirection, Txt>

Defined in: 2d/src/lib/components/Layout.ts:287 

Inherited from

Shape.textDirection

textWrap

readonly textWrap: SimpleSignal<TextWrap, Txt>

Defined in: 2d/src/lib/components/Layout.ts:284 

Inherited from

Shape.textWrap

top

readonly top: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:550 

The position of the top edge of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the top edge ends up in the given place.

When retrieved, it will return the position of the top edge in the parent space.

Inherited from

Shape.top

topLeft

readonly topLeft: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:598 

The position of the top left corner of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the top left corner ends up in the given place.

When retrieved, it will return the position of the top left corner in the parent space.

Inherited from

Shape.topLeft

topRight

readonly topRight: SimpleVector2Signal<Txt>

Defined in: 2d/src/lib/components/Layout.ts:610 

The position of the top right corner of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the top right corner ends up in the given place.

When retrieved, it will return the position of the top right corner in the parent space.

Inherited from

Shape.topRight

view2D

protected view2D: View2D

Defined in: 2d/src/lib/components/Node.ts:526 

Inherited from

Shape.view2D

wrap

readonly wrap: SimpleSignal<FlexWrap, Txt>

Defined in: 2d/src/lib/components/Layout.ts:239 

Inherited from

Shape.wrap

zIndex

readonly zIndex: SimpleSignal<number, Txt>

Defined in: 2d/src/lib/components/Node.ts:354 

Inherited from

Shape.zIndex

Accessors

columnGap

Get Signature

get columnGap(): Signal<Length, number, this>

Defined in: 2d/src/lib/components/Layout.ts:256 

Returns

Signal<Length, number, this>

Inherited from

Shape.columnGap

height

Get Signature

get height(): Signal<Length, number, this>

Defined in: 2d/src/lib/components/Layout.ts:369 

Returns

Signal<Length, number, this>

Inherited from

Shape.height

rowGap

Get Signature

get rowGap(): Signal<Length, number, this>

Defined in: 2d/src/lib/components/Layout.ts:259 

Returns

Signal<Length, number, this>

Inherited from

Shape.rowGap

width

Get Signature

get width(): Signal<Length, number, this>

Defined in: 2d/src/lib/components/Layout.ts:366 

Returns

Signal<Length, number, this>

Inherited from

Shape.width

x

Get Signature

get x(): SimpleSignal<number, this>

Defined in: 2d/src/lib/components/Node.ts:170 

Returns

SimpleSignal<number, this>

Inherited from

Shape.x

y

Get Signature

get y(): SimpleSignal<number, this>

Defined in: 2d/src/lib/components/Node.ts:173 

Returns

SimpleSignal<number, this>

Inherited from

Shape.y

Methods

[iterator]()

[iterator](): Generator<{ key: string; meta: PropertyMetadata<any>; signal: SimpleSignal<any>; }, void, unknown>

Defined in: 2d/src/lib/components/Node.ts:1918 

Returns

Generator<{ key: string; meta: PropertyMetadata<any>; signal: SimpleSignal<any>; }, void, unknown>

Inherited from

Shape.[iterator]

absoluteOpacity()

absoluteOpacity(): number

Defined in: 2d/src/lib/components/Node.ts:415 

Returns

number

Inherited from

Shape.absoluteOpacity

add()

add(node): this

Defined in: 2d/src/lib/components/Node.ts:688 

Add the given node(s) as the children of this node.

Parameters

node

ComponentChildren

A node or an array of nodes to append.

Returns

this

Remarks

The nodes will be appended at the end of the children list.

Example

const node = <Layout />;
node.add(<Rect />);
node.add(<Circle />);

Result:

Inherited from

Shape.add

anchorPosition()

anchorPosition(): Vector2

Defined in: 2d/src/lib/components/Layout.ts:666 

Returns

Vector2

Inherited from

Shape.anchorPosition

appendedToView()

protected appendedToView(): boolean

Defined in: 2d/src/lib/components/Layout.ts:770 

Returns

boolean

Inherited from

Shape.appendedToView

applyFlex()

protected applyFlex(): void

Defined in: 2d/src/lib/components/Txt.ts:174 

Returns

void

Overrides

Shape.applyFlex

applyFont()

protected applyFont(): void

Defined in: 2d/src/lib/components/Layout.ts:970 

Returns

void

Inherited from

Shape.applyFont

applyState()

Call Signature

applyState(state): void

Defined in: 2d/src/lib/components/Node.ts:1801 

Apply the given state to the node, setting all matching signal values to the provided values.

Parameters

state

NodeState

The state to apply to the node.

Returns

void

Inherited from

Shape.applyState

Call Signature

applyState(state, duration, timing?): ThreadGenerator

Defined in: 2d/src/lib/components/Node.ts:1810 

Smoothly transition between the current state of the node and the given state.

Parameters

state

NodeState

The state to transition to.

duration

number

The duration of the transition.

timing?

TimingFunction

The timing function to use for the transition.

Returns

ThreadGenerator

Inherited from

Shape.applyState

applyStyle()

protected applyStyle(context): void

Defined in: 2d/src/lib/components/Shape.ts:73 

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Shape.applyStyle

applyText()

protected applyText(context): void

Defined in: 2d/src/lib/components/Shape.ts:68 

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Shape.applyText

cacheBBox()

cacheBBox(): BBox

Defined in: 2d/src/lib/components/Node.ts:1399 

Get a bounding box for the contents rendered by this node as well as its children.

Returns

BBox

Inherited from

Shape.cacheBBox

cacheCanvas()

protected cacheCanvas(): CanvasRenderingContext2D

Defined in: 2d/src/lib/components/Node.ts:1350 

Returns

CanvasRenderingContext2D

Inherited from

Shape.cacheCanvas

cachedCanvas()

protected cachedCanvas(): Promise<CanvasRenderingContext2D>

Defined in: 2d/src/lib/components/Node.ts:1363 

Get a cache canvas with the contents of this node rendered onto it.

Returns

Promise<CanvasRenderingContext2D>

Inherited from

Shape.cachedCanvas

childAs()

childAs<T>(index): T | null

Defined in: 2d/src/lib/components/Node.ts:1143 

Get the nth children cast to the specified type.

Type Parameters

T

T extends Node = Node

Parameters

index

number

The index of the child to retrieve.

Returns

T | null

Inherited from

Shape.childAs

childrenAs()

childrenAs<T>(): T[]

Defined in: 2d/src/lib/components/Node.ts:1150 

Get the children array cast to the specified type.

Type Parameters

T

T extends Node = Node

Returns

T[]

Inherited from

Shape.childrenAs

clone()

clone(customProps?): this

Defined in: 2d/src/lib/components/Node.ts:1192 

Create a copy of this node.

Parameters

customProps?

NodeState = {}

Properties to override.

Returns

this

Inherited from

Shape.clone

collectAsyncResources()

protected collectAsyncResources(): void

Defined in: 2d/src/lib/components/Node.ts:1757 

Collect all asynchronous resources used by this node.

Returns

void

Inherited from

Shape.collectAsyncResources

compositeRoot()

protected compositeRoot(): Node | null

Defined in: 2d/src/lib/components/Node.ts:641 

Returns

Node | null

Inherited from

Shape.compositeRoot

compositeToLocal()

compositeToLocal(): DOMMatrix

Defined in: 2d/src/lib/components/Node.ts:650 

Returns

DOMMatrix

Inherited from

Shape.compositeToLocal

compositeToWorld()

compositeToWorld(): DOMMatrix

Defined in: 2d/src/lib/components/Node.ts:636 

A matrix mapping composite space to world space.

Returns

DOMMatrix

Remarks

Certain effects such as blur and shadows ignore the current transformation. This matrix can be used to transform their parameters so that the effect appears relative to the closest composite root.

Inherited from

Shape.compositeToWorld

computedPosition()

computedPosition(): Vector2

Defined in: 2d/src/lib/components/Layout.ts:730 

Returns

Vector2

Inherited from

Shape.computedPosition

computedSize()

protected computedSize(): Vector2

Defined in: 2d/src/lib/components/Layout.ts:750 

Returns

Vector2

Inherited from

Shape.computedSize

desiredSize()

protected desiredSize(): SerializedVector2<DesiredLength>

Defined in: 2d/src/lib/components/Layout.ts:462 

Get the desired size of this node.

Returns

SerializedVector2<DesiredLength>

Remarks

This method can be used to control the size using external factors. By default, the returned size is the same as the one declared by the user.

Inherited from

Shape.desiredSize

dispose()

dispose(): void

Defined in: 2d/src/lib/components/Layout.ts:1035 

Prepare this node to be disposed of.

Returns

void

Remarks

This method is called automatically when a scene is refreshed. It will be called even if the node is not currently attached to the tree.

The goal of this method is to clean any external references to allow the node to be garbage collected.

Inherited from

Shape.dispose

draw()

protected draw(context): Promise<void>

Defined in: 2d/src/lib/components/Txt.ts:181 

Draw this node onto the canvas.

Parameters

context

CanvasRenderingContext2D

The context to draw with.

Returns

Promise<void>

Remarks

This method is used when drawing directly onto the screen as well as onto the cache canvas. It assumes that the context have already been transformed to local space.

Overrides

Shape.draw

drawChildren()

protected drawChildren(context): Promise<void>

Defined in: 2d/src/lib/components/Node.ts:1682 

Parameters

context

CanvasRenderingContext2D

Returns

Promise<void>

Inherited from

Shape.drawChildren

drawOverlay()

drawOverlay(context, matrix): void

Defined in: 2d/src/lib/components/Layout.ts:846 

Draw an overlay for this node.

Parameters

context

CanvasRenderingContext2D

The context to draw with.

matrix

DOMMatrix

A local-to-screen matrix.

Returns

void

Remarks

The overlay for the currently inspected node is displayed on top of the canvas.

The provided context is in screen space. The local-to-screen matrix can be used to transform all shapes that need to be displayed. This approach allows to keep the line widths and gizmo sizes consistent, no matter how zoomed-in the view is.

Inherited from

Shape.drawOverlay

drawRipple()

protected drawRipple(context): void

Defined in: 2d/src/lib/components/Shape.ts:126 

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Shape.drawRipple

drawShape()

protected drawShape(context): void

Defined in: 2d/src/lib/components/Shape.ts:96 

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Shape.drawShape

filterString()

protected filterString(): string

Defined in: 2d/src/lib/components/Node.ts:461 

Returns

string

Inherited from

Shape.filterString

findAll()

Call Signature

findAll<T>(predicate): T[]

Defined in: 2d/src/lib/components/Node.ts:1009 

Find all descendants of this node that match the given predicate.

Type Parameters

T

T extends Node

Parameters

predicate

(node) => node is T

A function that returns true if the node matches.

Returns

T[]

Inherited from

Shape.findAll

Call Signature

findAll<T>(predicate): T[]

Defined in: 2d/src/lib/components/Node.ts:1015 

Find all descendants of this node that match the given predicate.

Type Parameters

T

T extends Node = Node

Parameters

predicate

(node) => boolean

A function that returns true if the node matches.

Returns

T[]

Inherited from

Shape.findAll

findAncestor()

Call Signature

findAncestor<T>(predicate): T | null

Defined in: 2d/src/lib/components/Node.ts:1113 

Find the closest ancestor of this node that matches the given predicate.

Type Parameters

T

T extends Node

Parameters

predicate

(node) => node is T

A function that returns true if the node matches.

Returns

T | null

Inherited from

Shape.findAncestor

Call Signature

findAncestor<T>(predicate): T | null

Defined in: 2d/src/lib/components/Node.ts:1121 

Find the closest ancestor of this node that matches the given predicate.

Type Parameters

T

T extends Node = Node

Parameters

predicate

(node) => boolean

A function that returns true if the node matches.

Returns

T | null

Inherited from

Shape.findAncestor

findFirst()

Call Signature

findFirst<T>(predicate): T | null

Defined in: 2d/src/lib/components/Node.ts:1038 

Find the first descendant of this node that matches the given predicate.

Type Parameters

T

T extends Node

Parameters

predicate

(node) => node is T

A function that returns true if the node matches.

Returns

T | null

Inherited from

Shape.findFirst

Call Signature

findFirst<T>(predicate): T | null

Defined in: 2d/src/lib/components/Node.ts:1046 

Find the first descendant of this node that matches the given predicate.

Type Parameters

T

T extends Node = Node

Parameters

predicate

(node) => boolean

A function that returns true if the node matches.

Returns

T | null

Inherited from

Shape.findFirst

findLast()

Call Signature

findLast<T>(predicate): T | null

Defined in: 2d/src/lib/components/Node.ts:1072 

Find the last descendant of this node that matches the given predicate.

Type Parameters

T

T extends Node

Parameters

predicate

(node) => node is T

A function that returns true if the node matches.

Returns

T | null

Inherited from

Shape.findLast

Call Signature

findLast<T>(predicate): T | null

Defined in: 2d/src/lib/components/Node.ts:1080 

Find the last descendant of this node that matches the given predicate.

Type Parameters

T

T extends Node = Node

Parameters

predicate

(node) => boolean

A function that returns true if the node matches.

Returns

T | null

Inherited from

Shape.findLast

fullCacheBBox()

protected fullCacheBBox(): BBox

Defined in: 2d/src/lib/components/Node.ts:1428 

Get a bounding box for the contents rendered by this node (including effects applied after caching).

Returns

BBox

Remarks

The returned bounding box should be in local space.

Inherited from

Shape.fullCacheBBox

getAbsolutePosition()

protected getAbsolutePosition(): Vector2

Defined in: 2d/src/lib/components/Node.ts:198 

Returns

Vector2

Inherited from

Shape.getAbsolutePosition

getAbsoluteRotation()

protected getAbsoluteRotation(): number

Defined in: 2d/src/lib/components/Node.ts:233 

Returns

number

Inherited from

Shape.getAbsoluteRotation

getAbsoluteScale()

protected getAbsoluteScale(): Vector2

Defined in: 2d/src/lib/components/Node.ts:333 

Returns

Vector2

Inherited from

Shape.getAbsoluteScale

getCacheBBox()

protected getCacheBBox(): BBox

Defined in: 2d/src/lib/components/Shape.ts:113 

Get a bounding box for the contents rendered by this node.

Returns

BBox

Remarks

The returned bounding box should be in local space.

Inherited from

Shape.getCacheBBox

getChildren()

protected getChildren(): Node[]

Defined in: 2d/src/lib/components/Node.ts:505 

Returns

Node[]

Inherited from

Shape.getChildren

getComputedLayout()

protected getComputedLayout(): BBox

Defined in: 2d/src/lib/components/Layout.ts:725 

Returns

BBox

Inherited from

Shape.getComputedLayout

getHeight()

protected getHeight(): number

Defined in: 2d/src/lib/components/Layout.ts:413 

Returns

number

Inherited from

Shape.getHeight

getLayout()

protected getLayout(): boolean

Defined in: 2d/src/lib/components/Txt.ts:134 

Returns

boolean

getOriginDelta()

getOriginDelta(origin): Vector2

Defined in: 2d/src/lib/components/Layout.ts:886 

Parameters

origin

Origin

Returns

Vector2

Inherited from

Shape.getOriginDelta

getPath()

protected getPath(): Path2D

Defined in: 2d/src/lib/components/Shape.ts:118 

Returns

Path2D

Inherited from

Shape.getPath

getRipplePath()

protected getRipplePath(): Path2D

Defined in: 2d/src/lib/components/Shape.ts:122 

Returns

Path2D

Inherited from

Shape.getRipplePath

getSpawner()

protected getSpawner(): ComponentChildren

Defined in: 2d/src/lib/components/Node.ts:480 

Returns

ComponentChildren

Inherited from

Shape.getSpawner

getState()

getState(): NodeState

Defined in: 2d/src/lib/components/Node.ts:1786 

Return a snapshot of the node’s current signal values.

Returns

NodeState

Remarks

This method will calculate the values of any reactive properties of the node at the time the method is called.

Inherited from

Shape.getState

getText()

protected getText(): string

Defined in: 2d/src/lib/components/Txt.ts:63 

Returns

string

getWidth()

protected getWidth(): number

Defined in: 2d/src/lib/components/Layout.ts:373 

Returns

number

Inherited from

Shape.getWidth

getX()

protected getX(): number

Defined in: 2d/src/lib/components/Layout.ts:292 

Returns

number

Inherited from

Shape.getX

getY()

protected getY(): number

Defined in: 2d/src/lib/components/Layout.ts:303 

Returns

number

Inherited from

Shape.getY

hasFilters()

protected hasFilters(): boolean

Defined in: 2d/src/lib/components/Node.ts:446 

Returns

boolean

Inherited from

Shape.hasFilters

hasShadow()

protected hasShadow(): boolean

Defined in: 2d/src/lib/components/Node.ts:451 

Returns

boolean

Inherited from

Shape.hasShadow

hit()

hit(position): Node | null

Defined in: 2d/src/lib/components/Layout.ts:1046 

Try to find a node intersecting the given position.

Parameters

position

Vector2

The searched position.

Returns

Node | null

Inherited from

Shape.hit

innerText()

protected innerText(): string

Defined in: 2d/src/lib/components/Txt.ts:144 

Returns

string

insert()

insert(node, index?): this

Defined in: 2d/src/lib/components/Node.ts:722 

Insert the given node(s) at the specified index in the children list.

Parameters

node

ComponentChildren

A node or an array of nodes to insert.

index?

number = 0

An index at which to insert the node(s).

Returns

this

Example

const node = (
  <Layout>
    <Rect />
    <Circle />
  </Layout>
);
 
node.insert(<Txt />, 1);

Result:

Inherited from

Shape.insert

instantiate()

instantiate(props?): this

Defined in: 2d/src/lib/components/Node.ts:1270 

Create an instance of this node’s class.

Parameters

props?

NodeProps = {}

Properties to pass to the constructor.

Returns

this

Inherited from

Shape.instantiate

isLayoutRoot()

isLayoutRoot(): boolean

Defined in: 2d/src/lib/components/Layout.ts:688 

Returns

boolean

Inherited from

Shape.isLayoutRoot

layoutChildren()

protected layoutChildren(): Layout[]

Defined in: 2d/src/lib/components/Layout.ts:795 

Returns

Layout[]

Inherited from

Shape.layoutChildren

layoutEnabled()

layoutEnabled(): boolean

Defined in: 2d/src/lib/components/Layout.ts:683 

Get the resolved layout mode of this node.

Returns

boolean

Remarks

When the mode is null, its value will be inherited from the parent.

Use layout to get the raw mode set for this node (without inheritance).

Inherited from

Shape.layoutEnabled

localToParent()

localToParent(): DOMMatrix

Defined in: 2d/src/lib/components/Layout.ts:692 

Get the local-to-parent matrix for this node.

Returns

DOMMatrix

Remarks

This matrix transforms vectors from local space of this node to local space of this node’s parent.

Inherited from

Shape.localToParent

localToWorld()

localToWorld(): DOMMatrix

Defined in: 2d/src/lib/components/Node.ts:569 

Get the local-to-world matrix for this node.

Returns

DOMMatrix

Remarks

This matrix transforms vectors from local space of this node to world space.

Example

Calculate the absolute position of a point located 200 pixels to the right of the node:

const local = new Vector2(0, 200);
const world = transformVectorAsPoint(local, node.localToWorld());

Inherited from

Shape.localToWorld

lockSize()

lockSize(): void

Defined in: 2d/src/lib/components/Layout.ts:652 

Returns

void

Inherited from

Shape.lockSize

move()

move(by?): this

Defined in: 2d/src/lib/components/Node.ts:771 

Rearrange this node in relation to its siblings.

Parameters

by?

number = 1

Number of places by which the node should be moved.

Returns

this

Remarks

Children are rendered starting from the beginning of the children list. We can change the rendering order by rearranging said list.

A positive by arguments move the node up (it will be rendered on top of the elements it has passed). Negative values move it down.

Inherited from

Shape.move

moveAbove()

moveAbove(node, directlyAbove?): this

Defined in: 2d/src/lib/components/Node.ts:932 

Move the node above the provided node in the parent’s layout.

Parameters

node

Node

The sibling node below which to move.

directlyAbove?

boolean = false

Whether the node should be positioned directly above the sibling. When true, will move the node even if it is already positioned above the sibling.

Returns

this

Remarks

The node will be moved above the provided node and from then on will be rendered on top of it. By default, if the node is already positioned higher than the sibling node, it will not get moved.

Inherited from

Shape.moveAbove

moveBelow()

moveBelow(node, directlyBelow?): this

Defined in: 2d/src/lib/components/Node.ts:889 

Move the node below the provided node in the parent’s layout.

Parameters

node

Node

The sibling node below which to move.

directlyBelow?

boolean = false

Whether the node should be positioned directly below the sibling. When true, will move the node even if it is already positioned below the sibling.

Returns

this

Remarks

The node will be moved below the provided node and from then on will be rendered below it. By default, if the node is already positioned lower than the sibling node, it will not get moved.

Inherited from

Shape.moveBelow

moveDown()

moveDown(): this

Defined in: 2d/src/lib/components/Node.ts:827 

Move the node down in relation to its siblings.

Returns

this

Remarks

The node will exchange places with the sibling right below it (if any) and from then on will be rendered under it.

Inherited from

Shape.moveDown

moveOffset()

moveOffset(offset): void

Defined in: 2d/src/lib/components/Layout.ts:903 

Update the offset of this node and adjust the position to keep it in the same place.

Parameters

offset

Vector2

The new offset.

Returns

void

Inherited from

Shape.moveOffset

moveTo()

moveTo(index): this

Defined in: 2d/src/lib/components/Node.ts:864 

Move the node to the provided position relative to its siblings.

Parameters

index

number

The index to move the node to.

Returns

this

Remarks

If the node is getting moved to a lower position, it will be placed below the sibling that’s currently at the provided index (if any). If the node is getting moved to a higher position, it will be placed above the sibling that’s currently at the provided index (if any).

Inherited from

Shape.moveTo

moveToBottom()

moveToBottom(): this

Defined in: 2d/src/lib/components/Node.ts:849 

Move the node to the bottom in relation to its siblings.

Returns

this

Remarks

The node will be placed at the beginning of the children list and from then on will be rendered below all of its siblings.

Inherited from

Shape.moveToBottom

moveToTop()

moveToTop(): this

Defined in: 2d/src/lib/components/Node.ts:838 

Move the node to the top in relation to its siblings.

Returns

this

Remarks

The node will be placed at the end of the children list and from then on will be rendered on top of all of its siblings.

Inherited from

Shape.moveToTop

moveUp()

moveUp(): this

Defined in: 2d/src/lib/components/Node.ts:816 

Move the node up in relation to its siblings.

Returns

this

Remarks

The node will exchange places with the sibling right above it (if any) and from then on will be rendered on top of it.

Inherited from

Shape.moveUp

parentAs()

parentAs<T>(): T | null

Defined in: 2d/src/lib/components/Node.ts:1157 

Get the parent cast to the specified type.

Type Parameters

T

T extends Node = Node

Returns

T | null

Inherited from

Shape.parentAs

parentTransform()

protected parentTransform(): Layout | null

Defined in: 2d/src/lib/components/Layout.ts:661 

Returns

Layout | null

Inherited from

Shape.parentTransform

parentTxt()

protected parentTxt(): Txt | null

Defined in: 2d/src/lib/components/Txt.ts:155 

Returns

Txt | null

parentWorldSpaceCacheBBox()

protected parentWorldSpaceCacheBBox(): BBox

Defined in: 2d/src/lib/components/Node.ts:1476 

Returns

BBox

Inherited from

Shape.parentWorldSpaceCacheBBox

parseChildren()

protected parseChildren(children): AnyTxt[]

Defined in: 2d/src/lib/components/Txt.ts:160 

Parse any ComponentChildren into an array of nodes.

Parameters

children

ComponentChildren

The children to parse.

Returns

AnyTxt[]

Overrides

Shape.parseChildren

parseLength()

protected parseLength(value): string

Defined in: 2d/src/lib/components/Layout.ts:915 

Parameters

value

string | number | null

Returns

string

Inherited from

Shape.parseLength

parsePixels()

protected parsePixels(value): string

Defined in: 2d/src/lib/components/Layout.ts:911 

Parameters

value

number | null

Returns

string

Inherited from

Shape.parsePixels

peekChildren()

peekChildren(): readonly Node[]

Defined in: 2d/src/lib/components/Node.ts:1000 

Get the current children of this node.

Returns

readonly Node[]

Remarks

Unlike children, this method does not have any side effects. It does not register the children signal as a dependency, and it does not spawn any children. It can be used to safely retrieve the current state of the scene graph for debugging purposes.

Inherited from

Shape.peekChildren

reactiveClone()

reactiveClone(customProps?): this

Defined in: 2d/src/lib/components/Node.ts:1251 

Create a reactive copy of this node.

Parameters

customProps?

NodeState = {}

Properties to override.

Returns

this

Remarks

A reactive copy has all its properties dynamically updated to match the source node.

Inherited from

Shape.reactiveClone

releaseSize()

releaseSize(): void

Defined in: 2d/src/lib/components/Layout.ts:656 

Returns

void

Inherited from

Shape.releaseSize

remove()

remove(): this

Defined in: 2d/src/lib/components/Node.ts:748 

Remove this node from the tree.

Returns

this

Inherited from

Shape.remove

removeChild()

protected removeChild(child): void

Defined in: 2d/src/lib/components/Node.ts:1331 

Remove the given child.

Parameters

child

Node

Returns

void

Inherited from

Shape.removeChild

removeChildren()

removeChildren(): void

Defined in: 2d/src/lib/components/Node.ts:984 

Remove all children of this node.

Returns

void

Inherited from

Shape.removeChildren

render()

render(context): Promise<void>

Defined in: 2d/src/lib/components/Node.ts:1637 

Render this node onto the given canvas.

Parameters

context

CanvasRenderingContext2D

The context to draw with.

Returns

Promise<void>

Inherited from

Shape.render

renderFromSource()

protected renderFromSource(context, source, x, y): void

Defined in: 2d/src/lib/components/Node.ts:1524 

Parameters

context

CanvasRenderingContext2D

source

CanvasImageSource

x

number

y

number

Returns

void

Inherited from

Shape.renderFromSource

reparent()

reparent(newParent): void

Defined in: 2d/src/lib/components/Node.ts:971 

Change the parent of this node while keeping the absolute transform.

Parameters

newParent

Node

The new parent of this node.

Returns

void

Remarks

After performing this operation, the node will stay in the same place visually, but its parent will be changed.

Inherited from

Shape.reparent

requestFontUpdate()

protected requestFontUpdate(): void

Defined in: 2d/src/lib/components/Layout.ts:819 

Apply any new font changes to this node and all of its ancestors.

Returns

void

Inherited from

Shape.requestFontUpdate

requestLayoutUpdate()

protected requestLayoutUpdate(): void

Defined in: 2d/src/lib/components/Layout.ts:759 

Find the closest layout root and apply any new layout changes.

Returns

void

Inherited from

Shape.requestLayoutUpdate

requiresCache()

protected requiresCache(): boolean

Defined in: 2d/src/lib/components/Node.ts:1338 

Whether this node should be cached or not.

Returns

boolean

Inherited from

Shape.requiresCache

restore()

Call Signature

restore(): void

Defined in: 2d/src/lib/components/Node.ts:1877 

Restore the node to its last saved state.

Returns

void

Remarks

This method can be used together with the save method to restore a node to a previously saved state. Restoring a node to a previous state removes that state from the state stack.

Example

const node = <Circle width={100} height={100} fill={"lightseagreen"} />
 
view.add(node);
 
// Save the node's current state
node.save();
 
// Modify some of the node's properties
yield* node.scale(2, 1);
yield* node.fill('hotpink', 1);
 
// Restore the node to its saved state
node.restore();

Inherited from

Shape.restore

Call Signature

restore(duration, timing?): ThreadGenerator

Defined in: 2d/src/lib/components/Node.ts:1906 

Tween the node to its last saved state.

Parameters

duration

number

The duration of the transition.

timing?

TimingFunction

The timing function to use for the transition.

Returns

ThreadGenerator

Remarks

This method can be used together with the save method to restore a node to a previously saved state. Restoring a node to a previous state removes that state from the state stack.

Example

const node = <Circle width={100} height={100} fill={"lightseagreen"} />
 
view.add(node);
 
// Save the node's current state
node.save();
 
// Modify some of the node's properties
yield* node.scale(2, 1);
yield* node.fill('hotpink', 1);
 
// Tween the node to its saved state over 1 second
yield* node.restore(1);

Inherited from

Shape.restore

ripple()

ripple(duration?): Generator<void | ThreadGenerator | Promise<any> | Promisable<any>, void, any>

Defined in: 2d/src/lib/components/Shape.ts:138 

Parameters

duration?

number = 1

Returns

Generator<void | ThreadGenerator | Promise<any> | Promisable<any>, void, any>

Inherited from

Shape.ripple

rippleSize()

protected rippleSize(): number

Defined in: 2d/src/lib/components/Shape.ts:60 

Returns

number

Inherited from

Shape.rippleSize

save()

save(): void

Defined in: 2d/src/lib/components/Node.ts:1848 

Push a snapshot of the node’s current state onto the node’s state stack.

Returns

void

Remarks

This method can be used together with the restore method to save a node’s current state and later restore it. It is possible to store more than one state by calling save method multiple times.

Inherited from

Shape.save

setAbsolutePosition()

protected setAbsolutePosition(value): void

Defined in: 2d/src/lib/components/Node.ts:203 

Parameters

value

SignalValue<PossibleVector2>

Returns

void

Inherited from

Shape.setAbsolutePosition

setAbsoluteRotation()

protected setAbsoluteRotation(value): void

Defined in: 2d/src/lib/components/Node.ts:238 

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Shape.setAbsoluteRotation

setAbsoluteScale()

protected setAbsoluteScale(value): void

Defined in: 2d/src/lib/components/Node.ts:341 

Parameters

value

SignalValue<PossibleVector2>

Returns

void

Inherited from

Shape.setAbsoluteScale

setChildren()

protected setChildren(value): void

Defined in: 2d/src/lib/components/Txt.ts:89 

Parameters

value

SignalValue<ComponentChildren>

Returns

void

Overrides

Shape.setChildren

setHeight()

protected setHeight(value): void

Defined in: 2d/src/lib/components/Layout.ts:416 

Parameters

value

SignalValue<Length>

Returns

void

Inherited from

Shape.setHeight

setParsedChildren()

protected setParsedChildren(value): void

Defined in: 2d/src/lib/components/Node.ts:1283 

Set the children without parsing them.

Parameters

value

Node[]

The children to set.

Returns

void

Remarks

This method assumes that the caller took care of parsing the children and updating the hierarchy.

Inherited from

Shape.setParsedChildren

setSpawner()

protected setSpawner(value): void

Defined in: 2d/src/lib/components/Node.ts:483 

Parameters

value

SignalValue<ComponentChildren>

Returns

void

Inherited from

Shape.setSpawner

setText()

protected setText(value): void

Defined in: 2d/src/lib/components/Txt.ts:67 

Parameters

value

SignalValue<string>

Returns

void

setupDrawFromCache()

protected setupDrawFromCache(context): void

Defined in: 2d/src/lib/components/Node.ts:1496 

Prepare the given context for drawing a cached node onto it.

Parameters

context

CanvasRenderingContext2D

The context using which the cache will be drawn.

Returns

void

Remarks

This method is called before the contents of the cache canvas are drawn on the screen. It can be used to apply effects to the entire node together with its children, instead of applying them individually. Effects such as transparency, shadows, and filters use this technique.

Whether the node is cached is decided by the requiresCache method.

Inherited from

Shape.setupDrawFromCache

setWidth()

protected setWidth(value): void

Defined in: 2d/src/lib/components/Layout.ts:376 

Parameters

value

SignalValue<Length>

Returns

void

Inherited from

Shape.setWidth

setX()

protected setX(value): void

Defined in: 2d/src/lib/components/Layout.ts:299 

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Shape.setX

setY()

protected setY(value): void

Defined in: 2d/src/lib/components/Layout.ts:310 

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Shape.setY

snapshotClone()

snapshotClone(customProps?): this

Defined in: 2d/src/lib/components/Node.ts:1229 

Create a copy of this node.

Parameters

customProps?

NodeState = {}

Properties to override.

Returns

this

Remarks

Unlike clone, a snapshot clone calculates any reactive properties at the moment of cloning and passes the raw values to the copy.

Inherited from

Shape.snapshotClone

sortedChildren()

protected sortedChildren(): Node[]

Defined in: 2d/src/lib/components/Node.ts:520 

Returns

Node[]

Inherited from

Shape.sortedChildren

spawnChildren()

protected spawnChildren(reactive, children): void

Defined in: 2d/src/lib/components/Node.ts:1288 

Parameters

reactive

boolean

children

ComponentChildren

Returns

void

Inherited from

Shape.spawnChildren

spawnedChildren()

protected spawnedChildren(): Node[]

Defined in: 2d/src/lib/components/Node.ts:511 

Returns

Node[]

Inherited from

Shape.spawnedChildren

toPromise()

toPromise(): Promise<Txt>

Defined in: 2d/src/lib/components/Node.ts:1771 

Wait for any asynchronous resources that this node or its children have.

Returns

Promise<Txt>

Remarks

Certain resources like images are always loaded asynchronously. Awaiting this method makes sure that all such resources are done loading before continuing the animation.

Inherited from

Shape.toPromise

transformContext()

protected transformContext(context): void

Defined in: 2d/src/lib/components/Node.ts:1720 

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Shape.transformContext

tweenCompositeOperation()

protected tweenCompositeOperation(value, time, timingFunction): Generator<void | ThreadGenerator | Promise<any> | Promisable<any>, void, any>

Defined in: 2d/src/lib/components/Node.ts:386 

Parameters

value

SignalValue<GlobalCompositeOperation>

time

number

timingFunction

TimingFunction

Returns

Generator<void | ThreadGenerator | Promise<any> | Promisable<any>, void, any>

Inherited from

Shape.tweenCompositeOperation

tweenHeight()

protected tweenHeight(value, time, timingFunction, interpolationFunction): ThreadGenerator

Defined in: 2d/src/lib/components/Layout.ts:421 

Parameters

value

SignalValue<Length>

time

number

timingFunction

TimingFunction

interpolationFunction

InterpolationFunction<Length>

Returns

ThreadGenerator

Inherited from

Shape.tweenHeight

tweenSize()

protected tweenSize(value, time, timingFunction, interpolationFunction): ThreadGenerator

Defined in: 2d/src/lib/components/Layout.ts:470 

Parameters

value

SignalValue<SerializedVector2<Length>>

time

number

timingFunction

TimingFunction

interpolationFunction

InterpolationFunction<Vector2>

Returns

ThreadGenerator

Inherited from

Shape.tweenSize

tweenText()

protected tweenText(value, time, timingFunction, interpolationFunction): ThreadGenerator

Defined in: 2d/src/lib/components/Txt.ts:102 

Parameters

value

SignalValue<string>

time

number

timingFunction

TimingFunction

interpolationFunction

InterpolationFunction<string>

Returns

ThreadGenerator

tweenWidth()

protected tweenWidth(value, time, timingFunction, interpolationFunction): ThreadGenerator

Defined in: 2d/src/lib/components/Layout.ts:381 

Parameters

value

SignalValue<Length>

time

number

timingFunction

TimingFunction

interpolationFunction

InterpolationFunction<Length>

Returns

ThreadGenerator

Inherited from

Shape.tweenWidth

updateLayout()

protected updateLayout(): void

Defined in: 2d/src/lib/components/Layout.ts:783 

Apply any new layout changes to this node and its children.

Returns

void

Inherited from

Shape.updateLayout

view()

view(): View2D

Defined in: 2d/src/lib/components/Node.ts:660 

Returns

View2D

Inherited from

Shape.view

worldSpaceCacheBBox()

protected worldSpaceCacheBBox(): BBox

Defined in: 2d/src/lib/components/Node.ts:1463 

Get a bounding box in world space for the contents rendered by this node as well as its children.

Returns

BBox

Remarks

This is the same the bounding box returned by cacheBBox only transformed to world space.

Inherited from

Shape.worldSpaceCacheBBox

worldToLocal()

worldToLocal(): DOMMatrix

Defined in: 2d/src/lib/components/Node.ts:592 

Get the world-to-local matrix for this node.

Returns

DOMMatrix

Remarks

This matrix transforms vectors from world space to local space of this node.

Example

Calculate the position relative to this node for a point located in the top-left corner of the screen:

const world = new Vector2(0, 0);
const local = transformVectorAsPoint(world, node.worldToLocal());

Inherited from

Shape.worldToLocal

worldToParent()

worldToParent(): DOMMatrix

Defined in: 2d/src/lib/components/Node.ts:604 

Get the world-to-parent matrix for this node.

Returns

DOMMatrix

Remarks

This matrix transforms vectors from world space to local space of this node’s parent.

Inherited from

Shape.worldToParent

b()

static b(props): Txt

Defined in: 2d/src/lib/components/Txt.ts:40 

Create a bold text node.

Parameters

props

TxtProps

Additional text properties.

Returns

Txt

Remarks

This is a shortcut for

<Txt fontWeight={700} />

i()

static i(props): Txt

Defined in: 2d/src/lib/components/Txt.ts:55 

Create an italic text node.

Parameters

props

TxtProps

Additional text properties.

Returns

Txt

Remarks

This is a shortcut for

<Txt fontStyle={'italic'} />