Skip to Content
DocumentationAPI Reference2DComponentsClassesClass: Img

@revideo/2d

@revideo/2d / components / Img

Class: Img

Defined in: 2d/src/lib/components/Img.ts:90 

A node for displaying images.

Preview

Press play to preview the animation
import {Img} from '@revideo/2d';
import {all, waitFor} from '@revideo/core';
import {createRef} from '@revideo/core';
import {makeScene2D} from '@revideo/2d';
 
export default makeScene2D('scene', function* (view) {
  const ref = createRef<Img>();
  yield view.add(
    <Img
      ref={ref}
      src="https://images.unsplash.com/photo-1679218407381-a6f1660d60e9"
      width={300}
      radius={20}
    />,
  );
 
  // set the background using the color sampled from the image:
  ref().fill(ref().getColorAtPoint(0));
 
  yield* all(
    ref().size([100, 100], 1).to([300, null], 1),
    ref().radius(50, 1).to(20, 1),
    ref().alpha(0, 1).to(1, 1),
  );
  yield* waitFor(0.5);
});

Extends

Extended by

Constructors

Constructor

new Img(props): Img

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

Parameters

props

ImgProps

Returns

Img

Overrides

Rect.constructor

Properties

absolutePosition

readonly absolutePosition: SimpleVector2Signal<Img>

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

Rect.absolutePosition

absoluteRotation

readonly absoluteRotation: SimpleSignal<number, Img>

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

Rect.absoluteRotation

absoluteScale

readonly absoluteScale: SimpleVector2Signal<Img>

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

Rect.absoluteScale

alignContent

readonly alignContent: SimpleSignal<FlexContent, Img>

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

Inherited from

Rect.alignContent

alignItems

readonly alignItems: SimpleSignal<FlexItems, Img>

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

Inherited from

Rect.alignItems

alignSelf

readonly alignSelf: SimpleSignal<FlexItems, Img>

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

Inherited from

Rect.alignSelf

alpha

readonly alpha: SimpleSignal<number, Img>

Defined in: 2d/src/lib/components/Img.ts:132 

The alpha value of this image.

Remarks

Unlike opacity, the alpha value affects only the image itself, leaving the fill, stroke, and children intact.

antialiased

readonly antialiased: SimpleSignal<boolean, Img>

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

Inherited from

Rect.antialiased

arrowSize

readonly arrowSize: SimpleSignal<number, Img>

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

Rect.arrowSize

basis

readonly basis: SimpleSignal<FlexBasis, Img>

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

Inherited from

Rect.basis

bottom

readonly bottom: SimpleVector2Signal<Img>

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

Rect.bottom

bottomLeft

readonly bottomLeft: SimpleVector2Signal<Img>

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

Rect.bottomLeft

bottomRight

readonly bottomRight: SimpleVector2Signal<Img>

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

Rect.bottomRight

cache

readonly cache: SimpleSignal<boolean, Img>

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

Inherited from

Rect.cache

cachePadding

readonly cachePadding: SpacingSignal<Img>

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

Rect.cachePadding

canHaveSubpath

protected canHaveSubpath: boolean = false

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

Inherited from

Rect.canHaveSubpath

children

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

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

Inherited from

Rect.children

clip

readonly clip: SimpleSignal<boolean, Img>

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

Inherited from

Rect.clip

closed

readonly closed: SimpleSignal<boolean, Img>

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

Rect.closed

composite

readonly composite: SimpleSignal<boolean, Img>

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

Inherited from

Rect.composite

compositeOperation

readonly compositeOperation: SimpleSignal<GlobalCompositeOperation, Img>

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

Inherited from

Rect.compositeOperation

cornerSharpness

readonly cornerSharpness: SimpleSignal<number, Img>

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

Controls the sharpness of smoothCorners.

Remarks

This property only affects the way rounded corners are drawn. To control the corner radius use the radius property.

Requires smoothCorners to be enabled to have any effect. By default, corner sharpness is set to 0.6 which represents a smooth, circle-like rounding. At 0 the edges are squared off.

Example

<Rect
  size={300}
  smoothCorners={true}
  cornerSharpness={0.7}
/>

Inherited from

Rect.cornerSharpness

creationStack?

readonly optional creationStack?: string

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

Inherited from

Rect.creationStack

direction

readonly direction: SimpleSignal<FlexDirection, Img>

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

Inherited from

Rect.direction

element

element: HTMLElement

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

Inherited from

Rect.element

end

readonly end: SimpleSignal<number, Img>

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

Rect.end

endArrow

readonly endArrow: SimpleSignal<boolean, Img>

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

Rect.endArrow

endOffset

readonly endOffset: SimpleSignal<number, Img>

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

Rect.endOffset

fill

readonly fill: CanvasStyleSignal<Img>

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

Inherited from

Rect.fill

filters

readonly filters: FiltersSignal<Img>

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

Inherited from

Rect.filters

fontFamily

readonly fontFamily: SimpleSignal<string, Img>

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

Inherited from

Rect.fontFamily

fontSize

readonly fontSize: SimpleSignal<number, Img>

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

Inherited from

Rect.fontSize

fontStyle

readonly fontStyle: SimpleSignal<string, Img>

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

Inherited from

Rect.fontStyle

fontWeight

readonly fontWeight: SimpleSignal<number, Img>

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

Inherited from

Rect.fontWeight

gap

readonly gap: Vector2LengthSignal<Img>

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

Inherited from

Rect.gap

grow

readonly grow: SimpleSignal<number, Img>

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

Inherited from

Rect.grow

hasSpawnedChildren

protected hasSpawnedChildren: boolean = false

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

Inherited from

Rect.hasSpawnedChildren

isClass

isClass: boolean

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

Inherited from

Rect.isClass

justifyContent

readonly justifyContent: SimpleSignal<FlexContent, Img>

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

Inherited from

Rect.justifyContent

key

readonly key: string

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

Inherited from

Rect.key

layout

readonly layout: SimpleSignal<LayoutMode, Img>

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

Inherited from

Rect.layout

left

readonly left: SimpleVector2Signal<Img>

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

Rect.left

letterSpacing

readonly letterSpacing: SimpleSignal<number, Img>

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

Inherited from

Rect.letterSpacing

lineCap

readonly lineCap: SimpleSignal<CanvasLineCap, Img>

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

Inherited from

Rect.lineCap

lineDash

readonly lineDash: SimpleSignal<number[], Img>

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

Inherited from

Rect.lineDash

lineDashOffset

readonly lineDashOffset: SimpleSignal<number, Img>

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

Inherited from

Rect.lineDashOffset

lineHeight

readonly lineHeight: SimpleSignal<Length, Img>

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

Inherited from

Rect.lineHeight

lineJoin

readonly lineJoin: SimpleSignal<CanvasLineJoin, Img>

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

Inherited from

Rect.lineJoin

lineWidth

readonly lineWidth: SimpleSignal<number, Img>

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

Inherited from

Rect.lineWidth

margin

readonly margin: SpacingSignal<Img>

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

Inherited from

Rect.margin

maxHeight

readonly maxHeight: SimpleSignal<LengthLimit, Img>

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

Inherited from

Rect.maxHeight

maxWidth

readonly maxWidth: SimpleSignal<LengthLimit, Img>

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

Inherited from

Rect.maxWidth

middle

readonly middle: SimpleVector2Signal<Img>

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

Rect.middle

minHeight

readonly minHeight: SimpleSignal<LengthLimit, Img>

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

Inherited from

Rect.minHeight

minWidth

readonly minWidth: SimpleSignal<LengthLimit, Img>

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

Inherited from

Rect.minWidth

offset

readonly offset: Vector2Signal<Img>

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

Rect.offset

opacity

readonly opacity: SimpleSignal<number, Img>

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

Rect.opacity

padding

readonly padding: SpacingSignal<Img>

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

Inherited from

Rect.padding

parent

readonly parent: SimpleSignal<Node | null, void>

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

Inherited from

Rect.parent

position

readonly position: Vector2Signal<Img>

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

Rect.position

properties

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

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

Inherited from

Rect.properties

radius

readonly radius: SpacingSignal<Img>

Defined in: 2d/src/lib/components/Rect.ts:75 

Rounds the corners of this rectangle.

Remarks

The value represents the radius of the quarter circle that is used to round the corners. If the value is a number, the same radius is used for all corners. Passing an array of two to four numbers will set individual radii for each corner. Individual radii correspond to different corners depending on the number of values passed:

// top-left-and-bottom-right | top-right-and-bottom-left
[10, 30]
// top-left | top-right-and-bottom-left | bottom-right
[10, 20, 30]
// top-left | top-right | bottom-right | bottom-left
[10, 20, 30, 40]

Examples

One uniform radius:

<Rect
  size={320}
  radius={40}
  fill={'white'}
/>

Individual radii for each corner:

<Rect
  size={320}
  radius={[10, 20, 30, 40]}
  fill={'white'}
/>

Inherited from

Rect.radius

ratio

readonly ratio: SimpleSignal<number | null, Img>

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

Inherited from

Rect.ratio

realChildren

protected realChildren: Node[] = []

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

Inherited from

Rect.realChildren

readonly right: SimpleVector2Signal<Img>

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

Rect.right

rippleStrength

protected readonly rippleStrength: SimpleSignal<number, Img>

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

Inherited from

Rect.rippleStrength

rotation

readonly rotation: SimpleSignal<number, Img>

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

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

Inherited from

Rect.rotation

scale

readonly scale: Vector2Signal<Img>

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

Rect.scale

shaders

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

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

Experimental

Inherited from

Rect.shaders

shadowBlur

readonly shadowBlur: SimpleSignal<number, Img>

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

Inherited from

Rect.shadowBlur

shadowColor

readonly shadowColor: ColorSignal<Img>

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

Inherited from

Rect.shadowColor

shadowOffset

readonly shadowOffset: Vector2Signal<Img>

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

Inherited from

Rect.shadowOffset

shrink

readonly shrink: SimpleSignal<number, Img>

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

Inherited from

Rect.shrink

size

readonly size: Vector2LengthSignal<Img>

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

Rect.size

sizeLockCounter

protected readonly sizeLockCounter: SimpleSignal<number, Img>

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

Inherited from

Rect.sizeLockCounter

skew

readonly skew: Vector2Signal<Img>

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

Rect.skew

smoothCorners

readonly smoothCorners: SimpleSignal<boolean, Img>

Defined in: 2d/src/lib/components/Rect.ts:102 

Enables corner smoothing.

Remarks

This property only affects the way rounded corners are drawn. To control the corner radius use the radius property.

When enabled, rounded corners are drawn continuously using Bézier curves rather than quarter circles. The sharpness of the curve can be controlled with cornerSharpness.

You can read more about corner smoothing in this article by Nick Lawrence .

Example

<Rect
  width={300}
  height={300}
  smoothCorners={true}
/>

Inherited from

Rect.smoothCorners

smoothing

readonly smoothing: SimpleSignal<boolean, Img>

Defined in: 2d/src/lib/components/Img.ts:145 

Whether the image should be smoothed.

Remarks

When disabled, the image will be scaled using the nearest neighbor interpolation with no smoothing. The resulting image will appear pixelated.

Default Value

true

spawner

protected readonly spawner: SimpleSignal<ComponentChildren, Img>

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

Deprecated

Use children instead.

Inherited from

Rect.spawner

src

readonly src: SimpleSignal<string, Img>

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

The source of this image.

Example

Using a local image:

import image from './example.png';
// ...
view.add(<Img src={image} />)

Loading an image from the internet:

view.add(<Img src="https://example.com/image.png" />)

start

readonly start: SimpleSignal<number, Img>

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

Rect.start

startArrow

readonly startArrow: SimpleSignal<boolean, Img>

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

Rect.startArrow

startOffset

readonly startOffset: SimpleSignal<number, Img>

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

Rect.startOffset

stroke

readonly stroke: CanvasStyleSignal<Img>

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

Inherited from

Rect.stroke

strokeFirst

readonly strokeFirst: SimpleSignal<boolean, Img>

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

Inherited from

Rect.strokeFirst

styles

styles: CSSStyleDeclaration

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

Inherited from

Rect.styles

textAlign

readonly textAlign: SimpleSignal<CanvasTextAlign, Img>

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

Inherited from

Rect.textAlign

textDirection

readonly textDirection: SimpleSignal<CanvasDirection, Img>

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

Inherited from

Rect.textDirection

textWrap

readonly textWrap: SimpleSignal<TextWrap, Img>

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

Inherited from

Rect.textWrap

top

readonly top: SimpleVector2Signal<Img>

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

Rect.top

topLeft

readonly topLeft: SimpleVector2Signal<Img>

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

Rect.topLeft

topRight

readonly topRight: SimpleVector2Signal<Img>

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

Rect.topRight

view2D

protected view2D: View2D

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

Inherited from

Rect.view2D

wrap

readonly wrap: SimpleSignal<FlexWrap, Img>

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

Inherited from

Rect.wrap

zIndex

readonly zIndex: SimpleSignal<number, Img>

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

Inherited from

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

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

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

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

Rect.width

x

Get Signature

get x(): SimpleSignal<number, this>

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

Returns

SimpleSignal<number, this>

Inherited from

Rect.x

y

Get Signature

get y(): SimpleSignal<number, this>

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

Returns

SimpleSignal<number, this>

Inherited from

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

Rect.[iterator]

absoluteOpacity()

absoluteOpacity(): number

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

Returns

number

Inherited from

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

Rect.add

anchorPosition()

anchorPosition(): Vector2

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

Returns

Vector2

Inherited from

Rect.anchorPosition

appendedToView()

protected appendedToView(): boolean

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

Returns

boolean

Inherited from

Rect.appendedToView

applyFlex()

protected applyFlex(): void

Defined in: 2d/src/lib/components/Img.ts:260 

Returns

void

Overrides

Rect.applyFlex

applyFont()

protected applyFont(): void

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

Returns

void

Inherited from

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

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

Rect.applyState

applyStyle()

protected applyStyle(context): void

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

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Rect.applyStyle

applyText()

protected applyText(context): void

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

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

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

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

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

Rect.cacheBBox

cacheCanvas()

protected cacheCanvas(): CanvasRenderingContext2D

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

Returns

CanvasRenderingContext2D

Inherited from

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

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

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

Rect.childrenAs

childrenBBox()

protected childrenBBox(): BBox

Defined in: 2d/src/lib/components/Rect.ts:153 

Returns

BBox

Inherited from

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

Rect.clone

collectAsyncResources()

protected collectAsyncResources(): void

Defined in: 2d/src/lib/components/Img.ts:315 

Collect all asynchronous resources used by this node.

Returns

void

Overrides

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

Rect.completion

compositeRoot()

protected compositeRoot(): Node | null

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

Returns

Node | null

Inherited from

Rect.compositeRoot

compositeToLocal()

compositeToLocal(): DOMMatrix

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

Returns

DOMMatrix

Inherited from

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

Rect.compositeToWorld

computedPosition()

computedPosition(): Vector2

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

Returns

Vector2

Inherited from

Rect.computedPosition

computedSize()

protected computedSize(): Vector2

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

Returns

Vector2

Inherited from

Rect.computedSize

curveDrawingInfo()

protected curveDrawingInfo(): CurveDrawingInfo

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

Returns

CurveDrawingInfo

Inherited from

Rect.curveDrawingInfo

desiredSize()

protected desiredSize(): SerializedVector2<DesiredLength>

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

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

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

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

Rect.distanceToPercentage

draw()

protected draw(context): Promise<void>

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

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.

Overrides

Rect.draw

drawChildren()

protected drawChildren(context): Promise<void>

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

Parameters

context

CanvasRenderingContext2D

Returns

Promise<void>

Inherited from

Rect.drawChildren

drawOverlay()

drawOverlay(context, matrix): void

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

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.

Inherited from

Rect.drawOverlay

drawRipple()

protected drawRipple(context): void

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

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Rect.drawRipple

drawShape()

protected drawShape(context): void

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

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Rect.drawShape

filledImageCanvas()

protected filledImageCanvas(): CanvasRenderingContext2D

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

Returns

CanvasRenderingContext2D

filterString()

protected filterString(): string

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

Returns

string

Inherited from

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

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

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

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

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

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

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

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

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

Rect.fullCacheBBox

getAbsolutePosition()

protected getAbsolutePosition(): Vector2

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

Returns

Vector2

Inherited from

Rect.getAbsolutePosition

getAbsoluteRotation()

protected getAbsoluteRotation(): number

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

Returns

number

Inherited from

Rect.getAbsoluteRotation

getAbsoluteScale()

protected getAbsoluteScale(): Vector2

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

Returns

Vector2

Inherited from

Rect.getAbsoluteScale

getCacheBBox()

protected getCacheBBox(): BBox

Defined in: 2d/src/lib/components/Rect.ts:172 

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

Rect.getCacheBBox

getChildren()

protected getChildren(): Node[]

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

Returns

Node[]

Inherited from

Rect.getChildren

getColorAtPoint()

getColorAtPoint(position): Color

Defined in: 2d/src/lib/components/Img.ts:273 

Get color of the image at the given position.

Parameters

position

PossibleVector2

The position in local space at which to sample the color.

Returns

Color

getComputedLayout()

protected getComputedLayout(): BBox

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

Returns

BBox

Inherited from

Rect.getComputedLayout

getHeight()

protected getHeight(): number

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

Returns

number

Inherited from

Rect.getHeight

getOriginDelta()

getOriginDelta(origin): Vector2

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

Parameters

origin

Origin

Returns

Vector2

Inherited from

Rect.getOriginDelta

getPath()

protected getPath(): Path2D

Defined in: 2d/src/lib/components/Rect.ts:157 

Returns

Path2D

Inherited from

Rect.getPath

getPixelColor()

getPixelColor(position): Color

Defined in: 2d/src/lib/components/Img.ts:302 

Get color of the image at the given pixel.

Parameters

position

PossibleVector2

The pixel’s position.

Returns

Color

getPointAtDistance()

protected getPointAtDistance(value): CurvePoint

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

Parameters

value

number

Returns

CurvePoint

Inherited from

Rect.getPointAtDistance

getPointAtPercentage()

getPointAtPercentage(value): CurvePoint

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

Parameters

value

number

Returns

CurvePoint

Inherited from

Rect.getPointAtPercentage

getRipplePath()

protected getRipplePath(): Path2D

Defined in: 2d/src/lib/components/Rect.ts:176 

Returns

Path2D

Inherited from

Rect.getRipplePath

getSpawner()

protected getSpawner(): ComponentChildren

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

Returns

ComponentChildren

Inherited from

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

Rect.getState

getWidth()

protected getWidth(): number

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

Returns

number

Inherited from

Rect.getWidth

getX()

protected getX(): number

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

Returns

number

Inherited from

Rect.getX

getY()

protected getY(): number

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

Returns

number

Inherited from

Rect.getY

hasFilters()

protected hasFilters(): boolean

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

Returns

boolean

Inherited from

Rect.hasFilters

hasShadow()

protected hasShadow(): boolean

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

Returns

boolean

Inherited from

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

Rect.hit

image()

protected image(): HTMLImageElement

Defined in: 2d/src/lib/components/Img.ts:172 

Returns

HTMLImageElement

imageCanvas()

protected imageCanvas(): CanvasRenderingContext2D

Defined in: 2d/src/lib/components/Img.ts:215 

Returns

CanvasRenderingContext2D

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

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

Rect.instantiate

isLayoutRoot()

isLayoutRoot(): boolean

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

Returns

boolean

Inherited from

Rect.isLayoutRoot

layoutChildren()

protected layoutChildren(): Layout[]

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

Returns

Layout[]

Inherited from

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

Rect.layoutEnabled

lineWidthCoefficient()

protected lineWidthCoefficient(): number

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

Returns

number

Inherited from

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

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

Rect.localToWorld

lockSize()

lockSize(): void

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

Returns

void

Inherited from

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

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

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

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

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

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

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

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

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

Rect.moveUp

naturalSize()

naturalSize(): Vector2

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

The natural size of this image.

Returns

Vector2

Remarks

The natural size is the size of the source image unaffected by the size and scale properties.

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

Rect.offsetArcLength

offsetComputedLayout()

protected offsetComputedLayout(box): BBox

Defined in: 2d/src/lib/components/Rect.ts:149 

Parameters

box

BBox

Returns

BBox

Inherited from

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

Rect.parentAs

parentTransform()

protected parentTransform(): Layout | null

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

Returns

Layout | null

Inherited from

Rect.parentTransform

parentWorldSpaceCacheBBox()

protected parentWorldSpaceCacheBBox(): BBox

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

Returns

BBox

Inherited from

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

Rect.parseChildren

parseLength()

protected parseLength(value): string

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

Parameters

value

string | number | null

Returns

string

Inherited from

Rect.parseLength

parsePixels()

protected parsePixels(value): string

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

Parameters

value

number | null

Returns

string

Inherited from

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

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

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

Rect.processSubpath

profile()

profile(): CurveProfile

Defined in: 2d/src/lib/components/Rect.ts:133 

Returns

CurveProfile

Inherited from

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

Rect.reactiveClone

releaseSize()

releaseSize(): void

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

Returns

void

Inherited from

Rect.releaseSize

remove()

remove(): this

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

Remove this node from the tree.

Returns

this

Inherited from

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

Rect.removeChild

removeChildren()

removeChildren(): void

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

Remove all children of this node.

Returns

void

Inherited from

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

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

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

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

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

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

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

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

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

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

Rect.ripple

rippleSize()

protected rippleSize(): number

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

Returns

number

Inherited from

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

Rect.save

setAbsolutePosition()

protected setAbsolutePosition(value): void

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

Parameters

value

SignalValue<PossibleVector2>

Returns

void

Inherited from

Rect.setAbsolutePosition

setAbsoluteRotation()

protected setAbsoluteRotation(value): void

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

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Rect.setAbsoluteRotation

setAbsoluteScale()

protected setAbsoluteScale(value): void

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

Parameters

value

SignalValue<PossibleVector2>

Returns

void

Inherited from

Rect.setAbsoluteScale

setChildren()

protected setChildren(value): void

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

Parameters

value

SignalValue<ComponentChildren>

Returns

void

Inherited from

Rect.setChildren

setHeight()

protected setHeight(value): void

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

Parameters

value

SignalValue<Length>

Returns

void

Inherited from

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

Rect.setParsedChildren

setSpawner()

protected setSpawner(value): void

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

Parameters

value

SignalValue<ComponentChildren>

Returns

void

Inherited from

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

Rect.setupDrawFromCache

setWidth()

protected setWidth(value): void

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

Parameters

value

SignalValue<Length>

Returns

void

Inherited from

Rect.setWidth

setX()

protected setX(value): void

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

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Rect.setX

setY()

protected setY(value): void

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

Parameters

value

SignalValue<number>

Returns

void

Inherited from

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

Rect.snapshotClone

sortedChildren()

protected sortedChildren(): Node[]

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

Returns

Node[]

Inherited from

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

Rect.spawnChildren

spawnedChildren()

protected spawnedChildren(): Node[]

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

Returns

Node[]

Inherited from

Rect.spawnedChildren

toPromise()

toPromise(): Promise<Img>

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

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

Returns

Promise<Img>

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

Rect.toPromise

transformContext()

protected transformContext(context): void

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

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

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

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

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

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

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

Rect.updateLayout

view()

view(): View2D

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

Returns

View2D

Inherited from

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

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

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

Rect.worldToParent

Class: IconClass: Knot
It's here!
Editor
Revideo
Legal
Contact
© 2026 Haven Technologies, Inc.
Class: Img – Revideo