Node
Base class for 2D scene graph nodes, implementing the Promisable<Node> interface. Provides transformation, hierarchy, rendering, and state management functionality.
Overview
Node is the base class for all 2D components, providing:
- Transformation system (position, rotation, scale)
- Hierarchy management
- State saving and restoration
- Hit testing
- Cache control
Transformation Properties
Position
| Property | Type | Description |
|---|---|---|
position | Vector2Signal<this> | Local space position |
absolutePosition | SimpleVector2Signal<this> | World space position |
x | SimpleSignal<number, this> | X position |
y | SimpleSignal<number, this> | Y position |
Rotation and Scale
| Property | Type | Description |
|---|---|---|
rotation | SimpleSignal<number, this> | Rotation angle (degrees) |
absoluteRotation | SimpleSignal<number, this> | World space rotation |
scale | Vector2Signal<this> | Scale |
absoluteScale | SimpleVector2Signal<this> | World space scale |
skew | Vector2Signal<this> | Skew |
skew
skew: Vector2Signal<this>;
Skew property.
Display
| Property | Type | Description |
|---|---|---|
opacity | SimpleSignal<number, this> | Opacity (0-1) |
absoluteOpacity | ComputedSignal<number> | Absolute opacity |
zIndex | SimpleSignal<number, this> | Z-axis ordering |
cache | SimpleSignal<boolean, this> | Whether to cache |
composite | SimpleSignal<boolean, this> | Whether to composite |
compositeOperation | SimpleSignal<GlobalCompositeOperation, this> | Composite operation |
opacity
opacity: SimpleSignal<number, this>;
Opacity (0-1).
zIndex
zIndex: SimpleSignal<number, this>;
Z-axis ordering.
cache
cache: SimpleSignal<boolean, this>;
Whether to cache.
Shadows and Filters
| Property | Type | Description |
|---|---|---|
shadowColor | ColorSignal<this> | Shadow color |
shadowBlur | SimpleSignal<number, this> | Shadow blur |
shadowOffset | Vector2Signal<this> | Shadow offset |
filters | FiltersSignal<this> | Filter effects |
shaders | ShadersSignal<this> | Shader effects |
shaders
shaders: ShadersSignal<this>;
Shader effects.
Children
children
children: Signal<ComponentChildren, Node[], this>;
Manages the child node list.
parent
parent: Node;
Parent node reference.
Cache Control
cachePadding
cachePadding: Signal<PossibleSpacing, Spacing, this>;
Inner padding for cache.
getCacheBBox
getCacheBBox(): BBox
Gets the cache bounding box.
cacheBBox
cacheBBox: ComputedSignal<BBox>;
Cache bounding box signal.
fullCacheBBox
fullCacheBBox: ComputedSignal<BBox>;
Full cache bounding box (including padding).
Hierarchy Methods
Add Children
add(node: ComponentChildren): this
insert(node: ComponentChildren, index?: number): this
Remove
remove(): this
removeChildren(): this
Reorder
moveUp(): this
moveDown(): this
moveToTop(): this
moveToBottom(): this
moveTo
moveTo(index: number): this
Moves to a specified index position.
moveAbove
moveAbove(node: Node, directlyAbove?: boolean): this
Moves above the specified node.
moveBelow
moveBelow(node: Node, directlyBelow?: boolean): this
Moves below the specified node.
Find
findFirst<T>(predicate: (node: Node) => node is T): T | null
findAncestor<T>(predicate: (node: Node) => node is T): T | null
findAll
findAll<T>(predicate: (node: Node) => node is T): T[]
Finds all nodes matching the condition.
Matrix Transformations
localToWorld(): DOMMatrix
worldToLocal(): DOMMatrix
parentToWorld(): DOMMatrix
State Management
save
save(): void
Saves the current node state.
restore
restore(duration?: number, timing?: TimingFunction): void | ThreadGenerator
Restores to the last saved state.
applyState
applyState(state: NodeState, duration?: number, timing?: TimingFunction): void | ThreadGenerator
Applies the specified state to the node.
Cloning
clone(customProps?: PartialNodeProps<this>): this
snapshotClone(customProps?: PartialNodeProps<this>): this
reactiveClone(customProps?: PartialNodeProps<this>): this
Examples
import {Circle, Rect} from '@wangyaoshen/locus';
const circle = new Circle({
radius: 100,
position: new Vector2(0, 0),
fill: 'red',
});
const rect = new Rect({
width: 200,
height: 100,
position: new Vector2(300, 0),
fill: 'blue',
});
// Create node hierarchy
const node = new Node();
node.add(circle);
node.add(rect);
// Animate
circle().position().x(400, 1);