@revideo/2d

@revideo/2d / components / Spline

Class: Spline

Defined in: 2d/src/lib/components/Spline.ts:115 

A node for drawing a smooth line through a number of points.

Remarks

This node uses Bézier curves for drawing each segment of the spline.

Example

Defining knots using the points property. This will automatically calculate the handle positions for each knot do draw a smooth curve. You can control the smoothness of the resulting curve via the Spline.smoothness property:

<Spline
  lineWidth={4}
  stroke={'white'}
  smoothness={0.4}
  points={[
    [-400, 0],
    [-200, -300],
    [0, 0],
    [200, -300],
    [400, 0],
  ]}
/>

Defining knots with Knot nodes:

<Spline lineWidth={4} stroke={'white'}>
  <Knot position={[-400, 0]} />
  <Knot position={[-200, -300]} />
  <Knot
    position={[0, 0]}
    startHandle={[-100, 200]}
    endHandle={[100, 200]}
  />
  <Knot position={[200, -300]} />
  <Knot position={[400, 0]} />
</Spline>

Extends

• Curve

Constructors

Constructor

new Spline(props): Spline

Defined in: 2d/src/lib/components/Spline.ts:142 

Parameters

props

SplineProps

Returns

Spline

Overrides

Curve.constructor

Properties

absolutePosition

readonly absolutePosition: SimpleVector2Signal<Spline>

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

A helper signal for operating on the position in world space.

Remarks

Retrieving the position using this signal returns the position in world space. Similarly, setting the position using this signal transforms the new value to local space.

If the new value is a function, the position of this node will be continuously updated to always match the position returned by the function. This can be useful to “pin” the node in a specific place or to make it follow another node’s position.

Unlike position, this signal is not compound - it doesn’t contain separate signals for the x and y components.

Inherited from

Curve.absolutePosition

absoluteRotation

readonly absoluteRotation: SimpleSignal<number, Spline>

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

A helper signal for operating on the rotation in world space.

Remarks

Retrieving the rotation using this signal returns the rotation in world space. Similarly, setting the rotation using this signal transforms the new value to local space.

If the new value is a function, the rotation of this node will be continuously updated to always match the rotation returned by the function.

Inherited from

Curve.absoluteRotation

absoluteScale

readonly absoluteScale: SimpleVector2Signal<Spline>

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

A helper signal for operating on the scale in world space.

Remarks

Retrieving the scale using this signal returns the scale in world space. Similarly, setting the scale using this signal transforms the new value to local space.

If the new value is a function, the scale of this node will be continuously updated to always match the position returned by the function.

Unlike scale, this signal is not compound - it doesn’t contain separate signals for the x and y components.

Inherited from

Curve.absoluteScale

alignContent

readonly alignContent: SimpleSignal<FlexContent, Spline>

Defined in: 2d/src/lib/components/Layout.ts:246 

Inherited from

Curve.alignContent

alignItems

readonly alignItems: SimpleSignal<FlexItems, Spline>

Defined in: 2d/src/lib/components/Layout.ts:249 

Inherited from

Curve.alignItems

alignSelf

readonly alignSelf: SimpleSignal<FlexItems, Spline>

Defined in: 2d/src/lib/components/Layout.ts:252 

Inherited from

Curve.alignSelf

antialiased

readonly antialiased: SimpleSignal<boolean, Spline>

Defined in: 2d/src/lib/components/Shape.ts:55 

Inherited from

Curve.antialiased

arrowSize

readonly arrowSize: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Curve.ts:158 

Controls the size of the end and start arrows.

Remarks

To make the arrows visible make sure to enable startArrow and/or endArrow.

Inherited from

Curve.arrowSize

basis

readonly basis: SimpleSignal<FlexBasis, Spline>

Defined in: 2d/src/lib/components/Layout.ts:230 

Inherited from

Curve.basis

bottom

readonly bottom: SimpleVector2Signal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:562 

The position of the bottom edge of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the bottom edge ends up in the given place.

When retrieved, it will return the position of the bottom edge in the parent space.

Inherited from

Curve.bottom

bottomLeft

readonly bottomLeft: SimpleVector2Signal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:622 

The position of the bottom left corner of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the bottom left corner ends up in the given place.

When retrieved, it will return the position of the bottom left corner in the parent space.

Inherited from

Curve.bottomLeft

bottomRight

readonly bottomRight: SimpleVector2Signal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:634 

The position of the bottom right corner of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the bottom right corner ends up in the given place.

When retrieved, it will return the position of the bottom right corner in the parent space.

Inherited from

Curve.bottomRight

cache

readonly cache: SimpleSignal<boolean, Spline>

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

Inherited from

Curve.cache

cachePadding

readonly cachePadding: SpacingSignal<Spline>

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

Controls the padding of the cached canvas used by this node.

Remarks

By default, the size of the cache is determined based on the bounding box of the node and its children. That includes effects such as stroke or shadow. This property can be used to expand the cache area further. Usually used to account for custom effects created by shaders.

Inherited from

Curve.cachePadding

canHaveSubpath

protected canHaveSubpath: boolean = false

Defined in: 2d/src/lib/components/Curve.ts:160 

Inherited from

Curve.canHaveSubpath

children

readonly children: Signal<ComponentChildren, Node[], Spline>

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

Inherited from

Curve.children

clip

readonly clip: SimpleSignal<boolean, Spline>

Defined in: 2d/src/lib/components/Layout.ts:638 

Inherited from

Curve.clip

closed

readonly closed: SimpleSignal<boolean, Spline>

Defined in: 2d/src/lib/components/Curve.ts:63 

Whether the curve should be closed.

Remarks

Closed curves have their start and end points connected.

Inherited from

Curve.closed

composite

readonly composite: SimpleSignal<boolean, Spline>

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

Inherited from

Curve.composite

compositeOperation

readonly compositeOperation: SimpleSignal<GlobalCompositeOperation, Spline>

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

Inherited from

Curve.compositeOperation

creationStack?

readonly optional creationStack?: string

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

Inherited from

Curve.creationStack

direction

readonly direction: SimpleSignal<FlexDirection, Spline>

Defined in: 2d/src/lib/components/Layout.ts:227 

Inherited from

Curve.direction

element

element: HTMLElement

Defined in: 2d/src/lib/components/Layout.ts:640 

Inherited from

Curve.element

end

readonly end: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Curve.ts:121 

A percentage from the start after which the curve should be clipped.

Remarks

The portion of the curve that comes after the given percentage will be made invisible.

This property is usefully for animating the curve appearing on the screen. The value of 0 means the very start of the curve (accounting for the startOffset) while 1 means the very end (accounting for the endOffset).

Inherited from

Curve.end

endArrow

readonly endArrow: SimpleSignal<boolean, Spline>

Defined in: 2d/src/lib/components/Curve.ts:147 

Whether to display an arrow at the end of the visible curve.

Remarks

Use arrowSize to control the size of the arrow.

Inherited from

Curve.endArrow

endOffset

readonly endOffset: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Curve.ts:137 

The offset in pixels from the end of the curve.

Remarks

This property lets you specify where along the defined curve the actual visible portion ends. For example, setting it to 20 will make the last 20 pixels of the curve invisible.

This property is useful for trimming the curve using a fixed distance. If you want to animate the curve appearing on the screen, use end instead.

Inherited from

Curve.endOffset

fill

readonly fill: CanvasStyleSignal<Spline>

Defined in: 2d/src/lib/components/Shape.ts:32 

Inherited from

Curve.fill

filters

readonly filters: FiltersSignal<Spline>

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

Inherited from

Curve.filters

fontFamily

readonly fontFamily: SimpleSignal<string, Spline>

Defined in: 2d/src/lib/components/Layout.ts:265 

Inherited from

Curve.fontFamily

fontSize

readonly fontSize: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Layout.ts:268 

Inherited from

Curve.fontSize

fontStyle

readonly fontStyle: SimpleSignal<string, Spline>

Defined in: 2d/src/lib/components/Layout.ts:271 

Inherited from

Curve.fontStyle

fontWeight

readonly fontWeight: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Layout.ts:274 

Inherited from

Curve.fontWeight

gap

readonly gap: Vector2LengthSignal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:255 

Inherited from

Curve.gap

grow

readonly grow: SimpleSignal<number, Spline>

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

Inherited from

Curve.grow

hasSpawnedChildren

protected hasSpawnedChildren: boolean = false

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

Inherited from

Curve.hasSpawnedChildren

isClass

isClass: boolean

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

Inherited from

Curve.isClass

justifyContent

readonly justifyContent: SimpleSignal<FlexContent, Spline>

Defined in: 2d/src/lib/components/Layout.ts:243 

Inherited from

Curve.justifyContent

key

readonly key: string

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

Inherited from

Curve.key

layout

readonly layout: SimpleSignal<LayoutMode, Spline>

Defined in: 2d/src/lib/components/Layout.ts:201 

Inherited from

Curve.layout

left

readonly left: SimpleVector2Signal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:574 

The position of the left edge of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the left edge ends up in the given place.

When retrieved, it will return the position of the left edge in the parent space.

Inherited from

Curve.left

letterSpacing

readonly letterSpacing: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Layout.ts:280 

Inherited from

Curve.letterSpacing

lineCap

readonly lineCap: SimpleSignal<CanvasLineCap, Spline>

Defined in: 2d/src/lib/components/Shape.ts:46 

Inherited from

Curve.lineCap

lineDash

readonly lineDash: SimpleSignal<number[], Spline>

Defined in: 2d/src/lib/components/Shape.ts:49 

Inherited from

Curve.lineDash

lineDashOffset

readonly lineDashOffset: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Shape.ts:52 

Inherited from

Curve.lineDashOffset

lineHeight

readonly lineHeight: SimpleSignal<Length, Spline>

Defined in: 2d/src/lib/components/Layout.ts:277 

Inherited from

Curve.lineHeight

lineJoin

readonly lineJoin: SimpleSignal<CanvasLineJoin, Spline>

Defined in: 2d/src/lib/components/Shape.ts:43 

Inherited from

Curve.lineJoin

lineWidth

readonly lineWidth: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Shape.ts:40 

Inherited from

Curve.lineWidth

margin

readonly margin: SpacingSignal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:220 

Inherited from

Curve.margin

maxHeight

readonly maxHeight: SimpleSignal<LengthLimit, Spline>

Defined in: 2d/src/lib/components/Layout.ts:208 

Inherited from

Curve.maxHeight

maxWidth

readonly maxWidth: SimpleSignal<LengthLimit, Spline>

Defined in: 2d/src/lib/components/Layout.ts:205 

Inherited from

Curve.maxWidth

middle

readonly middle: SimpleVector2Signal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:537 

The position of the center of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the center ends up in the given place.

If the offset has not been changed, this will be the same as the position.

When retrieved, it will return the position of the center in the parent space.

Inherited from

Curve.middle

minHeight

readonly minHeight: SimpleSignal<LengthLimit, Spline>

Defined in: 2d/src/lib/components/Layout.ts:214 

Inherited from

Curve.minHeight

minWidth

readonly minWidth: SimpleSignal<LengthLimit, Spline>

Defined in: 2d/src/lib/components/Layout.ts:211 

Inherited from

Curve.minWidth

offset

readonly offset: Vector2Signal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:521 

Represents the offset of this node’s origin.

Remarks

By default, the origin of a node is located at its center. The origin serves as the pivot point when rotating and scaling a node, but it doesn’t affect the placement of its children.

The value is relative to the size of this node. A value of 1 means as far to the right/bottom as possible. Here are a few examples of offsets:

• [-1, -1] - top left corner
• [1, -1] - top right corner
• [0, 1] - bottom edge
• [-1, 1] - bottom left corner

Inherited from

Curve.offset

opacity

readonly opacity: SimpleSignal<number, Spline>

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

Represents the opacity of this node in the range 0-1.

Remarks

The value is clamped to the range 0-1.

Inherited from

Curve.opacity

padding

readonly padding: SpacingSignal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:223 

Inherited from

Curve.padding

parent

readonly parent: SimpleSignal<Node | null, void>

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

Inherited from

Curve.parent

points

readonly points: SimpleSignal<SignalValue<PossibleVector2>[] | null, Spline>

Defined in: 2d/src/lib/components/Spline.ts:137 

The knots of the spline as an array of knots with auto-calculated handles.

Remarks

You can control the smoothness of the resulting curve via the smoothness property.

position

readonly position: Vector2Signal<Spline>

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

Represents the position of this node in local space of its parent.

Example

Initializing the position:

// with a possible vector:
<Node position={[1, 2]} />
// with individual components:
<Node x={1} y={2} />

Accessing the position:

// retrieving the vector:
const position = node.position();
// retrieving an individual component:
const x = node.position.x();

Setting the position:

// with a possible vector:
node.position([1, 2]);
node.position(() => [1, 2]);
// with individual components:
node.position.x(1);
node.position.x(() => 1);

Inherited from

Curve.position

properties

readonly properties: Record<string, PropertyMetadata<any>>

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

Inherited from

Curve.properties

ratio

readonly ratio: SimpleSignal<number | null, Spline>

Defined in: 2d/src/lib/components/Layout.ts:217 

Inherited from

Curve.ratio

realChildren

protected realChildren: Node[] = []

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

Inherited from

Curve.realChildren

right

readonly right: SimpleVector2Signal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:586 

The position of the right edge of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the right edge ends up in the given place.

When retrieved, it will return the position of the right edge in the parent space.

Inherited from

Curve.right

rippleStrength

protected readonly rippleStrength: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Shape.ts:57 

Inherited from

Curve.rippleStrength

rotation

readonly rotation: SimpleSignal<number, Spline>

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

Represents the rotation (in degrees) of this node relative to its parent.

Inherited from

Curve.rotation

scale

readonly scale: Vector2Signal<Spline>

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

Represents the scale of this node in local space of its parent.

Example

Initializing the scale:

// with a possible vector:
<Node scale={[1, 2]} />
// with individual components:
<Node scaleX={1} scaleY={2} />

Accessing the scale:

// retrieving the vector:
const scale = node.scale();
// retrieving an individual component:
const scaleX = node.scale.x();

Setting the scale:

// with a possible vector:
node.scale([1, 2]);
node.scale(() => [1, 2]);
// with individual components:
node.scale.x(1);
node.scale.x(() => 1);

Inherited from

Curve.scale

shaders

readonly shaders: Signal<PossibleShaderConfig, ShaderConfig[], Spline>

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

Experimental

Inherited from

Curve.shaders

shadowBlur

readonly shadowBlur: SimpleSignal<number, Spline>

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

Inherited from

Curve.shadowBlur

shadowColor

readonly shadowColor: ColorSignal<Spline>

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

Inherited from

Curve.shadowColor

shadowOffset

readonly shadowOffset: Vector2Signal<Spline>

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

Inherited from

Curve.shadowOffset

shrink

readonly shrink: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Layout.ts:236 

Inherited from

Curve.shrink

size

readonly size: Vector2LengthSignal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:365 

Represents the size of this node.

Remarks

A size is a two-dimensional vector, where x represents the width, and y represents the height.

The value of both x and y is of type partials.Length which is either:

• number - the desired length in pixels
• ${number}% - a string with the desired length in percents, for example '50%'
• null - an automatic length

When retrieving the size, all units are converted to pixels, using the current state of the layout. For example, retrieving the width set to '50%', while the parent has a width of 200px will result in the number 100 being returned.

When the node is not part of the layout, setting its size using percents refers to the size of the entire scene.

Example

Initializing the size:

// with a possible vector:
<Node size={['50%', 200]} />
// with individual components:
<Node width={'50%'} height={200} />

Accessing the size:

// retrieving the vector:
const size = node.size();
// retrieving an individual component:
const width = node.size.x();

Setting the size:

// with a possible vector:
node.size(['50%', 200]);
node.size(() => ['50%', 200]);
// with individual components:
node.size.x('50%');
node.size.x(() => '50%');

Inherited from

Curve.size

sizeLockCounter

protected readonly sizeLockCounter: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Layout.ts:645 

Inherited from

Curve.sizeLockCounter

skew

readonly skew: Vector2Signal<Spline>

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

Represents the skew of this node in local space of its parent.

Example

Initializing the skew:

// with a possible vector:
<Node skew={[40, 20]} />
// with individual components:
<Node skewX={40} skewY={20} />

Accessing the skew:

// retrieving the vector:
const skew = node.skew();
// retrieving an individual component:
const skewX = node.skew.x();

Setting the skew:

// with a possible vector:
node.skew([40, 20]);
node.skew(() => [40, 20]);
// with individual components:
node.skew.x(40);
node.skew.x(() => 40);

Inherited from

Curve.skew

smoothness

readonly smoothness: SimpleSignal<number>

Defined in: 2d/src/lib/components/Spline.ts:126 

The smoothness of the spline when using auto-calculated handles.

Remarks

This property is only applied to knots that don’t use explicit handles.

Default Value

0.4

spawner

protected readonly spawner: SimpleSignal<ComponentChildren, Spline>

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

Deprecated

Use children instead.

Inherited from

Curve.spawner

start

readonly start: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Curve.ts:79 

A percentage from the start before which the curve should be clipped.

Remarks

The portion of the curve that comes before the given percentage will be made invisible.

This property is usefully for animating the curve appearing on the screen. The value of 0 means the very start of the curve (accounting for the startOffset) while 1 means the very end (accounting for the endOffset).

Inherited from

Curve.start

startArrow

readonly startArrow: SimpleSignal<boolean, Spline>

Defined in: 2d/src/lib/components/Curve.ts:105 

Whether to display an arrow at the start of the visible curve.

Remarks

Use arrowSize to control the size of the arrow.

Inherited from

Curve.startArrow

startOffset

readonly startOffset: SimpleSignal<number, Spline>

Defined in: 2d/src/lib/components/Curve.ts:95 

The offset in pixels from the start of the curve.

Remarks

This property lets you specify where along the defined curve the actual visible portion starts. For example, setting it to 20 will make the first 20 pixels of the curve invisible.

This property is useful for trimming the curve using a fixed distance. If you want to animate the curve appearing on the screen, use start instead.

Inherited from

Curve.startOffset

stroke

readonly stroke: CanvasStyleSignal<Spline>

Defined in: 2d/src/lib/components/Shape.ts:34 

Inherited from

Curve.stroke

strokeFirst

readonly strokeFirst: SimpleSignal<boolean, Spline>

Defined in: 2d/src/lib/components/Shape.ts:37 

Inherited from

Curve.strokeFirst

styles

styles: CSSStyleDeclaration

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

Inherited from

Curve.styles

textAlign

readonly textAlign: SimpleSignal<CanvasTextAlign, Spline>

Defined in: 2d/src/lib/components/Layout.ts:290 

Inherited from

Curve.textAlign

textDirection

readonly textDirection: SimpleSignal<CanvasDirection, Spline>

Defined in: 2d/src/lib/components/Layout.ts:287 

Inherited from

Curve.textDirection

textWrap

readonly textWrap: SimpleSignal<TextWrap, Spline>

Defined in: 2d/src/lib/components/Layout.ts:284 

Inherited from

Curve.textWrap

top

readonly top: SimpleVector2Signal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:550 

The position of the top edge of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the top edge ends up in the given place.

When retrieved, it will return the position of the top edge in the parent space.

Inherited from

Curve.top

topLeft

readonly topLeft: SimpleVector2Signal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:598 

The position of the top left corner of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the top left corner ends up in the given place.

When retrieved, it will return the position of the top left corner in the parent space.

Inherited from

Curve.topLeft

topRight

readonly topRight: SimpleVector2Signal<Spline>

Defined in: 2d/src/lib/components/Layout.ts:610 

The position of the top right corner of this node.

Remarks

When set, this shortcut property will modify the node’s position so that the top right corner ends up in the given place.

When retrieved, it will return the position of the top right corner in the parent space.

Inherited from

Curve.topRight

view2D

protected view2D: View2D

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

Inherited from

Curve.view2D

wrap

readonly wrap: SimpleSignal<FlexWrap, Spline>

Defined in: 2d/src/lib/components/Layout.ts:239 

Inherited from

Curve.wrap

zIndex

readonly zIndex: SimpleSignal<number, Spline>

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

Inherited from

Curve.zIndex

Accessors

columnGap

Get Signature

get columnGap(): Signal<Length, number, this>

Defined in: 2d/src/lib/components/Layout.ts:256 

Returns

Signal<Length, number, this>

Inherited from

Curve.columnGap

height

Get Signature

get height(): Signal<Length, number, this>

Defined in: 2d/src/lib/components/Layout.ts:369 

Returns

Signal<Length, number, this>

Inherited from

Curve.height

rowGap

Get Signature

get rowGap(): Signal<Length, number, this>

Defined in: 2d/src/lib/components/Layout.ts:259 

Returns

Signal<Length, number, this>

Inherited from

Curve.rowGap

width

Get Signature

get width(): Signal<Length, number, this>

Defined in: 2d/src/lib/components/Layout.ts:366 

Returns

Signal<Length, number, this>

Inherited from

Curve.width

x

Get Signature

get x(): SimpleSignal<number, this>

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

Returns

SimpleSignal<number, this>

Inherited from

Curve.x

y

Get Signature

get y(): SimpleSignal<number, this>

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

Returns

SimpleSignal<number, this>

Inherited from

Curve.y

Methods

[iterator]()

[iterator](): Generator<{ key: string; meta: PropertyMetadata<any>; signal: SimpleSignal<any>; }, void, unknown>

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

Returns

Generator<{ key: string; meta: PropertyMetadata<any>; signal: SimpleSignal<any>; }, void, unknown>

Inherited from

Curve.[iterator]

absoluteOpacity()

absoluteOpacity(): number

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

Returns

number

Inherited from

Curve.absoluteOpacity

add()

add(node): this

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

Add the given node(s) as the children of this node.

Parameters

node

ComponentChildren

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

Curve.add

anchorPosition()

anchorPosition(): Vector2

Defined in: 2d/src/lib/components/Layout.ts:666 

Returns

Vector2

Inherited from

Curve.anchorPosition

appendedToView()

protected appendedToView(): boolean

Defined in: 2d/src/lib/components/Layout.ts:770 

Returns

boolean

Inherited from

Curve.appendedToView

applyFlex()

protected applyFlex(): void

Defined in: 2d/src/lib/components/Layout.ts:926 

Returns

void

Inherited from

Curve.applyFlex

applyFont()

protected applyFont(): void

Defined in: 2d/src/lib/components/Layout.ts:970 

Returns

void

Inherited from

Curve.applyFont

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

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

Curve.applyState

applyStyle()

protected applyStyle(context): void

Defined in: 2d/src/lib/components/Shape.ts:73 

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Curve.applyStyle

applyText()

protected applyText(context): void

Defined in: 2d/src/lib/components/Shape.ts:68 

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Curve.applyText

arcLength()

arcLength(): number

Defined in: 2d/src/lib/components/Curve.ts:237 

The visible arc length of this curve.

Returns

number

Remarks

This arc length accounts for both the offset and the start and end properties.

Inherited from

Curve.arcLength

baseArcLength()

baseArcLength(): number

Defined in: 2d/src/lib/components/Curve.ts:211 

The base arc length of this curve.

Returns

number

Remarks

This is the entire length of this curve, not accounting for the offsets.

Inherited from

Curve.baseArcLength

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

Curve.cacheBBox

cacheCanvas()

protected cacheCanvas(): CanvasRenderingContext2D

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

Returns

CanvasRenderingContext2D

Inherited from

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

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

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

Curve.childrenAs

childrenBBox()

protected childrenBBox(): BBox

Defined in: 2d/src/lib/components/Spline.ts:193 

Returns

BBox

Overrides

Curve.childrenBBox

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

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

Curve.collectAsyncResources

completion()

completion(): number

Defined in: 2d/src/lib/components/Curve.ts:248 

The percentage of the curve that’s currently visible.

Returns

number

Remarks

The returned value is the ratio between the visible length (as defined by start and end) and the offset length of the curve.

Inherited from

Curve.completion

compositeRoot()

protected compositeRoot(): Node | null

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

Returns

Node | null

Inherited from

Curve.compositeRoot

compositeToLocal()

compositeToLocal(): DOMMatrix

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

Returns

DOMMatrix

Inherited from

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

Curve.compositeToWorld

computedPosition()

computedPosition(): Vector2

Defined in: 2d/src/lib/components/Layout.ts:730 

Returns

Vector2

Inherited from

Curve.computedPosition

computedSize()

protected computedSize(): Vector2

Defined in: 2d/src/lib/components/Layout.ts:750 

Returns

Vector2

Inherited from

Curve.computedSize

curveDrawingInfo()

protected curveDrawingInfo(): CurveDrawingInfo

Defined in: 2d/src/lib/components/Curve.ts:264 

Returns

CurveDrawingInfo

Inherited from

Curve.curveDrawingInfo

desiredSize()

protected desiredSize(): SerializedVector2<DesiredLength>

Defined in: 2d/src/lib/components/Spline.ts:217 

Get the desired size of this node.

Returns

SerializedVector2<DesiredLength>

Remarks

This method can be used to control the size using external factors. By default, the returned size is the same as the one declared by the user.

Overrides

Curve.desiredSize

dispose()

dispose(): void

Defined in: 2d/src/lib/components/Layout.ts:1035 

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

Curve.dispose

distanceToPercentage()

distanceToPercentage(value): number

Defined in: 2d/src/lib/components/Curve.ts:200 

Convert a distance along the curve to a percentage.

Parameters

value

number

The distance along the curve.

Returns

number

Remarks

The distance should be given in relation to the full curve, not accounting for startOffset and endOffset.

Inherited from

Curve.distanceToPercentage

draw()

protected draw(context): Promise<void>

Defined in: 2d/src/lib/components/Shape.ts:88 

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

Curve.draw

drawChildren()

protected drawChildren(context): Promise<void>

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

Parameters

context

CanvasRenderingContext2D

Returns

Promise<void>

Inherited from

Curve.drawChildren

drawOverlay()

drawOverlay(context, matrix): void

Defined in: 2d/src/lib/components/Spline.ts:234 

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.

Overrides

Curve.drawOverlay

drawRipple()

protected drawRipple(context): void

Defined in: 2d/src/lib/components/Shape.ts:126 

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Curve.drawRipple

drawShape()

protected drawShape(context): void

Defined in: 2d/src/lib/components/Curve.ts:412 

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Curve.drawShape

filterString()

protected filterString(): string

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

Returns

string

Inherited from

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

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

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

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

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

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

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

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

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

Curve.fullCacheBBox

getAbsolutePosition()

protected getAbsolutePosition(): Vector2

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

Returns

Vector2

Inherited from

Curve.getAbsolutePosition

getAbsoluteRotation()

protected getAbsoluteRotation(): number

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

Returns

number

Inherited from

Curve.getAbsoluteRotation

getAbsoluteScale()

protected getAbsoluteScale(): Vector2

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

Returns

Vector2

Inherited from

Curve.getAbsoluteScale

getCacheBBox()

protected getCacheBBox(): BBox

Defined in: 2d/src/lib/components/Curve.ts:378 

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

Curve.getCacheBBox

getChildren()

protected getChildren(): Node[]

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

Returns

Node[]

Inherited from

Curve.getChildren

getComputedLayout()

protected getComputedLayout(): BBox

Defined in: 2d/src/lib/components/Curve.ts:365 

Returns

BBox

Inherited from

Curve.getComputedLayout

getHeight()

protected getHeight(): number

Defined in: 2d/src/lib/components/Layout.ts:413 

Returns

number

Inherited from

Curve.getHeight

getOriginDelta()

getOriginDelta(origin): Vector2

Defined in: 2d/src/lib/components/Layout.ts:886 

Parameters

origin

Origin

Returns

Vector2

Inherited from

Curve.getOriginDelta

getPath()

protected getPath(): Path2D

Defined in: 2d/src/lib/components/Curve.ts:374 

Returns

Path2D

Inherited from

Curve.getPath

getPointAtDistance()

protected getPointAtDistance(value): CurvePoint

Defined in: 2d/src/lib/components/Curve.ts:357 

Parameters

value

number

Returns

CurvePoint

Inherited from

Curve.getPointAtDistance

getPointAtPercentage()

getPointAtPercentage(value): CurvePoint

Defined in: 2d/src/lib/components/Curve.ts:361 

Parameters

value

number

Returns

CurvePoint

Inherited from

Curve.getPointAtPercentage

getRipplePath()

protected getRipplePath(): Path2D

Defined in: 2d/src/lib/components/Shape.ts:122 

Returns

Path2D

Inherited from

Curve.getRipplePath

getSpawner()

protected getSpawner(): ComponentChildren

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

Returns

ComponentChildren

Inherited from

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

Curve.getState

getWidth()

protected getWidth(): number

Defined in: 2d/src/lib/components/Layout.ts:373 

Returns

number

Inherited from

Curve.getWidth

getX()

protected getX(): number

Defined in: 2d/src/lib/components/Layout.ts:292 

Returns

number

Inherited from

Curve.getX

getY()

protected getY(): number

Defined in: 2d/src/lib/components/Layout.ts:303 

Returns

number

Inherited from

Curve.getY

hasFilters()

protected hasFilters(): boolean

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

Returns

boolean

Inherited from

Curve.hasFilters

hasShadow()

protected hasShadow(): boolean

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

Returns

boolean

Inherited from

Curve.hasShadow

hit()

hit(position): Node | null

Defined in: 2d/src/lib/components/Layout.ts:1046 

Try to find a node intersecting the given position.

Parameters

position

Vector2

The searched position.

Returns

Node | null

Inherited from

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

ComponentChildren

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

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

Curve.instantiate

isLayoutRoot()

isLayoutRoot(): boolean

Defined in: 2d/src/lib/components/Layout.ts:688 

Returns

boolean

Inherited from

Curve.isLayoutRoot

knots()

knots(): KnotInfo[]

Defined in: 2d/src/lib/components/Spline.ts:171 

Returns

KnotInfo[]

layoutChildren()

protected layoutChildren(): Layout[]

Defined in: 2d/src/lib/components/Layout.ts:795 

Returns

Layout[]

Inherited from

Curve.layoutChildren

layoutEnabled()

layoutEnabled(): boolean

Defined in: 2d/src/lib/components/Layout.ts:683 

Get the resolved layout mode of this node.

Returns

boolean

Remarks

When the mode is null, its value will be inherited from the parent.

Use layout to get the raw mode set for this node (without inheritance).

Inherited from

Curve.layoutEnabled

lineWidthCoefficient()

protected lineWidthCoefficient(): number

Defined in: 2d/src/lib/components/Spline.ts:200 

Returns

number

Overrides

Curve.lineWidthCoefficient

localToParent()

localToParent(): DOMMatrix

Defined in: 2d/src/lib/components/Layout.ts:692 

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

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

Curve.localToWorld

lockSize()

lockSize(): void

Defined in: 2d/src/lib/components/Layout.ts:652 

Returns

void

Inherited from

Curve.lockSize

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

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

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

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

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

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

Curve.moveDown

moveOffset()

moveOffset(offset): void

Defined in: 2d/src/lib/components/Layout.ts:903 

Update the offset of this node and adjust the position to keep it in the same place.

Parameters

offset

Vector2

The new offset.

Returns

void

Inherited from

Curve.moveOffset

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

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

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

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

Curve.moveUp

offsetArcLength()

offsetArcLength(): number

Defined in: 2d/src/lib/components/Curve.ts:222 

The offset arc length of this curve.

Returns

number

Remarks

This is the length of the curve that accounts for the offsets.

Inherited from

Curve.offsetArcLength

offsetComputedLayout()

protected offsetComputedLayout(box): BBox

Defined in: 2d/src/lib/components/Spline.ts:221 

Parameters

box

BBox

Returns

BBox

Overrides

Curve.offsetComputedLayout

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

Curve.parentAs

parentTransform()

protected parentTransform(): Layout | null

Defined in: 2d/src/lib/components/Layout.ts:661 

Returns

Layout | null

Inherited from

Curve.parentTransform

parentWorldSpaceCacheBBox()

protected parentWorldSpaceCacheBBox(): BBox

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

Returns

BBox

Inherited from

Curve.parentWorldSpaceCacheBBox

parseChildren()

protected parseChildren(children): Node[]

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

Parse any ComponentChildren into an array of nodes.

Parameters

children

ComponentChildren

The children to parse.

Returns

Node[]

Inherited from

Curve.parseChildren

parseLength()

protected parseLength(value): string

Defined in: 2d/src/lib/components/Layout.ts:915 

Parameters

value

string | number | null

Returns

string

Inherited from

Curve.parseLength

parsePixels()

protected parsePixels(value): string

Defined in: 2d/src/lib/components/Layout.ts:911 

Parameters

value

number | null

Returns

string

Inherited from

Curve.parsePixels

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

Curve.peekChildren

percentageToDistance()

percentageToDistance(value): number

Defined in: 2d/src/lib/components/Curve.ts:183 

Convert a percentage along the curve to a distance.

Parameters

value

number

The percentage along the curve.

Returns

number

Remarks

The returned distance is given in relation to the full curve, not accounting for startOffset and endOffset.

Inherited from

Curve.percentageToDistance

processSubpath()

protected processSubpath(_path, _startPoint, _endPoint): void

Defined in: 2d/src/lib/components/Curve.ts:252 

Parameters

_path

Path2D

_startPoint

Vector2 | null

_endPoint

Vector2 | null

Returns

void

Inherited from

Curve.processSubpath

profile()

profile(): CurveProfile

Defined in: 2d/src/lib/components/Spline.ts:162 

Returns

CurveProfile

Overrides

Curve.profile

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

Curve.reactiveClone

releaseSize()

releaseSize(): void

Defined in: 2d/src/lib/components/Layout.ts:656 

Returns

void

Inherited from

Curve.releaseSize

remove()

remove(): this

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

Remove this node from the tree.

Returns

this

Inherited from

Curve.remove

removeChild()

protected removeChild(child): void

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

Remove the given child.

Parameters

child

Node

Returns

void

Inherited from

Curve.removeChild

removeChildren()

removeChildren(): void

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

Remove all children of this node.

Returns

void

Inherited from

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

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

Curve.renderFromSource

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

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

Curve.reparent

requestFontUpdate()

protected requestFontUpdate(): void

Defined in: 2d/src/lib/components/Layout.ts:819 

Apply any new font changes to this node and all of its ancestors.

Returns

void

Inherited from

Curve.requestFontUpdate

requestLayoutUpdate()

protected requestLayoutUpdate(): void

Defined in: 2d/src/lib/components/Layout.ts:759 

Find the closest layout root and apply any new layout changes.

Returns

void

Inherited from

Curve.requestLayoutUpdate

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

Curve.requiresCache

requiresProfile()

protected requiresProfile(): boolean

Defined in: 2d/src/lib/components/Curve.ts:401 

Check if the path requires a profile.

Returns

boolean

Remarks

The profile is only required if certain features are used. Otherwise, the profile generation can be skipped, and the curve can be drawn directly using the 2D context.

Inherited from

Curve.requiresProfile

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

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

Curve.restore

ripple()

ripple(duration?): Generator<void | ThreadGenerator | Promise<any> | Promisable<any>, void, any>

Defined in: 2d/src/lib/components/Shape.ts:138 

Parameters

duration?

number = 1

Returns

Generator<void | ThreadGenerator | Promise<any> | Promisable<any>, void, any>

Inherited from

Curve.ripple

rippleSize()

protected rippleSize(): number

Defined in: 2d/src/lib/components/Shape.ts:60 

Returns

number

Inherited from

Curve.rippleSize

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

Curve.save

setAbsolutePosition()

protected setAbsolutePosition(value): void

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

Parameters

value

SignalValue<PossibleVector2>

Returns

void

Inherited from

Curve.setAbsolutePosition

setAbsoluteRotation()

protected setAbsoluteRotation(value): void

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

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Curve.setAbsoluteRotation

setAbsoluteScale()

protected setAbsoluteScale(value): void

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

Parameters

value

SignalValue<PossibleVector2>

Returns

void

Inherited from

Curve.setAbsoluteScale

setChildren()

protected setChildren(value): void

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

Parameters

value

SignalValue<ComponentChildren>

Returns

void

Inherited from

Curve.setChildren

setHeight()

protected setHeight(value): void

Defined in: 2d/src/lib/components/Layout.ts:416 

Parameters

value

SignalValue<Length>

Returns

void

Inherited from

Curve.setHeight

setParsedChildren()

protected setParsedChildren(value): void

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

Set the children without parsing them.

Parameters

value

Node[]

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

Curve.setParsedChildren

setSpawner()

protected setSpawner(value): void

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

Parameters

value

SignalValue<ComponentChildren>

Returns

void

Inherited from

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

Curve.setupDrawFromCache

setWidth()

protected setWidth(value): void

Defined in: 2d/src/lib/components/Layout.ts:376 

Parameters

value

SignalValue<Length>

Returns

void

Inherited from

Curve.setWidth

setX()

protected setX(value): void

Defined in: 2d/src/lib/components/Layout.ts:299 

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Curve.setX

setY()

protected setY(value): void

Defined in: 2d/src/lib/components/Layout.ts:310 

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Curve.setY

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

Curve.snapshotClone

sortedChildren()

protected sortedChildren(): Node[]

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

Returns

Node[]

Inherited from

Curve.sortedChildren

spawnChildren()

protected spawnChildren(reactive, children): void

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

Parameters

reactive

boolean

children

ComponentChildren

Returns

void

Inherited from

Curve.spawnChildren

spawnedChildren()

protected spawnedChildren(): Node[]

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

Returns

Node[]

Inherited from

Curve.spawnedChildren

toPromise()

toPromise(): Promise<Spline>

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

Wait for any asynchronous resources that this node or its children have.

Returns

Promise<Spline>

Remarks

Certain resources like images are always loaded asynchronously. Awaiting this method makes sure that all such resources are done loading before continuing the animation.

Inherited from

Curve.toPromise

transformContext()

protected transformContext(context): void

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

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Curve.transformContext

tweenCompositeOperation()

protected tweenCompositeOperation(value, time, timingFunction): Generator<void | ThreadGenerator | Promise<any> | Promisable<any>, void, any>

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

Parameters

value

SignalValue<GlobalCompositeOperation>

time

number

timingFunction

TimingFunction

Returns

Generator<void | ThreadGenerator | Promise<any> | Promisable<any>, void, any>

Inherited from

Curve.tweenCompositeOperation

tweenHeight()

protected tweenHeight(value, time, timingFunction, interpolationFunction): ThreadGenerator

Defined in: 2d/src/lib/components/Layout.ts:421 

Parameters

value

SignalValue<Length>

time

number

timingFunction

TimingFunction

interpolationFunction

InterpolationFunction<Length>

Returns

ThreadGenerator

Inherited from

Curve.tweenHeight

tweenSize()

protected tweenSize(value, time, timingFunction, interpolationFunction): ThreadGenerator

Defined in: 2d/src/lib/components/Layout.ts:470 

Parameters

value

SignalValue<SerializedVector2<Length>>

time

number

timingFunction

TimingFunction

interpolationFunction

InterpolationFunction<Vector2>

Returns

ThreadGenerator

Inherited from

Curve.tweenSize

tweenWidth()

protected tweenWidth(value, time, timingFunction, interpolationFunction): ThreadGenerator

Defined in: 2d/src/lib/components/Layout.ts:381 

Parameters

value

SignalValue<Length>

time

number

timingFunction

TimingFunction

interpolationFunction

InterpolationFunction<Length>

Returns

ThreadGenerator

Inherited from

Curve.tweenWidth

updateLayout()

protected updateLayout(): void

Defined in: 2d/src/lib/components/Layout.ts:783 

Apply any new layout changes to this node and its children.

Returns

void

Inherited from

Curve.updateLayout

view()

view(): View2D

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

Returns

View2D

Inherited from

Curve.view

worldSpaceCacheBBox()

protected worldSpaceCacheBBox(): BBox

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

Get a bounding box in world space for the contents rendered by this node as well as its children.

Returns

BBox

Remarks

This is the same the bounding box returned by cacheBBox only transformed to world space.

Inherited from

Curve.worldSpaceCacheBBox

worldToLocal()

worldToLocal(): DOMMatrix

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

Get the world-to-local matrix for this node.

Returns

DOMMatrix

Remarks

This matrix transforms vectors from world space to local space of this node.

Example

Calculate the position relative to this node for a point located in the top-left corner of the screen:

const world = new Vector2(0, 0);
const local = transformVectorAsPoint(world, node.worldToLocal());

Inherited from

Curve.worldToLocal

worldToParent()

worldToParent(): DOMMatrix

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

Get the world-to-parent matrix for this node.

Returns

DOMMatrix

Remarks

This matrix transforms vectors from world space to local space of this node’s parent.

Inherited from

Curve.worldToParent