Knot
class
Knot
extends
Node
A node representing a knot of a
Spline
.
Constructors
constructor
Parameters
-
props : KnotProps
Node.constructor
Properties
absolutePosition
readonly
public
absolutePosition
:
SimpleVector2Signal
Knot
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.
Node.absolutePosition
absoluteRotation
readonly
public
absoluteRotation
:
SimpleSignal
number
Knot
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
Node.absoluteRotation
absoluteScale
readonly
public
absoluteScale
:
SimpleVector2Signal
Knot
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.
Node.absoluteScale
auto
readonly
public
auto
:
KnotAutoSignal
Knot
How much to blend between the user-provided handles and the auto-calculatedhandles.
This property has no effect if no explicit handles are provided for theknot.
Default Value:0
cache
readonly
public
cache
:
SimpleSignal
boolean
Knot
Node.cache
cachePadding
readonly
public
cachePadding
:
SpacingSignal
Knot
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
.
Node.cachePadding
children
readonly
public
children
:
Signal
ComponentChildren
Node
[]
Knot
SignalContext
ComponentChildren
Node
[]
Knot
Node.children
composite
readonly
public
composite
:
SimpleSignal
boolean
Knot
Node.composite
compositeOperation
readonly
public
compositeOperation
:
SimpleSignal
GlobalCompositeOperation
Knot
Node.compositeOperation
creationStack
readonly
public
creationStack
?:
string
Node.creationStack
endHandle
readonly
public
endHandle
:
Vector2Signal
Knot
The position of the knot's end handle. The position is provided relativeto the knot's position.
By default, the position of the end handle will be the mirrored positionof the
startHandle
.
If neither an end handle nor a start handle is provided, the positions ofthe handles gets calculated automatically to create smooth curve throughthe knot. The smoothness of the resulting curve can be controlled via the
smoothness
property.
It is also possible to blend between a user-defined position and theauto-calculated position by using the
auto
property.
Mirrored position of the startHandle.
filters
readonly
public
filters
:
FiltersSignal
Knot
Node.filters
isClass
public
isClass
:
boolean
Node.isClass
key
readonly
public
key
:
string
Node.key
opacity
readonly
public
opacity
:
SimpleSignal
number
Knot
Represents the opacity of this node in the range 0-1.
The value is clamped to the range 0-1.
Inherited from
Node.opacity
parent
readonly
public
parent
:
SimpleSignal
null
Node
void
=
...
Node.parent
position
readonly
public
position
:
Vector2Signal
Knot
Represents the position of this node in local space of its parent.
Examples
Inherited from
Node.position
properties
readonly
public
properties
:
Record
string
PropertyMetadata
any
=
...
Node.properties
rotation
readonly
public
rotation
:
SimpleSignal
number
Knot
Represents the rotation (in degrees) of this node relative to its parent.
Inherited from
Node.rotation
scale
readonly
public
scale
:
Vector2Signal
Knot
Represents the scale of this node in local space of its parent.
Examples
Inherited from
Node.scale
shaders
readonly
public
shaders
:
Signal
PossibleShaderConfig
ShaderConfig
[]
Knot
SignalContext
PossibleShaderConfig
ShaderConfig
[]
Knot
Node.shaders
shadowBlur
readonly
public
shadowBlur
:
SimpleSignal
number
Knot
Node.shadowBlur
shadowColor
readonly
public
shadowColor
:
ColorSignal
Knot
Node.shadowColor
shadowOffset
readonly
public
shadowOffset
:
Vector2Signal
Knot
Node.shadowOffset
skew
readonly
public
skew
:
Vector2Signal
Knot
Represents the skew of this node in local space of its parent.
Examples
Inherited from
Node.skew
startHandle
readonly
public
startHandle
:
Vector2Signal
Knot
The position of the knot's start handle. The position is provided relativeto the knot's position.
By default, the position of the start handle will be the mirrored positionof the
endHandle
.
If neither an end handle nor a start handle is provided, the positions ofthe handles gets calculated automatically to create smooth curve throughthe knot. The smoothness of the resulting curve can be controlled via the
smoothness
property.
It is also possible to blend between a user-defined position and theauto-calculated position by using the
auto
property.
Mirrored position of the endHandle.
zIndex
readonly
public
zIndex
:
SimpleSignal
number
Knot
Node.zIndex
Accessors
endHandleAuto
public
get
endHandleAuto
():
Signal
number
number
this
SignalContext
number
number
this
startHandleAuto
public
get
startHandleAuto
():
Signal
number
number
this
SignalContext
number
number
this
x
public
get
x
():
SimpleSignal
number
this
Node.x
y
public
get
y
():
SimpleSignal
number
this
Node.y
Methods
[iterator]
public
[iterator]
():
Generator
key
:
string
meta
:
PropertyMetadata
any
signal
:
SimpleSignal
any
void
void
unknown
Node.[iterator]
absoluteOpacity
public
absoluteOpacity
():
number
Node.absoluteOpacity
add
public
add
node
:
ComponentChildren
:
Knot
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.
Node.add
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
Node.applyState
cacheBBox
public
cacheBBox
():
BBox
Get a bounding box for the contents rendered by this node as wellas its children.
Inherited from
Node.cacheBBox
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.
Node.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
Node.childrenAs
clone
public
clone
customProps
:
NodeState
=
{}
:
Knot
Create a copy of this node.
Parameters
-
customProps : NodeState = {}Properties to override.
Node.clone
compositeToLocal
public
compositeToLocal
():
DOMMatrix
Node.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
Node.compositeToWorld
dispose
public
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.
Inherited from
Node.dispose
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.
Node.drawOverlay
findAll
Find all descendants of this node that match the given predicate.
Type Parameters
-
T extends Node T
Parameters
-
predicate : public ()A function that returns true if the node matches.
Node.findAll
findAncestor
Find the closest ancestor of this node that matches the given predicate.
Type Parameters
-
T extends Node T
Parameters
-
predicate : public ()A function that returns true if the node matches.
Node.findAncestor
findFirst
Find the first descendant of this node that matches the given predicate.
Type Parameters
-
T extends Node T
Parameters
-
predicate : public ()A function that returns true if the node matches.
Node.findFirst
findLast
Find the last descendant of this node that matches the given predicate.
Type Parameters
-
T extends Node T
Parameters
-
predicate : public ()A function that returns true if the node matches.
Node.findLast
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
Node.getState
hit
public
hit
position
:
Vector2
:
null
Node
Try to find a node intersecting the given position.
Parameters
-
position : Vector2The searched position.
Node.hit
insert
public
insert
node
:
ComponentChildren
index
:
number
=
0
:
Knot
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).
Node.insert
instantiate
public
instantiate
props
:
NodeProps
=
{}
:
Knot
Create an instance of this node's class.
Parameters
-
props : NodeProps = {}Properties to pass to the constructor.
Node.instantiate
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
Node.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
Node.localToWorld
move
public
move
by
:
number
=
1
:
Knot
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.
Node.move
moveAbove
public
moveAbove
node
:
Node
directlyAbove
:
boolean
=
false
:
Knot
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.
Node.moveAbove
moveBelow
public
moveBelow
node
:
Node
directlyBelow
:
boolean
=
false
:
Knot
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.
Node.moveBelow
moveDown
public
moveDown
():
Knot
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
Node.moveDown
moveTo
public
moveTo
index
:
number
:
Knot
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.
Node.moveTo
moveToBottom
public
moveToBottom
():
Knot
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
Node.moveToBottom
moveToTop
public
moveToTop
():
Knot
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
Node.moveToTop
moveUp
public
moveUp
():
Knot
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
Node.moveUp
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
Node.parentAs
points
public
points
():
KnotInfo
reactiveClone
public
reactiveClone
customProps
:
NodeState
=
{}
:
Knot
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.
Node.reactiveClone
remove
public
remove
():
Knot
Remove this node from the tree.
Inherited from
Node.remove
removeChildren
public
removeChildren
():
void
Remove all children of this node.
Inherited from
Node.removeChildren
render
public
render
context
:
CanvasRenderingContext2D
:
void
Render this node onto the given canvas.
Parameters
-
context : CanvasRenderingContext2DThe context to draw with.
Node.render
reparent
public
reparent
newParent
:
Node
:
void
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.
Node.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
Node.restore
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.
Node.save
snapshotClone
public
snapshotClone
customProps
:
NodeState
=
{}
:
Knot
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.
Node.snapshotClone
toPromise
public
toPromise
():
Promise
Knot
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
Node.toPromise
view
public
view
():
View2D
Node.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
Node.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
Node.worldToParent