Abstract Class: ShapeNode<P>

Defined in: nodes/geometry/shape-node.ts:45

Base class for all scene-graph nodes.

Every visible or structural element in a scene extends Node. It wires together three orthogonal systems:

Reactive properties — fields declared with @property() are backed by Signals. Reading them inside a reactive context (e.g. a render pass) creates a subscription; writing them propagates the change automatically. Use set to update one or more props imperatively, or pass a callback () => expr to bind the prop to a derived value.

Tweening — *to(props, duration, ease?) is a generator that animates one or more props to target values over the given duration (in seconds). Numeric props are interpolated; props that register a custom tween fn (via @property({ tween })) can animate any value type. The convenience helpers moveTo, moveX, moveY, fadeTo, rotateTo, and scaleTo wrap to for the most common single-property animations.

Layout — measure() is called top-down to resolve sizes, then layout() places the node in its allocated BoxBounds. Children are measured and laid out by the parent; the base class just stores the rect.

Built-in visual props

prop	default	unit / notes
x	0	horizontal offset in scene pixels
y	0	vertical offset (positive = up)
width	'fill'	SizeInput: px, 'fill', 'auto'
height	'fill'	same
scale	1	uniform scale factor
rotate	0	degrees, clockwise
opacity	1	0–1
effects	[]	post-process / blend effects
padding	0	inner spacing, all four edges

Extends

• Node<P>

Extended by

• BooleanGroup
• Rect
• Ellipse
• Line
• Path
• Polygon
• Polygram
• RichText
• Text
• Grid
• Image

Type Parameters

P

P extends ShapeProps

Constructors

Constructor

new ShapeNode<P>(props): ShapeNode<P>

Defined in: nodes/geometry/shape-node.ts:71

Parameters

props

NodeConfig<any, P>

Returns

ShapeNode<P>

Overrides

Node.constructor

Properties

__mappers?

optional __mappers?: Map<string, (ext, prev?) => any>

Defined in: nodes/base/node.ts:197

Maps external prop value → internal cell value for fields that need it.

Inherited from

Node.__mappers

---

__signals?

optional __signals?: Map<string, Signal<any>>

Defined in: nodes/base/node.ts:193

Inherited from

Node.__signals

---

__tweens?

optional __tweens?: Map<string, TweenFn<any>>

Defined in: nodes/base/node.ts:195

Inherited from

Node.__tweens

---

__upgraders?

optional __upgraders?: Map<string, () => Signal<any>>

Defined in: nodes/base/node.ts:194

Inherited from

Node.__upgraders

---

clip

readonly clip: boolean

Defined in: nodes/geometry/shape-node.ts:64

---

colSpan

readonly colSpan: number

Defined in: nodes/base/node.ts:215

Inherited from

Node.colSpan

---

column

readonly column: number | undefined

Defined in: nodes/base/node.ts:213

Inherited from

Node.column

---

effects

readonly effects: SceneEffect[]

Defined in: nodes/base/node.ts:208

Inherited from

Node.effects

---

end

readonly end: number

Defined in: nodes/geometry/shape-node.ts:61

---

fill

readonly fill: FillResolved[]

Defined in: nodes/geometry/shape-node.ts:48

---

flex

readonly flex: number

Defined in: nodes/base/node.ts:212

Inherited from

Node.flex

---

height

readonly height: SizeInput

Defined in: nodes/base/node.ts:204

Inherited from

Node.height

---

id

readonly id: string

Defined in: nodes/base/node.ts:191

Inherited from

Node.id

---

opacity

readonly opacity: number

Defined in: nodes/base/node.ts:207

Inherited from

Node.opacity

---

padding

readonly padding: PaddingResolved

Defined in: nodes/base/node.ts:209

Inherited from

Node.padding

---

pivot

readonly pivot: Vector2

Defined in: nodes/base/node.ts:210

Inherited from

Node.pivot

---

rotation

readonly rotation: number

Defined in: nodes/base/node.ts:206

Inherited from

Node.rotation

---

row

readonly row: number | undefined

Defined in: nodes/base/node.ts:214

Inherited from

Node.row

---

rowSpan

readonly rowSpan: number

Defined in: nodes/base/node.ts:216

Inherited from

Node.rowSpan

---

scale

readonly scale: number

Defined in: nodes/base/node.ts:205

Inherited from

Node.scale

---

shadow

readonly shadow: ShadowResolved[]

Defined in: nodes/geometry/shape-node.ts:55

---

start

readonly start: number

Defined in: nodes/geometry/shape-node.ts:58

---

stroke

readonly stroke: StrokeResolved[]

Defined in: nodes/geometry/shape-node.ts:52

---

width

readonly width: SizeInput

Defined in: nodes/base/node.ts:203

Inherited from

Node.width

---

x

readonly x: number

Defined in: nodes/base/node.ts:201

Inherited from

Node.x

---

y

readonly y: number

Defined in: nodes/base/node.ts:202

Inherited from

Node.y

Accessors

assets

Get Signature

get assets(): AssetCatalog

Defined in: nodes/base/node.ts:181

Returns

AssetCatalog

Inherited from

Node.assets

---

bottomCenter

Get Signature

get bottomCenter(): Vector2

Defined in: nodes/base/node.ts:669

Returns

Vector2

Inherited from

Node.bottomCenter

---

bottomLeft

Get Signature

get bottomLeft(): Vector2

Defined in: nodes/base/node.ts:654

Returns

Vector2

Inherited from

Node.bottomLeft

---

bottomRight

Get Signature

get bottomRight(): Vector2

Defined in: nodes/base/node.ts:659

Returns

Vector2

Inherited from

Node.bottomRight

---

center

Get Signature

get center(): Vector2

Defined in: nodes/base/node.ts:640

Center of the node — equivalent to its x/y position (0,0 is the center of the layout cell).

Returns

Vector2

Inherited from

Node.center

---

children

Get Signature

get children(): Node<NodeProps>[]

Defined in: nodes/base/node.ts:694

Returns

Node<NodeProps>[]

Inherited from

Node.children

---

clock

Get Signature

get clock(): Readonly<NodeClock>

Defined in: nodes/base/node.ts:569

Internal timing state.

Returns

Readonly<NodeClock>

Inherited from

Node.clock

---

leftCenter

Get Signature

get leftCenter(): Vector2

Defined in: nodes/base/node.ts:674

Returns

Vector2

Inherited from

Node.leftCenter

---

measuredHeight

Get Signature

get measuredHeight(): number

Defined in: nodes/base/node.ts:617

Returns

number

Inherited from

Node.measuredHeight

---

measuredWidth

Get Signature

get measuredWidth(): number

Defined in: nodes/base/node.ts:613

Returns

number

Inherited from

Node.measuredWidth

---

name

Get Signature

get name(): string

Defined in: nodes/base/node.ts:378

Returns

string

Inherited from

Node.name

---

parent

Get Signature

get parent(): Node<NodeProps> | null

Defined in: nodes/base/node.ts:177

Returns

Node<NodeProps> | null

Inherited from

Node.parent

---

properties

Get Signature

get properties(): P

Defined in: nodes/base/node.ts:368

Returns

P

Inherited from

Node.properties

---

rightCenter

Get Signature

get rightCenter(): Vector2

Defined in: nodes/base/node.ts:679

Returns

Vector2

Inherited from

Node.rightCenter

---

topCenter

Get Signature

get topCenter(): Vector2

Defined in: nodes/base/node.ts:664

Returns

Vector2

Inherited from

Node.topCenter

---

topLeft

Get Signature

get topLeft(): Vector2

Defined in: nodes/base/node.ts:644

Returns

Vector2

Inherited from

Node.topLeft

---

topRight

Get Signature

get topRight(): Vector2

Defined in: nodes/base/node.ts:649

Returns

Vector2

Inherited from

Node.topRight

Methods

_prepareStep()

_prepareStep(to, duration, easing?): TweenStepper

Defined in: nodes/base/node.ts:404

Resolve a single to() step into a flat TweenStepper — all the per-key setup (anchor handling, mapper, numeric-vs-custom routing) happens once here, then advance(dt) is allocation-free. Used by both the generator path (_toGen) and the batched parallel path.

Parameters

to

Partial<P>

duration

number

easing?

EaseFunction

Returns

TweenStepper

Inherited from

Node._prepareStep

---

_toGen()

_toGen(to, duration, easing?): FrameGenerator

Defined in: nodes/base/node.ts:480

Parameters

to

Partial<P>

duration

number

easing?

EaseFunction

Returns

FrameGenerator

Inherited from

Node._toGen

---

addChild()

addChild(child): void

Defined in: nodes/base/node.ts:698

Parameters

child

Node

Returns

void

Inherited from

Node.addChild

---

addChildAt()

Call Signature

addChildAt(child, index): void

Defined in: nodes/base/node.ts:725

Parameters

child

Node

index

number

Returns

void

Inherited from

Node.addChildAt

Call Signature

addChildAt(child, index, duration, easing?): FrameGenerator

Defined in: nodes/base/node.ts:726

Parameters

child

Node

index

number

duration

number

easing?

EaseFunction

Returns

FrameGenerator

Inherited from

Node.addChildAt

---

addChildren()

addChildren(children): void

Defined in: nodes/base/node.ts:713

Parameters

children

Node<NodeProps>[]

Returns

void

Inherited from

Node.addChildren

---

afterRender()

afterRender(ctx): void

Defined in: nodes/base/node.ts:815

Parameters

ctx

RenderContext

Returns

void

Inherited from

Node.afterRender

---

beforeRender()

beforeRender(ctx): void

Defined in: nodes/base/node.ts:786

Parameters

ctx

RenderContext

Returns

void

Inherited from

Node.beforeRender

---

bindAssets()

bindAssets(context): void

Defined in: nodes/base/node.ts:588

Parameters

context

AssetCatalog

Returns

void

Inherited from

Node.bindAssets

---

clearChildren()

clearChildren(): void

Defined in: nodes/base/node.ts:720

Returns

void

Inherited from

Node.clearChildren

---

dispose()

dispose(): void

Defined in: nodes/base/node.ts:925

Returns

void

Inherited from

Node.dispose

---

ellapse()

ellapse(totalTime): void

Defined in: nodes/base/node.ts:573

Parameters

totalTime

number

Returns

void

Inherited from

Node.ellapse

---

fadeTo()

fadeTo(opacity, duration, ease?): FrameGenerator

Defined in: nodes/base/node.ts:530

Animate opacity to the target value.

Parameters

opacity

number

Target opacity in the range [0, 1].

duration

number

ease?

EaseFunction

Returns

FrameGenerator

Example

yield* node.fadeTo(0, 0.3);   // fade out
yield* node.fadeTo(1, 0.3);   // fade in

Inherited from

Node.fadeTo

---

isAutoSize()

isAutoSize(axis): boolean

Defined in: nodes/base/node.ts:684

Parameters

axis

"width" | "height"

Returns

boolean

Inherited from

Node.isAutoSize

---

layout()

layout(rect, _scope): void

Defined in: nodes/base/node.ts:829

Parameters

rect

BoxBounds

_scope

MeasureScope

Returns

void

Inherited from

Node.layout

---

measure()

measure(constraints, _scope): Partial<Size2D>

Defined in: nodes/base/node.ts:833

Parameters

constraints

SizeConstraints

_scope

MeasureScope

Returns

Partial<Size2D>

Inherited from

Node.measure

---

moveTo()

moveTo(x, y, duration, ease?): FrameGenerator

Defined in: nodes/base/node.ts:498

Animate both x and y to the given position.

Parameters

x

number

y

number

duration

number

ease?

EaseFunction

Returns

FrameGenerator

Example

yield* node.moveTo(200, 100, 0.5, ease.outCubic);

Inherited from

Node.moveTo

---

moveX()

moveX(x, duration, ease?): FrameGenerator

Defined in: nodes/base/node.ts:508

Animate only the horizontal position (x).

Parameters

x

number

duration

number

ease?

EaseFunction

Returns

FrameGenerator

Example

yield* node.moveX(300, 0.4);

Inherited from

Node.moveX

---

moveY()

moveY(y, duration, ease?): FrameGenerator

Defined in: nodes/base/node.ts:518

Animate only the vertical position (y).

Parameters

y

number

duration

number

ease?

EaseFunction

Returns

FrameGenerator

Example

yield* node.moveY(-50, 0.4);

Inherited from

Node.moveY

---

onRender()

onRender(ctx): void

Defined in: nodes/geometry/shape-node.ts:167

Parameters

ctx

RenderContext

Returns

void

Overrides

Node.onRender

---

prepare()

prepare(tracker): void

Defined in: nodes/geometry/shape-node.ts:100

Parameters

tracker

AssetTracker

Returns

void

Overrides

Node.prepare

---

prepareAssets()

prepareAssets(storage): void

Defined in: nodes/base/node.ts:606

Parameters

storage

AssetTracker

Returns

void

Inherited from

Node.prepareAssets

---

removeChild()

removeChild(child): Node<NodeProps> | null

Defined in: nodes/base/node.ts:705

Parameters

child

Node

Returns

Node<NodeProps> | null

Inherited from

Node.removeChild

---

removeChildAt()

Call Signature

removeChildAt(index): Node<NodeProps> | null

Defined in: nodes/base/node.ts:738

Parameters

index

number

Returns

Node<NodeProps> | null

Inherited from

Node.removeChildAt

Call Signature

removeChildAt(index, duration, easing?): FrameGenerator

Defined in: nodes/base/node.ts:739

Parameters

index

number

duration

number

easing?

EaseFunction

Returns

FrameGenerator

Inherited from

Node.removeChildAt

---

render()

render(ctx): void

Defined in: nodes/base/node.ts:819

Parameters

ctx

RenderContext

Returns

void

Inherited from

Node.render

---

renderChildren()

renderChildren(ctx): void

Defined in: nodes/base/node.ts:782

Parameters

ctx

RenderContext

Returns

void

Inherited from

Node.renderChildren

---

reparent()

Call Signature

reparent(newParent): void

Defined in: nodes/base/node.ts:845

Parameters

newParent

Node

Returns

void

Inherited from

Node.reparent

Call Signature

reparent(newParent, duration, easing?): FrameGenerator

Defined in: nodes/base/node.ts:846

Parameters

newParent

Node

duration

number

easing?

EaseFunction

Returns

FrameGenerator

Inherited from

Node.reparent

---

resolveSizeInput()

resolveSizeInput(sizeInput, availableSize, childrenSize): number

Defined in: nodes/base/node.ts:688

Parameters

sizeInput

SizeInput

availableSize

number

childrenSize

number

Returns

number

Inherited from

Node.resolveSizeInput

---

rotateTo()

rotateTo(rotation, duration, ease?): FrameGenerator

Defined in: nodes/base/node.ts:540

Animate rotate to the target angle (degrees, clockwise).

Parameters

rotation

number

duration

number

ease?

EaseFunction

Returns

FrameGenerator

Example

yield* node.rotateTo(180, 0.6, ease.inOutQuad);

Inherited from

Node.rotateTo

---

scaleTo()

scaleTo(scale, duration, ease?): FrameGenerator

Defined in: nodes/base/node.ts:551

Animate scale to the target factor.

Parameters

scale

number

duration

number

ease?

EaseFunction

Returns

FrameGenerator

Example

yield* node.scaleTo(1.5, 0.4);   // grow
yield* node.scaleTo(0,   0.3);   // shrink to nothing

Inherited from

Node.scaleTo

---

set()

set(props): void

Defined in: nodes/base/node.ts:382

Parameters

props

{ [K in string | number | symbol]?: P[K] | (() => P[K]) }

Returns

void

Inherited from

Node.set

---

tick()

tick(time): void

Defined in: nodes/geometry/shape-node.ts:95

Parameters

time

number

Returns

void

Overrides

Node.tick

---

to()

to(to, duration, easing?): AnimationBuilder<P>

Defined in: nodes/base/node.ts:394

Parameters

to

Partial<P>

duration

number

easing?

EaseFunction

Returns

AnimationBuilder<P>

Inherited from

Node.to

---

waveform()

waveform(): WaveformInfo[] | undefined

Defined in: nodes/base/node.ts:602

Audio clips this node owns, surfaced to the timeline as waveforms. The base node has no audio; nodes that do (e.g. Scene) override this. Returns undefined when there is nothing to show.

Returns

WaveformInfo[] | undefined

Inherited from

Node.waveform