Skip to main content

Class: Path

Defined in: nodes/geometry/path-node.ts:99

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​

propdefaultunit / notes
x0horizontal offset in scene pixels
y0vertical offset (positive = up)
width'fill'SizeInput: px, 'fill', 'auto'
height'fill'same
scale1uniform scale factor
rotate0degrees, clockwise
opacity10–1
effects[]post-process / blend effects
padding0inner spacing, all four edges

Extends​

Constructors​

Constructor​

new Path(props): Path

Defined in: nodes/geometry/path-node.ts:104

Parameters​

props​

NodeConfig<Path, PathProps>

Returns​

Path

Overrides​

ShapeNode.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​

ShapeNode.__mappers

__signals?​

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

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

Inherited from​

ShapeNode.__signals

__tweens?​

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

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

Inherited from​

ShapeNode.__tweens

__upgraders?​

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

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

Inherited from​

ShapeNode.__upgraders

clip​

readonly clip: boolean

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

Inherited from​

ShapeNode.clip

colSpan​

readonly colSpan: number

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

Inherited from​

ShapeNode.colSpan

column​

readonly column: number | undefined

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

Inherited from​

ShapeNode.column

d​

readonly d: PathData

Defined in: nodes/geometry/path-node.ts:102

effects​

readonly effects: SceneEffect[]

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

Inherited from​

ShapeNode.effects

end​

readonly end: number

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

Inherited from​

ShapeNode.end

fill​

readonly fill: FillResolved[]

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

Inherited from​

ShapeNode.fill

flex​

readonly flex: number

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

Inherited from​

ShapeNode.flex

height​

readonly height: SizeInput

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

Inherited from​

ShapeNode.height

id​

readonly id: string

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

Inherited from​

ShapeNode.id

opacity​

readonly opacity: number

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

Inherited from​

ShapeNode.opacity

padding​

readonly padding: PaddingResolved

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

Inherited from​

ShapeNode.padding

pivot​

readonly pivot: Vector2

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

Inherited from​

ShapeNode.pivot

rotation​

readonly rotation: number

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

Inherited from​

ShapeNode.rotation

row​

readonly row: number | undefined

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

Inherited from​

ShapeNode.row

rowSpan​

readonly rowSpan: number

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

Inherited from​

ShapeNode.rowSpan

scale​

readonly scale: number

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

Inherited from​

ShapeNode.scale

shadow​

readonly shadow: ShadowResolved[]

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

Inherited from​

ShapeNode.shadow

start​

readonly start: number

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

Inherited from​

ShapeNode.start

stroke​

readonly stroke: StrokeResolved[]

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

Inherited from​

ShapeNode.stroke

width​

readonly width: SizeInput

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

Inherited from​

ShapeNode.width

x​

readonly x: number

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

Inherited from​

ShapeNode.x

y​

readonly y: number

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

Inherited from​

ShapeNode.y

Accessors​

assets​

Get Signature​

get assets(): AssetCatalog

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

Returns​

AssetCatalog

Inherited from​

ShapeNode.assets

bottomCenter​

Get Signature​

get bottomCenter(): Vector2

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

Returns​

Vector2

Inherited from​

ShapeNode.bottomCenter

bottomLeft​

Get Signature​

get bottomLeft(): Vector2

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

Returns​

Vector2

Inherited from​

ShapeNode.bottomLeft

bottomRight​

Get Signature​

get bottomRight(): Vector2

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

Returns​

Vector2

Inherited from​

ShapeNode.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​

ShapeNode.center

children​

Get Signature​

get children(): Node<NodeProps>[]

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

Returns​

Node<NodeProps>[]

Inherited from​

ShapeNode.children

clock​

Get Signature​

get clock(): Readonly<NodeClock>

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

Internal timing state.

Returns​

Readonly<NodeClock>

Inherited from​

ShapeNode.clock

leftCenter​

Get Signature​

get leftCenter(): Vector2

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

Returns​

Vector2

Inherited from​

ShapeNode.leftCenter

measuredHeight​

Get Signature​

get measuredHeight(): number

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

Returns​

number

Inherited from​

ShapeNode.measuredHeight

measuredWidth​

Get Signature​

get measuredWidth(): number

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

Returns​

number

Inherited from​

ShapeNode.measuredWidth

name​

Get Signature​

get name(): string

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

Returns​

string

Inherited from​

ShapeNode.name

parent​

Get Signature​

get parent(): Node<NodeProps> | null

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

Returns​

Node<NodeProps> | null

Inherited from​

ShapeNode.parent

properties​

Get Signature​

get properties(): P

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

Returns​

P

Inherited from​

ShapeNode.properties

rightCenter​

Get Signature​

get rightCenter(): Vector2

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

Returns​

Vector2

Inherited from​

ShapeNode.rightCenter

topCenter​

Get Signature​

get topCenter(): Vector2

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

Returns​

Vector2

Inherited from​

ShapeNode.topCenter

topLeft​

Get Signature​

get topLeft(): Vector2

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

Returns​

Vector2

Inherited from​

ShapeNode.topLeft

topRight​

Get Signature​

get topRight(): Vector2

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

Returns​

Vector2

Inherited from​

ShapeNode.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​

ShapeNode._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​

ShapeNode._toGen

addChild()​

addChild(child): void

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

Parameters​

child​

Node

Returns​

void

Inherited from​

ShapeNode.addChild

addChildAt()​

Call Signature​

addChildAt(child, index): void

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

Parameters​
child​

Node

index​

number

Returns​

void

Inherited from​

ShapeNode.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​

ShapeNode.addChildAt

addChildren()​

addChildren(children): void

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

Parameters​

children​

Node<NodeProps>[]

Returns​

void

Inherited from​

ShapeNode.addChildren

afterRender()​

afterRender(ctx): void

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

Parameters​

ctx​

RenderContext

Returns​

void

Inherited from​

ShapeNode.afterRender

beforeRender()​

beforeRender(ctx): void

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

Parameters​

ctx​

RenderContext

Returns​

void

Inherited from​

ShapeNode.beforeRender

bindAssets()​

bindAssets(context): void

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

Parameters​

context​

AssetCatalog

Returns​

void

Inherited from​

ShapeNode.bindAssets

clearChildren()​

clearChildren(): void

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

Returns​

void

Inherited from​

ShapeNode.clearChildren

dispose()​

dispose(): void

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

Returns​

void

Inherited from​

ShapeNode.dispose

ellapse()​

ellapse(totalTime): void

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

Parameters​

totalTime​

number

Returns​

void

Inherited from​

ShapeNode.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​

ShapeNode.fadeTo

isAutoSize()​

isAutoSize(axis): boolean

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

Parameters​

axis​

"width" | "height"

Returns​

boolean

Inherited from​

ShapeNode.isAutoSize

layout()​

layout(rect, _scope): void

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

Parameters​

rect​

BoxBounds

_scope​

MeasureScope

Returns​

void

Inherited from​

ShapeNode.layout

measure()​

measure(constraints, scope): Partial<Size2D>

Defined in: nodes/geometry/path-node.ts:111

Parameters​

constraints​

SizeConstraints

scope​

MeasureScope

Returns​

Partial<Size2D>

Overrides​

ShapeNode.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​

ShapeNode.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​

ShapeNode.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​

ShapeNode.moveY

onRender()​

onRender(ctx): void

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

Parameters​

ctx​

RenderContext

Returns​

void

Inherited from​

ShapeNode.onRender

prepare()​

prepare(tracker): void

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

Parameters​

tracker​

AssetTracker

Returns​

void

Inherited from​

ShapeNode.prepare

prepareAssets()​

prepareAssets(storage): void

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

Parameters​

storage​

AssetTracker

Returns​

void

Inherited from​

ShapeNode.prepareAssets

removeChild()​

removeChild(child): Node<NodeProps> | null

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

Parameters​

child​

Node

Returns​

Node<NodeProps> | null

Inherited from​

ShapeNode.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​

ShapeNode.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​

ShapeNode.removeChildAt

render()​

render(ctx): void

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

Parameters​

ctx​

RenderContext

Returns​

void

Inherited from​

ShapeNode.render

renderChildren()​

renderChildren(ctx): void

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

Parameters​

ctx​

RenderContext

Returns​

void

Inherited from​

ShapeNode.renderChildren

reparent()​

Call Signature​

reparent(newParent): void

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

Parameters​
newParent​

Node

Returns​

void

Inherited from​

ShapeNode.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​

ShapeNode.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​

ShapeNode.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​

ShapeNode.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​

ShapeNode.scaleTo

set()​

set(props): void

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

Parameters​

props​
bottomCenter?​

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

bottomLeft?​

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

bottomRight?​

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

center?​

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

children?​

Node<NodeProps> | Node<NodeProps>[] | (() => Node<NodeProps> | Node<NodeProps>[])

clip?​

boolean | (() => boolean | undefined)

When true, content drawn outside this shape's outline is clipped away.

colSpan?​

number | (() => number)

How many grid columns this child spans. Default 1.

column?​

number | (() => number)

1-based column index for explicit grid placement. Undefined = auto-placed.

d?​

PathData | (() => PathData)

effects?​

ChainableFx | (() => ChainableFx)

end?​

number | (() => number | undefined)

fill?​

ChainableFill | (() => ChainableFill | undefined)

Fill layer(s). Each item can be:

  • A plain CSS color string → treated as a solid fill
  • A fill prop object (SolidFillProp, LinearGradientFillProp, …)
  • An already-resolved fill object
  • A FillChain from the Fill builder (e.g. Fill.color('red'))
flex?​

number | (() => number)

Proportional share of the free space along the parent's main axis, relative to sibling fill children (like Flutter's Expanded(flex:)). Only meaningful when this node fills the main axis — in a row that's width:'fill', in a column height:'fill'. Two siblings with flex 2 and 1 split the free space 2:1. Defaults to 1. Specifying flex without an explicit width/height defaults both to 'fill'.

height?​

SizeInput | (() => SizeInput)

leftCenter?​

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

opacity?​

number | (() => number)

padding?​

PaddingProps | (() => PaddingProps)

Inner spacing between this node's edges and its content/children.

pivot?​

Vector2 | (() => Vector2)

Pivot point for rotation and scale. (0,0)=center, (-1,1)=top-left, (1,-1)=bottom-right. Set automatically when an anchor prop is used.

rightCenter?​

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

rotation?​

number | (() => number)

row?​

number | (() => number)

1-based row index for explicit grid placement. Undefined = auto-placed.

rowSpan?​

number | (() => number)

How many grid rows this child spans. Default 1.

scale?​

number | (() => number)

shadow?​

ShadowProp | ShadowProp[] | (() => ShadowProp | ShadowProp[] | undefined)

Shadow layer(s). fill inside each shadow accepts the same loose values as the top-level fill prop.

start?​

number | (() => number | undefined)

stroke?​

StrokeProp | StrokeProp[] | (() => StrokeProp | StrokeProp[] | undefined)

Stroke layer(s). fill inside each stroke accepts the same loose values as the top-level fill prop.

topCenter?​

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

topLeft?​

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

topRight?​

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

width?​

SizeInput | (() => SizeInput)

x?​

number | (() => number)

y?​

number | (() => number)

Returns​

void

Inherited from​

ShapeNode.set

tick()​

tick(time): void

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

Parameters​

time​

number

Returns​

void

Inherited from​

ShapeNode.tick

to()​

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

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

Parameters​

to​

Partial<P>

duration​

number

easing?​

EaseFunction

Returns​

AnimationBuilder<PathProps>

Inherited from​

ShapeNode.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​

ShapeNode.waveform