@bloopjs/toodle

---

@bloopjs/toodle / text/TextNode / TextNode

Class: TextNode

Defined in: text/TextNode.ts:10

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.

Extends

• SceneNode

Constructors

Constructor

new TextNode(shader, text, opts): TextNode

Defined in: text/TextNode.ts:15

Parameters

shader

TextShader

text

string

opts

TextOptions = {}

Returns

TextNode

Overrides

SceneNode.constructor

Properties

id

id: number

Defined in: scene/SceneNode.ts:19

Inherited from

SceneNode.id

---

label?

optional label: string

Defined in: scene/SceneNode.ts:20

Inherited from

SceneNode.label

---

nextId

static nextId: number = 1

Defined in: scene/SceneNode.ts:17

Inherited from

SceneNode.nextId

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

Inherited from

SceneNode.aspectRatio

---

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

Inherited from

SceneNode.bottom

---

bounds

Get Signature

get bounds(): Bounds

Defined in: scene/SceneNode.ts:369

Get the bounds of the node in world space

Returns

Bounds

Inherited from

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

Inherited from

SceneNode.centerX

---

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

Inherited from

SceneNode.centerY

---

children

Get Signature

get children(): SceneNode[]

Defined in: scene/SceneNode.ts:141

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

Returns

SceneNode[]

Inherited from

SceneNode.children

---

font

Get Signature

get font(): MsdfFont

Defined in: text/TextNode.ts:55

Returns

MsdfFont

---

formatting

Get Signature

get formatting(): TextFormatting

Defined in: text/TextNode.ts:51

Returns

TextFormatting

Set Signature

set formatting(formatting): void

Defined in: text/TextNode.ts:76

Parameters

formatting

TextFormatting

Returns

void

---

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

Inherited from

SceneNode.hasExplicitLayer

---

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

Inherited from

SceneNode.isActive

---

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

Inherited from

SceneNode.key

---

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:

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

Inherited from

SceneNode.kids

---

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

Inherited from

SceneNode.layer

---

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

Inherited from

SceneNode.left

---

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

Inherited from

SceneNode.matrix

---

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

Inherited from

SceneNode.parent

---

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

Inherited from

SceneNode.position

---

renderComponent

Get Signature

get renderComponent(): null | RenderComponent

Defined in: scene/SceneNode.ts:343

Returns

null | RenderComponent

Inherited from

SceneNode.renderComponent

---

right

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

Inherited from

SceneNode.right

---

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

Inherited from

SceneNode.rotation

---

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

Inherited from

SceneNode.rotationRadians

---

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

Inherited from

SceneNode.scale

---

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

Inherited from

SceneNode.size

---

text

Get Signature

get text(): string

Defined in: text/TextNode.ts:47

Returns

string

Set Signature

set text(text): void

Defined in: text/TextNode.ts:59

Parameters

text

string

Returns

void

---

tint

Get Signature

get tint(): Color

Defined in: text/TextNode.ts:67

Returns

Color

Set Signature

set tint(tint): void

Defined in: text/TextNode.ts:71

Parameters

tint

Color

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

Inherited from

SceneNode.top

---

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

Inherited from

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

Inherited from

SceneNode.x

---

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

Inherited from

SceneNode.y

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

Inherited from

SceneNode.add

---

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

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

Inherited from

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

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

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

parent.remove(child);

Inherited from

SceneNode.remove

---

setBounds()

setBounds(bounds): TextNode

Defined in: scene/SceneNode.ts:405

Set the bounds of the node in world space.

Parameters

bounds

Partial<Bounds>

Returns

TextNode

Inherited from

SceneNode.setBounds

---

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

Inherited from

SceneNode.setDirty

---

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

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

Inherited from

SceneNode.toJSON

---

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

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

Inherited from

SceneNode.parse