Revideo Docs

Node.collectAsyncResources

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

Node.add

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

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

Node.applyState

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

Node.cacheBBox

cacheCanvas()

protected cacheCanvas(): CanvasRenderingContext2D

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

Returns

CanvasRenderingContext2D

Inherited from

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

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

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

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

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

compositeRoot()

protected compositeRoot(): Node | null

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

Returns

Node | null

Inherited from

Node.compositeRoot

compositeToLocal()

compositeToLocal(): DOMMatrix

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

Returns

DOMMatrix

Inherited from

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

Node.compositeToWorld

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.

Inherited from

Node.dispose

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.

Inherited from

Node.draw

drawChildren()

protected drawChildren(context): Promise<void>

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

Parameters

context

CanvasRenderingContext2D

Returns

Promise<void>

Inherited from

Node.drawChildren

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.

Inherited from

Node.drawOverlay

filterString()

protected filterString(): string

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

Returns

string

Inherited from

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

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

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

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

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

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

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

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

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

Node.fullCacheBBox

getAbsolutePosition()

protected getAbsolutePosition(): Vector2

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

Returns

Vector2

Inherited from

Node.getAbsolutePosition

getAbsoluteRotation()

protected getAbsoluteRotation(): number

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

Returns

number

Inherited from

Node.getAbsoluteRotation

getAbsoluteScale()

protected getAbsoluteScale(): Vector2

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

Returns

Vector2

Inherited from

Node.getAbsoluteScale

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.

Inherited from

Node.getCacheBBox

getChildren()

protected getChildren(): Node[]

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

Returns

Inherited from

Node.getChildren

getSpawner()

protected getSpawner(): ComponentChildren

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

Returns

Inherited from

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

Node.getState

hasFilters()

protected hasFilters(): boolean

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

Returns

boolean

Inherited from

Node.hasFilters

hasShadow()

protected hasShadow(): boolean

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

Returns

boolean

Inherited from

Node.hasShadow

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

Inherited from

Node.hit

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

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

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

Node.instantiate

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.

Inherited from

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

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.

Inherited from

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

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

Node.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.parentWorldSpaceCacheBBox

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

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

Node.moveDown

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

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

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

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

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

Node.parentAs

parentWorldSpaceCacheBBox()

protected parentWorldSpaceCacheBBox(): BBox

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

Returns

BBox

Inherited from

parseChildren()

protected parseChildren(children): Node[]

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

Parse any ComponentChildren into an array of nodes.

Parameters

children

The children to parse.

Returns

Inherited from

Node.parseChildren

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

Node.peekChildren

points()

points(): KnotInfo

Defined in: 2d/src/lib/components/Knot.ts:136

Returns

KnotInfo

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

Node.reactiveClone

remove()

remove(): this

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

Remove this node from the tree.

Returns

this

Inherited from

Node.remove

removeChild()

protected removeChild(child): void

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

Remove the given child.

Parameters

child

Node.renderFromSource

Returns

void

Inherited from

Node.removeChild

removeChildren()

removeChildren(): void

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

Remove all children of this node.

Returns

void

Inherited from

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

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

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

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

Node.reparent

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

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

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

Inherited from

Node.restore

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

Node.save

setAbsolutePosition()

protected setAbsolutePosition(value): void

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

Parameters

value

SignalValue<PossibleVector2>

Returns

void

Inherited from

setAbsoluteRotation()

protected setAbsoluteRotation(value): void

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

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Node.setAbsoluteRotation

setAbsoluteScale()

protected setAbsoluteScale(value): void

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

Parameters

value

SignalValue<PossibleVector2>

Returns

void

Inherited from

Node.setAbsoluteScale

setChildren()

protected setChildren(value): void

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

Parameters

value

SignalValue<ComponentChildren>

Returns

void

Inherited from

Node.setChildren

setParsedChildren()

protected setParsedChildren(value): void

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

Set the children without parsing them.

Parameters

value

Node.setParsedChildren

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

setSpawner()

protected setSpawner(value): void

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

Parameters

value

SignalValue<ComponentChildren>

Returns

void

Inherited from

Node.setSpawner

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

Node.setupDrawFromCache

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

Node.snapshotClone

sortedChildren()

protected sortedChildren(): Node[]

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

Returns

Inherited from

Node.sortedChildren

spawnChildren()

protected spawnChildren(reactive, children): void

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

Parameters

reactive

boolean

children

Returns

void

Inherited from

Node.spawnChildren

spawnedChildren()

protected spawnedChildren(): Node[]

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

Returns