View2D
class
View2D
extends
Rect
Constructors
constructor
Parameters
-
props : View2DProps
Rect.constructor
Properties
absolutePosition
readonly
public
absolutePosition
:
SimpleVector2Signal
View2D
A helper signal for operating on the position in world space.
Retrieving the position using this signal returns the position in worldspace. Similarly, setting the position using this signal transforms thenew value to local space.
If the new value is a function, the position of this node will becontinuously 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 itfollow another node's position.
Unlike
position
, this signal is not compound - it doesn't containseparate signals for the
x
and
y
components.
Rect.absolutePosition
absoluteRotation
readonly
public
absoluteRotation
:
SimpleSignal
number
View2D
A helper signal for operating on the rotation in world space.
Retrieving the rotation using this signal returns the rotation in worldspace. Similarly, setting the rotation using this signal transforms thenew value to local space.
If the new value is a function, the rotation of this node will becontinuously updated to always match the rotation returned by the function.
Inherited from
Rect.absoluteRotation
absoluteScale
readonly
public
absoluteScale
:
SimpleVector2Signal
View2D
A helper signal for operating on the scale in world space.
Retrieving the scale using this signal returns the scale in world space.Similarly, setting the scale using this signal transforms the new value tolocal space.
If the new value is a function, the scale of this node will be continuouslyupdated to always match the position returned by the function.
Unlike
scale
, this signal is not compound - it doesn't containseparate signals for the
x
and
y
components.
Rect.absoluteScale
alignContent
readonly
public
alignContent
:
SimpleSignal
FlexContent
View2D
Rect.alignContent
alignItems
readonly
public
alignItems
:
SimpleSignal
FlexItems
View2D
Rect.alignItems
alignSelf
readonly
public
alignSelf
:
SimpleSignal
FlexItems
View2D
Rect.alignSelf
antialiased
readonly
public
antialiased
:
SimpleSignal
boolean
View2D
Rect.antialiased
arrowSize
readonly
public
arrowSize
:
SimpleSignal
number
View2D
Controls the size of the end and start arrows.
To make the arrows visible make sure to enable
startArrow
and/or
endArrow
.
Rect.arrowSize
assetHash
readonly
public
assetHash
:
SimpleSignal
string
View2D
basis
readonly
public
basis
:
SimpleSignal
FlexBasis
View2D
Rect.basis
bottom
readonly
public
bottom
:
SimpleVector2Signal
View2D
The position of the bottom edge of this node.
When set, this shortcut property will modify the node's position so thatthe bottom edge ends up in the given place.
When retrieved, it will return the position of the bottom edge in theparent space.
Inherited from
Rect.bottom
bottomLeft
readonly
public
bottomLeft
:
SimpleVector2Signal
View2D
The position of the bottom left corner of this node.
When set, this shortcut property will modify the node's position so thatthe bottom left corner ends up in the given place.
When retrieved, it will return the position of the bottom left corner inthe parent space.
Inherited from
Rect.bottomLeft
bottomRight
readonly
public
bottomRight
:
SimpleVector2Signal
View2D
The position of the bottom right corner of this node.
When set, this shortcut property will modify the node's position so thatthe bottom right corner ends up in the given place.
When retrieved, it will return the position of the bottom right corner inthe parent space.
Inherited from
Rect.bottomRight
cache
readonly
public
cache
:
SimpleSignal
boolean
View2D
Rect.cache
cachePadding
readonly
public
cachePadding
:
SpacingSignal
View2D
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding boxof the node and its children. That includes effects such as stroke orshadow. This property can be used to expand the cache area further.Usually used to account for custom effects created by
shaders
.
Rect.cachePadding
children
readonly
public
children
:
Signal
ComponentChildren
Node
[]
View2D
SignalContext
ComponentChildren
Node
[]
View2D
Rect.children
clip
readonly
public
clip
:
SimpleSignal
boolean
View2D
Rect.clip
closed
readonly
public
closed
:
SimpleSignal
boolean
View2D
Whether the curve should be closed.
Closed curves have their start and end points connected.
Inherited from
Rect.closed
composite
readonly
public
composite
:
SimpleSignal
boolean
View2D
Rect.composite
compositeOperation
readonly
public
compositeOperation
:
SimpleSignal
GlobalCompositeOperation
View2D
Rect.compositeOperation
cornerSharpness
readonly
public
cornerSharpness
:
SimpleSignal
number
View2D
Controls the sharpness of
smoothCorners
.
This property only affects the way rounded corners are drawn. To controlthe corner radius use the
radius
property.
Requires
smoothCorners
to be enabled to have any effect.By default, corner sharpness is set to
0.6
which represents a smooth,circle-like rounding. At
0
the edges are squared off.
Examples
Inherited from
Rect.cornerSharpness
creationStack
readonly
public
creationStack
?:
string
Rect.creationStack
direction
readonly
public
direction
:
SimpleSignal
FlexDirection
View2D
Rect.direction
element
public
element
:
HTMLElement
Rect.element
end
readonly
public
end
:
SimpleSignal
number
View2D
A percentage from the start after which the curve should be clipped.
The portion of the curve that comes after the given percentage will bemade invisible.
This property is usefully for animating the curve appearing on the screen.The value of
0
means the very start of the curve (accounting for the
startOffset
) while
1
means the very end (accounting for the
endOffset
).
Rect.end
endArrow
readonly
public
endArrow
:
SimpleSignal
boolean
View2D
Whether to display an arrow at the end of the visible curve.
Use
arrowSize
to control the size of the arrow.
Rect.endArrow
endOffset
readonly
public
endOffset
:
SimpleSignal
number
View2D
The offset in pixels from the end of the curve.
This property lets you specify where along the defined curve the actualvisible portion ends. For example, setting it to
20
will make the last20 pixels of the curve invisible.
This property is useful for trimming the curve using a fixed distance.If you want to animate the curve appearing on the screen, use
end
instead.
Rect.endOffset
fill
readonly
public
fill
:
CanvasStyleSignal
View2D
Rect.fill
filters
readonly
public
filters
:
FiltersSignal
View2D
Rect.filters
fontFamily
readonly
public
fontFamily
:
SimpleSignal
string
View2D
Rect.fontFamily
fontSize
readonly
public
fontSize
:
SimpleSignal
number
View2D
Rect.fontSize
fontStyle
readonly
public
fontStyle
:
SimpleSignal
string
View2D
Rect.fontStyle
fontWeight
readonly
public
fontWeight
:
SimpleSignal
number
View2D
Rect.fontWeight
gap
readonly
public
gap
:
Vector2LengthSignal
View2D
Rect.gap
globalTime
readonly
public
globalTime
:
SimpleSignal
number
View2D
grow
readonly
public
grow
:
SimpleSignal
number
View2D
Rect.grow
isClass
public
isClass
:
boolean
Rect.isClass
justifyContent
readonly
public
justifyContent
:
SimpleSignal
FlexContent
View2D
Rect.justifyContent
key
readonly
public
key
:
string
Rect.key
layout
readonly
public
layout
:
SimpleSignal
LayoutMode
View2D
Rect.layout
left
readonly
public
left
:
SimpleVector2Signal
View2D
The position of the left edge of this node.
When set, this shortcut property will modify the node's position so thatthe left edge ends up in the given place.
When retrieved, it will return the position of the left edge in the parentspace.
Inherited from
Rect.left
letterSpacing
readonly
public
letterSpacing
:
SimpleSignal
number
View2D
Rect.letterSpacing
lineCap
readonly
public
lineCap
:
SimpleSignal
CanvasLineCap
View2D
Rect.lineCap
lineDash
readonly
public
lineDash
:
SimpleSignal
number
[]
View2D
Rect.lineDash
lineDashOffset
readonly
public
lineDashOffset
:
SimpleSignal
number
View2D
Rect.lineDashOffset
lineHeight
readonly
public
lineHeight
:
SimpleSignal
Length
View2D
Rect.lineHeight
lineJoin
readonly
public
lineJoin
:
SimpleSignal
CanvasLineJoin
View2D
Rect.lineJoin
lineWidth
readonly
public
lineWidth
:
SimpleSignal
number
View2D
Rect.lineWidth
margin
readonly
public
margin
:
SpacingSignal
View2D
Rect.margin
maxHeight
readonly
public
maxHeight
:
SimpleSignal
LengthLimit
View2D
Rect.maxHeight
maxWidth
readonly
public
maxWidth
:
SimpleSignal
LengthLimit
View2D
Rect.maxWidth
middle
readonly
public
middle
:
SimpleVector2Signal
View2D
The position of the center of this node.
When set, this shortcut property will modify the node's position so thatthe 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 parentspace.
Inherited from
Rect.middle
minHeight
readonly
public
minHeight
:
SimpleSignal
LengthLimit
View2D
Rect.minHeight
minWidth
readonly
public
minWidth
:
SimpleSignal
LengthLimit
View2D
Rect.minWidth
offset
readonly
public
offset
:
Vector2Signal
View2D
Represents the offset of this node's origin.
By default, the origin of a node is located at its center. The originserves as the pivot point when rotating and scaling a node, but it doesn'taffect the placement of its children.
The value is relative to the size of this node. A value of
1
means as farto 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
Rect.offset
opacity
readonly
public
opacity
:
SimpleSignal
number
View2D
Represents the opacity of this node in the range 0-1.
The value is clamped to the range 0-1.
Inherited from
Rect.opacity
padding
readonly
public
padding
:
SpacingSignal
View2D
Rect.padding
parent
readonly
public
parent
:
SimpleSignal
null
Node
void
=
...
Rect.parent
playbackState
readonly
public
playbackState
:
SimpleSignal
PlaybackState
View2D
position
readonly
public
position
:
Vector2Signal
View2D
Represents the position of this node in local space of its parent.
Examples
Inherited from
Rect.position
properties
readonly
public
properties
:
Record
string
PropertyMetadata
any
=
...
Rect.properties
radius
readonly
public
radius
:
SpacingSignal
View2D
Rounds the corners of this rectangle.
The value represents the radius of the quarter circle that is used to roundthe corners. If the value is a number, the same radius is used for allcorners. Passing an array of two to four numbers will set individual radiifor each corner. Individual radii correspond to different corners dependingon the number of values passed:
// top-left-and-bottom-right | top-right-and-bottom-left
[
10
,
30
]
// top-left | top-right-and-bottom-left | bottom-right
[
10
,
20
,
30
]
// top-left | top-right | bottom-right | bottom-left
[
10
,
20
,
30
,
40
]
Examples
Inherited from
Rect.radius
ratio
readonly
public
ratio
:
SimpleSignal
null
number
View2D
Rect.ratio
right
readonly
public
right
:
SimpleVector2Signal
View2D
The position of the right edge of this node.
When set, this shortcut property will modify the node's position so thatthe right edge ends up in the given place.
When retrieved, it will return the position of the right edge in the parentspace.
Inherited from
Rect.right
rotation
readonly
public
rotation
:
SimpleSignal
number
View2D
Represents the rotation (in degrees) of this node relative to its parent.
Inherited from
Rect.rotation
scale
readonly
public
scale
:
Vector2Signal
View2D
Represents the scale of this node in local space of its parent.
Examples
Inherited from
Rect.scale
shaders
readonly
public
shaders
:
Signal
PossibleShaderConfig
ShaderConfig
[]
View2D
SignalContext
PossibleShaderConfig
ShaderConfig
[]
View2D
Rect.shaders
shadowBlur
readonly
public
shadowBlur
:
SimpleSignal
number
View2D
Rect.shadowBlur
shadowColor
readonly
public
shadowColor
:
ColorSignal
View2D
Rect.shadowColor
shadowOffset
readonly
public
shadowOffset
:
Vector2Signal
View2D
Rect.shadowOffset
shrink
readonly
public
shrink
:
SimpleSignal
number
View2D
Rect.shrink
size
readonly
public
size
:
Vector2LengthSignal
View2D
Represents the size of this node.
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
Length
which iseither:
-
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 thecurrent 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 percentsrefers to the size of the entire scene.
Examples
Inherited from
Rect.size
skew
readonly
public
skew
:
Vector2Signal
View2D
Represents the skew of this node in local space of its parent.
Examples
Inherited from
Rect.skew
smoothCorners
readonly
public
smoothCorners
:
SimpleSignal
boolean
View2D
Enables corner smoothing.
This property only affects the way rounded corners are drawn. To controlthe corner radius use the
radius
property.
When enabled, rounded corners are drawn continuously using Bézier curvesrather than quarter circles. The sharpness of the curve can be controlledwith
cornerSharpness
.
You can read more about corner smoothing in this article by Nick Lawrence .
Examples
Inherited from
Rect.smoothCorners
start
readonly
public
start
:
SimpleSignal
number
View2D
A percentage from the start before which the curve should be clipped.
The portion of the curve that comes before the given percentage will bemade invisible.
This property is usefully for animating the curve appearing on the screen.The value of
0
means the very start of the curve (accounting for the
startOffset
) while
1
means the very end (accounting for the
endOffset
).
Rect.start
startArrow
readonly
public
startArrow
:
SimpleSignal
boolean
View2D
Whether to display an arrow at the start of the visible curve.
Use
arrowSize
to control the size of the arrow.
Rect.startArrow
startOffset
readonly
public
startOffset
:
SimpleSignal
number
View2D
The offset in pixels from the start of the curve.
This property lets you specify where along the defined curve the actualvisible portion starts. For example, setting it to
20
will make the first20 pixels of the curve invisible.
This property is useful for trimming the curve using a fixed distance.If you want to animate the curve appearing on the screen, use
start
instead.
Rect.startOffset
stroke
readonly
public
stroke
:
CanvasStyleSignal
View2D
Rect.stroke
strokeFirst
readonly
public
strokeFirst
:
SimpleSignal
boolean
View2D
Rect.strokeFirst
styles
public
styles
:
CSSStyleDeclaration
Rect.styles
textAlign
readonly
public
textAlign
:
SimpleSignal
CanvasTextAlign
View2D
Rect.textAlign
textDirection
readonly
public
textDirection
:
SimpleSignal
CanvasDirection
View2D
Rect.textDirection
textWrap
readonly
public
textWrap
:
SimpleSignal
TextWrap
View2D
Rect.textWrap
top
readonly
public
top
:
SimpleVector2Signal
View2D
The position of the top edge of this node.
When set, this shortcut property will modify the node's position so thatthe top edge ends up in the given place.
When retrieved, it will return the position of the top edge in the parentspace.
Inherited from
Rect.top
topLeft
readonly
public
topLeft
:
SimpleVector2Signal
View2D
The position of the top left corner of this node.
When set, this shortcut property will modify the node's position so thatthe top left corner ends up in the given place.
When retrieved, it will return the position of the top left corner in theparent space.
Inherited from
Rect.topLeft
topRight
readonly
public
topRight
:
SimpleVector2Signal
View2D
The position of the top right corner of this node.
When set, this shortcut property will modify the node's position so thatthe top right corner ends up in the given place.
When retrieved, it will return the position of the top right corner in theparent space.
Inherited from
Rect.topRight
wrap
readonly
public
wrap
:
SimpleSignal
FlexWrap
View2D
Rect.wrap
zIndex
readonly
public
zIndex
:
SimpleSignal
number
View2D
Rect.zIndex
shadowRoot
static
public
shadowRoot
:
ShadowRoot
Accessors
columnGap
Inherited from
Rect.columnGap
height
Inherited from
Rect.height
rowGap
Inherited from
Rect.rowGap
width
Inherited from
Rect.width
x
public
get
x
():
SimpleSignal
number
this
Rect.x
y
public
get
y
():
SimpleSignal
number
this
Rect.y
Methods
[iterator]
public
[iterator]
():
Generator
key
:
string
meta
:
PropertyMetadata
any
signal
:
SimpleSignal
any
void
void
unknown
Rect.[iterator]
absoluteOpacity
public
absoluteOpacity
():
number
Rect.absoluteOpacity
add
public
add
node
:
ComponentChildren
:
View2D
Add the given node(s) as the children of this node.
The nodes will be appended at the end of the children list.
Examples
Parameters
-
node : ComponentChildrenA node or an array of nodes to append.
Rect.add
anchorPosition
public
anchorPosition
():
Vector2
Rect.anchorPosition
applyState
public
applyState
state
:
NodeState
duration
:
number
timing
?:
TimingFunction
:
ThreadGenerator
Apply the given state to the node, setting all matching signal values tothe provided values.
Parameters
Inherited from
Rect.applyState
arcLength
public
arcLength
():
number
The visible arc length of this curve.
This arc length accounts for both the offset and the
start
and
end
properties.
Rect.arcLength
baseArcLength
public
baseArcLength
():
number
The base arc length of this curve.
This is the entire length of this curve, not accounting for
the offsets
.
Rect.baseArcLength
cacheBBox
public
cacheBBox
():
BBox
Get a bounding box for the contents rendered by this node as wellas its children.
Inherited from
Rect.cacheBBox
cardinalPoint
public
cardinalPoint
origin
:
Origin
Direction
:
SimpleVector2Signal
View2D
Get the cardinal point corresponding to the given origin.
Parameters
-
origin : Origin DirectionThe origin or direction of the point.
Rect.cardinalPoint
childAs
Get the nth children cast to the specified type.
Type Parameters
-
T extends Node T = Node
Parameters
-
index : numberThe index of the child to retrieve.
Rect.childAs
childrenAs
public
childrenAs
T
extends
Node
T
=
Node
():
T
[]
Get the children array cast to the specified type.
Type Parameters
-
T extends Node T = Node
Rect.childrenAs
clone
public
clone
customProps
:
NodeState
=
{}
:
View2D
Create a copy of this node.
Parameters
-
customProps : NodeState = {}Properties to override.
Rect.clone
completion
public
completion
():
number
The percentage of the curve that's currently visible.
The returned value is the ratio between the visible length (as defined by
start
and
end
) and the offset length of the curve.
Rect.completion
compositeToLocal
public
compositeToLocal
():
DOMMatrix
Rect.compositeToLocal
compositeToWorld
public
compositeToWorld
():
DOMMatrix
A matrix mapping composite space to world space.
Certain effects such as blur and shadows ignore the current transformation.This matrix can be used to transform their parameters so that the effectappears relative to the closest composite root.
Inherited from
Rect.compositeToWorld
computedPosition
public
computedPosition
():
Vector2
Rect.computedPosition
dispose
public
override
dispose
():
void
Prepare this node to be disposed of.
This method is called automatically when a scene is refreshed. It willbe 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 thenode to be garbage collected.
Overwrites
Rect.dispose
distanceToPercentage
public
distanceToPercentage
value
:
number
:
number
Convert a distance along the curve to a percentage.
The distance should be given in relation to the full curve, notaccounting for
startOffset
and
endOffset
.
Parameters
-
value : numberThe distance along the curve.
Rect.distanceToPercentage
drawOverlay
public
drawOverlay
context
:
CanvasRenderingContext2D
matrix
:
DOMMatrix
:
void
Draw an overlay for this node.
The overlay for the currently inspected node is displayed on top of thecanvas.
The provided context is in screen space. The local-to-screen matrix can beused 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.
Parameters
-
context : CanvasRenderingContext2DThe context to draw with.
-
matrix : DOMMatrixA local-to-screen matrix.
Rect.drawOverlay
findAll
Find all descendants of this node that match the given predicate.
Type Parameters
-
T extends Node T
Parameters
Inherited from
Rect.findAll
findAncestor
Find the closest ancestor of this node that matches the given predicate.
Type Parameters
-
T extends Node T
Parameters
Inherited from
Rect.findAncestor
findFirst
Find the first descendant of this node that matches the given predicate.
Type Parameters
-
T extends Node T
Parameters
Inherited from
Rect.findFirst
findKey
Find a node by its key.
Type Parameters
-
T extends Node T = Node
Parameters
-
key : stringThe key of the node.
findLast
Find the last descendant of this node that matches the given predicate.
Type Parameters
-
T extends Node T
Parameters
Inherited from
Rect.findLast
getOriginDelta
public
getOriginDelta
origin
:
Origin
:
Vector2
Parameters
-
origin : Origin
Rect.getOriginDelta
getPointAtPercentage
public
getPointAtPercentage
value
:
number
:
CurvePoint
Parameters
-
value : number
Rect.getPointAtPercentage
getState
public
getState
():
NodeState
Return a snapshot of the node's current signal values.
This method will calculate the values of any reactive properties of thenode at the time the method is called.
Inherited from
Rect.getState
hit
public
hit
position
:
Vector2
:
null
Node
Try to find a node intersecting the given position.
Parameters
-
position : Vector2The searched position.
Rect.hit
insert
public
insert
node
:
ComponentChildren
index
:
number
=
0
:
View2D
Insert the given node(s) at the specified index in the children list.
Examples
Parameters
-
node : ComponentChildrenA node or an array of nodes to insert.
-
index : number = 0An index at which to insert the node(s).
Rect.insert
instantiate
public
instantiate
props
:
NodeProps
=
{}
:
View2D
Create an instance of this node's class.
Parameters
-
props : NodeProps = {}Properties to pass to the constructor.
Rect.instantiate
isLayoutRoot
public
isLayoutRoot
():
boolean
Rect.isLayoutRoot
layoutEnabled
public
layoutEnabled
():
boolean
Get the resolved layout mode of this node.
When the mode is
null
, its value will be inherited from the parent.
Use
layout
to get the raw mode set for this node (withoutinheritance).
Rect.layoutEnabled
localToParent
public
localToParent
():
DOMMatrix
Get the local-to-parent matrix for this node.
This matrix transforms vectors from local space of this node to local spaceof this node's parent.
Inherited from
Rect.localToParent
localToWorld
public
localToWorld
():
DOMMatrix
Get the local-to-world matrix for this node.
This matrix transforms vectors from local space of this node to worldspace.
Examples
Inherited from
Rect.localToWorld
lockSize
public
lockSize
():
void
Rect.lockSize
move
public
move
by
:
number
=
1
:
View2D
Rearrange this node in relation to its siblings.
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 ofthe elements it has passed). Negative values move it down.
Parameters
-
by : number = 1Number of places by which the node should be moved.
Rect.move
moveAbove
public
moveAbove
node
:
Node
directlyAbove
:
boolean
=
false
:
View2D
Move the node above the provided node in the parent's layout.
The node will be moved above the provided node and from then on will berendered on top of it. By default, if the node is already positionedhigher than the sibling node, it will not get moved.
Parameters
-
node : NodeThe sibling node below which to move.
-
directlyAbove : boolean = falseWhether the node should be positioned directly above thesibling. When true, will move the node even if it isalready positioned above the sibling.
Rect.moveAbove
moveBelow
public
moveBelow
node
:
Node
directlyBelow
:
boolean
=
false
:
View2D
Move the node below the provided node in the parent's layout.
The node will be moved below the provided node and from then on will berendered below it. By default, if the node is already positioned lower thanthe sibling node, it will not get moved.
Parameters
-
node : NodeThe sibling node below which to move.
-
directlyBelow : boolean = falseWhether the node should be positioned directly belowthe sibling. When true, will move the node even ifit is already positioned below the sibling.
Rect.moveBelow
moveDown
public
moveDown
():
View2D
Move the node down in relation to its siblings.
The node will exchange places with the sibling right below it (if any) andfrom then on will be rendered under it.
Inherited from
Rect.moveDown
moveOffset
public
moveOffset
offset
:
Vector2
:
void
Update the offset of this node and adjust the position to keep it in thesame place.
Parameters
-
offset : Vector2The new offset.
Rect.moveOffset
moveTo
public
moveTo
index
:
number
:
View2D
Move the node to the provided position relative to its siblings.
If the node is getting moved to a lower position, it will be placed belowthe sibling that's currently at the provided index (if any).If the node is getting moved to a higher position, it will be placed abovethe sibling that's currently at the provided index (if any).
Parameters
-
index : numberThe index to move the node to.
Rect.moveTo
moveToBottom
public
moveToBottom
():
View2D
Move the node to the bottom in relation to its siblings.
The node will be placed at the beginning of the children list and from thenon will be rendered below all of its siblings.
Inherited from
Rect.moveToBottom
moveToTop
public
moveToTop
():
View2D
Move the node to the top in relation to its siblings.
The node will be placed at the end of the children list and from then onwill be rendered on top of all of its siblings.
Inherited from
Rect.moveToTop
moveUp
public
moveUp
():
View2D
Move the node up in relation to its siblings.
The node will exchange places with the sibling right above it (if any) andfrom then on will be rendered on top of it.
Inherited from
Rect.moveUp
offsetArcLength
public
offsetArcLength
():
number
The offset arc length of this curve.
This is the length of the curve that accounts for
the offsets
.
Rect.offsetArcLength
parentAs
public
parentAs
T
extends
Node
T
=
Node
():
null
T
Get the parent cast to the specified type.
Type Parameters
-
T extends Node T = Node
Rect.parentAs
parentToWorld
public
parentToWorld
():
DOMMatrix
Get the parent-to-world matrix for this node.
This matrix transforms vectors from local space of this node's parent toworld space.
Inherited from
Rect.parentToWorld
peekChildren
public
peekChildren
():
readonly
Node
[]
Get the current children of this node.
Unlike
children
, this method does not have any side effects.It does not register the
children
signal as a dependency, and it does notspawn any children. It can be used to safely retrieve the current state ofthe scene graph for debugging purposes.
Rect.peekChildren
percentageToDistance
public
percentageToDistance
value
:
number
:
number
Convert a percentage along the curve to a distance.
The returned distance is given in relation to the full curve, notaccounting for
startOffset
and
endOffset
.
Parameters
-
value : numberThe percentage along the curve.
Rect.percentageToDistance
profile
public
profile
():
CurveProfile
Rect.profile
reactiveClone
public
reactiveClone
customProps
:
NodeState
=
{}
:
View2D
Create a reactive copy of this node.
A reactive copy has all its properties dynamically updated to match thesource node.
Parameters
-
customProps : NodeState = {}Properties to override.
Rect.reactiveClone
releaseSize
public
releaseSize
():
void
Rect.releaseSize
remove
public
remove
():
View2D
Remove this node from the tree.
Inherited from
Rect.remove
removeChildren
public
removeChildren
():
View2D
Remove all children of this node.
Inherited from
Rect.removeChildren
render
public
override
render
context
:
CanvasRenderingContext2D
:
void
Render this node onto the given canvas.
Parameters
-
context : CanvasRenderingContext2DThe context to draw with.
Rect.render
reparent
public
reparent
newParent
:
Node
:
View2D
Change the parent of this node while keeping the absolute transform.
After performing this operation, the node will stay in the same placevisually, but its parent will be changed.
Parameters
-
newParent : NodeThe new parent of this node.
Rect.reparent
restore
public
restore
():
void
public
restore
duration
:
number
timing
?:
TimingFunction
:
ThreadGenerator
Restore the node to its last saved state.
This method can be used together with the
save
method to restore anode to a previously saved state. Restoring a node to a previous stateremoves that state from the state stack.
Examples
Inherited from
Rect.restore
ripple
public
ripple
duration
:
number
=
1
:
Generator
void
ThreadGenerator
Promise
any
Promisable
any
void
any
Parameters
-
duration : number = 1
Rect.ripple
save
public
save
():
void
Push a snapshot of the node's current state onto the node's state stack.
This method can be used together with the
restore
method to save anode's current state and later restore it. It is possible to store morethan one state by calling
save
method multiple times.
Rect.save
snapshotClone
public
snapshotClone
customProps
:
NodeState
=
{}
:
View2D
Create a copy of this node.
Unlike
clone
, a snapshot clone calculates any reactive propertiesat the moment of cloning and passes the raw values to the copy.
Parameters
-
customProps : NodeState = {}Properties to override.
Rect.snapshotClone
toPromise
public
toPromise
():
Promise
View2D
Wait for any asynchronous resources that this node or its children have.
Certain resources like images are always loaded asynchronously.Awaiting this method makes sure that all such resources are done loadingbefore continuing the animation.
Inherited from
Rect.toPromise
view
public
override
view
():
View2D
Rect.view
worldToLocal
public
worldToLocal
():
DOMMatrix
Get the world-to-local matrix for this node.
This matrix transforms vectors from world space to local space of thisnode.
Examples
Inherited from
Rect.worldToLocal
worldToParent
public
worldToParent
():
DOMMatrix
Get the world-to-parent matrix for this node.
This matrix transforms vectors from world space to local space of thisnode's parent.
Inherited from
Rect.worldToParent