Toodle

Appearance

@bloopjs/toodle

@bloopjs/toodle / scene/SceneNode / SceneNode

Class: SceneNode ​

Defined in: scene/SceneNode.ts:16

A node in the scene graph.

This is a base class and is fairly low level. You will probably want to interact with the wrapper classes ['Node'] or ['Quad'] instead.

Extended by ​

Constructors ​

Constructor ​

new SceneNode(opts?): SceneNode

Defined in: scene/SceneNode.ts:36

Parameters ​

opts? ​

NodeOptions

Returns ​

SceneNode

Properties ​

id ​

id: number

Defined in: scene/SceneNode.ts:19

label? ​

optional label: string

Defined in: scene/SceneNode.ts:20

nextId ​

static nextId: number = 1

Defined in: scene/SceneNode.ts:17

Accessors ​

aspectRatio ​

Get Signature ​

get aspectRatio(): number

Defined in: scene/SceneNode.ts:265

The aspect ratio of the node. If the node has no defined size, the aspect ratio will be 1.

Returns ​

number

bottom ​

Set Signature ​

set bottom(value): void

Defined in: scene/SceneNode.ts:426

Set the bottom edge of the node in world space.

Parameters ​
value ​

number

Returns ​

void

bounds ​

Get Signature ​

get bounds(): Bounds

Defined in: scene/SceneNode.ts:369

Get the bounds of the node in world space

Returns ​

Bounds

centerX ​

Set Signature ​

set centerX(value): void

Defined in: scene/SceneNode.ts:447

Set the center x of the node in world space.

Parameters ​
value ​

number

Returns ​

void

centerY ​

Set Signature ​

set centerY(value): void

Defined in: scene/SceneNode.ts:454

Set the center y of the node in world space.

Parameters ​
value ​

number

Returns ​

void

children ​

Get Signature ​

get children(): SceneNode[]

Defined in: scene/SceneNode.ts:141

The children of the node. Alias for SceneNode.kids.

Returns ​

SceneNode[]

hasExplicitLayer ​

Get Signature ​

get hasExplicitLayer(): boolean

Defined in: scene/SceneNode.ts:334

Returns true if the node has an explicit layer set.

If the node does not have an explicit layer but one of its ancestors does, its layer will be inherited from its parent.

Returns ​

boolean

isActive ​

Get Signature ​

get isActive(): boolean

Defined in: scene/SceneNode.ts:280

isActive is a boolean that determines if the node is active. If a node is not active, it will not be drawn. If any of a node's ancestors are not active, the node will not be active.

Returns ​

boolean

Set Signature ​

set isActive(value): void

Defined in: scene/SceneNode.ts:295

Parameters ​
value ​

boolean

Returns ​

void

key ​

Get Signature ​

get key(): string

Defined in: scene/SceneNode.ts:160

Returns the key of the node as set when the node was created.

This key can be used to reference the node from an external lookup system.

Returns ​

string

kids ​

Get Signature ​

get kids(): SceneNode[]

Defined in: scene/SceneNode.ts:134

Returns an array of the node's immediate kids.

Note that these will be returned with a SceneNode type, but can be narrowed if you know the type of them, for eg:

ts
for (const kid of node.kids) {
  if (kid instanceof Scene.QuadNode) {
    console.log(kid.color)
  }

  if (kid instanceof Text.TextNode) {
    console.log(kid.text)
  }
}
Returns ​

SceneNode[]

layer ​

Get Signature ​

get layer(): number

Defined in: scene/SceneNode.ts:305

Nodes are batched for drawing based on their layer. Each layer will submit a separate draw call. Nodes with the same layer will be drawn in the order they are drawn with toodle.Draw Nodes with a higher layer will be drawn on top of nodes with a lower layer.

Returns ​

number

Set Signature ​

set layer(value): void

Defined in: scene/SceneNode.ts:338

Parameters ​
value ​

number

Returns ​

void

left ​

Set Signature ​

set left(value): void

Defined in: scene/SceneNode.ts:419

Set the left edge of the node in world space.

Parameters ​
value ​

number

Returns ​

void

matrix ​

Get Signature ​

get matrix(): Float32Array

Defined in: scene/SceneNode.ts:352

This is the model matrix of the node. See https://webgpufundamentals.org/webgpu/lessons/webgpu-matrix-math.html for more information.

Do not edit this matrix directly as it is derived from the node's transform and will be overwritten.

Returns ​

Float32Array

parent ​

Get Signature ​

get parent(): null | SceneNode

Defined in: scene/SceneNode.ts:167

Returns the parent node. See https://toodle.gg/f849595b3ed13fc956fc1459a5cb5f0228f9d259/examples/transforms.html

Returns ​

null | SceneNode

position ​

Get Signature ​

get position(): Point

Defined in: scene/SceneNode.ts:179

Position of the node in local space. For world space, use SceneNode.bounds.

Returns ​

Point

Set Signature ​

set position(value): void

Defined in: scene/SceneNode.ts:171

Parameters ​
value ​

Point

Returns ​

void

renderComponent ​

Get Signature ​

get renderComponent(): null | RenderComponent

Defined in: scene/SceneNode.ts:343

Returns ​

null | RenderComponent

Set Signature ​

set right(value): void

Defined in: scene/SceneNode.ts:440

Set the right edge of the node in world space.

Parameters ​
value ​

number

Returns ​

void

rotation ​

Get Signature ​

get rotation(): number

Defined in: scene/SceneNode.ts:216

The rotation of the node in degrees. For radians, see SceneNode.rotationRadians.

Returns ​

number

Set Signature ​

set rotation(value): void

Defined in: scene/SceneNode.ts:207

Parameters ​
value ​

number

Returns ​

void

rotationRadians ​

Get Signature ​

get rotationRadians(): number

Defined in: scene/SceneNode.ts:224

The rotation of the node in radians. For degrees, see SceneNode.rotation.

Returns ​

number

Set Signature ​

set rotationRadians(value): void

Defined in: scene/SceneNode.ts:228

Parameters ​
value ​

number

Returns ​

void

scale ​

Get Signature ​

get scale(): Vec2

Defined in: scene/SceneNode.ts:236

The scale of the node. See https://toodle.gg/f849595b3ed13fc956fc1459a5cb5f0228f9d259/examples/quad-size-scale.html

Returns ​

Vec2

Set Signature ​

set scale(value): void

Defined in: scene/SceneNode.ts:240

Parameters ​
value ​

number | Vec2

Returns ​

void

size ​

Get Signature ​

get size(): null | Size

Defined in: scene/SceneNode.ts:257

Returns ​

null | Size

Set Signature ​

set size(value): void

Defined in: scene/SceneNode.ts:252

The size of the node. See https://toodle.gg/f849595b3ed13fc956fc1459a5cb5f0228f9d259/examples/quad-size-scale.html

Parameters ​
value ​

null | Size

Returns ​

void

top ​

Set Signature ​

set top(value): void

Defined in: scene/SceneNode.ts:433

Set the top edge of the node in world space.

Parameters ​
value ​

number

Returns ​

void

transform ​

Get Signature ​

get transform(): Transform

Defined in: scene/SceneNode.ts:151

Returns a reference to the node's transform.

Do not edit this transform directly as it won't invalidate cache's correctly. Instead, use convenience properties SceneNode.position, SceneNode.scale, and SceneNode.rotation.

Returns ​

Transform

x ​

Get Signature ​

get x(): number

Defined in: scene/SceneNode.ts:191

The local x coordinate of the node.

Returns ​

number

Set Signature ​

set x(value): void

Defined in: scene/SceneNode.ts:183

Parameters ​
value ​

number

Returns ​

void

y ​

Get Signature ​

get y(): number

Defined in: scene/SceneNode.ts:203

The local y coordinate of the node.

Returns ​

number

Set Signature ​

set y(value): void

Defined in: scene/SceneNode.ts:195

Parameters ​
value ​

number

Returns ​

void

Methods ​

add() ​

add<T>(kid, index?): T

Defined in: scene/SceneNode.ts:105

Add a child node and return the child node with this node set as its parent.

Type Parameters ​

T ​

T extends SceneNode

Parameters ​

kid ​

T

index? ​

number

Returns ​

T

delete() ​

delete(): void

Defined in: scene/SceneNode.ts:475

Removes references to this node and all of its children.

Call this to remove a node from a parent's tree and before garbage collection to prevent a node from being retained.

Returns ​

void

Example ​

ts
const parent = toodle.Node();
const child = toodle.Quad();
const grandchild = toodle.Quad();

parent.add(child);
child.add(grandchild);

// Will delete `child` and `grandchild`
child.delete();

remove() ​

remove(kid): void

Defined in: scene/SceneNode.ts:503

Remove any child node from this node. Warns if the child is not found.

The node will still exist as an orphaned node and can still be passed to toodle.Draw or added to another parent.

Alternatively, calling node.delete() on the child will remove it and set it to inactive.

Parameters ​

kid ​

SceneNode

Returns ​

void

Example ​

ts
const parent = toodle.Node();
const child = toodle.Quad();
const grandchild = toodle.Quad();

parent.add(child);
child.add(grandchild);

parent.remove(child);

setBounds() ​

setBounds(bounds): SceneNode

Defined in: scene/SceneNode.ts:405

Set the bounds of the node in world space.

Parameters ​

bounds ​

Partial<Bounds>

Returns ​

SceneNode

setDirty() ​

setDirty(): void

Defined in: scene/SceneNode.ts:534

This marks the node as dirty, invalidating its cache and causing its matrix to be recalculated. This should not be necessary to call directly, but is available for advanced use cases.

Returns ​

void

toJSON() ​

toJSON(): object

Defined in: scene/SceneNode.ts:565

This method usually is not called directly. It will be called automatically by JSON.stringify, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description and SceneNode.parse.

Returns ​

object

id ​

id: number

isActive ​

isActive: boolean

kids ​

kids: SceneNode[]

label ​

label: undefined | string

layer ​

layer: null | number

render ​

render: null | RenderComponent

transform ​

transform: Transform

Example ​

ts
const node = new Node();
const json = JSON.stringify(node); // calls toJSON()
console.log(json)

parse() ​

static parse(json): SceneNode

Defined in: scene/SceneNode.ts:549

Parse a node and its descendants from a JSON string. Can be used for deserialization from a file or other source.

Parameters ​

json ​

string

Returns ​

SceneNode

Example ​

ts
const node = new Node();
const json = JSON.stringify(node);
const clonedNode = Node.parse(json);