@msobiecki/react-marauders-path 1.29.0 → 1.30.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 +99 -16
- package/dist/index.d.ts +98 -8
- package/dist/index.js +39 -29
- package/dist/index.js.map +1 -1
- package/dist/use-double-tap/event-guards.js +7 -0
- package/dist/use-double-tap/event-guards.js.map +1 -0
- package/dist/use-double-tap/use-double-tap.js +32 -26
- package/dist/use-double-tap/use-double-tap.js.map +1 -1
- package/dist/use-drag/event-guards.js +7 -0
- package/dist/use-drag/event-guards.js.map +1 -0
- package/dist/use-drag/use-drag.js +72 -53
- package/dist/use-drag/use-drag.js.map +1 -1
- package/dist/use-drag/use-drag.types.js.map +1 -1
- package/dist/use-key/event-guards.js +1 -1
- package/dist/use-key/event-guards.js.map +1 -1
- package/dist/use-key/use-key.js +48 -51
- package/dist/use-key/use-key.js.map +1 -1
- package/dist/use-key/use-key.types.js.map +1 -1
- package/dist/use-mouse/use-mouse.js +100 -0
- package/dist/use-mouse/use-mouse.js.map +1 -0
- package/dist/use-mouse/use-mouse.types.js +23 -0
- package/dist/use-mouse/use-mouse.types.js.map +1 -0
- package/dist/use-pinch/event-guards.js +7 -0
- package/dist/use-pinch/event-guards.js.map +1 -0
- package/dist/use-pinch/use-pinch.js +93 -70
- package/dist/use-pinch/use-pinch.js.map +1 -1
- package/dist/use-pinch/use-pinch.types.js.map +1 -1
- package/dist/use-pointer/event-guards.js +7 -0
- package/dist/use-pointer/event-guards.js.map +1 -0
- package/dist/use-pointer/invoke-pointer-action.js +7 -0
- package/dist/use-pointer/invoke-pointer-action.js.map +1 -0
- package/dist/use-pointer/use-pointer.js +74 -0
- package/dist/use-pointer/use-pointer.js.map +1 -0
- package/dist/use-pointer/use-pointer.types.js +19 -0
- package/dist/use-pointer/use-pointer.types.js.map +1 -0
- package/dist/use-press/event-guards.js +7 -0
- package/dist/use-press/event-guards.js.map +1 -0
- package/dist/use-press/use-press.js +83 -57
- package/dist/use-press/use-press.js.map +1 -1
- package/dist/use-swipe/event-guards.js +7 -0
- package/dist/use-swipe/event-guards.js.map +1 -0
- package/dist/use-swipe/use-swipe.js +81 -62
- package/dist/use-swipe/use-swipe.js.map +1 -1
- package/dist/use-swipe/use-swipe.types.js.map +1 -1
- package/dist/use-tap/event-guards.js +7 -0
- package/dist/use-tap/event-guards.js.map +1 -0
- package/dist/use-tap/use-tap.js +66 -48
- package/dist/use-tap/use-tap.js.map +1 -1
- package/dist/use-wheel/use-wheel.js +1 -1
- package/dist/use-wheel/use-wheel.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,13 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://github.com/msobiecki/react-marauders-path/blob/master/LICENSE)
|
|
4
4
|
|
|
5
|
-
A lightweight, type-safe React library for handling keyboard, wheel, and gesture events including tap, double-tap, press, swipe, drag, and pinch interactions.
|
|
5
|
+
A lightweight, type-safe React library for handling keyboard, pointer, mouse, wheel, and gesture events including tap, double-tap, press, swipe, drag, and pinch interactions.
|
|
6
6
|
|
|
7
7
|

|
|
8
8
|
|
|
9
9
|
## Features
|
|
10
10
|
|
|
11
11
|
- 🎮 **Keyboard Event Handling** - Detect single keys, key combinations, and sequences with configurable timing thresholds
|
|
12
|
+
- 🖱️ **Pointer Event Handling** - Listen to pointer movement and lifecycle events with pointer type filtering
|
|
13
|
+
- 🖱️ **Mouse Event Handling** - Listen to mouse interactions through a pointer-powered mouse API with button filtering
|
|
12
14
|
- 👐 **Gesture Event Handling** - Detect tap, double-tap, press, swipe, drag, and pinch gestures
|
|
13
15
|
- 👆 **Tap Gesture Handling** - Detect single taps or clicks with configurable movement and duration thresholds
|
|
14
16
|
- 👆👆 **Double-Tap Gesture Handling** - Detect consecutive taps or clicks with configurable timing and position thresholds
|
|
@@ -85,6 +87,39 @@ useKey(
|
|
|
85
87
|
);
|
|
86
88
|
```
|
|
87
89
|
|
|
90
|
+
### Pointer Event Hook
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
import { usePointer, PointerEventTypes } from '@msobiecki/react-marauders-path';
|
|
94
|
+
|
|
95
|
+
function MyComponent() {
|
|
96
|
+
usePointer((event, type, data) => {
|
|
97
|
+
console.log(`Pointer ${type} at X: ${data.x}, Y: ${data.y}`);
|
|
98
|
+
}, {
|
|
99
|
+
eventType: [PointerEventTypes.Down, PointerEventTypes.Move, PointerEventTypes.Up],
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
return <div>Use pointer input</div>;
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Mouse Event Hook
|
|
107
|
+
|
|
108
|
+
```typescript
|
|
109
|
+
import { useMouse, MouseEventTypes, MouseButtons } from '@msobiecki/react-marauders-path';
|
|
110
|
+
|
|
111
|
+
function MyComponent() {
|
|
112
|
+
useMouse((event, type, data) => {
|
|
113
|
+
console.log(`Mouse ${type} at X: ${data.x}, Y: ${data.y}, button: ${data.button}`);
|
|
114
|
+
}, {
|
|
115
|
+
eventType: [MouseEventTypes.Move, MouseEventTypes.Click, MouseEventTypes.DoubleClick],
|
|
116
|
+
eventButtons: [MouseButtons.Left],
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
return <div>Use mouse input</div>;
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
88
123
|
### Gesture Event Hook
|
|
89
124
|
|
|
90
125
|
```typescript
|
|
@@ -226,6 +261,69 @@ interface UseKeyOptions {
|
|
|
226
261
|
}
|
|
227
262
|
```
|
|
228
263
|
|
|
264
|
+
### `usePointer(callback, options?)`
|
|
265
|
+
|
|
266
|
+
Hook for handling pointer events with configurable event types, pointer types, and listener options.
|
|
267
|
+
|
|
268
|
+
**Parameters:**
|
|
269
|
+
|
|
270
|
+
- `callback: (event: PointerEvent, type: PointerEventType, data: PointerData) => void | boolean` - Called when a pointer event occurs
|
|
271
|
+
- `options?: UsePointerOptions` - Optional configuration
|
|
272
|
+
|
|
273
|
+
**Options:**
|
|
274
|
+
|
|
275
|
+
```typescript
|
|
276
|
+
interface UsePointerOptions {
|
|
277
|
+
eventType?: PointerEventType[]; // Default: ["pointermove", "pointerenter", "pointerleave", "pointerup", "pointerdown", "pointerover", "pointerout", "pointercancel"]
|
|
278
|
+
eventPointerTypes?: Array<"touch" | "mouse" | "pen">; // Default: ["touch", "mouse", "pen"]
|
|
279
|
+
eventCapture?: boolean; // Default: false
|
|
280
|
+
eventOnce?: boolean; // Default: false
|
|
281
|
+
eventStopImmediatePropagation?: boolean; // Default: false
|
|
282
|
+
container?: RefObject<HTMLElement>; // Default: window
|
|
283
|
+
}
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
**Pointer Data:**
|
|
287
|
+
|
|
288
|
+
```typescript
|
|
289
|
+
interface PointerData {
|
|
290
|
+
x: number; // Pointer X position
|
|
291
|
+
y: number; // Pointer Y position
|
|
292
|
+
}
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
### `useMouse(callback, options?)`
|
|
296
|
+
|
|
297
|
+
Hook for handling mouse-like events through pointer events with button filtering and synthesized click/double-click support.
|
|
298
|
+
|
|
299
|
+
**Parameters:**
|
|
300
|
+
|
|
301
|
+
- `callback: (event: MouseEvent, type: MouseEventType, data: MouseData) => void | boolean` - Called when a mouse event occurs
|
|
302
|
+
- `options?: UseMouseOptions` - Optional configuration
|
|
303
|
+
|
|
304
|
+
**Options:**
|
|
305
|
+
|
|
306
|
+
```typescript
|
|
307
|
+
interface UseMouseOptions {
|
|
308
|
+
eventType?: MouseEventType[]; // Default: ["mousemove", "mousedown", "mouseup", "click", "dblclick"]
|
|
309
|
+
eventButtons?: Array<0 | 1 | 2 | 3 | 4>; // Default: [0, 1, 2]
|
|
310
|
+
eventCapture?: boolean; // Default: false
|
|
311
|
+
eventOnce?: boolean; // Default: false
|
|
312
|
+
eventStopImmediatePropagation?: boolean; // Default: false
|
|
313
|
+
container?: RefObject<HTMLElement>; // Default: window
|
|
314
|
+
}
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
**Mouse Data:**
|
|
318
|
+
|
|
319
|
+
```typescript
|
|
320
|
+
interface MouseData {
|
|
321
|
+
x: number; // Mouse X position
|
|
322
|
+
y: number; // Mouse Y position
|
|
323
|
+
button: 0 | 1 | 2 | 3 | 4; // Active mouse button
|
|
324
|
+
}
|
|
325
|
+
```
|
|
326
|
+
|
|
229
327
|
### `useGesture(gesture, callback, options?)`
|
|
230
328
|
|
|
231
329
|
Hook for gesture event handling that delegates to one of the low-level gesture hooks.
|
|
@@ -588,21 +686,6 @@ npm run dev
|
|
|
588
686
|
npm run lint
|
|
589
687
|
```
|
|
590
688
|
|
|
591
|
-
## Project Status
|
|
592
|
-
|
|
593
|
-
### Pointer / Mouse Hooks (Unified)
|
|
594
|
-
|
|
595
|
-
- 🚧 **`usePointer`** – unified hook for MouseEvent, PointerEvent, and TouchEvent
|
|
596
|
-
Supported events:
|
|
597
|
-
- `pointerdown`, `pointermove`, `pointerup`, `pointerenter`, `pointerleave`, `pointercancel`
|
|
598
|
-
Filter by pointer type: `mouse` | `touch` | `pen`
|
|
599
|
-
Callback returns unified data e.g.: `x`, `y`, `button`, `type`, `isPrimary`
|
|
600
|
-
|
|
601
|
-
- 🚧 **`useMouse`** – alias for `usePointer` filtered to mouse only
|
|
602
|
-
Supported events:
|
|
603
|
-
- `mousemove`, `mousedown`, `mouseup`, `click`, `dblclick`
|
|
604
|
-
Buttons: `left`, `right`, `middle`
|
|
605
|
-
|
|
606
689
|
## License
|
|
607
690
|
|
|
608
691
|
See [LICENSE](./LICENSE) file for details.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
2
|
-
|
|
3
1
|
export declare interface CombinationActiveKey {
|
|
4
2
|
pressedAt: number;
|
|
5
3
|
releasedAt?: number;
|
|
@@ -61,7 +59,7 @@ export declare interface DragOptions {
|
|
|
61
59
|
eventStopImmediatePropagation: boolean;
|
|
62
60
|
threshold: number;
|
|
63
61
|
container: {
|
|
64
|
-
current:
|
|
62
|
+
current: EventTarget | null;
|
|
65
63
|
};
|
|
66
64
|
raf: boolean;
|
|
67
65
|
}
|
|
@@ -107,7 +105,50 @@ export declare interface KeyOptions {
|
|
|
107
105
|
eventStopImmediatePropagation: boolean;
|
|
108
106
|
sequenceThreshold: number;
|
|
109
107
|
combinationThreshold: number;
|
|
110
|
-
container:
|
|
108
|
+
container: {
|
|
109
|
+
current: EventTarget | null;
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
export declare type MouseButton = (typeof MouseButtons)[keyof typeof MouseButtons];
|
|
114
|
+
|
|
115
|
+
export declare const MouseButtons: {
|
|
116
|
+
readonly Left: 0;
|
|
117
|
+
readonly Middle: 1;
|
|
118
|
+
readonly Right: 2;
|
|
119
|
+
readonly Fourth: 3;
|
|
120
|
+
readonly Fifth: 4;
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
export declare interface MouseData {
|
|
124
|
+
x: number;
|
|
125
|
+
y: number;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
export declare type MouseEventType = (typeof MouseEventTypes)[keyof typeof MouseEventTypes];
|
|
129
|
+
|
|
130
|
+
export declare const MouseEventTypes: {
|
|
131
|
+
readonly Click: "click";
|
|
132
|
+
readonly ContextMenu: "contextmenu";
|
|
133
|
+
readonly DoubleClick: "dblclick";
|
|
134
|
+
readonly Down: "mousedown";
|
|
135
|
+
readonly Enter: "mouseenter";
|
|
136
|
+
readonly Leave: "mouseleave";
|
|
137
|
+
readonly Move: "mousemove";
|
|
138
|
+
readonly Out: "mouseout";
|
|
139
|
+
readonly Over: "mouseover";
|
|
140
|
+
readonly Up: "mouseup";
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
export declare interface MouseOptions {
|
|
144
|
+
eventType: MouseEventType[];
|
|
145
|
+
eventButtons: MouseButton[];
|
|
146
|
+
eventCapture: boolean;
|
|
147
|
+
eventOnce: boolean;
|
|
148
|
+
eventStopImmediatePropagation: boolean;
|
|
149
|
+
container: {
|
|
150
|
+
current: EventTarget | null;
|
|
151
|
+
};
|
|
111
152
|
}
|
|
112
153
|
|
|
113
154
|
export declare interface PinchData {
|
|
@@ -132,7 +173,7 @@ export declare interface PinchOptions {
|
|
|
132
173
|
eventStopImmediatePropagation: boolean;
|
|
133
174
|
threshold: number;
|
|
134
175
|
container: {
|
|
135
|
-
current:
|
|
176
|
+
current: EventTarget | null;
|
|
136
177
|
};
|
|
137
178
|
raf: boolean;
|
|
138
179
|
}
|
|
@@ -144,6 +185,43 @@ export declare interface PinchState {
|
|
|
144
185
|
active: boolean;
|
|
145
186
|
}
|
|
146
187
|
|
|
188
|
+
export declare interface PointerData {
|
|
189
|
+
x: number;
|
|
190
|
+
y: number;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
export declare type PointerEventPointerType = (typeof PointerEventPointerTypes)[keyof typeof PointerEventPointerTypes];
|
|
194
|
+
|
|
195
|
+
export declare const PointerEventPointerTypes: {
|
|
196
|
+
readonly Touch: "touch";
|
|
197
|
+
readonly Mouse: "mouse";
|
|
198
|
+
readonly Pen: "pen";
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
export declare type PointerEventType = (typeof PointerEventTypes)[keyof typeof PointerEventTypes];
|
|
202
|
+
|
|
203
|
+
export declare const PointerEventTypes: {
|
|
204
|
+
readonly Move: "pointermove";
|
|
205
|
+
readonly Enter: "pointerenter";
|
|
206
|
+
readonly Leave: "pointerleave";
|
|
207
|
+
readonly Up: "pointerup";
|
|
208
|
+
readonly Down: "pointerdown";
|
|
209
|
+
readonly Over: "pointerover";
|
|
210
|
+
readonly Out: "pointerout";
|
|
211
|
+
readonly Cancel: "pointercancel";
|
|
212
|
+
};
|
|
213
|
+
|
|
214
|
+
export declare interface PointerOptions {
|
|
215
|
+
eventType: PointerEventType[];
|
|
216
|
+
eventPointerTypes: PointerEventPointerType[];
|
|
217
|
+
eventCapture: boolean;
|
|
218
|
+
eventOnce: boolean;
|
|
219
|
+
eventStopImmediatePropagation: boolean;
|
|
220
|
+
container: {
|
|
221
|
+
current: EventTarget | null;
|
|
222
|
+
};
|
|
223
|
+
}
|
|
224
|
+
|
|
147
225
|
export declare interface PressData {
|
|
148
226
|
x: number;
|
|
149
227
|
y: number;
|
|
@@ -211,7 +289,7 @@ export declare interface SwipeOptions {
|
|
|
211
289
|
threshold: number;
|
|
212
290
|
velocity: number;
|
|
213
291
|
container: {
|
|
214
|
-
current:
|
|
292
|
+
current: EventTarget | null;
|
|
215
293
|
};
|
|
216
294
|
}
|
|
217
295
|
|
|
@@ -362,12 +440,24 @@ export declare type UseKeyOptions = Partial<KeyOptions>;
|
|
|
362
440
|
|
|
363
441
|
export declare type UseKeySchema = KeyEvent;
|
|
364
442
|
|
|
443
|
+
export declare const useMouse: (mouseCallback: UseMouseCallback, options?: UseMouseOptions) => void;
|
|
444
|
+
|
|
445
|
+
export declare type UseMouseCallback = ((event: MouseEvent, type: MouseEventType, button: MouseButton, data: MouseData, ...properties: unknown[]) => void) | ((event: MouseEvent, type: MouseEventType, button: MouseButton, data: MouseData, ...properties: unknown[]) => boolean);
|
|
446
|
+
|
|
447
|
+
export declare type UseMouseOptions = Partial<MouseOptions>;
|
|
448
|
+
|
|
365
449
|
export declare const usePinch: (pinchCallback: UsePinchCallback, options?: UsePinchOptions) => void;
|
|
366
450
|
|
|
367
451
|
export declare type UsePinchCallback = ((event: PointerEvent, data: PinchData) => boolean) | ((event: PointerEvent, data: PinchData) => void);
|
|
368
452
|
|
|
369
453
|
export declare type UsePinchOptions = Partial<PinchOptions>;
|
|
370
454
|
|
|
455
|
+
export declare const usePointer: (pointerCallback: UsePointerCallback, options?: UsePointerOptions) => void;
|
|
456
|
+
|
|
457
|
+
export declare type UsePointerCallback = ((event: PointerEvent, type: PointerEventType, data: PointerData, ...properties: unknown[]) => void) | ((event: PointerEvent, type: PointerEventType, data: PointerData, ...properties: unknown[]) => boolean);
|
|
458
|
+
|
|
459
|
+
export declare type UsePointerOptions = Partial<PointerOptions>;
|
|
460
|
+
|
|
371
461
|
export declare const usePress: (pressCallback: UsePressCallback, options?: UsePressOptions) => void;
|
|
372
462
|
|
|
373
463
|
export declare type UsePressCallback = ((event: PointerEvent, data: PressData) => void) | ((event: PointerEvent, data: PressData) => boolean);
|
|
@@ -390,7 +480,7 @@ export declare type UseTapOptions = Partial<TapOptions>;
|
|
|
390
480
|
|
|
391
481
|
export declare const useWheel: (wheelCallback: UseWheelCallback, options?: UseWheelOptions) => void;
|
|
392
482
|
|
|
393
|
-
export declare type UseWheelCallback = ((event: WheelEvent,
|
|
483
|
+
export declare type UseWheelCallback = ((event: WheelEvent, data: WheelData, ...properties: unknown[]) => void) | ((event: WheelEvent, data: WheelData, ...properties: unknown[]) => boolean);
|
|
394
484
|
|
|
395
485
|
export declare type UseWheelOptions = Partial<WheelOptions>;
|
|
396
486
|
|
|
@@ -407,7 +497,7 @@ export declare interface WheelOptions {
|
|
|
407
497
|
eventOnce: boolean;
|
|
408
498
|
eventStopImmediatePropagation: boolean;
|
|
409
499
|
container: {
|
|
410
|
-
current:
|
|
500
|
+
current: EventTarget | null;
|
|
411
501
|
};
|
|
412
502
|
raf: boolean;
|
|
413
503
|
}
|
package/dist/index.js
CHANGED
|
@@ -1,38 +1,48 @@
|
|
|
1
|
-
import { default as
|
|
1
|
+
import { default as r } from "./use-double-tap/use-double-tap.js";
|
|
2
2
|
import { DoubleTapEventPointerTypes as s } from "./use-double-tap/use-double-tap.types.js";
|
|
3
3
|
import { default as f } from "./use-drag/use-drag.js";
|
|
4
|
-
import { DragEventPointerTypes as
|
|
5
|
-
import { default as
|
|
4
|
+
import { DragEventPointerTypes as a } from "./use-drag/use-drag.types.js";
|
|
5
|
+
import { default as m } from "./use-gesture/use-gesture.js";
|
|
6
6
|
import { GestureTypes as i } from "./use-gesture/use-gesture.types.js";
|
|
7
|
-
import { default as
|
|
8
|
-
import { KeyEventTypes as
|
|
9
|
-
import { default as v } from "./use-
|
|
10
|
-
import {
|
|
11
|
-
import { default as
|
|
12
|
-
import {
|
|
13
|
-
import { default as g } from "./use-
|
|
14
|
-
import {
|
|
15
|
-
import { default as
|
|
16
|
-
import {
|
|
17
|
-
import { default as
|
|
7
|
+
import { default as l } from "./use-key/use-key.js";
|
|
8
|
+
import { KeyEventTypes as y } from "./use-key/use-key.types.js";
|
|
9
|
+
import { default as v } from "./use-mouse/use-mouse.js";
|
|
10
|
+
import { MouseButtons as D, MouseEventTypes as c } from "./use-mouse/use-mouse.types.js";
|
|
11
|
+
import { default as w } from "./use-pinch/use-pinch.js";
|
|
12
|
+
import { PinchEventPointerTypes as S } from "./use-pinch/use-pinch.types.js";
|
|
13
|
+
import { default as g } from "./use-pointer/use-pointer.js";
|
|
14
|
+
import { PointerEventPointerTypes as K, PointerEventTypes as B } from "./use-pointer/use-pointer.types.js";
|
|
15
|
+
import { default as j } from "./use-press/use-press.js";
|
|
16
|
+
import { PressEventPointerTypes as q } from "./use-press/use-press.types.js";
|
|
17
|
+
import { default as A } from "./use-swipe/use-swipe.js";
|
|
18
|
+
import { SwipeDirections as F, SwipeEventPointerTypes as H } from "./use-swipe/use-swipe.types.js";
|
|
19
|
+
import { default as J } from "./use-tap/use-tap.js";
|
|
20
|
+
import { TapEventPointerTypes as N } from "./use-tap/use-tap.types.js";
|
|
21
|
+
import { default as Q } from "./use-wheel/use-wheel.js";
|
|
18
22
|
export {
|
|
19
23
|
s as DoubleTapEventPointerTypes,
|
|
20
|
-
|
|
24
|
+
a as DragEventPointerTypes,
|
|
21
25
|
i as GestureTypes,
|
|
22
|
-
|
|
23
|
-
D as
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
y as KeyEventTypes,
|
|
27
|
+
D as MouseButtons,
|
|
28
|
+
c as MouseEventTypes,
|
|
29
|
+
S as PinchEventPointerTypes,
|
|
30
|
+
K as PointerEventPointerTypes,
|
|
31
|
+
B as PointerEventTypes,
|
|
32
|
+
q as PressEventPointerTypes,
|
|
33
|
+
F as SwipeDirections,
|
|
34
|
+
H as SwipeEventPointerTypes,
|
|
35
|
+
N as TapEventPointerTypes,
|
|
36
|
+
r as useDoubleTap,
|
|
29
37
|
f as useDrag,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
v as
|
|
33
|
-
|
|
34
|
-
g as
|
|
35
|
-
|
|
36
|
-
|
|
38
|
+
m as useGesture,
|
|
39
|
+
l as useKey,
|
|
40
|
+
v as useMouse,
|
|
41
|
+
w as usePinch,
|
|
42
|
+
g as usePointer,
|
|
43
|
+
j as usePress,
|
|
44
|
+
A as useSwipe,
|
|
45
|
+
J as useTap,
|
|
46
|
+
Q as useWheel
|
|
37
47
|
};
|
|
38
48
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"event-guards.js","sources":["../../src/use-double-tap/event-guards.ts"],"sourcesContent":["import { DoubleTapEventPointerType } from \"./use-double-tap.types\";\n\n/**\n * Determines whether a pointer event should be handled based on event options.\n *\n * @param {PointerEvent} event - The pointer event to evaluate\n * @param {Object} options - Event handling options\n * @param {DoubleTapEventPointerType[]} options.eventPointerTypes - Allowed pointer types for the event\n * @returns {boolean} True if the event should be handled, false otherwise\n *\n * @example\n * const shouldHandle = shouldHandleEvent(event, {\n * eventPointerTypes: [DoubleTapEventPointerTypes.Touch]\n * });\n */\nexport const shouldHandleEvent = (\n event: PointerEvent,\n options: {\n eventPointerTypes: DoubleTapEventPointerType[];\n },\n) => {\n if (!event.isPrimary) {\n return false;\n }\n if (\n !options.eventPointerTypes.includes(\n event.pointerType as DoubleTapEventPointerType,\n )\n ) {\n return false;\n }\n\n return true;\n};\n"],"names":["shouldHandleEvent","event","options"],"mappings":"AAeO,MAAMA,IAAoB,CAC/BC,GACAC,MAII,GAACD,EAAM,aAIT,CAACC,EAAQ,kBAAkB;AAAA,EACzBD,EAAM;AAAA;"}
|
|
@@ -1,27 +1,33 @@
|
|
|
1
|
-
import { useRef as c, useCallback as
|
|
1
|
+
import { useRef as c, useCallback as x, useEffect as E } from "react";
|
|
2
|
+
import { DoubleTapEventPointerTypes as l } from "./use-double-tap.types.js";
|
|
2
3
|
import { invokeDoubleTapAction as X } from "./invoke-double-tap-action.js";
|
|
3
|
-
|
|
4
|
-
|
|
4
|
+
import { shouldHandleEvent as Y } from "./event-guards.js";
|
|
5
|
+
const C = {
|
|
6
|
+
eventPointerTypes: [
|
|
7
|
+
l.Touch,
|
|
8
|
+
l.Mouse,
|
|
9
|
+
l.Pen
|
|
10
|
+
],
|
|
5
11
|
eventCapture: !1,
|
|
6
12
|
eventOnce: !1,
|
|
7
13
|
eventStopImmediatePropagation: !1,
|
|
8
14
|
delay: 300,
|
|
9
15
|
threshold: 8,
|
|
10
16
|
container: { current: null }
|
|
11
|
-
},
|
|
17
|
+
}, w = (a, T = {}) => {
|
|
12
18
|
const {
|
|
13
|
-
eventPointerTypes:
|
|
19
|
+
eventPointerTypes: i,
|
|
14
20
|
eventCapture: u,
|
|
15
|
-
eventOnce:
|
|
16
|
-
eventStopImmediatePropagation:
|
|
17
|
-
delay:
|
|
18
|
-
threshold:
|
|
21
|
+
eventOnce: s,
|
|
22
|
+
eventStopImmediatePropagation: p,
|
|
23
|
+
delay: f,
|
|
24
|
+
threshold: m,
|
|
19
25
|
container: d
|
|
20
|
-
} = { ...
|
|
26
|
+
} = { ...C, ...T }, h = c(null), r = c(null), t = c(null), y = x(
|
|
21
27
|
(e) => {
|
|
22
|
-
if (!e
|
|
23
|
-
|
|
24
|
-
))
|
|
28
|
+
if (!Y(e, {
|
|
29
|
+
eventPointerTypes: i
|
|
30
|
+
}))
|
|
25
31
|
return;
|
|
26
32
|
const n = Date.now();
|
|
27
33
|
if (!t.current) {
|
|
@@ -32,15 +38,15 @@ const Y = {
|
|
|
32
38
|
};
|
|
33
39
|
return;
|
|
34
40
|
}
|
|
35
|
-
const o = n - t.current.time, P = e.clientX - t.current.x,
|
|
36
|
-
if (o <=
|
|
37
|
-
const
|
|
41
|
+
const o = n - t.current.time, P = e.clientX - t.current.x, b = e.clientY - t.current.y;
|
|
42
|
+
if (o <= f && Math.hypot(P, b) <= m) {
|
|
43
|
+
const g = {
|
|
38
44
|
x: e.clientX,
|
|
39
45
|
y: e.clientY
|
|
40
46
|
};
|
|
41
|
-
X(e,
|
|
42
|
-
stopImmediate:
|
|
43
|
-
once:
|
|
47
|
+
X(e, g, a, {
|
|
48
|
+
stopImmediate: p,
|
|
49
|
+
once: s,
|
|
44
50
|
onOnce: () => r.current?.abort()
|
|
45
51
|
}), t.current = null;
|
|
46
52
|
return;
|
|
@@ -53,17 +59,17 @@ const Y = {
|
|
|
53
59
|
},
|
|
54
60
|
[
|
|
55
61
|
i,
|
|
62
|
+
s,
|
|
56
63
|
p,
|
|
57
64
|
f,
|
|
58
|
-
|
|
59
|
-
a
|
|
60
|
-
s
|
|
65
|
+
m,
|
|
66
|
+
a
|
|
61
67
|
]
|
|
62
68
|
);
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
E(() => {
|
|
70
|
+
h.current = d?.current ?? globalThis, r.current = new AbortController();
|
|
65
71
|
const { signal: e } = r.current, n = (o) => o instanceof PointerEvent && y(o);
|
|
66
|
-
return
|
|
72
|
+
return h.current.addEventListener("pointerup", n, {
|
|
67
73
|
capture: u,
|
|
68
74
|
signal: e
|
|
69
75
|
}), () => {
|
|
@@ -72,6 +78,6 @@ const Y = {
|
|
|
72
78
|
}, [d, u, y]);
|
|
73
79
|
};
|
|
74
80
|
export {
|
|
75
|
-
|
|
81
|
+
w as default
|
|
76
82
|
};
|
|
77
83
|
//# sourceMappingURL=use-double-tap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-double-tap.js","sources":["../../src/use-double-tap/use-double-tap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport {\n
|
|
1
|
+
{"version":3,"file":"use-double-tap.js","sources":["../../src/use-double-tap/use-double-tap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport {\n DoubleTapData,\n DoubleTapOptions,\n DoubleTapEventPointerTypes,\n UseDoubleTapCallback,\n UseDoubleTapOptions,\n} from \"./use-double-tap.types\";\nimport { invokeDoubleTapAction } from \"./invoke-double-tap-action\";\nimport { shouldHandleEvent } from \"./event-guards\";\n\nconst defaultOptions: DoubleTapOptions = {\n eventPointerTypes: [\n DoubleTapEventPointerTypes.Touch,\n DoubleTapEventPointerTypes.Mouse,\n DoubleTapEventPointerTypes.Pen,\n ],\n eventCapture: false,\n eventOnce: false,\n eventStopImmediatePropagation: false,\n delay: 300,\n threshold: 8,\n container: { current: null },\n};\n\nconst useDoubleTap = (\n doubleTapCallback: UseDoubleTapCallback,\n options: UseDoubleTapOptions = {},\n) => {\n const {\n eventPointerTypes,\n eventCapture,\n eventOnce,\n eventStopImmediatePropagation,\n delay,\n threshold,\n container,\n } = { ...defaultOptions, ...options };\n\n const targetReference = useRef<EventTarget | null>(null);\n const abortControllerReference = useRef<AbortController | null>(null);\n\n const lastTapReference = useRef<{\n time: number;\n x: number;\n y: number;\n } | null>(null);\n\n const handlePointerUp = useCallback(\n (event: PointerEvent) => {\n if (\n !shouldHandleEvent(event, {\n eventPointerTypes,\n })\n ) {\n return;\n }\n\n const now = Date.now();\n\n if (!lastTapReference.current) {\n lastTapReference.current = {\n time: now,\n x: event.clientX,\n y: event.clientY,\n };\n return;\n }\n\n const deltaTime = now - lastTapReference.current.time;\n const deltaX = event.clientX - lastTapReference.current.x;\n const deltaY = event.clientY - lastTapReference.current.y;\n\n if (deltaTime <= delay && Math.hypot(deltaX, deltaY) <= threshold) {\n const data: DoubleTapData = {\n x: event.clientX,\n y: event.clientY,\n };\n\n invokeDoubleTapAction(event, data, doubleTapCallback, {\n stopImmediate: eventStopImmediatePropagation,\n once: eventOnce,\n onOnce: () => abortControllerReference.current?.abort(),\n });\n\n lastTapReference.current = null;\n return;\n }\n\n lastTapReference.current = {\n time: now,\n x: event.clientX,\n y: event.clientY,\n };\n },\n [\n eventPointerTypes,\n eventOnce,\n eventStopImmediatePropagation,\n delay,\n threshold,\n doubleTapCallback,\n ],\n );\n\n useEffect(() => {\n targetReference.current = container?.current ?? globalThis;\n abortControllerReference.current = new AbortController();\n const { signal } = abortControllerReference.current;\n\n const pointerUpListener = (event: Event) =>\n event instanceof PointerEvent && handlePointerUp(event);\n\n targetReference.current.addEventListener(\"pointerup\", pointerUpListener, {\n capture: eventCapture,\n signal,\n });\n\n return () => {\n abortControllerReference.current?.abort();\n lastTapReference.current = null;\n };\n }, [container, eventCapture, handlePointerUp]);\n};\n\nexport default useDoubleTap;\n"],"names":["defaultOptions","DoubleTapEventPointerTypes","useDoubleTap","doubleTapCallback","options","eventPointerTypes","eventCapture","eventOnce","eventStopImmediatePropagation","delay","threshold","container","targetReference","useRef","abortControllerReference","lastTapReference","handlePointerUp","useCallback","event","shouldHandleEvent","now","deltaTime","deltaX","deltaY","data","invokeDoubleTapAction","useEffect","signal","pointerUpListener"],"mappings":";;;;AAWA,MAAMA,IAAmC;AAAA,EACvC,mBAAmB;AAAA,IACjBC,EAA2B;AAAA,IAC3BA,EAA2B;AAAA,IAC3BA,EAA2B;AAAA,EAAA;AAAA,EAE7B,cAAc;AAAA,EACd,WAAW;AAAA,EACX,+BAA+B;AAAA,EAC/B,OAAO;AAAA,EACP,WAAW;AAAA,EACX,WAAW,EAAE,SAAS,KAAA;AACxB,GAEMC,IAAe,CACnBC,GACAC,IAA+B,OAC5B;AACH,QAAM;AAAA,IACJ,mBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,+BAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACE,EAAE,GAAGX,GAAgB,GAAGI,EAAA,GAEtBQ,IAAkBC,EAA2B,IAAI,GACjDC,IAA2BD,EAA+B,IAAI,GAE9DE,IAAmBF,EAIf,IAAI,GAERG,IAAkBC;AAAA,IACtB,CAACC,MAAwB;AACvB,UACE,CAACC,EAAkBD,GAAO;AAAA,QACxB,mBAAAb;AAAA,MAAA,CACD;AAED;AAGF,YAAMe,IAAM,KAAK,IAAA;AAEjB,UAAI,CAACL,EAAiB,SAAS;AAC7B,QAAAA,EAAiB,UAAU;AAAA,UACzB,MAAMK;AAAA,UACN,GAAGF,EAAM;AAAA,UACT,GAAGA,EAAM;AAAA,QAAA;AAEX;AAAA,MACF;AAEA,YAAMG,IAAYD,IAAML,EAAiB,QAAQ,MAC3CO,IAASJ,EAAM,UAAUH,EAAiB,QAAQ,GAClDQ,IAASL,EAAM,UAAUH,EAAiB,QAAQ;AAExD,UAAIM,KAAaZ,KAAS,KAAK,MAAMa,GAAQC,CAAM,KAAKb,GAAW;AACjE,cAAMc,IAAsB;AAAA,UAC1B,GAAGN,EAAM;AAAA,UACT,GAAGA,EAAM;AAAA,QAAA;AAGX,QAAAO,EAAsBP,GAAOM,GAAMrB,GAAmB;AAAA,UACpD,eAAeK;AAAA,UACf,MAAMD;AAAA,UACN,QAAQ,MAAMO,EAAyB,SAAS,MAAA;AAAA,QAAM,CACvD,GAEDC,EAAiB,UAAU;AAC3B;AAAA,MACF;AAEA,MAAAA,EAAiB,UAAU;AAAA,QACzB,MAAMK;AAAA,QACN,GAAGF,EAAM;AAAA,QACT,GAAGA,EAAM;AAAA,MAAA;AAAA,IAEb;AAAA,IACA;AAAA,MACEb;AAAA,MACAE;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAP;AAAA,IAAA;AAAA,EACF;AAGF,EAAAuB,EAAU,MAAM;AACd,IAAAd,EAAgB,UAAUD,GAAW,WAAW,YAChDG,EAAyB,UAAU,IAAI,gBAAA;AACvC,UAAM,EAAE,QAAAa,MAAWb,EAAyB,SAEtCc,IAAoB,CAACV,MACzBA,aAAiB,gBAAgBF,EAAgBE,CAAK;AAExD,WAAAN,EAAgB,QAAQ,iBAAiB,aAAagB,GAAmB;AAAA,MACvE,SAAStB;AAAA,MACT,QAAAqB;AAAA,IAAA,CACD,GAEM,MAAM;AACX,MAAAb,EAAyB,SAAS,MAAA,GAClCC,EAAiB,UAAU;AAAA,IAC7B;AAAA,EACF,GAAG,CAACJ,GAAWL,GAAcU,CAAe,CAAC;AAC/C;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"event-guards.js","sources":["../../src/use-drag/event-guards.ts"],"sourcesContent":["import { DragEventPointerType } from \"./use-drag.types\";\n\n/**\n * Determines whether a pointer event should be handled based on event options.\n *\n * @param {PointerEvent} event - The pointer event to evaluate\n * @param {Object} options - Event handling options\n * @param {DragEventPointerType[]} options.eventPointerTypes - Allowed pointer types for the event\n * @returns {boolean} True if the event should be handled, false otherwise\n *\n * @example\n * const shouldHandle = shouldHandleEvent(event, {\n * eventPointerTypes: [DragEventPointerTypes.Touch]\n * });\n */\nexport const shouldHandleEvent = (\n event: PointerEvent,\n options: {\n eventPointerTypes: DragEventPointerType[];\n },\n) => {\n if (!event.isPrimary) {\n return false;\n }\n if (\n !options.eventPointerTypes.includes(\n event.pointerType as DragEventPointerType,\n )\n ) {\n return false;\n }\n\n return true;\n};\n"],"names":["shouldHandleEvent","event","options"],"mappings":"AAeO,MAAMA,IAAoB,CAC/BC,GACAC,MAII,GAACD,EAAM,aAIT,CAACC,EAAQ,kBAAkB;AAAA,EACzBD,EAAM;AAAA;"}
|