@revideo/2d / components / Layout
Class: Layout
Defined in: 2d/src/lib/components/Layout.ts:197
Extends
Extended by
Constructors
Constructor
new Layout(
props):Layout
Defined in: 2d/src/lib/components/Layout.ts:647
Parameters
props
Returns
Layout
Overrides
Properties
absolutePosition
readonlyabsolutePosition:SimpleVector2Signal<Layout>
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
absoluteRotation
readonlyabsoluteRotation:SimpleSignal<number,Layout>
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
absoluteScale
readonlyabsoluteScale:SimpleVector2Signal<Layout>
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
alignContent
readonlyalignContent:SimpleSignal<FlexContent,Layout>
Defined in: 2d/src/lib/components/Layout.ts:246
alignItems
readonlyalignItems:SimpleSignal<FlexItems,Layout>
Defined in: 2d/src/lib/components/Layout.ts:249
alignSelf
readonlyalignSelf:SimpleSignal<FlexItems,Layout>
Defined in: 2d/src/lib/components/Layout.ts:252
basis
readonlybasis:SimpleSignal<FlexBasis,Layout>
Defined in: 2d/src/lib/components/Layout.ts:230
bottom
readonlybottom:SimpleVector2Signal<Layout>
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.
bottomLeft
readonlybottomLeft:SimpleVector2Signal<Layout>
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.
bottomRight
readonlybottomRight:SimpleVector2Signal<Layout>
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.
cache
readonlycache:SimpleSignal<boolean,Layout>
Defined in: 2d/src/lib/components/Node.ts:358
Inherited from
cachePadding
readonlycachePadding:SpacingSignal<Layout>
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
children
readonlychildren:Signal<ComponentChildren,Node[],Layout>
Defined in: 2d/src/lib/components/Node.ts:490
Inherited from
clip
readonlyclip:SimpleSignal<boolean,Layout>
Defined in: 2d/src/lib/components/Layout.ts:638
composite
readonlycomposite:SimpleSignal<boolean,Layout>
Defined in: 2d/src/lib/components/Node.ts:374
Inherited from
compositeOperation
readonlycompositeOperation:SimpleSignal<GlobalCompositeOperation,Layout>
Defined in: 2d/src/lib/components/Node.ts:378
Inherited from
creationStack?
readonlyoptionalcreationStack?:string
Defined in: 2d/src/lib/components/Node.ts:534
Inherited from
direction
readonlydirection:SimpleSignal<FlexDirection,Layout>
Defined in: 2d/src/lib/components/Layout.ts:227
element
element:
HTMLElement
Defined in: 2d/src/lib/components/Layout.ts:640
filters
readonlyfilters:FiltersSignal<Layout>
Defined in: 2d/src/lib/components/Node.ts:420
Inherited from
fontFamily
readonlyfontFamily:SimpleSignal<string,Layout>
Defined in: 2d/src/lib/components/Layout.ts:265
fontSize
readonlyfontSize:SimpleSignal<number,Layout>
Defined in: 2d/src/lib/components/Layout.ts:268
fontStyle
readonlyfontStyle:SimpleSignal<string,Layout>
Defined in: 2d/src/lib/components/Layout.ts:271
fontWeight
readonlyfontWeight:SimpleSignal<number,Layout>
Defined in: 2d/src/lib/components/Layout.ts:274
gap
readonlygap:Vector2LengthSignal<Layout>
Defined in: 2d/src/lib/components/Layout.ts:255
grow
readonlygrow:SimpleSignal<number,Layout>
Defined in: 2d/src/lib/components/Layout.ts:233
hasSpawnedChildren
protectedhasSpawnedChildren:boolean=false
Defined in: 2d/src/lib/components/Node.ts:529
Inherited from
isClass
isClass:
boolean
Defined in: 2d/src/lib/components/Node.ts:135
Inherited from
justifyContent
readonlyjustifyContent:SimpleSignal<FlexContent,Layout>
Defined in: 2d/src/lib/components/Layout.ts:243
key
readonlykey:string
Defined in: 2d/src/lib/components/Node.ts:533
Inherited from
layout
readonlylayout:SimpleSignal<LayoutMode,Layout>
Defined in: 2d/src/lib/components/Layout.ts:201
left
readonlyleft:SimpleVector2Signal<Layout>
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.
letterSpacing
readonlyletterSpacing:SimpleSignal<number,Layout>
Defined in: 2d/src/lib/components/Layout.ts:280
lineHeight
readonlylineHeight:SimpleSignal<Length,Layout>
Defined in: 2d/src/lib/components/Layout.ts:277
margin
readonlymargin:SpacingSignal<Layout>
Defined in: 2d/src/lib/components/Layout.ts:220
maxHeight
readonlymaxHeight:SimpleSignal<LengthLimit,Layout>
Defined in: 2d/src/lib/components/Layout.ts:208
maxWidth
readonlymaxWidth:SimpleSignal<LengthLimit,Layout>
Defined in: 2d/src/lib/components/Layout.ts:205
middle
readonlymiddle:SimpleVector2Signal<Layout>
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.
minHeight
readonlyminHeight:SimpleSignal<LengthLimit,Layout>
Defined in: 2d/src/lib/components/Layout.ts:214
minWidth
readonlyminWidth:SimpleSignal<LengthLimit,Layout>
Defined in: 2d/src/lib/components/Layout.ts:211
offset
readonlyoffset:Vector2Signal<Layout>
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
opacity
readonlyopacity:SimpleSignal<number,Layout>
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
padding
readonlypadding:SpacingSignal<Layout>
Defined in: 2d/src/lib/components/Layout.ts:223
parent
readonlyparent:SimpleSignal<Node|null,void>
Defined in: 2d/src/lib/components/Node.ts:531
Inherited from
position
readonlyposition:Vector2Signal<Layout>
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
properties
readonlyproperties:Record<string,PropertyMetadata<any>>
Defined in: 2d/src/lib/components/Node.ts:532
Inherited from
ratio
readonlyratio:SimpleSignal<number|null,Layout>
Defined in: 2d/src/lib/components/Layout.ts:217
realChildren
protectedrealChildren:Node[] =[]
Defined in: 2d/src/lib/components/Node.ts:528
Inherited from
right
readonlyright:SimpleVector2Signal<Layout>
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.
rotation
readonlyrotation:SimpleSignal<number,Layout>
Defined in: 2d/src/lib/components/Node.ts:216
Represents the rotation (in degrees) of this node relative to its parent.
Inherited from
scale
readonlyscale:Vector2Signal<Layout>
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
shaders
readonlyshaders:Signal<PossibleShaderConfig,ShaderConfig[],Layout>
Defined in: 2d/src/lib/components/Node.ts:439
Experimental
Inherited from
shadowBlur
readonlyshadowBlur:SimpleSignal<number,Layout>
Defined in: 2d/src/lib/components/Node.ts:428
Inherited from
shadowColor
readonlyshadowColor:ColorSignal<Layout>
Defined in: 2d/src/lib/components/Node.ts:424
Inherited from
shadowOffset
readonlyshadowOffset:Vector2Signal<Layout>
Defined in: 2d/src/lib/components/Node.ts:431
Inherited from
shrink
readonlyshrink:SimpleSignal<number,Layout>
Defined in: 2d/src/lib/components/Layout.ts:236
size
readonlysize:Vector2LengthSignal<Layout>
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%');sizeLockCounter
protectedreadonlysizeLockCounter:SimpleSignal<number,Layout>
Defined in: 2d/src/lib/components/Layout.ts:645
skew
readonlyskew:Vector2Signal<Layout>
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
spawner
protectedreadonlyspawner:SimpleSignal<ComponentChildren,Layout>
Defined in: 2d/src/lib/components/Node.ts:479
Deprecated
Use children instead.
Inherited from
styles
styles:
CSSStyleDeclaration
Defined in: 2d/src/lib/components/Layout.ts:641
textAlign
readonlytextAlign:SimpleSignal<CanvasTextAlign,Layout>
Defined in: 2d/src/lib/components/Layout.ts:290
textDirection
readonlytextDirection:SimpleSignal<CanvasDirection,Layout>
Defined in: 2d/src/lib/components/Layout.ts:287
textWrap
readonlytextWrap:SimpleSignal<TextWrap,Layout>
Defined in: 2d/src/lib/components/Layout.ts:284
top
readonlytop:SimpleVector2Signal<Layout>
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.
topLeft
readonlytopLeft:SimpleVector2Signal<Layout>
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.
topRight
readonlytopRight:SimpleVector2Signal<Layout>
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.
view2D
protectedview2D:View2D
Defined in: 2d/src/lib/components/Node.ts:526
Inherited from
wrap
readonlywrap:SimpleSignal<FlexWrap,Layout>
Defined in: 2d/src/lib/components/Layout.ts:239
zIndex
readonlyzIndex:SimpleSignal<number,Layout>
Defined in: 2d/src/lib/components/Node.ts:354
Inherited from
Accessors
columnGap
Get Signature
get columnGap():
Signal<Length,number,this>
Defined in: 2d/src/lib/components/Layout.ts:256
Returns
Signal<Length, number, this>
height
Get Signature
get height():
Signal<Length,number,this>
Defined in: 2d/src/lib/components/Layout.ts:369
Returns
Signal<Length, number, this>
rowGap
Get Signature
get rowGap():
Signal<Length,number,this>
Defined in: 2d/src/lib/components/Layout.ts:259
Returns
Signal<Length, number, this>
width
Get Signature
get width():
Signal<Length,number,this>
Defined in: 2d/src/lib/components/Layout.ts:366
Returns
Signal<Length, number, this>
x
Get Signature
get x():
SimpleSignal<number,this>
Defined in: 2d/src/lib/components/Node.ts:170
Returns
SimpleSignal<number, this>
Inherited from
y
Get Signature
get y():
SimpleSignal<number,this>
Defined in: 2d/src/lib/components/Node.ts:173
Returns
SimpleSignal<number, this>
Inherited from
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
absoluteOpacity()
absoluteOpacity():
number
Defined in: 2d/src/lib/components/Node.ts:415
Returns
number
Inherited from
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
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
anchorPosition()
anchorPosition():
Vector2
Defined in: 2d/src/lib/components/Layout.ts:666
Returns
Vector2
appendedToView()
protectedappendedToView():boolean
Defined in: 2d/src/lib/components/Layout.ts:770
Returns
boolean
applyFlex()
protectedapplyFlex():void
Defined in: 2d/src/lib/components/Layout.ts:926
Returns
void
applyFont()
protectedapplyFont():void
Defined in: 2d/src/lib/components/Layout.ts:970
Returns
void
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
The state to apply to the node.
Returns
void
Inherited from
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
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
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
cacheCanvas()
protectedcacheCanvas():CanvasRenderingContext2D
Defined in: 2d/src/lib/components/Node.ts:1350
Returns
CanvasRenderingContext2D
Inherited from
cachedCanvas()
protectedcachedCanvas():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
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
Parameters
index
number
The index of the child to retrieve.
Returns
T | null
Inherited from
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
Returns
T[]
Inherited from
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
collectAsyncResources()
protectedcollectAsyncResources():void
Defined in: 2d/src/lib/components/Node.ts:1757
Collect all asynchronous resources used by this node.
Returns
void
Inherited from
compositeRoot()
protectedcompositeRoot():Node|null
Defined in: 2d/src/lib/components/Node.ts:641
Returns
Node | null
Inherited from
compositeToLocal()
compositeToLocal():
DOMMatrix
Defined in: 2d/src/lib/components/Node.ts:650
Returns
DOMMatrix
Inherited from
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
computedPosition()
computedPosition():
Vector2
Defined in: 2d/src/lib/components/Layout.ts:730
Returns
Vector2
computedSize()
protectedcomputedSize():Vector2
Defined in: 2d/src/lib/components/Layout.ts:750
Returns
Vector2
desiredSize()
protecteddesiredSize():SerializedVector2<DesiredLength>
Defined in: 2d/src/lib/components/Layout.ts:462
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.
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.
Overrides
draw()
protecteddraw(context):Promise<void>
Defined in: 2d/src/lib/components/Layout.ts:829
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
drawChildren()
protecteddrawChildren(context):Promise<void>
Defined in: 2d/src/lib/components/Node.ts:1682
Parameters
context
CanvasRenderingContext2D
Returns
Promise<void>
Inherited from
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.
Overrides
filterString()
protectedfilterString():string
Defined in: 2d/src/lib/components/Node.ts:461
Returns
string
Inherited from
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
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
Parameters
predicate
(node) => boolean
A function that returns true if the node matches.
Returns
T[]
Inherited from
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
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
Parameters
predicate
(node) => boolean
A function that returns true if the node matches.
Returns
T | null
Inherited from
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
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
Parameters
predicate
(node) => boolean
A function that returns true if the node matches.
Returns
T | null
Inherited from
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
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
Parameters
predicate
(node) => boolean
A function that returns true if the node matches.
Returns
T | null
Inherited from
fullCacheBBox()
protectedfullCacheBBox():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
getAbsolutePosition()
protectedgetAbsolutePosition():Vector2
Defined in: 2d/src/lib/components/Node.ts:198
Returns
Vector2
Inherited from
getAbsoluteRotation()
protectedgetAbsoluteRotation():number
Defined in: 2d/src/lib/components/Node.ts:233
Returns
number
Inherited from
getAbsoluteScale()
protectedgetAbsoluteScale():Vector2
Defined in: 2d/src/lib/components/Node.ts:333
Returns
Vector2
Inherited from
getCacheBBox()
protectedgetCacheBBox():BBox
Defined in: 2d/src/lib/components/Layout.ts:825
Get a bounding box for the contents rendered by this node.
Returns
BBox
Remarks
The returned bounding box should be in local space.
Overrides
getChildren()
protectedgetChildren():Node[]
Defined in: 2d/src/lib/components/Node.ts:505
Returns
Node[]
Inherited from
getComputedLayout()
protectedgetComputedLayout():BBox
Defined in: 2d/src/lib/components/Layout.ts:725
Returns
BBox
getHeight()
protectedgetHeight():number
Defined in: 2d/src/lib/components/Layout.ts:413
Returns
number
getOriginDelta()
getOriginDelta(
origin):Vector2
Defined in: 2d/src/lib/components/Layout.ts:886
Parameters
origin
Origin
Returns
Vector2
getSpawner()
protectedgetSpawner():ComponentChildren
Defined in: 2d/src/lib/components/Node.ts:480
Returns
Inherited from
getState()
getState():
NodeState
Defined in: 2d/src/lib/components/Node.ts:1786
Return a snapshot of the node’s current signal values.
Returns
Remarks
This method will calculate the values of any reactive properties of the node at the time the method is called.
Inherited from
getWidth()
protectedgetWidth():number
Defined in: 2d/src/lib/components/Layout.ts:373
Returns
number
getX()
protectedgetX():number
Defined in: 2d/src/lib/components/Layout.ts:292
Returns
number
getY()
protectedgetY():number
Defined in: 2d/src/lib/components/Layout.ts:303
Returns
number
hasFilters()
protectedhasFilters():boolean
Defined in: 2d/src/lib/components/Node.ts:446
Returns
boolean
Inherited from
hasShadow()
protectedhasShadow():boolean
Defined in: 2d/src/lib/components/Node.ts:451
Returns
boolean
Inherited from
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
Overrides
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
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
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
isLayoutRoot()
isLayoutRoot():
boolean
Defined in: 2d/src/lib/components/Layout.ts:688
Returns
boolean
layoutChildren()
protectedlayoutChildren():Layout[]
Defined in: 2d/src/lib/components/Layout.ts:795
Returns
Layout[]
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).
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.
Overrides
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
lockSize()
lockSize():
void
Defined in: 2d/src/lib/components/Layout.ts:652
Returns
void
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
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
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
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
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
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
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
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
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
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
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
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
Returns
T | null
Inherited from
parentTransform()
protectedparentTransform():Layout|null
Defined in: 2d/src/lib/components/Layout.ts:661
Returns
Layout | null
parentWorldSpaceCacheBBox()
protectedparentWorldSpaceCacheBBox():BBox
Defined in: 2d/src/lib/components/Node.ts:1476
Returns
BBox
Inherited from
Node.parentWorldSpaceCacheBBox
parseChildren()
protectedparseChildren(children):Node[]
Defined in: 2d/src/lib/components/Node.ts:1316
Parse any ComponentChildren into an array of nodes.
Parameters
children
The children to parse.
Returns
Node[]
Inherited from
parseLength()
protectedparseLength(value):string
Defined in: 2d/src/lib/components/Layout.ts:915
Parameters
value
string | number | null
Returns
string
parsePixels()
protectedparsePixels(value):string
Defined in: 2d/src/lib/components/Layout.ts:911
Parameters
value
number | null
Returns
string
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
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
releaseSize()
releaseSize():
void
Defined in: 2d/src/lib/components/Layout.ts:656
Returns
void
remove()
remove():
this
Defined in: 2d/src/lib/components/Node.ts:748
Remove this node from the tree.
Returns
this
Inherited from
removeChild()
protectedremoveChild(child):void
Defined in: 2d/src/lib/components/Node.ts:1331
Remove the given child.
Parameters
child
Returns
void
Inherited from
removeChildren()
removeChildren():
void
Defined in: 2d/src/lib/components/Node.ts:984
Remove all children of this node.
Returns
void
Inherited from
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
renderFromSource()
protectedrenderFromSource(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
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
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
requestFontUpdate()
protectedrequestFontUpdate():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
requestLayoutUpdate()
protectedrequestLayoutUpdate():void
Defined in: 2d/src/lib/components/Layout.ts:759
Find the closest layout root and apply any new layout changes.
Returns
void
requiresCache()
protectedrequiresCache():boolean
Defined in: 2d/src/lib/components/Node.ts:1338
Whether this node should be cached or not.
Returns
boolean
Inherited from
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
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
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
setAbsolutePosition()
protectedsetAbsolutePosition(value):void
Defined in: 2d/src/lib/components/Node.ts:203
Parameters
value
SignalValue<PossibleVector2>
Returns
void
Inherited from
setAbsoluteRotation()
protectedsetAbsoluteRotation(value):void
Defined in: 2d/src/lib/components/Node.ts:238
Parameters
value
SignalValue<number>
Returns
void
Inherited from
setAbsoluteScale()
protectedsetAbsoluteScale(value):void
Defined in: 2d/src/lib/components/Node.ts:341
Parameters
value
SignalValue<PossibleVector2>
Returns
void
Inherited from
setChildren()
protectedsetChildren(value):void
Defined in: 2d/src/lib/components/Node.ts:491
Parameters
value
SignalValue<ComponentChildren>
Returns
void
Inherited from
setHeight()
protectedsetHeight(value):void
Defined in: 2d/src/lib/components/Layout.ts:416
Parameters
value
SignalValue<Length>
Returns
void
setParsedChildren()
protectedsetParsedChildren(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
setSpawner()
protectedsetSpawner(value):void
Defined in: 2d/src/lib/components/Node.ts:483
Parameters
value
SignalValue<ComponentChildren>
Returns
void
Inherited from
setupDrawFromCache()
protectedsetupDrawFromCache(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
setWidth()
protectedsetWidth(value):void
Defined in: 2d/src/lib/components/Layout.ts:376
Parameters
value
SignalValue<Length>
Returns
void
setX()
protectedsetX(value):void
Defined in: 2d/src/lib/components/Layout.ts:299
Parameters
value
SignalValue<number>
Returns
void
setY()
protectedsetY(value):void
Defined in: 2d/src/lib/components/Layout.ts:310
Parameters
value
SignalValue<number>
Returns
void
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
sortedChildren()
protectedsortedChildren():Node[]
Defined in: 2d/src/lib/components/Node.ts:520
Returns
Node[]
Inherited from
spawnChildren()
protectedspawnChildren(reactive,children):void
Defined in: 2d/src/lib/components/Node.ts:1288
Parameters
reactive
boolean
children
Returns
void
Inherited from
spawnedChildren()
protectedspawnedChildren():Node[]
Defined in: 2d/src/lib/components/Node.ts:511
Returns
Node[]
Inherited from
toPromise()
toPromise():
Promise<Layout>
Defined in: 2d/src/lib/components/Node.ts:1771
Wait for any asynchronous resources that this node or its children have.
Returns
Promise<Layout>
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
transformContext()
protectedtransformContext(context):void
Defined in: 2d/src/lib/components/Node.ts:1720
Parameters
context
CanvasRenderingContext2D
Returns
void
Inherited from
tweenCompositeOperation()
protectedtweenCompositeOperation(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
tweenHeight()
protectedtweenHeight(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
tweenSize()
protectedtweenSize(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
tweenWidth()
protectedtweenWidth(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
updateLayout()
protectedupdateLayout():void
Defined in: 2d/src/lib/components/Layout.ts:783
Apply any new layout changes to this node and its children.
Returns
void
view()
view():
View2D
Defined in: 2d/src/lib/components/Node.ts:660
Returns
Inherited from
worldSpaceCacheBBox()
protectedworldSpaceCacheBBox():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
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
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.