Class: UiToggleTouchButton<S>
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:140
A G3X Touch UI version of ToggleTouchButton. Supports UI focus, enables focus on drag by default and provides convenience props for handling drag behavior while in a scrollable list.
The root element of the button conditionally contains the ui-button-focused
CSS class when the button has UI
focus.
Extends
DisplayComponent
<UiToggleTouchButtonProps
<S
>>
Type Parameters
Type Parameter |
---|
S extends Subscribable <boolean > | MutableSubscribable <boolean > |
Implements
Constructors
Constructor
new UiToggleTouchButton<
S
>(props
):UiToggleTouchButton
<S
>
Defined in: src/sdk/components/FSComponent.ts:73
Creates an instance of a DisplayComponent.
Parameters
Parameter | Type | Description |
---|---|---|
props | UiToggleTouchButtonProps | The propertis of the component. |
Returns
UiToggleTouchButton
<S
>
Inherited from
DisplayComponent<UiToggleTouchButtonProps<S>>.constructor
Properties
buttonRef
protected
readonly
buttonRef:NodeReference
<ToggleTouchButton
<S
>>
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:146
canBeFocused
readonly
canBeFocused:Subscribable
<boolean
>
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:158
Whether this component can be focused.
Implementation of
UiFocusableComponent
.canBeFocused
context?
optional
context: [] =undefined
Defined in: src/sdk/components/FSComponent.ts:64
The context on this component, if any.
Inherited from
DisplayComponent.context
contextType?
readonly
optional
contextType: readonly [] =undefined
Defined in: src/sdk/components/FSComponent.ts:67
The type of context for this component, if any.
Inherited from
DisplayComponent.contextType
focusModule
protected
readonly
focusModule:UiTouchButtonFocusModule
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:148
isUiFocusableComponent
readonly
isUiFocusableComponent:true
=true
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:144
Flags this component as a UiFocusableComponent.
Implementation of
UiFocusableComponent
.isUiFocusableComponent
props
props:
UiToggleTouchButtonProps
<S
> &ComponentProps
Defined in: src/sdk/components/FSComponent.ts:61
The properties of the component.
Inherited from
DisplayComponent.props
Methods
destroy()
destroy():
void
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:314
Returns
void
Inherit Doc
Overrides
DisplayComponent.destroy
focusSelf()
focusSelf():
void
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:186
Attempts to set focus on this button.
Returns
void
getContext()
protected
getContext(context
):never
Defined in: src/sdk/components/FSComponent.ts:106
Gets a context data subscription from the context collection.
Parameters
Parameter | Type | Description |
---|---|---|
context | never | The context to get the subscription for. |
Returns
never
The requested context.
Throws
An error if no data for the specified context type could be found.
Inherited from
DisplayComponent.getContext
getRootElement()
getRootElement():
HTMLElement
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:170
Gets this button's root HTML element.
Returns
HTMLElement
This button's root HTML element.
Throws
Error if this button has not yet been rendered.
onAfterRender()
onAfterRender():
void
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:161
Returns
void
Inherit Doc
Overrides
DisplayComponent.onAfterRender
onBeforeRender()
onBeforeRender():
void
Defined in: src/sdk/components/FSComponent.ts:80
A callback that is called before the component is rendered.
Returns
void
Inherited from
DisplayComponent.onBeforeRender
onDeregistered()
onDeregistered():
void
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:196
Responds to when this component is deregistered with a controller.
Returns
void
Implementation of
UiFocusableComponent
.onDeregistered
onFocusGained()
onFocusGained(
direction
):void
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:201
Responds to when this component gains focus.
Parameters
Parameter | Type | Description |
---|---|---|
direction | UiFocusDirection | The direction from which focus was gained. |
Returns
void
Implementation of
UiFocusableComponent
.onFocusGained
onFocusLost()
onFocusLost():
void
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:207
Responds to when this component loses focus.
Returns
void
Implementation of
UiFocusableComponent
.onFocusLost
onHoldEnded()
protected
onHoldEnded(button
,state
,totalHoldDuration
,endReason
):void
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:281
Responds to when this button exits the held state.
Parameters
Parameter | Type | Description |
---|---|---|
button | ToggleTouchButton <S > | The button that was held. |
state | S | The state that is bound to the button. |
totalHoldDuration | number | The total amount of time, in milliseconds, that this button was held. |
endReason | TouchButtonHoldEndReason | The reason that this button exited the held state. |
Returns
void
onHoldStarted()
protected
onHoldStarted(button
,state
):TouchButtonHoldAction
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:252
Responds to when this button enters the held state.
Parameters
Parameter | Type | Description |
---|---|---|
button | ToggleTouchButton <S > | The button that is held. |
state | S | The state that is bound to the button. |
Returns
TouchButtonHoldAction
The action to take. Ignored if the value is equal to TouchButtonHoldAction.EndHold.
onHoldTick()
protected
onHoldTick(button
,state
,dt
,totalTime
,timeSinceLastPress
):TouchButtonHoldAction
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:268
A callback which is called every frame when this button is held.
Parameters
Parameter | Type | Description |
---|---|---|
button | ToggleTouchButton <S > | The button that is held. |
state | S | The state that is bound to the button. |
dt | number | The elapsed time, in milliseconds, since the previous frame. |
totalTime | number | The total amount of time, in milliseconds, that this button has been held. |
timeSinceLastPress | number | The amount of time, in milliseconds, that this button has been held since the last time the button was pressed as a tick action. |
Returns
TouchButtonHoldAction
The action to take.
onPressed()
protected
onPressed(button
,state
,isHeld
):void
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:238
Responds to when this button is pressed.
Parameters
Parameter | Type | Description |
---|---|---|
button | ToggleTouchButton <S > | The button that was pressed. |
state | S | The state that is bound to the button. |
isHeld | boolean | Whether the button was held when it was pressed. |
Returns
void
onRegistered()
onRegistered(
controller
):void
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:191
Responds to when this component is registered with a controller.
Parameters
Parameter | Type | Description |
---|---|---|
controller | UiFocusController | The controller with which this component was registered. |
Returns
void
Implementation of
UiFocusableComponent
.onRegistered
onTouched()
protected
onTouched(button
,state
):TouchButtonOnTouchedAction
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:223
Responds to when this button is touched.
Parameters
Parameter | Type | Description |
---|---|---|
button | ToggleTouchButton <S > | The button that was touched. |
state | S | The state that is bound to the button. |
Returns
TouchButtonOnTouchedAction
The action to take as a result of the button being touched.
onUiInteractionEvent()
onUiInteractionEvent(
event
):boolean
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:213
Handles a UiInteractionEvent.
Parameters
Parameter | Type | Description |
---|---|---|
event | UiInteractionEvent | The event to handle. |
Returns
boolean
Whether the event was handled.
Implementation of
UiFocusableComponent
.onUiInteractionEvent
render()
render():
VNode
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:286
Returns
VNode
Inherit Doc
Overrides
DisplayComponent.render
simulatePressed()
simulatePressed(
ignoreDisabled
):void
Defined in: src/workingtitle-instruments-g3x-touch/html_ui/Shared/Components/TouchButton/UiToggleTouchButton.tsx:179
Simulates this button being pressed. This will execute the onPressed()
callback if one is defined.
Parameters
Parameter | Type | Default value | Description |
---|---|---|---|
ignoreDisabled | boolean | false | Whether to simulate the button being pressed regardless of whether the button is disabled. Defaults to false . |
Returns
void