Construct a Component
Optionalproperties: PatchTemplate<Lightning.components.BorderComponent.TemplateSpec<ContentType>>You should use this.stage.element to create Component instances if you need to.
Readonly__$type_Phantom type that holds the TemplateSpec.
Only used internally. NOT AVAILABLE AT RUNTIME.
Readonly__firstInternal property that is set to true after _firstActive is called.
See Lifecycle Events for more information.
This is exposed to prevent accidental overrides. See _firstActive for the override.
Readonly__firstInternal property that is set to true after _firstEnable is called.
See Lifecycle Events for more information.
This is exposed to prevent accidental overrides. See _firstEnable for the override.
Readonly__initializedInternal property that is set to true after _init is called.
See Lifecycle Events for more information.
This is exposed to prevent accidental overrides. See _init for the override.
ReadonlyactiveActive State
Defines the opacity of this Element and its descendants. This can be any number
between 0.0 (0% opacity) and 1.0 (100% opacity).
0.0:
1.0 (default):
The visible property takes prescendence over alpha.
ReadonlyattachedAttached State
Border template
Sets a Bounds Margin for this Element.
Format:
[left margin, top margin, right margin, bottom margin]
null (default):
Note: If no bounds margins are set in the render tree, the default on all
sides is 100.
The Bounds Margin influences whether an Element will be rendered as if it were
on screen. If the Bounds Margin is 0 on all sides, then this Element will only be
rendered if exactly any part of it's rectangle is potentially visible on screen. Adding
to the Bounds Margin allows an Element to be rendered as it gets closer to becoming
visible on screen.
ReadonlychildClipbox
Defines whether clipping should be turned on or off for this element
true:
false (default):
Setting this property might increase the performance, as descendants outside the clipping region are detected and not rendered.
Clipping is implemented using the high-performance WebGL operation scissor. As a
consequence, clipping does not work for non-rectangular areas. So, if the Element
is rotated (by itself or by any of its ancestors), clipping is not applied. In such
situations, you can use the advanced renderToTexture property which applies clipping
as a side effect.
Mouse pointer collision
If set true, then it allows a Mouse Pointer
to click/hover over this Element.
Rectangle Color
This and the other color* properties are used to change the color of the
Element when rect is set to true.
This property sets all of the corners/sides to the same color.
The color value is expressed as an ARGB hexadecimal value:
A R G B
| | | |
0xffeeddcc
Bottom-left Corner Rectangle Color
Bottom Side Rectangle Color
Bottom-right Corner Rectangle Color
If set to true, applies a colorization effect to the resulting texture when rtt is on.
This property has no effect if rtt is not enabled.
Left Side Rectangle Color
Right Side Rectangle Color
Top Side Rectangle Color
Upper-left Corner Rectangle Color
Upper-right Corner Rectangle Color
ReadonlycoreHover cursor
See the keyword values at cursor CSS property (MDN) for valid values.
See PR #356 for more information on this feature.
ReadonlydisplayedThe currently displayed texture. While this.texture is loading, this one may be different.
ReadonlyenabledEnabled State
ReadonlyfinalHIf flexbox is enabled for this Element, contains the final height of the Element after the layout update operation has been done.
See Flexbox - Final Coordinates for more information.
ReadonlyfinalWIf flexbox is enabled for this Element, contains the final width of the Element after the layout update operation has been done.
See Flexbox - Final Coordinates for more information.
ReadonlyfinalXIf flexbox is enabled for this Element, contains the final X position of the Element after the layout update operation has been done.
See Flexbox - Final Coordinates for more information.
ReadonlyfinalYIf flexbox is enabled for this Element, contains the final Y position of the Element after the layout update operation has been done.
See Flexbox - Final Coordinates for more information.
Flexbox container properties
See Flexbox documentation for more information.
Flexbox item properties
See Flexbox documentation for more information.
Forces a new z-index context for children of this Element.
See Z-Indexing for more information.
ReadonlyisThe maximum expected texture source height.
Texture mountpoint
Texture mountpoint on horizontal axis
Texture mountpoint on vertical axis
The maximum expected texture source width.
??? (make sure matches literal version)
Callback called after the Element's flexbox layout is updated.
Callback called before the Element's flexbox layout is updated.
ReadonlypAlias of parent
ReadonlyparentParent Element of this Element
Rotational Pivot Position
Controls the pivot that the rotation property rotates around along
both the horizontal and vertical axis. Can be any floating point number between
0.0 and 1.0.
Examples
0.0 = top-left0.5 (default) = center1.0 = bottom-rightRotational Pivot Position (horizonal axis)
Controls the pivot that the rotation property rotates around along
the horizontal axis. Can be any floating point number between 0.0 and 1.0.
Examples
0.0 = left0.5 (default) = center1.0 = rightRotational Pivot Position (vertical axis)
Controls the pivot that the rotation property rotates around along
both the vertical axes. Can be any floating point number between 0.0 and 1.0.
Examples
0.0 = top0.5 (default) = center1.0 = bottomRectangle texture mode
When set, this Element adopts a RectangleTexture as its Texture
and displays a rectangle colored by the various color* properties.
Cannot be set at the same time as src or text.
See Texture Types for more information.
Element's reference key
ReadonlyrenderForces the Element's contents to be rendered to an offscreen frame buffer. If set to true,
the Element will not be drawn onto the screen.
You can use this offscreen texture as a sampler for drawing other elements. So, renderToTexture must be set to true for this to work.
ReadonlyrenderRotation Transform (in radians)
If set to true, enables Render-to-Texture mode on this Element
Determines if the texture is always updated or only when necessary
Scale Tranform
Scale Horizontal Tranform
Scale Vertical Tranform
Image source URI
When set, this Element adopts an ImageTexture as its Texture and loads/displays the image located at the URI.
ReadonlystageApplication's Global Stage
Creates a tag context
ReadonlytexturizerDefines the visibility of this Element and its descendents.
true (default):
false:
If an element is invisible, the off-screen Elements are invisible as well, so you do not have to hide those manually to maintain a good performance.
This property takes prescendence over the alpha property.
Readonlywithintrue if Element is within the bounds margin
Z-index
See Z-Indexing for more information.
Override this to determine how a Component handles signals passed to it.
false (default):
true:
Gets the root Application Component
Set/get the children of this Element
Set the children of this Element
Gets this Component's Component Parent (cparent)
A Component Parent is the nearest ancestor to a Component that is also a Component.
For example if the render tree is like this:
ComponentA
|
ElementA
|
ElementB
|
ComponentB
The cparent of ComponentB is ComponentA, while its parent is ElementB.
Height of this Element
Height of this Element
Gets/sets the Pass Signals for this Component.
See Pass Signals for more information.
Get/set a shader of/on this Element
Set a shader on this Element
Gets/sets the Signals for this Component.
See (Signals)[https://lightningjs.io/docs/#/lightning-core-reference/Communication/Signal?id=signal] for more information.
Starts a smooth transition for all the included properties of the object
This is the same as calling Element.setSmooth for each property.
For each property:
number:
WARNING: DO NOT read from this property. It is WRITE-ONLY. It will always return undefined.
Current state
See Component States for more information.
Text settings / texture
Text settings / texture
When set, the Element adopts a TextTexture and renders the text / settings
laid out in this property.
Cannot be set at the same time as rect or src.
See Texture Types for more information.
Get/set the Element's texture
See Texture Types for more information.
Set this Element's texture
See Texture Types for more information.
Setup one or more transitions
WARNING: DO NOT read from this property. It is WRITE-ONLY. It will always return undefined.
See Transitions for more information.
Width of this Element
Width of this Element
X position of this Element
X position of this Element
Y position of this Element
Y position of this Element
Overridable method called during the active lifecycle event:
See Lifecycle Events for more information.
When activated:
Overridable method called during the attach lifecycle event:
See Lifecycle Events for more information.
When attached:
Optional_captureOptional_captureOptional_captureOptional_captureOptional_captureOptional_captureOptional_captureOptional_captureOptional_captureOverridable catch-all top-down key-down event handler
If there's a more specific handler implemented for the key, such as _captureEnter(), this method will
not be called.
If a key handler returns ‘false’, propagation is not stopped and the next component is allowed to handle the key event.
See Key Handling for more information.
Optional_captureOverridable catch-all top-down key-up event handler
If there's a more specific handler implemented for the key, such as _captureEnterRelease(), this method will
not be called.
If a key handler returns ‘false’, propagation is not stopped and the next component is allowed to handle the key event.
See Key Handling for more information.
Optional_captureOptional_captureOptional_captureOptional_captureOptional_captureOptional_captureOverridable method called during the construct lifecycle event:
See Lifecycle Events for more information.
Overridable method called during the enable lifecycle event:
See Lifecycle Events for more information.
When enabled:
Override to react to when this Component is brought into focus
Component that now has final focus
Component that previously had final focus
This is called on every Component that is being added to the focus path whenever focus changes.
See Focus for more information.
Override to react to focus changes
Component that now has final focus
Component that previously had final focus
This is called on every Component in the focus path whenever focus changes but it is NOT called on the Components that were just brought out of focus.
See Focus for more information.
Override to delegate focus to child components.
Return the child Component that this Component wishes to receive focus. Returning null or undefined tells the
focus engine to not set focus on this Component at all.
By default, this Component's own instance is returned.
See Focus for more information.
Optional_handleOptional_handleOptional_handleOptional_handleOptional_handleOptional_handleOptional_handleOptional_handleOverride to react on custom settings. See Application._handleFocusSettings().
This is called whenever a change to the focus path occurs for each Component in the focus path. This is called after all of the Components have had a chance to set settings in the _setFocusSettings override.
Optional_handleOverridable catch-all bottom-up key-down event handler
If there's a more specific handler implemented for the key, such as _handleEnter(), this method will
not be called.
If a key handler returns ‘false’, propagation is not stopped and the next component is allowed to handle the key event.
See Key Handling for more information.
Optional_handleOverridable catch-all bottom-up key-up event handler
If there's a more specific handler implemented for the key, such as _handleEnterRelease(), this method will
not be called.
If a key handler returns ‘false’, propagation is not stopped and the next component is allowed to handle the key event.
See Key Handling for more information.
Optional_handleOptional_handleOptional_handleOptional_handleOptional_handleOptional_handleOverridable method called during the inactive lifecycle event:
See Lifecycle Events for more information.
When inactivated:
Switches to the specified state
State to switch to
Optionalargs: unknown[]Optional arguments passed to the entering/exiting states' $enter and $exit handlers
See State Switching for more information.
Override to react to when this Component is brought out of focus
Component that now has final focus
Component that previously had final focus
This is called on every Component that is being removed from the focus path whenever focus changes.
See Focus for more information.
Optional$enterOverridable event handler called when a state is entered
Event containing current state, last state, etc.
Args passed to the call to _setState that triggered this event.
Optional$exitOverridable event handler called when a state is exited
Event containing current state, last state, etc.
Args passed to the call to _setState that triggered this event.
Add element to end of this Element's childList
Add element to end of this Element's childList
Add element to end of this Element's childList
Add element to end of this Element's childList
Attach an animation to this Element
See Animations for more information.
Synchronously calls each of the listeners registered for the event named name,
in the order they were registered, passing the supplied arguments to each.
Sets the TextTexture on this Element, replacing any already set texture
Fast-forward a currently transitioning property to its target value
immediately.
Sends a signal to a distant parent component, without propagating it to all the parents.
See Fire Ancestors for more information.
Gets the ancestor of this Element that is l levels back.
Number of levels to go back
Gets the ancestor of this Element that has the depth of depth in the render tree.
depth === 0:
depth === 1:
depth === this.getDepth()
Depth in the render tree from the root Element
Gets an array of this Element's ancestors (including this Element).
Order:
[
This Element,
This Element's Parent,
This Element's Grandparent,
... And so on
]
Get the corner points of this Element
Format:
[
topLeftX, topLeftY,
topRightX, topRightY,
bottomRightX, bottomRight,
bottomLeftX, bottomLeftY
]
Get Settings object representing this Element
Gets the first common ancestor Element that this Element and another Element c share.
Element to find common ancestor with
Gets the first common ancestor Component that this Component and element share.
Get the current target value of an active transition.
property is not actively transitioning:
value, if provided.undefined.Get the current target value of an active transition.
property is not actively transitioning:
value, if provided.undefined.Returns true if this Component is anywhere in the Application's active focus path.
If this Component has any descendent Component children, even if this method returns true, its descendents
may receive input events first before any are bubbled up to it.
See Focus for more information.
Returns true if this Element is an ancestor of Element c
Element to test
Load the texture that was set by Element.TemplateSpec.texture
Returns all Elements from the subtree that have this tag.
Adds a one-time listener function for the event named name. The next time name
is triggered, this listener is removed and then invoked.
Patches settings of this Element plus child Elements of the render tree.
See Patching for more information.
Returns the first ancestor of this Component that is an instance of type
Start a smooth transition of property to the target value. Optionally
you may provide transition settings. If settings is not provided the
default transition will be used.
Property to transition
Target value
Optionalsettings: Lightning.types.TransitionSettings.LiteralTransition settings
Signals the parent of the specified event.
A parent/ancestor that wishes to handle the signal should set the 'signals' property on this component.
See Signals for more information.
Returns one of the Elements from the subtree that has this tag path.
. separated tag path
Using getByRef may be slightly more performant, but only works one level at a time.
In strongly typed Components, only fully qualified paths are supported in a type-safe way
(i.e. 'MyChild.MyGrandChild.MyGreatGrandChild'). If you'd like to reference a deep element
by its ref name (i.e. just 'MyGreatGrandChild') you can opt into this by asserting as any:
// No error and is typed
this.tag('MyChild.MyGrandChild.MyGreatGrandChild')
// Needs `any` assertion and is typed as `any`
this.tag('MyGreatGrandChild' as any)
See Tags for more information.
Get/set Transition for property
This method has 2 overloads:
settings param is provided:
settings for propertysettings param is NOT provided:
propertySee Transitions for more information.
Get/set Transition for property
Transition settings to configure property with in this Element (optional)
This method has 2 overloads:
settings param is provided:
settings for propertysettings param is NOT provided:
propertySee Transitions for more information.
Static_statesOverridable static method for providing your Component States.
See State Creation for more information.
Static_templateOverride to provide your own Component's template
export class App
extends Lightning.Component<App.TemplateSpec>
implements Lightning.Component.ImplementTemplateSpec<App.TemplateSpec>
{
readonly Logo = this.getByRef('Logo')!;
static _template(): Lightning.Component.Template<App.TemplateSpec> {
return {
Logo: {
x: 960,
y: 600,
src: Utils.asset('images/logo.png') as string,
},
}
}
}
StaticaddStaticbindUsed to data bind one or more properties to another property
The name or names of input properties
Optionalfunc: (context: any) => TA callback that is called when one of the input properties change.
context parameter is the instance of the Component that _template was defined/executed on.
export interface BasicUsageExampleTemplateSpec {
// Component Properties
size: number;
divider: number;
title: string;
// Component Children
Title: object;
}
// Since Lightning creates these properties behind the scenes via `bindProp()`
// we need to tell TypeScript that these will already exist.
export interface BasicUsageExample {
size: number;
divider: number;
title: string;
}
export class BasicUsageExample
extends Lightning.Component<TemplateSpec>
implements Lightning.Component.ImplementTemplateSpec<TemplateSpec> {
static override _template(): Lightning.Component.Template<TemplateSpec> {
return {
rect: true,
w: this.bindProp('size'),
h: this.bindProp(['size', 'divider'], (context: BasicUsageExample) => context.size / context.divider),
color: 0xff443322,
Title: {
text: {text: this.bindProp('title')}
}
}
}
override _init() {
this.size = 300;
this.divider = 4;
this.title = 'Hello World';
}
}
StaticcollectRecursively collects all of the child Components of an Element into subs.
StaticgetGiven any element, returns the nearest ancestor (including the posibility of itself) that
is a Component. If none is found: returns null.
StaticgetGiven any element, returns the nearest ancestor (not including itself) that
is a Component. If none is found: returns null.
Lightning Component