Class: TouchButton<P>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:215

A touchscreen button.

The root element of the button contains the touch-button CSS class by default. The root element also conditionally contains the touch-button-disabled, touch-button-primed, and touch-button-held classes when the button is disabled, primed, and held, respectively.

The root element optionally contains a child label element with the CSS class touch-button-label.

Extends

• DisplayComponent<P>

Type Parameters

Type Parameter	Default type
P extends TouchButtonProps	TouchButtonProps

Constructors

Constructor

new TouchButton<P>(props): TouchButton<P>

Defined in: sdk/components/FSComponent.ts:76

Creates an instance of a DisplayComponent.

Parameters

Parameter	Type	Description
props	P	The propertis of the component.

Returns

TouchButton<P>

Inherited from

DisplayComponent.constructor

Properties

action

protected action: Subject<TouchButtonOnTouchedAction>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:233

---

actualRef

protected readonly actualRef: NodeReference<any>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:237

---

context?

optional context: [] = undefined

Defined in: sdk/components/FSComponent.ts:67

The context on this component, if any.

Inherited from

DisplayComponent.context

---

contextType?

readonly optional contextType: readonly [] = undefined

Defined in: sdk/components/FSComponent.ts:70

The type of context for this component, if any.

Inherited from

DisplayComponent.contextType

---

cssClassSet

protected readonly cssClassSet: SetSubject<string>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:239

---

cssClassSub?

protected optional cssClassSub: Subscription

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:291

---

currentMousePosition

protected readonly currentMousePosition: Vec2

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:294

---

dragThresholdPxActual

protected readonly dragThresholdPxActual: number

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:298

---

focusOnDrag

protected readonly focusOnDrag: boolean

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:296

---

holdTickInterval

protected holdTickInterval: Timeout | null = null

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:259

---

holdTimeSinceLastPress

protected holdTimeSinceLastPress: number = 0

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:262

---

inhibitOnDrag

protected readonly inhibitOnDrag: boolean

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:297

---

inhibitOnDragAxisActual

protected readonly inhibitOnDragAxisActual: "x" | "y" | "both"

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:299

---

isActive

protected readonly isActive: Subscribable<boolean> | Subscribable<false> | Subscribable<true>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:249

---

isActiveSub?

protected optional isActiveSub: Subscription

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:289

---

isEnabled

protected readonly isEnabled: Subscribable<boolean> | Subscribable<false> | Subscribable<true>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:247

---

isEnabledSub?

protected optional isEnabledSub: Subscription

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:287

---

isHeld

protected isHeld: boolean = false

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:257

---

isHighlighted

protected readonly isHighlighted: Subscribable<boolean> | Subscribable<false> | Subscribable<true>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:248

---

isHighlightedSub?

protected optional isHighlightedSub: Subscription

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:288

---

isPrimed

protected isPrimed: boolean = false

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:256

---

isVisible

protected readonly isVisible: Subscribable<boolean> | Subscribable<false> | Subscribable<true>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:250

---

isVisibleSub?

protected optional isVisibleSub: Subscription

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:290

---

labelContent

protected readonly labelContent: string | VNode | MappedSubscribable<string> | undefined

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:252

---

lastHoldTickTime

protected lastHoldTickTime: number | undefined = undefined

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:260

---

mouseClickPosition

protected readonly mouseClickPosition: Vec2

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:293

---

mouseDownListener()

protected readonly mouseDownListener: (e) => void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:241

Responds to mouse down events on this button's root element.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

---

mouseEnterListener()

protected readonly mouseEnterListener: () => void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:243

Responds to mouse enter events on this button's root element.

Returns

void

---

mouseLeaveListener()

protected readonly mouseLeaveListener: (e) => void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:244

Responds to mouse leave events on this button's root element.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

---

mouseMoveListener()

protected readonly mouseMoveListener: (e) => void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:245

Handle mouse moving after clicking.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

---

mouseUpListener()

protected readonly mouseUpListener: () => void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:242

Responds to mouse up events on this button's root element.

Returns

void

---

props

props: P & ComponentProps

Defined in: sdk/components/FSComponent.ts:64

The properties of the component.

Inherited from

DisplayComponent.props

---

rootRef

protected readonly rootRef: NodeReference<HTMLDivElement>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:236

---

styles

protected styles: ObjectSubject<StyleRecord>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:234

---

totalHoldTime

protected totalHoldTime: number = 0

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:261

---

variant

protected readonly variant: "base" | "small" | "bar" | "bar-lime" | "bar-tab" | "bar-menu" | "list-button"

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:300

---

RESERVED_CSS_CLASSES

protected readonly static RESERVED_CSS_CLASSES: Set<string>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:216

Methods

destroy()

destroy(): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:640

Destroys this component.

Returns

void

Overrides

DisplayComponent.destroy

---

getContext()

protected getContext(context): never

Defined in: sdk/components/FSComponent.ts:109

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

---

getDragDistance()

protected getDragDistance(): number

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:582

Get the distance that the mouse has been dragged on the correct axis.

Returns

number

The distance.

---

getReservedCssClasses()

protected getReservedCssClasses(): ReadonlySet<string>

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:635

Gets the CSS classes that are reserved for this button's root element.

Returns

ReadonlySet<string>

The CSS classes that are reserved for this button's root element.

---

getRootElement()

getRootElement(): HTMLElement

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:383

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.

---

holdTickFunc()

protected readonly holdTickFunc(): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:264

Returns

void

---

onAfterRender()

onAfterRender(): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:303

A callback that is called after the component is rendered.

Returns

void

Overrides

DisplayComponent.onAfterRender

---

onBeforeRender()

onBeforeRender(): void

Defined in: sdk/components/FSComponent.ts:83

A callback that is called before the component is rendered.

Returns

void

Inherited from

DisplayComponent.onBeforeRender

---

onMouseDown()

protected onMouseDown(e): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:480

Responds to mouse down events on this button's root element.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

---

onMouseEnter()

protected onMouseEnter(): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:526

Responds to mouse enter events on this button's root element.

Returns

void

---

onMouseLeave()

protected onMouseLeave(e): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:534

Responds to mouse leave events on this button's root element.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

---

onMouseMove()

protected onMouseMove(e): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:555

Handle mouse moving after clicking.

Parameters

Parameter	Type	Description
e	MouseEvent	The mouse event.

Returns

void

---

onMouseUp()

protected onMouseUp(): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:516

Responds to mouse up events on this button's root element.

Returns

void

---

onPressed()

protected onPressed(): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:593

Responds to when this button is pressed.

Returns

void

---

render()

render(): VNode

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:598

Renders the component.

Returns

VNode

A JSX element to be rendered.

Overrides

DisplayComponent.render

---

renderLabel()

protected renderLabel(): VNode | null

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:621

Renders this button's label.

Returns

VNode | null

This button's rendered label, or null if this button does not have a label.

---

setHeld()

protected setHeld(isHeld, endReason): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:432

Sets the held state of this button.

Parameters

Parameter	Type	Default value	Description
isHeld	boolean	undefined	The new held state.
endReason	TouchButtonHoldEndReason	TouchButtonHoldEndReason.Unknown	The reason that the held state is set to false. Ignored if isHeld is true. Defaults to TouchButtonHoldEndReason.Unknown.

Returns

void

---

setPrimed()

protected setPrimed(isPrimed): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:402

Sets the primed state of this button.

Parameters

Parameter	Type	Description
isPrimed	boolean	The new primed state.

Returns

void

---

simulatePressed()

simulatePressed(ignoreDisabled): void

Defined in: workingtitle-instruments-epic2/shared/Components/TouchButton.tsx:392

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