@revideo/2d / components / Node

Class: Node

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

Extended by

Implements

Promisable<Node>

Constructors

Constructor

new Node(__namedParameters): Node

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

Parameters

__namedParameters

NodeProps

Returns

Node

Properties

absolutePosition

readonly absolutePosition: SimpleVector2Signal<Node>

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.

absoluteRotation

readonly absoluteRotation: SimpleSignal<number, Node>

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.

absoluteScale

readonly absoluteScale: SimpleVector2Signal<Node>

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.

cache

readonly cache: SimpleSignal<boolean, Node>

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

cachePadding

readonly cachePadding: SpacingSignal<Node>

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.

children

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

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

composite

readonly composite: SimpleSignal<boolean, Node>

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

compositeOperation

readonly compositeOperation: SimpleSignal<GlobalCompositeOperation, Node>

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

creationStack?

readonly optional creationStack?: string

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

filters

readonly filters: FiltersSignal<Node>

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

hasSpawnedChildren

protected hasSpawnedChildren: boolean = false

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

isClass

isClass: boolean

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

key

readonly key: string

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

opacity

readonly opacity: SimpleSignal<number, Node>

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.

parent

readonly parent: SimpleSignal<Node | null, void>

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

position

readonly position: Vector2Signal<Node>

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);

properties

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

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

realChildren

protected realChildren: Node[] = []

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

rotation

readonly rotation: SimpleSignal<number, Node>

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

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

scale

readonly scale: Vector2Signal<Node>

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);

shaders

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

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

Experimental

shadowBlur

readonly shadowBlur: SimpleSignal<number, Node>

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

shadowColor

readonly shadowColor: ColorSignal<Node>

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

shadowOffset

readonly shadowOffset: Vector2Signal<Node>

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

skew

readonly skew: Vector2Signal<Node>

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);

spawner

protected readonly spawner: SimpleSignal<ComponentChildren, Node>

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

Deprecated

Use children instead.

view2D

protected view2D: View2D

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

zIndex

readonly zIndex: SimpleSignal<number, Node>

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

Accessors

x

Get Signature

get x(): SimpleSignal<number, this>

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

Returns

SimpleSignal<number, this>

y

Get Signature

get y(): SimpleSignal<number, this>

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

Returns

SimpleSignal<number, this>

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>

absoluteOpacity()

absoluteOpacity(): number

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

Returns

number

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:

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

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

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

cacheCanvas()

protected cacheCanvas(): CanvasRenderingContext2D

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

Returns

CanvasRenderingContext2D

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>

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

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[]

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

collectAsyncResources()

protected collectAsyncResources(): void

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

Collect all asynchronous resources used by this node.

Returns

void

compositeRoot()

protected compositeRoot(): Node | null

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

Returns

Node | null

compositeToLocal()

compositeToLocal(): DOMMatrix

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

Returns

DOMMatrix

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.

dispose()

dispose(): void

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

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.

draw()

protected draw(context): Promise<void>

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

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.

drawChildren()

protected drawChildren(context): Promise<void>

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

Parameters

context

CanvasRenderingContext2D

Returns

Promise<void>

drawOverlay()

drawOverlay(context, matrix): void

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

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.

filterString()

protected filterString(): string

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

Returns

string

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[]

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[]

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

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

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

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

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

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

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.

getAbsolutePosition()

protected getAbsolutePosition(): Vector2

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

Returns

Vector2

getAbsoluteRotation()

protected getAbsoluteRotation(): number

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

Returns

number

getAbsoluteScale()

protected getAbsoluteScale(): Vector2

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

Returns

Vector2

getCacheBBox()

protected getCacheBBox(): BBox

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

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

Returns

BBox

Remarks

The returned bounding box should be in local space.

getChildren()

protected getChildren(): Node[]

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

Returns

Node[]

getSpawner()

protected getSpawner(): ComponentChildren

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

Returns

ComponentChildren

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.

hasFilters()

protected hasFilters(): boolean

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

Returns

boolean

hasShadow()

protected hasShadow(): boolean

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

Returns

boolean

hit()

hit(position): Node | null

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

Try to find a node intersecting the given position.

Parameters

position

Vector2

The searched position.

Returns

Node | null

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:

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

localToParent()

localToParent(): DOMMatrix

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

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.

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());

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.

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.

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.

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.

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).

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.

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.

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.

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

parentWorldSpaceCacheBBox()

protected parentWorldSpaceCacheBBox(): BBox

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

Returns

BBox

parseChildren()

protected parseChildren(children): Node[]

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

Parse any ComponentChildren into an array of nodes.

Parameters

children

ComponentChildren

The children to parse.

Returns

Node[]

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.

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.

remove()

remove(): this

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

Remove this node from the tree.

Returns

this

removeChild()

protected removeChild(child): void

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

Remove the given child.

Parameters

child

Node

Returns

void

removeChildren()

removeChildren(): void

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

Remove all children of this node.

Returns

void

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>

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

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.

requiresCache()

protected requiresCache(): boolean

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

Whether this node should be cached or not.

Returns

boolean

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();

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);

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.

setAbsolutePosition()

protected setAbsolutePosition(value): void

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

Parameters

value

SignalValue<PossibleVector2>

Returns

void

setAbsoluteRotation()

protected setAbsoluteRotation(value): void

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

Parameters

value

SignalValue<number>

Returns

void

setAbsoluteScale()

protected setAbsoluteScale(value): void

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

Parameters

value

SignalValue<PossibleVector2>

Returns

void

setChildren()

protected setChildren(value): void

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

Parameters

value

SignalValue<ComponentChildren>

Returns

void

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.

setSpawner()

protected setSpawner(value): void

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

Parameters

value

SignalValue<ComponentChildren>

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.

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.

sortedChildren()

protected sortedChildren(): Node[]

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

Returns

Node[]

spawnChildren()

protected spawnChildren(reactive, children): void

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

Parameters

reactive

boolean

children

ComponentChildren

Returns

void

spawnedChildren()

protected spawnedChildren(): Node[]

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

Returns

Node[]

toPromise()

toPromise(): Promise<Node>

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

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

Returns

Promise<Node>

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.

Implementation of

Promisable.toPromise

transformContext()

protected transformContext(context): void

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

Parameters

context

CanvasRenderingContext2D

Returns

void

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>

view()

view(): View2D

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

Returns

View2D

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.

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());

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.