@ue-too/board / index / VanillaTouchEventParser

類別: VanillaTouchEventParser

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:95

DOM event parser for touch input.

備註

This parser converts raw DOM TouchEvents into state machine events and coordinates with the orchestrator to process outputs. It serves as the entry point for all touch input in the input interpretation pipeline.

Event Flow:

DOM TouchEvents → Parser → State Machine → Parser → Orchestrator → Camera/Observers

Responsibilities:

1. Listen for DOM touch events (touchstart/move/end/cancel)
2. Extract touch point data (identifier, x, y)
3. Convert to state machine event format
4. Send events to the state machine
5. Forward state machine outputs to the orchestrator

Touch Point Extraction:

• touchstart/touchend: Uses changedTouches (only new/removed touches)
• touchmove: Uses targetTouches (all touches on the canvas)

Gesture Control: Individual gesture types (pan, zoom, rotate) can be disabled independently, though currently the state machine outputs are filtered by the orchestrator rather than the parser.

The parser prevents default touch behavior to avoid browser scroll/zoom interfering with canvas gestures.

範例

const canvasElement = document.getElementById("canvas");
const stateMachine = createTouchInputStateMachine(context);
const orchestrator = new InputOrchestrator(cameraMux, cameraRig, publisher);
const parser = new VanillaTouchEventParser(stateMachine, orchestrator, canvasElement);

parser.setUp(); // Starts listening for touch events

// Disable zoom gestures temporarily
parser.zoomDisabled = true;

// Cleanup when done
parser.tearDown();

實作

• TouchEventParser

建構函式

建構函式

new VanillaTouchEventParser(touchInputStateMachine, orchestrator, canvas?): VanillaTouchEventParser

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:107

參數

touchInputStateMachine

TouchInputStateMachine

orchestrator

InputOrchestrator

canvas?

HTMLCanvasElement | SVGSVGElement

回傳

VanillaTouchEventParser

存取器

disabled

Getter 簽章

get disabled(): boolean

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:179

Whether all touch input is disabled

回傳

boolean

Whether all touch input is disabled

實作了

TouchEventParser.disabled

---

orchestrator

Getter 簽章

get orchestrator(): InputOrchestrator

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:121

回傳

InputOrchestrator

---

stateMachine

Getter 簽章

get stateMachine(): TouchInputStateMachine

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:125

The state machine this parser dispatches into, when the implementation exposes one. Optional so existing external parser implementations remain valid, but note this member is typed to the full TouchInputStateMachine — unlike KMTEventParser.stateMachine's minimal { happens } contract, an external implementation is more likely to need adjustment to satisfy this member's shape. Intended for tooling/introspection — dispatch through the parser, not through this reference.

回傳

TouchInputStateMachine

The state machine this parser dispatches into, when the implementation exposes one. Optional so existing external parser implementations remain valid, but note this member is typed to the full TouchInputStateMachine — unlike KMTEventParser.stateMachine's minimal { happens } contract, an external implementation is more likely to need adjustment to satisfy this member's shape. Intended for tooling/introspection — dispatch through the parser, not through this reference.

實作了

TouchEventParser.stateMachine

方法

attach()

attach(canvas): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:267

Attaches to a new canvas element

參數

canvas

HTMLCanvasElement

回傳

void

實作了

TouchEventParser.attach

---

bindListeners()

bindListeners(): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:129

回傳

void

---

disable()

disable(): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:183

Disables the parser; the event listeners are still attached just not processing any events

回傳

void

實作了

TouchEventParser.disable

---

disableStrategy()

disableStrategy(): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:140

回傳

void

---

enable()

enable(): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:187

Enables the parser

回傳

void

實作了

TouchEventParser.enable

---

enableStrategy()

enableStrategy(): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:136

回傳

void

---

setUp()

setUp(): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:144

Initializes event listeners

回傳

void

實作了

TouchEventParser.setUp

---

tearDown()

tearDown(): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:173

Removes event listeners and cleans up

回傳

void

實作了

TouchEventParser.tearDown

---

touchcancelHandler()

touchcancelHandler(e): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:221

參數

e

TouchEvent

回傳

void

---

touchendHandler()

touchendHandler(e): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:236

參數

e

TouchEvent

回傳

void

---

touchmoveHandler()

touchmoveHandler(e): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:251

參數

e

TouchEvent

回傳

void

---

touchstartHandler()

touchstartHandler(e): void

定義於: packages/board/src/input-interpretation/raw-input-parser/vanilla-touch-event-parser.ts:204

參數

e

TouchEvent

回傳

void