Skip to Content
DocumentationAPI Reference2DComponentsClassesClass: Code

@revideo/2d

@revideo/2d / components / Code

Class: Code

Defined in: 2d/src/lib/components/Code.ts:139 

Experimental

A node for displaying and animating code.

Preview

Press play to preview the animation
import {parser} from '@lezer/javascript';
import {Code, LezerHighlighter, makeScene2D} from '@revideo/2d';
import {createRef} from '@revideo/core';
 
export default makeScene2D('scene', function* (view) {
  LezerHighlighter.registerParser(parser);
  const code = createRef<Code>();
 
  view.add(
    <Code
      ref={code}
      offset={-1}
      position={view.size().scale(-0.5).add(60)}
      fontFamily={'JetBrains Mono, monospace'}
      fontSize={36}
      code={`\
function hello() {
  console.log('Hello');
}`}
    />,
  );
 
  yield* code()
    .code(
      `\
function hello() {
  console.warn('Hello World');
}`,
      1,
    )
    .wait(0.5)
    .back(1)
    .wait(0.5);
});

Extends

Constructors

Constructor

new Code(props): Code

Defined in: 2d/src/lib/components/Code.ts:301 

Experimental

Parameters

props

CodeProps

Returns

Code

Overrides

Shape.constructor

Properties

absolutePosition

readonly absolutePosition: SimpleVector2Signal<Code>

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

Experimental

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

Shape.absolutePosition

absoluteRotation

readonly absoluteRotation: SimpleSignal<number, Code>

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

Experimental

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

Shape.absoluteRotation

absoluteScale

readonly absoluteScale: SimpleVector2Signal<Code>

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

Experimental

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

Shape.absoluteScale

alignContent

readonly alignContent: SimpleSignal<FlexContent, Code>

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

Experimental

Inherited from

Shape.alignContent

alignItems

readonly alignItems: SimpleSignal<FlexItems, Code>

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

Experimental

Inherited from

Shape.alignItems

alignSelf

readonly alignSelf: SimpleSignal<FlexItems, Code>

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

Experimental

Inherited from

Shape.alignSelf

antialiased

readonly antialiased: SimpleSignal<boolean, Code>

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

Experimental

Inherited from

Shape.antialiased

basis

readonly basis: SimpleSignal<FlexBasis, Code>

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

Experimental

Inherited from

Shape.basis

bottom

readonly bottom: SimpleVector2Signal<Code>

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

Experimental

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

Shape.bottom

bottomLeft

readonly bottomLeft: SimpleVector2Signal<Code>

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

Experimental

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

Shape.bottomLeft

bottomRight

readonly bottomRight: SimpleVector2Signal<Code>

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

Experimental

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

Shape.bottomRight

cache

readonly cache: SimpleSignal<boolean, Code>

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

Experimental

Inherited from

Shape.cache

cachePadding

readonly cachePadding: SpacingSignal<Code>

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

Experimental

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

Shape.cachePadding

children

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

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

Experimental

Inherited from

Shape.children

clip

readonly clip: SimpleSignal<boolean, Code>

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

Experimental

Inherited from

Shape.clip

code

readonly code: CodeSignal<Code>

Defined in: 2d/src/lib/components/Code.ts:175 

Experimental

The code to display.

composite

readonly composite: SimpleSignal<boolean, Code>

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

Experimental

Inherited from

Shape.composite

compositeOperation

readonly compositeOperation: SimpleSignal<GlobalCompositeOperation, Code>

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

Experimental

Inherited from

Shape.compositeOperation

creationStack?

readonly optional creationStack?: string

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

Experimental

Inherited from

Shape.creationStack

direction

readonly direction: SimpleSignal<FlexDirection, Code>

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

Experimental

Inherited from

Shape.direction

drawHooks

readonly drawHooks: SimpleSignal<DrawHooks, Code>

Defined in: 2d/src/lib/components/Code.ts:209 

Experimental

Custom drawing logic for the code.

Remarks

Check out DrawHooks for available render hooks.

Example

Make the unselected code blurry and transparent:

<Code
  drawHooks={{
    token(ctx, text, position, color, selection) {
      const blur = map(3, 0, selection);
      const alpha = map(0.5, 1, selection);
      ctx.globalAlpha *= alpha;
      ctx.filter = `blur(${blur}px)`;
      ctx.fillStyle = color;
      ctx.fillText(text, position.x, position.y);
    },
  }}
  // ...
/>

element

element: HTMLElement

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

Experimental

Inherited from

Shape.element

fill

readonly fill: CanvasStyleSignal<Code>

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

Experimental

Inherited from

Shape.fill

filters

readonly filters: FiltersSignal<Code>

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

Experimental

Inherited from

Shape.filters

fontFamily

readonly fontFamily: SimpleSignal<string, Code>

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

Experimental

Inherited from

Shape.fontFamily

fontSize

readonly fontSize: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.fontSize

fontStyle

readonly fontStyle: SimpleSignal<string, Code>

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

Experimental

Inherited from

Shape.fontStyle

fontWeight

readonly fontWeight: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.fontWeight

gap

readonly gap: Vector2LengthSignal<Code>

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

Experimental

Inherited from

Shape.gap

grow

readonly grow: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.grow

hasSpawnedChildren

protected hasSpawnedChildren: boolean = false

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

Experimental

Inherited from

Shape.hasSpawnedChildren

highlighter

readonly highlighter: SimpleSignal<CodeHighlighter<unknown> | null, Code>

Defined in: 2d/src/lib/components/Code.ts:166 

Experimental

The code highlighter to use for this code node.

Remarks

Defaults to a shared code.LezerHighlighter.

isClass

isClass: boolean

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

Experimental

Inherited from

Shape.isClass

justifyContent

readonly justifyContent: SimpleSignal<FlexContent, Code>

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

Experimental

Inherited from

Shape.justifyContent

key

readonly key: string

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

Experimental

Inherited from

Shape.key

layout

readonly layout: SimpleSignal<LayoutMode, Code>

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

Experimental

Inherited from

Shape.layout

left

readonly left: SimpleVector2Signal<Code>

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

Experimental

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

Shape.left

letterSpacing

readonly letterSpacing: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.letterSpacing

lineCap

readonly lineCap: SimpleSignal<CanvasLineCap, Code>

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

Experimental

Inherited from

Shape.lineCap

lineDash

readonly lineDash: SimpleSignal<number[], Code>

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

Experimental

Inherited from

Shape.lineDash

lineDashOffset

readonly lineDashOffset: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.lineDashOffset

lineHeight

readonly lineHeight: SimpleSignal<Length, Code>

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

Experimental

Inherited from

Shape.lineHeight

lineJoin

readonly lineJoin: SimpleSignal<CanvasLineJoin, Code>

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

Experimental

Inherited from

Shape.lineJoin

lineWidth

readonly lineWidth: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.lineWidth

margin

readonly margin: SpacingSignal<Code>

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

Experimental

Inherited from

Shape.margin

maxHeight

readonly maxHeight: SimpleSignal<LengthLimit, Code>

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

Experimental

Inherited from

Shape.maxHeight

maxWidth

readonly maxWidth: SimpleSignal<LengthLimit, Code>

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

Experimental

Inherited from

Shape.maxWidth

middle

readonly middle: SimpleVector2Signal<Code>

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

Experimental

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

Shape.middle

minHeight

readonly minHeight: SimpleSignal<LengthLimit, Code>

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

Experimental

Inherited from

Shape.minHeight

minWidth

readonly minWidth: SimpleSignal<LengthLimit, Code>

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

Experimental

Inherited from

Shape.minWidth

offset

readonly offset: Vector2Signal<Code>

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

Experimental

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

Shape.offset

oldSelection

oldSelection: CodeSelection | null = null

Defined in: 2d/src/lib/components/Code.ts:258 

Experimental

opacity

readonly opacity: SimpleSignal<number, Code>

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

Experimental

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

Remarks

The value is clamped to the range 0-1.

Inherited from

Shape.opacity

padding

readonly padding: SpacingSignal<Code>

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

Experimental

Inherited from

Shape.padding

parent

readonly parent: SimpleSignal<Node | null, void>

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

Experimental

Inherited from

Shape.parent

position

readonly position: Vector2Signal<Code>

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

Experimental

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

Shape.position

properties

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

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

Experimental

Inherited from

Shape.properties

ratio

readonly ratio: SimpleSignal<number | null, Code>

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

Experimental

Inherited from

Shape.ratio

realChildren

protected realChildren: Node[] = []

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

Experimental

Inherited from

Shape.realChildren

readonly right: SimpleVector2Signal<Code>

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

Experimental

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

Shape.right

rippleStrength

protected readonly rippleStrength: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.rippleStrength

rotation

readonly rotation: SimpleSignal<number, Code>

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

Experimental

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

Inherited from

Shape.rotation

scale

readonly scale: Vector2Signal<Code>

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

Experimental

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

Shape.scale

selection

readonly selection: Signal<PossibleCodeSelection, CodeSelection, Code>

Defined in: 2d/src/lib/components/Code.ts:253 

Experimental

The currently selected code range.

Remarks

Either a single code.CodeRange or an array of them describing which parts of the code should be visually emphasized.

You can use code.word and code.lines to quickly create ranges.

Example

The following will select the word “console” in the code. Both lines and columns are 0-based. So it will select a 7-character-long (7) word in the second line (1) starting at the third character (2).

<Code
  selection={word(1, 2, 7)}
  code={`\
function hello() => {
  console.log('Hello');
}`}
  // ...
/>

selectionProgress

selectionProgress: SimpleSignal<number | null, void>

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

Experimental

shaders

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

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

Experimental

Inherited from

Shape.shaders

shadowBlur

readonly shadowBlur: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.shadowBlur

shadowColor

readonly shadowColor: ColorSignal<Code>

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

Experimental

Inherited from

Shape.shadowColor

shadowOffset

readonly shadowOffset: Vector2Signal<Code>

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

Experimental

Inherited from

Shape.shadowOffset

shrink

readonly shrink: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.shrink

size

readonly size: Vector2LengthSignal<Code>

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

Experimental

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

Shape.size

sizeLockCounter

protected readonly sizeLockCounter: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.sizeLockCounter

skew

readonly skew: Vector2Signal<Code>

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

Experimental

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

Shape.skew

spawner

protected readonly spawner: SimpleSignal<ComponentChildren, Code>

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

Experimental

Deprecated

Use children instead.

Inherited from

Shape.spawner

stroke

readonly stroke: CanvasStyleSignal<Code>

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

Experimental

Inherited from

Shape.stroke

strokeFirst

readonly strokeFirst: SimpleSignal<boolean, Code>

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

Experimental

Inherited from

Shape.strokeFirst

styles

styles: CSSStyleDeclaration

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

Experimental

Inherited from

Shape.styles

textAlign

readonly textAlign: SimpleSignal<CanvasTextAlign, Code>

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

Experimental

Inherited from

Shape.textAlign

textDirection

readonly textDirection: SimpleSignal<CanvasDirection, Code>

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

Experimental

Inherited from

Shape.textDirection

textWrap

readonly textWrap: SimpleSignal<TextWrap, Code>

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

Experimental

Inherited from

Shape.textWrap

top

readonly top: SimpleVector2Signal<Code>

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

Experimental

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

Shape.top

topLeft

readonly topLeft: SimpleVector2Signal<Code>

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

Experimental

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

Shape.topLeft

topRight

readonly topRight: SimpleVector2Signal<Code>

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

Experimental

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

Shape.topRight

view2D

protected view2D: View2D

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

Experimental

Inherited from

Shape.view2D

wrap

readonly wrap: SimpleSignal<FlexWrap, Code>

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

Experimental

Inherited from

Shape.wrap

zIndex

readonly zIndex: SimpleSignal<number, Code>

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

Experimental

Inherited from

Shape.zIndex

defaultHighlighter

static defaultHighlighter: CodeHighlighter<unknown> | null = null

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

Experimental

Accessors

columnGap

Get Signature

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

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

Experimental

Returns

Signal<Length, number, this>

Inherited from

Shape.columnGap

height

Get Signature

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

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

Experimental

Returns

Signal<Length, number, this>

Inherited from

Shape.height

rowGap

Get Signature

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

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

Experimental

Returns

Signal<Length, number, this>

Inherited from

Shape.rowGap

width

Get Signature

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

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

Experimental

Returns

Signal<Length, number, this>

Inherited from

Shape.width

x

Get Signature

get x(): SimpleSignal<number, this>

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

Experimental

Returns

SimpleSignal<number, this>

Inherited from

Shape.x

y

Get Signature

get y(): SimpleSignal<number, this>

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

Experimental

Returns

SimpleSignal<number, this>

Inherited from

Shape.y

Methods

[iterator]()

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

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

Experimental

Returns

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

Inherited from

Shape.[iterator]

absoluteOpacity()

absoluteOpacity(): number

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

Experimental

Returns

number

Inherited from

Shape.absoluteOpacity

add()

add(node): this

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

Experimental

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

Shape.add

anchorPosition()

anchorPosition(): Vector2

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

Experimental

Returns

Vector2

Inherited from

Shape.anchorPosition

appendedToView()

protected appendedToView(): boolean

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

Experimental

Returns

boolean

Inherited from

Shape.appendedToView

applyFlex()

protected applyFlex(): void

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

Experimental

Returns

void

Inherited from

Shape.applyFlex

applyFont()

protected applyFont(): void

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

Experimental

Returns

void

Inherited from

Shape.applyFont

applyState()

Call Signature

applyState(state): void

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

Experimental

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

Shape.applyState

Call Signature

applyState(state, duration, timing?): ThreadGenerator

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

Experimental

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

Shape.applyState

applyStyle()

protected applyStyle(context): void

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

Experimental

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Shape.applyStyle

applyText()

protected applyText(context): void

Defined in: 2d/src/lib/components/Code.ts:513 

Experimental

Parameters

context

CanvasRenderingContext2D

Returns

void

Overrides

Shape.applyText

cacheBBox()

cacheBBox(): BBox

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

Experimental

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

Returns

BBox

Inherited from

Shape.cacheBBox

cacheCanvas()

protected cacheCanvas(): CanvasRenderingContext2D

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

Experimental

Returns

CanvasRenderingContext2D

Inherited from

Shape.cacheCanvas

cachedCanvas()

protected cachedCanvas(): Promise<CanvasRenderingContext2D>

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

Experimental

Get a cache canvas with the contents of this node rendered onto it.

Returns

Promise<CanvasRenderingContext2D>

Inherited from

Shape.cachedCanvas

childAs()

childAs<T>(index): T | null

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

Experimental

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

Shape.childAs

childrenAs()

childrenAs<T>(): T[]

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

Experimental

Get the children array cast to the specified type.

Type Parameters

T

T extends Node = Node

Returns

T[]

Inherited from

Shape.childrenAs

clone()

clone(customProps?): this

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

Experimental

Create a copy of this node.

Parameters

customProps?

NodeState = {}

Properties to override.

Returns

this

Inherited from

Shape.clone

collectAsyncResources()

protected collectAsyncResources(): void

Defined in: 2d/src/lib/components/Code.ts:522 

Experimental

Collect all asynchronous resources used by this node.

Returns

void

Overrides

Shape.collectAsyncResources

compositeRoot()

protected compositeRoot(): Node | null

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

Experimental

Returns

Node | null

Inherited from

Shape.compositeRoot

compositeToLocal()

compositeToLocal(): DOMMatrix

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

Experimental

Returns

DOMMatrix

Inherited from

Shape.compositeToLocal

compositeToWorld()

compositeToWorld(): DOMMatrix

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

Experimental

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

Shape.compositeToWorld

computedPosition()

computedPosition(): Vector2

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

Experimental

Returns

Vector2

Inherited from

Shape.computedPosition

computedSize()

protected computedSize(): Vector2

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

Experimental

Returns

Vector2

Inherited from

Shape.computedSize

createSignal()

createSignal(initial): CodeSignal<Code>

Defined in: 2d/src/lib/components/Code.ts:313 

Experimental

Create a child code signal.

Parameters

initial

PossibleCodeScope

The initial code.

Returns

CodeSignal<Code>

desiredSize()

protected desiredSize(): SerializedVector2<DesiredLength>

Defined in: 2d/src/lib/components/Code.ts:469 

Experimental

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

Shape.desiredSize

dispose()

dispose(): void

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

Experimental

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

Shape.dispose

draw()

protected draw(context): Promise<void>

Defined in: 2d/src/lib/components/Code.ts:485 

Experimental

Parameters

context

CanvasRenderingContext2D

Returns

Promise<void>

Overrides

Shape.draw

drawChildren()

protected drawChildren(context): Promise<void>

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

Experimental

Parameters

context

CanvasRenderingContext2D

Returns

Promise<void>

Inherited from

Shape.drawChildren

drawingInfo()

protected drawingInfo(): { fontHeight: number; fragments: CodeFragmentDrawingInfo[]; verticalOffset: number; }

Defined in: 2d/src/lib/components/Code.ts:453 

Experimental

Returns

{ fontHeight: number; fragments: CodeFragmentDrawingInfo[]; verticalOffset: number; }

fontHeight

fontHeight: number

fragments

fragments: CodeFragmentDrawingInfo[]

verticalOffset

verticalOffset: number

drawOverlay()

drawOverlay(context, matrix): void

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

Experimental

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

Shape.drawOverlay

drawRipple()

protected drawRipple(context): void

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

Experimental

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Shape.drawRipple

drawShape()

protected drawShape(context): void

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

Experimental

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

Shape.drawShape

filterString()

protected filterString(): string

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

Experimental

Returns

string

Inherited from

Shape.filterString

findAll()

Call Signature

findAll<T>(predicate): T[]

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

Experimental

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

Shape.findAll

Call Signature

findAll<T>(predicate): T[]

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

Experimental

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

Shape.findAll

findAllRanges()

findAllRanges(pattern): CodeRange[]

Defined in: 2d/src/lib/components/Code.ts:326 

Experimental

Find all code ranges that match the given pattern.

Parameters

pattern

string | RegExp

Either a string or a regular expression to match.

Returns

CodeRange[]

findAncestor()

Call Signature

findAncestor<T>(predicate): T | null

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

Experimental

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

Shape.findAncestor

Call Signature

findAncestor<T>(predicate): T | null

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

Experimental

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

Shape.findAncestor

findFirst()

Call Signature

findFirst<T>(predicate): T | null

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

Experimental

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

Shape.findFirst

Call Signature

findFirst<T>(predicate): T | null

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

Experimental

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

Shape.findFirst

findFirstRange()

findFirstRange(pattern): CodeRange

Defined in: 2d/src/lib/components/Code.ts:335 

Experimental

Find the first code range that matches the given pattern.

Parameters

pattern

string | RegExp

Either a string or a regular expression to match.

Returns

CodeRange

findLast()

Call Signature

findLast<T>(predicate): T | null

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

Experimental

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

Shape.findLast

Call Signature

findLast<T>(predicate): T | null

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

Experimental

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

Shape.findLast

findLastRange()

findLastRange(pattern): CodeRange

Defined in: 2d/src/lib/components/Code.ts:349 

Experimental

Find the last code range that matches the given pattern.

Parameters

pattern

string | RegExp

Either a string or a regular expression to match.

Returns

CodeRange

fullCacheBBox()

protected fullCacheBBox(): BBox

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

Experimental

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

Shape.fullCacheBBox

getAbsolutePosition()

protected getAbsolutePosition(): Vector2

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

Experimental

Returns

Vector2

Inherited from

Shape.getAbsolutePosition

getAbsoluteRotation()

protected getAbsoluteRotation(): number

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

Experimental

Returns

number

Inherited from

Shape.getAbsoluteRotation

getAbsoluteScale()

protected getAbsoluteScale(): Vector2

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

Experimental

Returns

Vector2

Inherited from

Shape.getAbsoluteScale

getCacheBBox()

protected getCacheBBox(): BBox

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

Experimental

Returns

BBox

Inherited from

Shape.getCacheBBox

getChildren()

protected getChildren(): Node[]

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

Experimental

Returns

Node[]

Inherited from

Shape.getChildren

getComputedLayout()

protected getComputedLayout(): BBox

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

Experimental

Returns

BBox

Inherited from

Shape.getComputedLayout

getHeight()

protected getHeight(): number

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

Experimental

Returns

number

Inherited from

Shape.getHeight

getOriginDelta()

getOriginDelta(origin): Vector2

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

Experimental

Parameters

origin

Origin

Returns

Vector2

Inherited from

Shape.getOriginDelta

getPath()

protected getPath(): Path2D

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

Experimental

Returns

Path2D

Inherited from

Shape.getPath

getPointBbox()

getPointBbox(point): BBox

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

Experimental

Return the bounding box of the given point (character) in the code.

Parameters

point

CodePoint

The point to get the bounding box for.

Returns

BBox

Remarks

The returned bound box is in local space of the Code node.

getRipplePath()

protected getRipplePath(): Path2D

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

Experimental

Returns

Path2D

Inherited from

Shape.getRipplePath

getSelectionBbox()

getSelectionBbox(selection): BBox[]

Defined in: 2d/src/lib/components/Code.ts:404 

Experimental

Return bounding boxes of all characters in the selection.

Parameters

selection

PossibleCodeSelection

The selection to get the bounding boxes for.

Returns

BBox[]

Remarks

The returned bound boxes are in local space of the Code node. Each line of code has a separate bounding box.

getSpawner()

protected getSpawner(): ComponentChildren

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

Experimental

Returns

ComponentChildren

Inherited from

Shape.getSpawner

getState()

getState(): NodeState

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

Experimental

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

Shape.getState

getWidth()

protected getWidth(): number

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

Experimental

Returns

number

Inherited from

Shape.getWidth

getX()

protected getX(): number

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

Experimental

Returns

number

Inherited from

Shape.getX

getY()

protected getY(): number

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

Experimental

Returns

number

Inherited from

Shape.getY

hasFilters()

protected hasFilters(): boolean

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

Experimental

Returns

boolean

Inherited from

Shape.hasFilters

hasShadow()

protected hasShadow(): boolean

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

Experimental

Returns

boolean

Inherited from

Shape.hasShadow

highlighterCache()

highlighterCache(): { after: unknown; before: unknown; } | null

Defined in: 2d/src/lib/components/Code.ts:282 

Experimental

Returns

{ after: unknown; before: unknown; } | null

hit()

hit(position): Node | null

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

Experimental

Try to find a node intersecting the given position.

Parameters

position

Vector2

The searched position.

Returns

Node | null

Inherited from

Shape.hit

insert()

insert(node, index?): this

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

Experimental

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

Shape.insert

instantiate()

instantiate(props?): this

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

Experimental

Create an instance of this node’s class.

Parameters

props?

NodeProps = {}

Properties to pass to the constructor.

Returns

this

Inherited from

Shape.instantiate

isLayoutRoot()

isLayoutRoot(): boolean

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

Experimental

Returns

boolean

Inherited from

Shape.isLayoutRoot

layoutChildren()

protected layoutChildren(): Layout[]

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

Experimental

Returns

Layout[]

Inherited from

Shape.layoutChildren

layoutEnabled()

layoutEnabled(): boolean

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

Experimental

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

Shape.layoutEnabled

localToParent()

localToParent(): DOMMatrix

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

Experimental

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

Shape.localToParent

localToWorld()

localToWorld(): DOMMatrix

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

Experimental

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

Shape.localToWorld

lockSize()

lockSize(): void

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

Experimental

Returns

void

Inherited from

Shape.lockSize

move()

move(by?): this

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

Experimental

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

Shape.move

moveAbove()

moveAbove(node, directlyAbove?): this

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

Experimental

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

Shape.moveAbove

moveBelow()

moveBelow(node, directlyBelow?): this

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

Experimental

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

Shape.moveBelow

moveDown()

moveDown(): this

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

Experimental

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

Shape.moveDown

moveOffset()

moveOffset(offset): void

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

Experimental

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

Shape.moveOffset

moveTo()

moveTo(index): this

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

Experimental

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

Shape.moveTo

moveToBottom()

moveToBottom(): this

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

Experimental

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

Shape.moveToBottom

moveToTop()

moveToTop(): this

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

Experimental

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

Shape.moveToTop

moveUp()

moveUp(): this

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

Experimental

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

Shape.moveUp

parentAs()

parentAs<T>(): T | null

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

Experimental

Get the parent cast to the specified type.

Type Parameters

T

T extends Node = Node

Returns

T | null

Inherited from

Shape.parentAs

parentTransform()

protected parentTransform(): Layout | null

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

Experimental

Returns

Layout | null

Inherited from

Shape.parentTransform

parentWorldSpaceCacheBBox()

protected parentWorldSpaceCacheBBox(): BBox

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

Experimental

Returns

BBox

Inherited from

Shape.parentWorldSpaceCacheBBox

parseChildren()

protected parseChildren(children): Node[]

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

Experimental

Parse any ComponentChildren into an array of nodes.

Parameters

children

ComponentChildren

The children to parse.

Returns

Node[]

Inherited from

Shape.parseChildren

parsed()

parsed(): string

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

Experimental

Get the currently displayed code as a string.

Returns

string

parseLength()

protected parseLength(value): string

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

Experimental

Parameters

value

string | number | null

Returns

string

Inherited from

Shape.parseLength

parsePixels()

protected parsePixels(value): string

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

Experimental

Parameters

value

number | null

Returns

string

Inherited from

Shape.parsePixels

peekChildren()

peekChildren(): readonly Node[]

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

Experimental

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

Shape.peekChildren

reactiveClone()

reactiveClone(customProps?): this

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

Experimental

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

Shape.reactiveClone

releaseSize()

releaseSize(): void

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

Experimental

Returns

void

Inherited from

Shape.releaseSize

remove()

remove(): this

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

Experimental

Remove this node from the tree.

Returns

this

Inherited from

Shape.remove

removeChild()

protected removeChild(child): void

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

Experimental

Remove the given child.

Parameters

child

Node

Returns

void

Inherited from

Shape.removeChild

removeChildren()

removeChildren(): void

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

Experimental

Remove all children of this node.

Returns

void

Inherited from

Shape.removeChildren

render()

render(context): Promise<void>

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

Experimental

Render this node onto the given canvas.

Parameters

context

CanvasRenderingContext2D

The context to draw with.

Returns

Promise<void>

Inherited from

Shape.render

renderFromSource()

protected renderFromSource(context, source, x, y): void

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

Experimental

Parameters

context

CanvasRenderingContext2D

source

CanvasImageSource

x

number

y

number

Returns

void

Inherited from

Shape.renderFromSource

reparent()

reparent(newParent): void

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

Experimental

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

Shape.reparent

requestFontUpdate()

protected requestFontUpdate(): void

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

Experimental

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

Returns

void

Inherited from

Shape.requestFontUpdate

requestLayoutUpdate()

protected requestLayoutUpdate(): void

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

Experimental

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

Returns

void

Inherited from

Shape.requestLayoutUpdate

requiresCache()

protected requiresCache(): boolean

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

Experimental

Whether this node should be cached or not.

Returns

boolean

Inherited from

Shape.requiresCache

restore()

Call Signature

restore(): void

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

Experimental

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

Shape.restore

Call Signature

restore(duration, timing?): ThreadGenerator

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

Experimental

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

Shape.restore

ripple()

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

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

Experimental

Parameters

duration?

number = 1

Returns

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

Inherited from

Shape.ripple

rippleSize()

protected rippleSize(): number

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

Experimental

Returns

number

Inherited from

Shape.rippleSize

save()

save(): void

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

Experimental

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

Shape.save

setAbsolutePosition()

protected setAbsolutePosition(value): void

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

Experimental

Parameters

value

SignalValue<PossibleVector2>

Returns

void

Inherited from

Shape.setAbsolutePosition

setAbsoluteRotation()

protected setAbsoluteRotation(value): void

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

Experimental

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Shape.setAbsoluteRotation

setAbsoluteScale()

protected setAbsoluteScale(value): void

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

Experimental

Parameters

value

SignalValue<PossibleVector2>

Returns

void

Inherited from

Shape.setAbsoluteScale

setChildren()

protected setChildren(value): void

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

Experimental

Parameters

value

SignalValue<ComponentChildren>

Returns

void

Inherited from

Shape.setChildren

setDrawHooks()

protected setDrawHooks(value): void

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

Experimental

Parameters

value

DrawHooks

Returns

void

setHeight()

protected setHeight(value): void

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

Experimental

Parameters

value

SignalValue<Length>

Returns

void

Inherited from

Shape.setHeight

setParsedChildren()

protected setParsedChildren(value): void

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

Experimental

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

Shape.setParsedChildren

setSpawner()

protected setSpawner(value): void

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

Experimental

Parameters

value

SignalValue<ComponentChildren>

Returns

void

Inherited from

Shape.setSpawner

setupDrawFromCache()

protected setupDrawFromCache(context): void

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

Experimental

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

Shape.setupDrawFromCache

setWidth()

protected setWidth(value): void

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

Experimental

Parameters

value

SignalValue<Length>

Returns

void

Inherited from

Shape.setWidth

setX()

protected setX(value): void

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

Experimental

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Shape.setX

setY()

protected setY(value): void

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

Experimental

Parameters

value

SignalValue<number>

Returns

void

Inherited from

Shape.setY

snapshotClone()

snapshotClone(customProps?): this

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

Experimental

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

Shape.snapshotClone

sortedChildren()

protected sortedChildren(): Node[]

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

Experimental

Returns

Node[]

Inherited from

Shape.sortedChildren

spawnChildren()

protected spawnChildren(reactive, children): void

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

Experimental

Parameters

reactive

boolean

children

ComponentChildren

Returns

void

Inherited from

Shape.spawnChildren

spawnedChildren()

protected spawnedChildren(): Node[]

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

Experimental

Returns

Node[]

Inherited from

Shape.spawnedChildren

toPromise()

toPromise(): Promise<Code>

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

Experimental

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

Returns

Promise<Code>

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

Shape.toPromise

transformContext()

protected transformContext(context): void

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

Experimental

Parameters

context

CanvasRenderingContext2D

Returns

void

Inherited from

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

Experimental

Parameters

value

SignalValue<GlobalCompositeOperation>

time

number

timingFunction

TimingFunction

Returns

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

Inherited from

Shape.tweenCompositeOperation

tweenHeight()

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

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

Experimental

Parameters

value

SignalValue<Length>

time

number

timingFunction

TimingFunction

interpolationFunction

InterpolationFunction<Length>

Returns

ThreadGenerator

Inherited from

Shape.tweenHeight

tweenSelection()

protected tweenSelection(value, duration, timingFunction): ThreadGenerator

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

Experimental

Parameters

value

CodeRange[]

duration

number

timingFunction

TimingFunction

Returns

ThreadGenerator

tweenSize()

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

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

Experimental

Parameters

value

SignalValue<SerializedVector2<Length>>

time

number

timingFunction

TimingFunction

interpolationFunction

InterpolationFunction<Vector2>

Returns

ThreadGenerator

Inherited from

Shape.tweenSize

tweenWidth()

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

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

Experimental

Parameters

value

SignalValue<Length>

time

number

timingFunction

TimingFunction

interpolationFunction

InterpolationFunction<Length>

Returns

ThreadGenerator

Inherited from

Shape.tweenWidth

updateLayout()

protected updateLayout(): void

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

Experimental

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

Returns

void

Inherited from

Shape.updateLayout

view()

view(): View2D

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

Experimental

Returns

View2D

Inherited from

Shape.view

worldSpaceCacheBBox()

protected worldSpaceCacheBBox(): BBox

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

Experimental

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

Shape.worldSpaceCacheBBox

worldToLocal()

worldToLocal(): DOMMatrix

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

Experimental

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

Shape.worldToLocal

worldToParent()

worldToParent(): DOMMatrix

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

Experimental

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

Shape.worldToParent

createSignal()

static createSignal(initial, highlighter?): CodeSignal<void>

Defined in: 2d/src/lib/components/Code.ts:146 

Experimental

Create a standalone code signal.

Parameters

initial

PossibleCodeScope

The initial code.

highlighter?

SignalValue<CodeHighlighter<unknown>>

Custom highlighter to use.

Returns

CodeSignal<void>

Class: CircleClass: CubicBezier
It's here!
Editor
Revideo
Legal
Contact
© 2026 Haven Technologies, Inc.
Class: Code – Revideo