Readonly Internal[ReadonlyabsoluteRetrieving 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.
ReadonlyabsoluteA helper signal for operating on the rotation in world space.
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.
ReadonlyabsoluteA 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 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.
ReadonlyalignReadonlyalignReadonlyalignReadonlyalphaThe alpha value of this image.
ReadonlyantialiasedReadonlyarrowControls the size of the end and start arrows.
To make the arrows visible make sure to enable startArrow and/or endArrow.
ReadonlybasisReadonlybottomThe position of the bottom edge of this node.
ReadonlybottomThe position of the bottom left corner of this node.
ReadonlybottomThe position of the bottom right corner of this node.
ReadonlycacheReadonlycacheControls the padding of the cached canvas used by this node.
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.
ProtectedcanReadonlychildrenReadonlyclipReadonlyclosedWhether the curve should be closed.
ReadonlycompositeReadonlycompositeReadonlycornerControls the sharpness of smoothCorners.
This property only affects the way rounded corners are drawn. To control the corner radius use the radius property.
Requires smoothCorners to be enabled to have any effect.
By default, corner sharpness is set to 0.6 which represents a smooth,
circle-like rounding. At 0 the edges are squared off.
Optional ReadonlycreationReadonlydirectionReadonlyendA percentage from the start after which the curve should be clipped.
The portion of the curve that comes after the given percentage will be made invisible.
This property is usefully for animating the curve appearing on the screen.
The value of 0 means the very start of the curve (accounting for the
startOffset) while 1 means the very end (accounting for the
endOffset).
ReadonlyendWhether to display an arrow at the end of the visible curve.
Use arrowSize to control the size of the arrow.
ReadonlyendThe offset in pixels from the end of the curve.
This property lets you specify where along the defined curve the actual
visible portion ends. For example, setting it to 20 will make the last
20 pixels of the curve invisible.
This property is useful for trimming the curve using a fixed distance. If you want to animate the curve appearing on the screen, use end instead.
ReadonlyfillReadonlyfiltersReadonlyfontReadonlyfontReadonlyfontReadonlyfontReadonlygapReadonlygrowProtectedhasReadonlyjustifyReadonlykeyReadonlylayoutReadonlyleftThe position of the left edge of this node.
ReadonlyletterReadonlylineReadonlylineReadonlylineReadonlylineReadonlylineReadonlylineReadonlymarginReadonlymaxReadonlymaxReadonlymiddleThe position of the center of this node.
ReadonlyminReadonlyminReadonlyoffsetRepresents the offset of this node's origin.
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 cornerReadonlyopacityRepresents the opacity of this node in the range 0-1.
ReadonlypaddingReadonlyparentReadonlypositionRepresents the position of this node in local space of its parent.
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);
ReadonlypropertiesReadonlypsdReadonlypsdReadonlypsdReadonlyradiusRounds the corners of this rectangle.
The value represents the radius of the quarter circle that is used to round the corners. If the value is a number, the same radius is used for all corners. Passing an array of two to four numbers will set individual radii for each corner. Individual radii correspond to different corners depending on the number of values passed:
// top-left-and-bottom-right | top-right-and-bottom-left
[10, 30]
// top-left | top-right-and-bottom-left | bottom-right
[10, 20, 30]
// top-left | top-right | bottom-right | bottom-left
[10, 20, 30, 40]
ReadonlyratioProtectedrealReadonlyrightThe position of the right edge of this node.
Protected ReadonlyrippleReadonlyrotationRepresents the rotation (in degrees) of this node relative to its parent.
ReadonlyscaleRepresents the scale of this node in local space of its parent.
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);
Readonly ExperimentalshadersReadonlyshadowReadonlyshadowReadonlyshadowReadonlyshrinkReadonlysizeRepresents 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 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 lengthWhen 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.
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%');
Protected ReadonlysizeReadonlyskewRepresents the skew of this node in local space of its parent.
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);
ReadonlysmoothEnables corner smoothing.
This property only affects the way rounded corners are drawn. To control the corner radius use the radius property.
When enabled, rounded corners are drawn continuously using Bézier curves rather than quarter circles. The sharpness of the curve can be controlled with cornerSharpness.
You can read more about corner smoothing in this article by Nick Lawrence.
ReadonlysmoothingWhether the image should be smoothed.
Protected ReadonlyspawnerUse children instead.
ReadonlysrcThe source of this image.
ReadonlystartA percentage from the start before which the curve should be clipped.
The portion of the curve that comes before the given percentage will be made invisible.
This property is usefully for animating the curve appearing on the screen.
The value of 0 means the very start of the curve (accounting for the
startOffset) while 1 means the very end (accounting for the
endOffset).
ReadonlystartWhether to display an arrow at the start of the visible curve.
Use arrowSize to control the size of the arrow.
ReadonlystartThe offset in pixels from the start of the curve.
This property lets you specify where along the defined curve the actual
visible portion starts. For example, setting it to 20 will make the first
20 pixels of the curve invisible.
This property is useful for trimming the curve using a fixed distance. If you want to animate the curve appearing on the screen, use start instead.
ReadonlystrokeReadonlystrokeReadonlytextReadonlytextReadonlytextReadonlytopThe position of the top edge of this node.
ReadonlytopThe position of the top left corner of this node.
ReadonlytopThe position of the top right corner of this node.
Protectedview2ReadonlywrapReadonlyzAdd the given node(s) as the children of this node.
A node or an array of nodes to append.
ProtectedappendedProtectedapplyProtectedapplyApply the given state to the node, setting all matching signal values to the provided values.
The state to apply to the node.
Smoothly transition between the current state of the node and the given state.
The state to transition to.
The duration of the transition.
Optionaltiming: TimingFunctionThe timing function to use for the transition.
ProtectedapplyProtectedapplyThe base arc length of this curve.
This is the entire length of this curve, not accounting for the offsets.
Get a bounding box for the contents rendered by this node as well as its children.
ProtectedcacheProtectedcachedGet a cache canvas with the contents of this node rendered onto it.
Get the nth children cast to the specified type.
The index of the child to retrieve.
ProtectedchildrenCreate a copy of this node.
OptionalcustomProps: NodeStateProperties to override.
ProtectedcollectCollect all asynchronous resources used by this node.
ProtectedcompositeProtectedcomputedProtectedcurveProtecteddesiredConvert a distance along the curve to a percentage.
The distance along the curve.
The distance should be given in relation to the full curve, not accounting for startOffset and endOffset.
ProtecteddrawProtecteddrawDraw an overlay for this node.
The context to draw with.
A local-to-screen matrix.
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.
ProtecteddrawProtecteddrawProtectedfilledProtectedfilterFind all descendants of this node that match the given predicate.
A function that returns true if the node matches.
Find the closest ancestor of this node that matches the given predicate.
A function that returns true if the node matches.
Find the first descendant of this node that matches the given predicate.
A function that returns true if the node matches.
Find the last descendant of this node that matches the given predicate.
A function that returns true if the node matches.
ProtectedfullProtectedgetProtectedgetProtectedgetProtectedgetProtectedgetGet color of the image at the given position.
The position in local space at which to sample the color.
ProtectedgetProtectedgetProtectedgetGet color of the image at the given pixel.
The pixel's position.
ProtectedgetProtectedgetProtectedgetProtectedgetProtectedgetProtectedgetProtectedhasProtectedhasTry to find a node intersecting the given position.
The searched position.
ProtectedimageProtectedimageInsert the given node(s) at the specified index in the children list.
A node or an array of nodes to insert.
Optionalindex: numberAn index at which to insert the node(s).
Create an instance of this node's class.
Optionalprops: NodePropsProperties to pass to the constructor.
ProtectedlayoutGet 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 (without inheritance).
ProtectedlineGet the local-to-world matrix for this node.
Rearrange this node in relation to its siblings.
Optionalby: numberNumber of places by which the node should be moved.
Move the node above the provided node in the parent's layout.
The sibling node below which to move.
OptionaldirectlyAbove: booleanWhether the node should be positioned directly above the sibling. When true, will move the node even if it is already positioned above the sibling.
Move the node below the provided node in the parent's layout.
The sibling node below which to move.
OptionaldirectlyBelow: booleanWhether the node should be positioned directly below the sibling. When true, will move the node even if it is already positioned below the sibling.
Update the offset of this node and adjust the position to keep it in the same place.
The new offset.
Move the node to the provided position relative to its siblings.
The index to move the node to.
The offset arc length of this curve.
This is the length of the curve that accounts for the offsets.
ProtectedoffsetProtectedparentProtectedparentProtectedparseParse any ComponentChildren into an array of nodes.
The children to parse.
ProtectedparseProtectedparseGet 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 not
spawn any children. It can be used to safely retrieve the current state of
the scene graph for debugging purposes.
Convert a percentage along the curve to a distance.
The percentage along the curve.
The returned distance is given in relation to the full curve, not accounting for startOffset and endOffset.
ProtectedprocessRemove this node from the tree.
ProtectedremoveRemove the given child.
Remove all children of this node.
Render this node onto the given canvas.
The context to draw with.
ProtectedrenderProtectedrequestApply any new font changes to this node and all of its ancestors.
ProtectedrequestFind the closest layout root and apply any new layout changes.
ProtectedrequiresWhether this node should be cached or not.
ProtectedrequiresRestore the node to its last saved state.
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.
Tween the node to its last saved state.
The duration of the transition.
Optionaltiming: TimingFunctionThe timing function to use for the transition.
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.
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);
ProtectedripplePush 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 a
node's current state and later restore it. It is possible to store more
than one state by calling save method multiple times.
ProtectedscalingInternalA simplified version of localToParent matrix used for transforming direction vectors.
ProtectedsetProtectedsetProtectedsetProtectedsetProtectedsetProtectedsetProtectedsetProtectedsetupPrepare the given context for drawing a cached node onto it.
The context using which the cache will be drawn.
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.
ProtectedsetProtectedsetProtectedsetCreate a copy of this node.
OptionalcustomProps: NodeStateProperties to override.
Unlike clone, a snapshot clone calculates any reactive properties at the moment of cloning and passes the raw values to the copy.
ProtectedsortedProtectedspawnProtectedspawnedWait for any asynchronous resources that this node or its children have.
ProtectedtransformProtectedtweenProtectedtweenProtectedtweenProtectedtweenProtectedupdateApply any new layout changes to this node and its children.
ProtectedworldGet a bounding box in world space for the contents rendered by this node as well as its children.
This is the same the bounding box returned by cacheBBox only transformed to world space.
Get the world-to-local matrix for this node.
A helper signal for operating on the position in world space.