Component class

Signature:

export declare class Component extends ExternalObject

Extends: ExternalObject

Remarks

The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the Component class.

Methods

Method	Modifiers	Description
animateProperty(prop, value, options)		Animates the value of the given component property from its current value to the given value.
clearMask()		Clears an existing mask.
getBounds()		Gets the bounds of the component. The returned bounds have an origin (0,0) in the bottom left of the screen.
setContentFillMode(fillMode)		Sets the ComponentContentFillMode that specifies how the space in this component not covered by content is filled.
setContentScaleMode(scaleMode)		Sets the ComponentContentScaleMode that specifies how the component's content is scaled to fit in the component.
setMask(mask, options)		Masks a component with an image, or clears an existing mask.
setProperty(prop, value, stopAnimations)		Sets the value of the given component property.
setVisible(visible)		Sets the visibility of this component.
transition(transitions)		Modifies the position / scale / rotation of the visible texture of the component within the confines of its layout.

Component.animateProperty() method

Animates the value of the given component property from its current value to the given value.

Signature:

animateProperty<Prop extends Enum<typeof ComponentProperty>>(prop: Prop, value: ComponentPropertyValueType<Prop>, options: ComponentPropertyAnimationOptions): Promise<boolean>;

Parameters

Parameter	Type	Description
prop	Prop	The property whose value to animate.
value	ComponentPropertyValueType<Prop>	The final value of the property at the end of the animation, or the amount to be added to the current value if isDelta is true in options.
options	ComponentPropertyAnimationOptions	The options to control the animation of the property value.

Returns:

Promise<boolean>

A promise that resolves when the animation has completed. The result of the promise is true if the animation completed its full duration or false if it was stopped before it could complete.

Component.clearMask() method

Clears an existing mask.

Signature:

clearMask(): Promise<void>;

Returns:

Promise<void>

A promise that resolves when the component is no longer being masked

Remarks

Equivalent to calling Component.setMask() with a null mask. You must still await this method if you need to be sure the mask is cleared, but it should return almost immediately.

Component.getBounds() method

Gets the bounds of the component. The returned bounds have an origin (0,0) in the bottom left of the screen.

Signature:

getBounds(): Promise<ComponentBounds>;

Returns:

Promise<ComponentBounds>

Example

Example JSON response

{
  "x": 0,
  "y": 0,
  "position": {
    "x": 0,
    "y": 0
  },
  "center": {
    "x": 295.7379,
    "y": 525.2379
  },
  "min": {
    "x": 0,
    "y": 0
  },
  "max": {
    "x": 591.4758,
    "y": 1050.47583
  },
  "width": 591.4758,
  "height": 1050.47583,
  "size": {
    "x": 591.4758,
    "y": 1050.47583
  },
  "xMin": 0,
  "yMin": 0,
  "xMax": 591.4758,
  "yMax": 1050.47583
}

Component.setContentFillMode() method

Sets the ComponentContentFillMode that specifies how the space in this component not covered by content is filled.

Signature:

setContentFillMode(fillMode: ComponentContentFillMode): void;

Parameters

Parameter	Type	Description
fillMode	ComponentContentFillMode	The content fill mode for this component.

Returns:

void

Component.setContentScaleMode() method

Sets the ComponentContentScaleMode that specifies how the component's content is scaled to fit in the component.

Signature:

setContentScaleMode(scaleMode: ComponentContentScaleMode): void;

Parameters

Parameter	Type	Description
scaleMode	ComponentContentScaleMode

Returns:

void

Component.setMask() method

Masks a component with an image, or clears an existing mask.

Signature:

setMask(mask: ImageAsset | null, options?: ComponentMaskOptions): Promise<void>;

Parameters

Parameter	Type	Description
mask	ImageAsset \| null	An image asset to use as the mask, or null to clear an existing mask. Needs an alpha channel. You can get an ImageAsset of a file in your module by using AssetManager.getImageFromPath()
options	ComponentMaskOptions	(Optional) See the available options for masking ComponentMaskOptions

Returns:

Promise<void>

A promise that resolves when the mask has been applied

Remarks

The image's alpha channel is used to determine visibility. Use PNG format. The mask will be attached to the component's layout. If you transform the component, the mask will stay fixed. You can use this to reveal different areas of the component.

Component.setProperty() method

Sets the value of the given component property.

Signature:

setProperty<Prop extends Enum<typeof ComponentProperty>>(prop: Prop, value: ComponentPropertyValueType<Prop>, stopAnimations?: boolean): void;

Parameters

Parameter	Type	Description
prop	Prop	The property whose value to set.
value	ComponentPropertyValueType<Prop>	The value of the property.
stopAnimations	boolean	(Optional) If true, all unfinished animations on the given property of this component will be stopped after setting the value. Otherwise animations will continue to run after the value is set.

Returns:

void

Component.setVisible() method

Sets the visibility of this component.

Signature:

setVisible(visible: boolean): void;

Parameters

Parameter	Type	Description
visible	boolean	True to make the component visible, false to hide it.

Returns:

void

Component.transition() method

Warning: This API is now obsolete.

Use Component.setProperty() and Component.animateProperty() to apply transitions.

Modifies the position / scale / rotation of the visible texture of the component within the confines of its layout.

Signature:

transition(...transitions: readonly Transition[]): Promise<void>;

Parameters

Parameter	Type	Description
transitions	readonly Transition[]	Multiple transitions can be provided, they will all run concurrently using their own timing configuration

Returns:

Promise<void>

A promise that resolves when all transitions are complete

Remarks

ie: Enlarging the scale will zoom into the component, but any overflow will be cropped at the component's layout bounds