@ue-too/board 0.9.5 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -2
- package/boardify/index.d.ts +280 -9
- package/camera/base.d.ts +364 -68
- package/camera/camera-edge-auto-input.d.ts +105 -0
- package/camera/camera-mux/animation-and-lock/animation-and-lock.d.ts +316 -14
- package/camera/camera-mux/animation-and-lock/index.d.ts +27 -0
- package/camera/camera-mux/animation-and-lock/pan-control-state-machine.d.ts +143 -60
- package/camera/camera-mux/animation-and-lock/rotation-control-state-machine.d.ts +143 -55
- package/camera/camera-mux/animation-and-lock/zoom-control-state-machine.d.ts +205 -58
- package/camera/camera-mux/index.d.ts +26 -0
- package/camera/camera-mux/interface.d.ts +161 -5
- package/camera/camera-mux/relay.d.ts +79 -16
- package/camera/camera-rig/camera-rig.d.ts +536 -94
- package/camera/camera-rig/index.d.ts +26 -1
- package/camera/camera-rig/pan-handler.d.ts +508 -48
- package/camera/camera-rig/rotation-handler.d.ts +353 -31
- package/camera/camera-rig/zoom-handler.d.ts +369 -32
- package/camera/default-camera.d.ts +173 -26
- package/camera/index.d.ts +20 -0
- package/camera/interface.d.ts +202 -2
- package/camera/update-publisher.d.ts +128 -38
- package/camera/utils/coordinate-conversion.d.ts +323 -26
- package/camera/utils/index.d.ts +22 -0
- package/camera/utils/matrix.d.ts +217 -14
- package/camera/utils/position.d.ts +249 -11
- package/camera/utils/rotation.d.ts +139 -9
- package/camera/utils/zoom.d.ts +72 -4
- package/index.d.ts +37 -0
- package/index.js +2 -4796
- package/index.js.map +39 -38
- package/input-interpretation/index.d.ts +29 -0
- package/input-interpretation/input-orchestrator.d.ts +197 -0
- package/input-interpretation/input-state-machine/index.d.ts +18 -0
- package/input-interpretation/input-state-machine/kmt-input-context.d.ts +191 -38
- package/input-interpretation/input-state-machine/kmt-input-state-machine.d.ts +201 -85
- package/input-interpretation/input-state-machine/touch-input-context.d.ts +76 -10
- package/input-interpretation/input-state-machine/touch-input-state-machine.d.ts +138 -17
- package/input-interpretation/raw-input-parser/index.d.ts +19 -0
- package/input-interpretation/raw-input-parser/vanilla-kmt-event-parser.d.ts +107 -21
- package/input-interpretation/raw-input-parser/vanilla-touch-event-parser.d.ts +71 -8
- package/input-interpretation/raw-input-publisher/index.d.ts +18 -0
- package/input-interpretation/raw-input-publisher/raw-input-publisher.d.ts +133 -37
- package/package.json +3 -3
- package/utils/canvas-position-dimension.d.ts +282 -1
- package/utils/coordinate-conversions/canvas-viewport.d.ts +79 -0
- package/utils/coordinate-conversions/viewport-world.d.ts +101 -0
- package/utils/coordinate-conversions/window-canvas.d.ts +90 -0
- package/utils/coorindate-conversion.d.ts +91 -0
- package/utils/drawing.d.ts +151 -3
- package/utils/index.d.ts +21 -0
- package/utils/observable.d.ts +179 -0
- package/utils/ruler.d.ts +36 -0
- package/utils/zoomlevel-adjustment.d.ts +144 -8
- package/camera/camera-rig/update-batcher/index.d.ts +0 -3
- package/camera/camera-rig/update-batcher/position-update-batcher.d.ts +0 -58
- package/camera/camera-rig/update-batcher/rotation-update-batcher.d.ts +0 -54
- package/camera/camera-rig/update-batcher/zoom-udpate-batcher.d.ts +0 -60
|
@@ -1,36 +1,60 @@
|
|
|
1
|
-
import { EventReactions, EventGuards, Guard, TemplateState, TemplateStateMachine, EventArgs,
|
|
1
|
+
import { EventReactions, EventGuards, Guard, TemplateState, TemplateStateMachine, EventArgs, EventResult, CreateStateType } from "@ue-too/being";
|
|
2
2
|
import type { Point } from "@ue-too/math";
|
|
3
|
-
import {
|
|
3
|
+
import { CursorStyle, KmtInputContext } from "./kmt-input-context";
|
|
4
4
|
declare const KMT_INPUT_STATES: readonly ["IDLE", "READY_TO_PAN_VIA_SPACEBAR", "READY_TO_PAN_VIA_SCROLL_WHEEL", "PAN", "INITIAL_PAN", "PAN_VIA_SCROLL_WHEEL", "DISABLED"];
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Possible states of the Keyboard/Mouse/Trackpad input state machine.
|
|
7
7
|
*
|
|
8
|
-
* @
|
|
8
|
+
* @remarks
|
|
9
|
+
* State transitions:
|
|
10
|
+
* - **IDLE**: Default state, waiting for user input
|
|
11
|
+
* - **READY_TO_PAN_VIA_SPACEBAR**: Spacebar pressed, ready to pan with left-click drag
|
|
12
|
+
* - **INITIAL_PAN**: First frame of pan via spacebar (detects accidental clicks)
|
|
13
|
+
* - **PAN**: Active panning via spacebar + left-click drag
|
|
14
|
+
* - **READY_TO_PAN_VIA_SCROLL_WHEEL**: Middle mouse button pressed, ready to pan
|
|
15
|
+
* - **PAN_VIA_SCROLL_WHEEL**: Active panning via middle-click drag
|
|
16
|
+
* - **DISABLED**: Input temporarily disabled (e.g., during UI interactions)
|
|
17
|
+
*
|
|
18
|
+
* @category Input State Machine - KMT
|
|
9
19
|
*/
|
|
10
20
|
export type KmtInputStates = CreateStateType<typeof KMT_INPUT_STATES>;
|
|
11
21
|
/**
|
|
12
|
-
*
|
|
22
|
+
* Payload for pointer events (mouse button press/release/move).
|
|
13
23
|
*
|
|
14
|
-
* @
|
|
24
|
+
* @property x - X coordinate in window space
|
|
25
|
+
* @property y - Y coordinate in window space
|
|
26
|
+
*
|
|
27
|
+
* @category Input State Machine - KMT
|
|
15
28
|
*/
|
|
16
29
|
export type PointerEventPayload = {
|
|
17
30
|
x: number;
|
|
18
31
|
y: number;
|
|
19
32
|
};
|
|
33
|
+
/**
|
|
34
|
+
* @internal
|
|
35
|
+
*/
|
|
20
36
|
type EmptyPayload = {};
|
|
21
37
|
/**
|
|
22
|
-
*
|
|
38
|
+
* Payload for scroll wheel events.
|
|
23
39
|
*
|
|
24
|
-
* @
|
|
40
|
+
* @property deltaX - Horizontal scroll delta
|
|
41
|
+
* @property deltaY - Vertical scroll delta
|
|
42
|
+
*
|
|
43
|
+
* @category Input State Machine - KMT
|
|
25
44
|
*/
|
|
26
45
|
export type ScrollEventPayload = {
|
|
27
46
|
deltaX: number;
|
|
28
47
|
deltaY: number;
|
|
29
48
|
};
|
|
30
49
|
/**
|
|
31
|
-
*
|
|
50
|
+
* Payload for scroll events combined with ctrl key (zoom gesture).
|
|
32
51
|
*
|
|
33
|
-
* @
|
|
52
|
+
* @property deltaX - Horizontal scroll delta
|
|
53
|
+
* @property deltaY - Vertical scroll delta
|
|
54
|
+
* @property x - Cursor X coordinate in window space (zoom anchor point)
|
|
55
|
+
* @property y - Cursor Y coordinate in window space (zoom anchor point)
|
|
56
|
+
*
|
|
57
|
+
* @category Input State Machine - KMT
|
|
34
58
|
*/
|
|
35
59
|
export type ScrollWithCtrlEventPayload = {
|
|
36
60
|
deltaX: number;
|
|
@@ -39,9 +63,21 @@ export type ScrollWithCtrlEventPayload = {
|
|
|
39
63
|
y: number;
|
|
40
64
|
};
|
|
41
65
|
/**
|
|
42
|
-
*
|
|
66
|
+
* Event mapping for the KMT input state machine.
|
|
43
67
|
*
|
|
44
|
-
* @
|
|
68
|
+
* @remarks
|
|
69
|
+
* Maps event names to their payload types. Used by the state machine framework
|
|
70
|
+
* to provide type-safe event handling.
|
|
71
|
+
*
|
|
72
|
+
* Key events:
|
|
73
|
+
* - **leftPointerDown/Up/Move**: Left mouse button interactions
|
|
74
|
+
* - **middlePointerDown/Up/Move**: Middle mouse button interactions (pan)
|
|
75
|
+
* - **spacebarDown/Up**: Spacebar for pan mode
|
|
76
|
+
* - **scroll**: Regular scroll (pan or zoom depending on device)
|
|
77
|
+
* - **scrollWithCtrl**: Ctrl + scroll (always zoom)
|
|
78
|
+
* - **disable/enable**: Temporarily disable/enable input processing
|
|
79
|
+
*
|
|
80
|
+
* @category Input State Machine - KMT
|
|
45
81
|
*/
|
|
46
82
|
export type KmtInputEventMapping = {
|
|
47
83
|
leftPointerDown: PointerEventPayload;
|
|
@@ -51,7 +87,7 @@ export type KmtInputEventMapping = {
|
|
|
51
87
|
spacebarUp: EmptyPayload;
|
|
52
88
|
stayIdle: EmptyPayload;
|
|
53
89
|
cursorOnElement: EmptyPayload;
|
|
54
|
-
scroll:
|
|
90
|
+
scroll: ScrollWithCtrlEventPayload;
|
|
55
91
|
scrollWithCtrl: ScrollWithCtrlEventPayload;
|
|
56
92
|
middlePointerDown: PointerEventPayload;
|
|
57
93
|
middlePointerUp: PointerEventPayload;
|
|
@@ -61,82 +97,116 @@ export type KmtInputEventMapping = {
|
|
|
61
97
|
pointerMove: PointerEventPayload;
|
|
62
98
|
};
|
|
63
99
|
/**
|
|
64
|
-
*
|
|
100
|
+
* Output events produced by the KMT state machine for the orchestrator.
|
|
65
101
|
*
|
|
66
|
-
* @
|
|
102
|
+
* @remarks
|
|
103
|
+
* These high-level gesture events are the result of recognizing patterns in raw DOM events.
|
|
104
|
+
* The orchestrator receives these events and coordinates camera control and observer notification.
|
|
105
|
+
*
|
|
106
|
+
* **Event Types**:
|
|
107
|
+
* - **pan**: Camera translation with delta in viewport coordinates
|
|
108
|
+
* - **zoom**: Camera scale change with anchor point in viewport coordinates
|
|
109
|
+
* - **rotate**: Camera rotation change (currently unused in KMT)
|
|
110
|
+
* - **cursor**: Cursor style change request (handled by state uponEnter/beforeExit)
|
|
111
|
+
* - **none**: No action required
|
|
112
|
+
*
|
|
113
|
+
* **Coordinate Spaces**:
|
|
114
|
+
* - Pan delta is in viewport pixels
|
|
115
|
+
* - Zoom anchor point is in viewport coordinates (origin at viewport center)
|
|
116
|
+
*
|
|
117
|
+
* @category Input State Machine - KMT
|
|
67
118
|
*/
|
|
68
|
-
export
|
|
69
|
-
|
|
70
|
-
|
|
119
|
+
export type KmtOutputEvent = {
|
|
120
|
+
type: "pan";
|
|
121
|
+
delta: Point;
|
|
122
|
+
} | {
|
|
123
|
+
type: "zoom";
|
|
124
|
+
delta: number;
|
|
125
|
+
anchorPointInViewPort: Point;
|
|
126
|
+
} | {
|
|
127
|
+
type: "rotate";
|
|
128
|
+
deltaRotation: number;
|
|
129
|
+
} | {
|
|
130
|
+
type: "cursor";
|
|
131
|
+
style: CursorStyle;
|
|
132
|
+
} | {
|
|
133
|
+
type: "none";
|
|
134
|
+
};
|
|
71
135
|
/**
|
|
72
|
-
*
|
|
136
|
+
* Mapping of events to their output types.
|
|
73
137
|
*
|
|
74
|
-
* @
|
|
138
|
+
* @remarks
|
|
139
|
+
* Defines which events produce outputs. Not all events produce outputs - some only
|
|
140
|
+
* cause state transitions. This mapping is used by the state machine framework for
|
|
141
|
+
* type-safe output handling.
|
|
142
|
+
*
|
|
143
|
+
* @category Input State Machine - KMT
|
|
144
|
+
*/
|
|
145
|
+
export type KmtInputEventOutputMapping = {
|
|
146
|
+
spacebarDown: number;
|
|
147
|
+
middlePointerMove: KmtOutputEvent;
|
|
148
|
+
scroll: KmtOutputEvent;
|
|
149
|
+
scrollWithCtrl: KmtOutputEvent;
|
|
150
|
+
leftPointerMove: KmtOutputEvent;
|
|
151
|
+
};
|
|
152
|
+
/**
|
|
153
|
+
* @internal
|
|
75
154
|
*/
|
|
76
155
|
export type KmtIdleStatePossibleTargetStates = "IDLE" | "READY_TO_PAN_VIA_SPACEBAR" | "READY_TO_PAN_VIA_SCROLL_WHEEL" | "DISABLED";
|
|
77
156
|
/**
|
|
78
|
-
*
|
|
157
|
+
* IDLE state - default state waiting for user input.
|
|
79
158
|
*
|
|
80
|
-
* @
|
|
159
|
+
* @remarks
|
|
160
|
+
* This is the default state of the KMT input state machine. It handles scroll events
|
|
161
|
+
* for panning and zooming, and transitions to pan-ready states when the user presses
|
|
162
|
+
* spacebar or middle-click.
|
|
163
|
+
*
|
|
164
|
+
* **Responsibilities**:
|
|
165
|
+
* - Process scroll events (pan or zoom depending on device and modifiers)
|
|
166
|
+
* - Detect spacebar press to enter pan mode
|
|
167
|
+
* - Detect middle-click to enter pan mode
|
|
168
|
+
* - Distinguish between mouse and trackpad input modalities
|
|
169
|
+
*
|
|
170
|
+
* **Scroll Behavior**:
|
|
171
|
+
* - Ctrl + Scroll: Always zoom (both mouse and trackpad)
|
|
172
|
+
* - Scroll (no Ctrl): Pan (trackpad) or Zoom (mouse, determined by modality detection)
|
|
173
|
+
*
|
|
174
|
+
* **Input Modality Detection**:
|
|
175
|
+
* The state tracks horizontal scroll deltas to distinguish trackpads (which produce deltaX)
|
|
176
|
+
* from mice (which typically only produce deltaY). This affects zoom behavior.
|
|
177
|
+
*
|
|
178
|
+
* @category Input State Machine - KMT
|
|
81
179
|
*/
|
|
82
|
-
export declare class KmtIdleState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
|
|
180
|
+
export declare class KmtIdleState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping> {
|
|
83
181
|
constructor();
|
|
84
182
|
protected _guards: Guard<KmtInputContext, "isIdle">;
|
|
85
183
|
protected _eventGuards: Partial<EventGuards<KmtInputEventMapping, KmtInputStates, KmtInputContext, Guard<KmtInputContext>>>;
|
|
86
|
-
|
|
87
|
-
|
|
184
|
+
scrollPan: (context: KmtInputContext, payload: ScrollEventPayload) => KmtOutputEvent;
|
|
185
|
+
scrollZoom: (context: KmtInputContext, payload: ScrollWithCtrlEventPayload) => KmtOutputEvent;
|
|
186
|
+
scrollHandler: (context: KmtInputContext, payload: ScrollWithCtrlEventPayload) => KmtOutputEvent;
|
|
187
|
+
scrollWithCtrlHandler: (context: KmtInputContext, payload: ScrollWithCtrlEventPayload) => KmtOutputEvent;
|
|
188
|
+
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
189
|
+
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
88
190
|
uponEnter(context: KmtInputContext): void;
|
|
89
|
-
|
|
90
|
-
scrollWithCtrlHandler(context: KmtInputContext, payload: ScrollWithCtrlEventPayload): void;
|
|
91
|
-
spacebarDownHandler(context: KmtInputContext, payload: EmptyPayload): void;
|
|
191
|
+
spacebarDownHandler(context: KmtInputContext, payload: EmptyPayload): number;
|
|
92
192
|
middlePointerDownHandler(context: KmtInputContext, payload: PointerEventPayload): void;
|
|
93
|
-
pointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload): void;
|
|
94
193
|
}
|
|
95
|
-
|
|
96
|
-
* @description The possible target states of the ready to select state.
|
|
97
|
-
*
|
|
98
|
-
* @category Input State Machine
|
|
99
|
-
*/
|
|
100
|
-
export type ReadyToSelectStatePossibleTargetStates = "IDLE" | "SELECTING" | "DISABLED";
|
|
101
|
-
/**
|
|
102
|
-
* @description The context for the ready to select state.
|
|
103
|
-
*
|
|
104
|
-
* @category Input State Machine
|
|
105
|
-
*/
|
|
106
|
-
export type SelectionContext = {
|
|
107
|
-
setSelectionEndPoint: (point: Point) => void;
|
|
108
|
-
toggleSelectionBox: (show: boolean) => void;
|
|
109
|
-
cleanup: () => void;
|
|
110
|
-
setup: () => void;
|
|
111
|
-
canvas: HTMLCanvasElement;
|
|
112
|
-
};
|
|
113
|
-
/**
|
|
114
|
-
* @description The ready to select state of the keyboard mouse and trackpad input state machine.
|
|
115
|
-
*
|
|
116
|
-
* @category Input State Machine
|
|
117
|
-
*/
|
|
118
|
-
export declare class ReadyToSelectState extends TemplateState<KmtInputEventMapping, SelectionContext, ReadyToSelectStatePossibleTargetStates> {
|
|
119
|
-
constructor();
|
|
120
|
-
leftPointerMove: (context: SelectionContext, payload: PointerEventPayload) => void;
|
|
121
|
-
protected _eventReactions: EventReactions<KmtInputEventMapping, SelectionContext, ReadyToSelectStatePossibleTargetStates>;
|
|
122
|
-
get eventReactions(): EventReactions<KmtInputEventMapping, SelectionContext, ReadyToSelectStatePossibleTargetStates>;
|
|
123
|
-
}
|
|
124
|
-
export declare class DisabledState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
|
|
194
|
+
export declare class DisabledState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping> {
|
|
125
195
|
constructor();
|
|
126
196
|
uponEnter(context: KmtInputContext): void;
|
|
127
197
|
beforeExit(context: KmtInputContext): void;
|
|
128
|
-
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
198
|
+
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
129
199
|
}
|
|
130
200
|
/**
|
|
131
201
|
* @description The ready to pan via space bar state of the keyboard mouse and trackpad input state machine.
|
|
132
202
|
*
|
|
133
203
|
* @category Input State Machine
|
|
134
204
|
*/
|
|
135
|
-
export declare class ReadyToPanViaSpaceBarState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
|
|
205
|
+
export declare class ReadyToPanViaSpaceBarState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping> {
|
|
136
206
|
constructor();
|
|
137
|
-
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
207
|
+
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
138
208
|
uponEnter(context: KmtInputContext): void;
|
|
139
|
-
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
209
|
+
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
140
210
|
leftPointerDownHandler(context: KmtInputContext, payload: PointerEventPayload): void;
|
|
141
211
|
}
|
|
142
212
|
/**
|
|
@@ -144,22 +214,22 @@ export declare class ReadyToPanViaSpaceBarState extends TemplateState<KmtInputEv
|
|
|
144
214
|
*
|
|
145
215
|
* @category Input State Machine
|
|
146
216
|
*/
|
|
147
|
-
export declare class InitialPanState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
|
|
217
|
+
export declare class InitialPanState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping> {
|
|
148
218
|
constructor();
|
|
149
|
-
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
150
|
-
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
219
|
+
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
220
|
+
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
151
221
|
uponEnter(context: KmtInputContext): void;
|
|
152
|
-
leftPointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload):
|
|
222
|
+
leftPointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload): KmtOutputEvent;
|
|
153
223
|
}
|
|
154
224
|
/**
|
|
155
225
|
* @description The ready to pan via scroll wheel state of the keyboard mouse and trackpad input state machine.
|
|
156
226
|
*
|
|
157
227
|
* @category Input State Machine
|
|
158
228
|
*/
|
|
159
|
-
export declare class ReadyToPanViaScrollWheelState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
|
|
229
|
+
export declare class ReadyToPanViaScrollWheelState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping> {
|
|
160
230
|
constructor();
|
|
161
|
-
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
162
|
-
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
231
|
+
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
232
|
+
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
163
233
|
uponEnter(context: KmtInputContext): void;
|
|
164
234
|
}
|
|
165
235
|
/**
|
|
@@ -167,39 +237,85 @@ export declare class ReadyToPanViaScrollWheelState extends TemplateState<KmtInpu
|
|
|
167
237
|
*
|
|
168
238
|
* @category Input State Machine
|
|
169
239
|
*/
|
|
170
|
-
export declare class PanState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
|
|
240
|
+
export declare class PanState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping> {
|
|
171
241
|
constructor();
|
|
172
|
-
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
173
|
-
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
242
|
+
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
243
|
+
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
174
244
|
uponEnter(context: KmtInputContext): void;
|
|
175
245
|
beforeExit(context: KmtInputContext): void;
|
|
176
|
-
leftPointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload):
|
|
246
|
+
leftPointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload): KmtOutputEvent;
|
|
177
247
|
}
|
|
178
248
|
/**
|
|
179
249
|
* @description The pan via scroll wheel state of the keyboard mouse and trackpad input state machine.
|
|
180
250
|
*
|
|
181
251
|
* @category Input State Machine
|
|
182
252
|
*/
|
|
183
|
-
export declare class PanViaScrollWheelState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
|
|
184
|
-
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
185
|
-
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
186
|
-
middlePointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload):
|
|
253
|
+
export declare class PanViaScrollWheelState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping> {
|
|
254
|
+
protected _eventReactions: EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
255
|
+
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
256
|
+
middlePointerMoveHandler(context: KmtInputContext, payload: PointerEventPayload): KmtOutputEvent;
|
|
187
257
|
uponEnter(context: KmtInputContext): void;
|
|
188
258
|
}
|
|
189
|
-
export declare class KmtEmptyState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
|
|
259
|
+
export declare class KmtEmptyState extends TemplateState<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping> {
|
|
190
260
|
constructor();
|
|
191
|
-
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
261
|
+
get eventReactions(): EventReactions<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
192
262
|
}
|
|
193
|
-
export type KmtInputStateMachine = TemplateStateMachine<KmtInputEventMapping, KmtInputContext, KmtInputStates>;
|
|
194
263
|
/**
|
|
195
|
-
*
|
|
264
|
+
* Type alias for the KMT input state machine.
|
|
196
265
|
*
|
|
197
|
-
* @category Input State Machine
|
|
266
|
+
* @category Input State Machine - KMT
|
|
267
|
+
*/
|
|
268
|
+
export type KmtInputStateMachine = TemplateStateMachine<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping>;
|
|
269
|
+
/**
|
|
270
|
+
* Creates a new KMT (Keyboard/Mouse/Trackpad) input state machine.
|
|
271
|
+
*
|
|
272
|
+
* @param context - The context providing state and canvas access for the state machine
|
|
273
|
+
* @returns A configured state machine ready to process KMT input events
|
|
274
|
+
*
|
|
275
|
+
* @remarks
|
|
276
|
+
* This factory function creates a fully configured state machine with all KMT gesture
|
|
277
|
+
* recognition states. The state machine processes raw input events and produces
|
|
278
|
+
* high-level gesture outputs (pan, zoom, rotate).
|
|
279
|
+
*
|
|
280
|
+
* **State Flow**:
|
|
281
|
+
* ```
|
|
282
|
+
* IDLE → (spacebar) → READY_TO_PAN_VIA_SPACEBAR → (click) → INITIAL_PAN → PAN
|
|
283
|
+
* IDLE → (middle-click) → READY_TO_PAN_VIA_SCROLL_WHEEL → PAN_VIA_SCROLL_WHEEL
|
|
284
|
+
* IDLE → (scroll) → [produces pan or zoom output, stays in IDLE]
|
|
285
|
+
* ```
|
|
286
|
+
*
|
|
287
|
+
* **Gesture Recognition**:
|
|
288
|
+
* - **Pan via spacebar**: Spacebar + left-click drag
|
|
289
|
+
* - **Pan via middle-click**: Middle-click drag
|
|
290
|
+
* - **Zoom**: Ctrl + scroll (mouse) or scroll (trackpad, auto-detected)
|
|
291
|
+
* - **Pan via scroll**: Scroll (trackpad) or scroll without Ctrl (varies by device)
|
|
292
|
+
*
|
|
293
|
+
* @category Input State Machine - KMT
|
|
294
|
+
*
|
|
295
|
+
* @example
|
|
296
|
+
* ```typescript
|
|
297
|
+
* const canvasProxy = new CanvasProxy(canvasElement);
|
|
298
|
+
* const context = new ObservableInputTracker(canvasProxy);
|
|
299
|
+
* const stateMachine = createKmtInputStateMachine(context);
|
|
300
|
+
*
|
|
301
|
+
* // Process an event
|
|
302
|
+
* const result = stateMachine.happens("scroll", {
|
|
303
|
+
* deltaX: 0,
|
|
304
|
+
* deltaY: 10,
|
|
305
|
+
* x: 500,
|
|
306
|
+
* y: 300
|
|
307
|
+
* });
|
|
308
|
+
*
|
|
309
|
+
* // Check for output
|
|
310
|
+
* if (result.output) {
|
|
311
|
+
* console.log("Gesture recognized:", result.output.type);
|
|
312
|
+
* }
|
|
313
|
+
* ```
|
|
198
314
|
*/
|
|
199
315
|
export declare function createKmtInputStateMachine(context: KmtInputContext): KmtInputStateMachine;
|
|
200
|
-
export declare class KmtInputStateMachineWebWorkerProxy extends TemplateStateMachine<KmtInputEventMapping, KmtInputContext, KmtInputStates> {
|
|
316
|
+
export declare class KmtInputStateMachineWebWorkerProxy extends TemplateStateMachine<KmtInputEventMapping, KmtInputContext, KmtInputStates, KmtInputEventOutputMapping> {
|
|
201
317
|
private _webworker;
|
|
202
318
|
constructor(webworker: Worker);
|
|
203
|
-
happens(...args: EventArgs<KmtInputEventMapping, keyof KmtInputEventMapping | string>):
|
|
319
|
+
happens(...args: EventArgs<KmtInputEventMapping, keyof KmtInputEventMapping | string>): EventResult<KmtInputStates>;
|
|
204
320
|
}
|
|
205
321
|
export {};
|
|
@@ -1,41 +1,107 @@
|
|
|
1
|
-
import type { Point } from "@ue-too/math";
|
|
2
|
-
import { RawUserInputPublisher } from "../raw-input-publisher";
|
|
3
1
|
import { BaseContext } from "@ue-too/being";
|
|
4
2
|
import { Canvas } from "./kmt-input-context";
|
|
5
3
|
/**
|
|
6
|
-
*
|
|
4
|
+
* Represents a single touch point in window coordinates.
|
|
7
5
|
*
|
|
8
|
-
* @
|
|
6
|
+
* @property ident - The unique identifier for this touch point (from TouchEvent.identifier)
|
|
7
|
+
* @property x - X coordinate in window space
|
|
8
|
+
* @property y - Y coordinate in window space
|
|
9
|
+
*
|
|
10
|
+
* @remarks
|
|
11
|
+
* Touch points are tracked by their identifiers to maintain consistency across touch events.
|
|
12
|
+
* Each finger/contact point maintains its identifier for the duration of the touch interaction.
|
|
13
|
+
*
|
|
14
|
+
* @category Input State Machine - Touch
|
|
9
15
|
*/
|
|
10
16
|
export type TouchPoints = {
|
|
11
17
|
ident: number;
|
|
12
18
|
x: number;
|
|
13
19
|
y: number;
|
|
14
20
|
};
|
|
21
|
+
/**
|
|
22
|
+
* Context interface for the touch input state machine.
|
|
23
|
+
*
|
|
24
|
+
* @remarks
|
|
25
|
+
* This context manages the state required for multi-touch gesture recognition:
|
|
26
|
+
*
|
|
27
|
+
* **Touch Point Tracking**:
|
|
28
|
+
* - Maintains a map of active touch points by identifier
|
|
29
|
+
* - Stores initial positions to calculate deltas for pan gestures
|
|
30
|
+
* - Stores initial distances to calculate zoom factors
|
|
31
|
+
*
|
|
32
|
+
* **Gesture Recognition**:
|
|
33
|
+
* - Single-finger: Not handled (reserved for UI interactions)
|
|
34
|
+
* - Two-finger: Pan and pinch-to-zoom gestures
|
|
35
|
+
* - Three+ fingers: Currently not handled
|
|
36
|
+
*
|
|
37
|
+
* **Coordinate System**:
|
|
38
|
+
* Similar to KMT, the `alignCoordinateSystem` flag controls Y-axis orientation.
|
|
39
|
+
*
|
|
40
|
+
* This interface extends BaseContext from the @ue-too/being state machine library.
|
|
41
|
+
*
|
|
42
|
+
* @category Input State Machine - Touch
|
|
43
|
+
*/
|
|
15
44
|
export interface TouchContext extends BaseContext {
|
|
45
|
+
/** Adds new touch points to tracking */
|
|
16
46
|
addTouchPoints: (points: TouchPoints[]) => void;
|
|
47
|
+
/** Removes touch points from tracking by identifier */
|
|
17
48
|
removeTouchPoints: (idents: number[]) => void;
|
|
49
|
+
/** Returns the current number of active touch points */
|
|
18
50
|
getCurrentTouchPointsCount: () => number;
|
|
51
|
+
/** Retrieves the initial positions of specific touch points */
|
|
19
52
|
getInitialTouchPointsPositions: (idents: number[]) => TouchPoints[];
|
|
53
|
+
/** Updates the current positions of touch points */
|
|
20
54
|
updateTouchPoints: (pointsMoved: TouchPoints[]) => void;
|
|
21
|
-
|
|
22
|
-
notifyOnZoom: (zoomAmount: number, anchorPoint: Point) => void;
|
|
55
|
+
/** Whether to use standard screen coordinate system (vs inverted Y-axis) */
|
|
23
56
|
alignCoordinateSystem: boolean;
|
|
57
|
+
/** Canvas accessor for dimensions and coordinate transformations */
|
|
24
58
|
canvas: Canvas;
|
|
25
59
|
}
|
|
60
|
+
/**
|
|
61
|
+
* Production implementation of TouchContext that tracks multi-touch state.
|
|
62
|
+
*
|
|
63
|
+
* @remarks
|
|
64
|
+
* This class maintains a map of active touch points, storing their initial positions
|
|
65
|
+
* to enable gesture recognition. The state machine uses this context to:
|
|
66
|
+
*
|
|
67
|
+
* - Calculate pan deltas (difference between initial and current midpoint)
|
|
68
|
+
* - Calculate zoom factors (change in distance between two touch points)
|
|
69
|
+
* - Determine gesture type (pan vs zoom based on relative magnitudes)
|
|
70
|
+
*
|
|
71
|
+
* **Touch Point Lifecycle**:
|
|
72
|
+
* 1. `addTouchPoints`: Called on touchstart to register new touches
|
|
73
|
+
* 2. `updateTouchPoints`: Called on touchmove to update current positions
|
|
74
|
+
* 3. `removeTouchPoints`: Called on touchend/touchcancel to unregister touches
|
|
75
|
+
*
|
|
76
|
+
* The initial positions are preserved until the touch ends, allowing continuous
|
|
77
|
+
* calculation of deltas throughout the gesture.
|
|
78
|
+
*
|
|
79
|
+
* @category Input State Machine - Touch
|
|
80
|
+
*
|
|
81
|
+
* @example
|
|
82
|
+
* ```typescript
|
|
83
|
+
* const canvasProxy = new CanvasProxy(canvasElement);
|
|
84
|
+
* const context = new TouchInputTracker(canvasProxy);
|
|
85
|
+
* const stateMachine = createTouchInputStateMachine(context);
|
|
86
|
+
*
|
|
87
|
+
* // When a two-finger touch starts
|
|
88
|
+
* context.addTouchPoints([
|
|
89
|
+
* {ident: 0, x: 100, y: 200},
|
|
90
|
+
* {ident: 1, x: 300, y: 200}
|
|
91
|
+
* ]);
|
|
92
|
+
* console.log(context.getCurrentTouchPointsCount()); // 2
|
|
93
|
+
* ```
|
|
94
|
+
*/
|
|
26
95
|
export declare class TouchInputTracker implements TouchContext {
|
|
27
|
-
private _inputPublisher;
|
|
28
96
|
private _touchPointsMap;
|
|
29
97
|
private _canvas;
|
|
30
98
|
private _alignCoordinateSystem;
|
|
31
|
-
constructor(canvas: Canvas
|
|
99
|
+
constructor(canvas: Canvas);
|
|
32
100
|
addTouchPoints(points: TouchPoints[]): void;
|
|
33
101
|
removeTouchPoints(identifiers: number[]): void;
|
|
34
102
|
getCurrentTouchPointsCount(): number;
|
|
35
103
|
getInitialTouchPointsPositions(idents: number[]): TouchPoints[];
|
|
36
104
|
updateTouchPoints(pointsMoved: TouchPoints[]): void;
|
|
37
|
-
notifyOnPan(delta: Point): void;
|
|
38
|
-
notifyOnZoom(zoomAmount: number, anchorPoint: Point): void;
|
|
39
105
|
get alignCoordinateSystem(): boolean;
|
|
40
106
|
set alignCoordinateSystem(value: boolean);
|
|
41
107
|
get canvas(): Canvas;
|