@motion-core/motion-gpu 0.6.0 → 0.7.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 +35 -2
- package/dist/core/pointer.d.ts +96 -0
- package/dist/core/pointer.d.ts.map +1 -0
- package/dist/core/pointer.js +71 -0
- package/dist/core/pointer.js.map +1 -0
- package/dist/react/advanced.js +2 -1
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +2 -1
- package/dist/react/use-pointer.d.ts +94 -0
- package/dist/react/use-pointer.d.ts.map +1 -0
- package/dist/react/use-pointer.js +285 -0
- package/dist/react/use-pointer.js.map +1 -0
- package/dist/svelte/advanced.js +2 -1
- package/dist/svelte/index.d.ts +2 -0
- package/dist/svelte/index.d.ts.map +1 -1
- package/dist/svelte/index.js +2 -1
- package/dist/svelte/use-pointer.d.ts +94 -0
- package/dist/svelte/use-pointer.d.ts.map +1 -0
- package/dist/svelte/use-pointer.js +292 -0
- package/dist/svelte/use-pointer.js.map +1 -0
- package/package.json +1 -1
- package/src/lib/core/pointer.ts +177 -0
- package/src/lib/react/index.ts +10 -0
- package/src/lib/react/use-pointer.ts +515 -0
- package/src/lib/svelte/index.ts +10 -0
- package/src/lib/svelte/use-pointer.ts +507 -0
package/README.md
CHANGED
|
@@ -65,7 +65,7 @@ Motion GPU follows a simple three-step flow:
|
|
|
65
65
|
|
|
66
66
|
1. Define an immutable material with `defineMaterial(...)`.
|
|
67
67
|
2. Render it with `<FragCanvas />`.
|
|
68
|
-
3. Drive runtime updates with `useFrame(...)`, `useMotionGPU()`, and `useTexture(...)`.
|
|
68
|
+
3. Drive runtime updates with `useFrame(...)`, `useMotionGPU()`, `usePointer()`, and `useTexture(...)`.
|
|
69
69
|
|
|
70
70
|
---
|
|
71
71
|
|
|
@@ -100,6 +100,7 @@ Motion GPU follows a simple three-step flow:
|
|
|
100
100
|
- `defineMaterial`
|
|
101
101
|
- `useMotionGPU`
|
|
102
102
|
- `useFrame`
|
|
103
|
+
- `usePointer`
|
|
103
104
|
- `useTexture`
|
|
104
105
|
- `ShaderPass`
|
|
105
106
|
- `BlitPass`
|
|
@@ -134,6 +135,7 @@ Also exports runtime/core types:
|
|
|
134
135
|
- `defineMaterial`
|
|
135
136
|
- `useMotionGPU`
|
|
136
137
|
- `useFrame`
|
|
138
|
+
- `usePointer`
|
|
137
139
|
- `useTexture`
|
|
138
140
|
- `ShaderPass`
|
|
139
141
|
- `BlitPass`
|
|
@@ -308,6 +310,37 @@ export function Runtime() {
|
|
|
308
310
|
|
|
309
311
|
---
|
|
310
312
|
|
|
313
|
+
## 2b. Add pointer-driven uniforms via `usePointer`
|
|
314
|
+
|
|
315
|
+
```svelte
|
|
316
|
+
<!-- Runtime.svelte -->
|
|
317
|
+
<script lang="ts">
|
|
318
|
+
import { useFrame, usePointer } from '@motion-core/motion-gpu/svelte';
|
|
319
|
+
|
|
320
|
+
const pointer = usePointer();
|
|
321
|
+
|
|
322
|
+
useFrame((state) => {
|
|
323
|
+
state.setUniform('uMouse', pointer.state.current.uv);
|
|
324
|
+
});
|
|
325
|
+
</script>
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
```tsx
|
|
329
|
+
import { useFrame, usePointer } from '@motion-core/motion-gpu/react';
|
|
330
|
+
|
|
331
|
+
export function Runtime() {
|
|
332
|
+
const pointer = usePointer();
|
|
333
|
+
|
|
334
|
+
useFrame((state) => {
|
|
335
|
+
state.setUniform('uMouse', pointer.state.current.uv);
|
|
336
|
+
});
|
|
337
|
+
|
|
338
|
+
return null;
|
|
339
|
+
}
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
---
|
|
343
|
+
|
|
311
344
|
## 3. Add a GPU compute pass
|
|
312
345
|
|
|
313
346
|
```svelte
|
|
@@ -442,7 +475,7 @@ fn frag(uv: vec2f) -> vec4f
|
|
|
442
475
|
fn shade(inputColor: vec4f, uv: vec2f) -> vec4f
|
|
443
476
|
```
|
|
444
477
|
|
|
445
|
-
3. `useFrame()` and `
|
|
478
|
+
3. `useFrame()`, `useMotionGPU()`, and `usePointer()` must be called inside `<FragCanvas>` subtree.
|
|
446
479
|
|
|
447
480
|
4. You can only set uniforms/textures that were declared in `defineMaterial(...)`.
|
|
448
481
|
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import type { RenderMode } from './types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Pointer kind normalized from DOM `PointerEvent.pointerType`.
|
|
4
|
+
*/
|
|
5
|
+
export type PointerKind = 'mouse' | 'pen' | 'touch';
|
|
6
|
+
/**
|
|
7
|
+
* 2D tuple used by pointer coordinate payloads.
|
|
8
|
+
*/
|
|
9
|
+
export type PointerVec2 = [number, number];
|
|
10
|
+
/**
|
|
11
|
+
* Normalized pointer coordinates exposed to runtime hooks.
|
|
12
|
+
*/
|
|
13
|
+
export interface PointerPoint {
|
|
14
|
+
/**
|
|
15
|
+
* CSS pixel coordinates relative to canvas top-left corner.
|
|
16
|
+
*/
|
|
17
|
+
px: PointerVec2;
|
|
18
|
+
/**
|
|
19
|
+
* UV coordinates in shader-friendly orientation (`y` grows upward).
|
|
20
|
+
*/
|
|
21
|
+
uv: PointerVec2;
|
|
22
|
+
/**
|
|
23
|
+
* Normalized device coordinates (`-1..1`, `y` grows upward).
|
|
24
|
+
*/
|
|
25
|
+
ndc: PointerVec2;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Mutable pointer state snapshot exposed by `usePointer`.
|
|
29
|
+
*/
|
|
30
|
+
export interface PointerState extends PointerPoint {
|
|
31
|
+
inside: boolean;
|
|
32
|
+
pressed: boolean;
|
|
33
|
+
dragging: boolean;
|
|
34
|
+
pointerType: PointerKind | null;
|
|
35
|
+
pointerId: number | null;
|
|
36
|
+
button: number | null;
|
|
37
|
+
buttons: number;
|
|
38
|
+
time: number;
|
|
39
|
+
downPx: PointerVec2 | null;
|
|
40
|
+
downUv: PointerVec2 | null;
|
|
41
|
+
deltaPx: PointerVec2;
|
|
42
|
+
deltaUv: PointerVec2;
|
|
43
|
+
velocityPx: PointerVec2;
|
|
44
|
+
velocityUv: PointerVec2;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Modifier key snapshot attached to pointer click events.
|
|
48
|
+
*/
|
|
49
|
+
export interface PointerModifiers {
|
|
50
|
+
alt: boolean;
|
|
51
|
+
ctrl: boolean;
|
|
52
|
+
shift: boolean;
|
|
53
|
+
meta: boolean;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Click/tap payload produced by `usePointer`.
|
|
57
|
+
*/
|
|
58
|
+
export interface PointerClick extends PointerPoint {
|
|
59
|
+
id: number;
|
|
60
|
+
time: number;
|
|
61
|
+
pointerType: PointerKind;
|
|
62
|
+
pointerId: number;
|
|
63
|
+
button: number;
|
|
64
|
+
modifiers: PointerModifiers;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Frame wake-up strategy for pointer-driven interactions.
|
|
68
|
+
*/
|
|
69
|
+
export type PointerFrameRequestMode = 'advance' | 'auto' | 'invalidate' | 'none';
|
|
70
|
+
/**
|
|
71
|
+
* Returns a monotonic timestamp in seconds.
|
|
72
|
+
*/
|
|
73
|
+
export declare function getPointerNowSeconds(): number;
|
|
74
|
+
/**
|
|
75
|
+
* Creates the initial pointer state snapshot.
|
|
76
|
+
*/
|
|
77
|
+
export declare function createInitialPointerState(): PointerState;
|
|
78
|
+
/**
|
|
79
|
+
* Normalized coordinate payload for a pointer position against a canvas rect.
|
|
80
|
+
*/
|
|
81
|
+
export interface PointerCoordinates extends PointerPoint {
|
|
82
|
+
inside: boolean;
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Converts client coordinates to canvas-relative pointer coordinates.
|
|
86
|
+
*/
|
|
87
|
+
export declare function getPointerCoordinates(clientX: number, clientY: number, rect: Pick<DOMRectReadOnly, 'height' | 'left' | 'top' | 'width'>): PointerCoordinates;
|
|
88
|
+
/**
|
|
89
|
+
* Resolves frame wake-up strategy for pointer-driven updates.
|
|
90
|
+
*/
|
|
91
|
+
export declare function resolvePointerFrameRequestMode(mode: PointerFrameRequestMode, renderMode: RenderMode): Exclude<PointerFrameRequestMode, 'auto'>;
|
|
92
|
+
/**
|
|
93
|
+
* Normalizes unknown pointer kind values to the public `PointerKind`.
|
|
94
|
+
*/
|
|
95
|
+
export declare function normalizePointerKind(pointerType: string): PointerKind;
|
|
96
|
+
//# sourceMappingURL=pointer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pointer.d.ts","sourceRoot":"","sources":["../../src/lib/core/pointer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC;AAEpD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,YAAY;IAC5B;;OAEG;IACH,EAAE,EAAE,WAAW,CAAC;IAChB;;OAEG;IACH,EAAE,EAAE,WAAW,CAAC;IAChB;;OAEG;IACH,GAAG,EAAE,WAAW,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,YAAY;IACjD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,WAAW,CAAC;IACxB,UAAU,EAAE,WAAW,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,YAAY;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,gBAAgB,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;AAEjF;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAM7C;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,YAAY,CAoBxD;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACvD,MAAM,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACpC,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC,GAC9D,kBAAkB,CAgBpB;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAC7C,IAAI,EAAE,uBAAuB,EAC7B,UAAU,EAAE,UAAU,GACpB,OAAO,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAc1C;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,GAAG,WAAW,CAMrE"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
//#region src/lib/core/pointer.ts
|
|
2
|
+
/**
|
|
3
|
+
* Returns a monotonic timestamp in seconds.
|
|
4
|
+
*/
|
|
5
|
+
function getPointerNowSeconds() {
|
|
6
|
+
if (typeof performance !== "undefined" && typeof performance.now === "function") return performance.now() / 1e3;
|
|
7
|
+
return Date.now() / 1e3;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Creates the initial pointer state snapshot.
|
|
11
|
+
*/
|
|
12
|
+
function createInitialPointerState() {
|
|
13
|
+
return {
|
|
14
|
+
px: [0, 0],
|
|
15
|
+
uv: [0, 0],
|
|
16
|
+
ndc: [-1, -1],
|
|
17
|
+
inside: false,
|
|
18
|
+
pressed: false,
|
|
19
|
+
dragging: false,
|
|
20
|
+
pointerType: null,
|
|
21
|
+
pointerId: null,
|
|
22
|
+
button: null,
|
|
23
|
+
buttons: 0,
|
|
24
|
+
time: getPointerNowSeconds(),
|
|
25
|
+
downPx: null,
|
|
26
|
+
downUv: null,
|
|
27
|
+
deltaPx: [0, 0],
|
|
28
|
+
deltaUv: [0, 0],
|
|
29
|
+
velocityPx: [0, 0],
|
|
30
|
+
velocityUv: [0, 0]
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Converts client coordinates to canvas-relative pointer coordinates.
|
|
35
|
+
*/
|
|
36
|
+
function getPointerCoordinates(clientX, clientY, rect) {
|
|
37
|
+
const width = Math.max(rect.width, 1);
|
|
38
|
+
const height = Math.max(rect.height, 1);
|
|
39
|
+
const nx = (clientX - rect.left) / width;
|
|
40
|
+
const ny = (clientY - rect.top) / height;
|
|
41
|
+
const pxX = clientX - rect.left;
|
|
42
|
+
const pxY = clientY - rect.top;
|
|
43
|
+
const uvX = nx;
|
|
44
|
+
const uvY = 1 - ny;
|
|
45
|
+
return {
|
|
46
|
+
px: [pxX, pxY],
|
|
47
|
+
uv: [uvX, uvY],
|
|
48
|
+
ndc: [nx * 2 - 1, uvY * 2 - 1],
|
|
49
|
+
inside: nx >= 0 && nx <= 1 && ny >= 0 && ny <= 1
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Resolves frame wake-up strategy for pointer-driven updates.
|
|
54
|
+
*/
|
|
55
|
+
function resolvePointerFrameRequestMode(mode, renderMode) {
|
|
56
|
+
if (mode !== "auto") return mode;
|
|
57
|
+
if (renderMode === "manual") return "advance";
|
|
58
|
+
if (renderMode === "on-demand") return "invalidate";
|
|
59
|
+
return "none";
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Normalizes unknown pointer kind values to the public `PointerKind`.
|
|
63
|
+
*/
|
|
64
|
+
function normalizePointerKind(pointerType) {
|
|
65
|
+
if (pointerType === "mouse" || pointerType === "pen" || pointerType === "touch") return pointerType;
|
|
66
|
+
return "mouse";
|
|
67
|
+
}
|
|
68
|
+
//#endregion
|
|
69
|
+
export { createInitialPointerState, getPointerCoordinates, getPointerNowSeconds, normalizePointerKind, resolvePointerFrameRequestMode };
|
|
70
|
+
|
|
71
|
+
//# sourceMappingURL=pointer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pointer.js","names":[],"sources":["../../src/lib/core/pointer.ts"],"sourcesContent":["import type { RenderMode } from './types.js';\n\n/**\n * Pointer kind normalized from DOM `PointerEvent.pointerType`.\n */\nexport type PointerKind = 'mouse' | 'pen' | 'touch';\n\n/**\n * 2D tuple used by pointer coordinate payloads.\n */\nexport type PointerVec2 = [number, number];\n\n/**\n * Normalized pointer coordinates exposed to runtime hooks.\n */\nexport interface PointerPoint {\n\t/**\n\t * CSS pixel coordinates relative to canvas top-left corner.\n\t */\n\tpx: PointerVec2;\n\t/**\n\t * UV coordinates in shader-friendly orientation (`y` grows upward).\n\t */\n\tuv: PointerVec2;\n\t/**\n\t * Normalized device coordinates (`-1..1`, `y` grows upward).\n\t */\n\tndc: PointerVec2;\n}\n\n/**\n * Mutable pointer state snapshot exposed by `usePointer`.\n */\nexport interface PointerState extends PointerPoint {\n\tinside: boolean;\n\tpressed: boolean;\n\tdragging: boolean;\n\tpointerType: PointerKind | null;\n\tpointerId: number | null;\n\tbutton: number | null;\n\tbuttons: number;\n\ttime: number;\n\tdownPx: PointerVec2 | null;\n\tdownUv: PointerVec2 | null;\n\tdeltaPx: PointerVec2;\n\tdeltaUv: PointerVec2;\n\tvelocityPx: PointerVec2;\n\tvelocityUv: PointerVec2;\n}\n\n/**\n * Modifier key snapshot attached to pointer click events.\n */\nexport interface PointerModifiers {\n\talt: boolean;\n\tctrl: boolean;\n\tshift: boolean;\n\tmeta: boolean;\n}\n\n/**\n * Click/tap payload produced by `usePointer`.\n */\nexport interface PointerClick extends PointerPoint {\n\tid: number;\n\ttime: number;\n\tpointerType: PointerKind;\n\tpointerId: number;\n\tbutton: number;\n\tmodifiers: PointerModifiers;\n}\n\n/**\n * Frame wake-up strategy for pointer-driven interactions.\n */\nexport type PointerFrameRequestMode = 'advance' | 'auto' | 'invalidate' | 'none';\n\n/**\n * Returns a monotonic timestamp in seconds.\n */\nexport function getPointerNowSeconds(): number {\n\tif (typeof performance !== 'undefined' && typeof performance.now === 'function') {\n\t\treturn performance.now() / 1000;\n\t}\n\n\treturn Date.now() / 1000;\n}\n\n/**\n * Creates the initial pointer state snapshot.\n */\nexport function createInitialPointerState(): PointerState {\n\treturn {\n\t\tpx: [0, 0],\n\t\tuv: [0, 0],\n\t\tndc: [-1, -1],\n\t\tinside: false,\n\t\tpressed: false,\n\t\tdragging: false,\n\t\tpointerType: null,\n\t\tpointerId: null,\n\t\tbutton: null,\n\t\tbuttons: 0,\n\t\ttime: getPointerNowSeconds(),\n\t\tdownPx: null,\n\t\tdownUv: null,\n\t\tdeltaPx: [0, 0],\n\t\tdeltaUv: [0, 0],\n\t\tvelocityPx: [0, 0],\n\t\tvelocityUv: [0, 0]\n\t};\n}\n\n/**\n * Normalized coordinate payload for a pointer position against a canvas rect.\n */\nexport interface PointerCoordinates extends PointerPoint {\n\tinside: boolean;\n}\n\n/**\n * Converts client coordinates to canvas-relative pointer coordinates.\n */\nexport function getPointerCoordinates(\n\tclientX: number,\n\tclientY: number,\n\trect: Pick<DOMRectReadOnly, 'height' | 'left' | 'top' | 'width'>\n): PointerCoordinates {\n\tconst width = Math.max(rect.width, 1);\n\tconst height = Math.max(rect.height, 1);\n\tconst nx = (clientX - rect.left) / width;\n\tconst ny = (clientY - rect.top) / height;\n\tconst pxX = clientX - rect.left;\n\tconst pxY = clientY - rect.top;\n\tconst uvX = nx;\n\tconst uvY = 1 - ny;\n\n\treturn {\n\t\tpx: [pxX, pxY],\n\t\tuv: [uvX, uvY],\n\t\tndc: [nx * 2 - 1, uvY * 2 - 1],\n\t\tinside: nx >= 0 && nx <= 1 && ny >= 0 && ny <= 1\n\t};\n}\n\n/**\n * Resolves frame wake-up strategy for pointer-driven updates.\n */\nexport function resolvePointerFrameRequestMode(\n\tmode: PointerFrameRequestMode,\n\trenderMode: RenderMode\n): Exclude<PointerFrameRequestMode, 'auto'> {\n\tif (mode !== 'auto') {\n\t\treturn mode;\n\t}\n\n\tif (renderMode === 'manual') {\n\t\treturn 'advance';\n\t}\n\n\tif (renderMode === 'on-demand') {\n\t\treturn 'invalidate';\n\t}\n\n\treturn 'none';\n}\n\n/**\n * Normalizes unknown pointer kind values to the public `PointerKind`.\n */\nexport function normalizePointerKind(pointerType: string): PointerKind {\n\tif (pointerType === 'mouse' || pointerType === 'pen' || pointerType === 'touch') {\n\t\treturn pointerType;\n\t}\n\n\treturn 'mouse';\n}\n"],"mappings":";;;;AAgFA,SAAgB,uBAA+B;AAC9C,KAAI,OAAO,gBAAgB,eAAe,OAAO,YAAY,QAAQ,WACpE,QAAO,YAAY,KAAK,GAAG;AAG5B,QAAO,KAAK,KAAK,GAAG;;;;;AAMrB,SAAgB,4BAA0C;AACzD,QAAO;EACN,IAAI,CAAC,GAAG,EAAE;EACV,IAAI,CAAC,GAAG,EAAE;EACV,KAAK,CAAC,IAAI,GAAG;EACb,QAAQ;EACR,SAAS;EACT,UAAU;EACV,aAAa;EACb,WAAW;EACX,QAAQ;EACR,SAAS;EACT,MAAM,sBAAsB;EAC5B,QAAQ;EACR,QAAQ;EACR,SAAS,CAAC,GAAG,EAAE;EACf,SAAS,CAAC,GAAG,EAAE;EACf,YAAY,CAAC,GAAG,EAAE;EAClB,YAAY,CAAC,GAAG,EAAE;EAClB;;;;;AAaF,SAAgB,sBACf,SACA,SACA,MACqB;CACrB,MAAM,QAAQ,KAAK,IAAI,KAAK,OAAO,EAAE;CACrC,MAAM,SAAS,KAAK,IAAI,KAAK,QAAQ,EAAE;CACvC,MAAM,MAAM,UAAU,KAAK,QAAQ;CACnC,MAAM,MAAM,UAAU,KAAK,OAAO;CAClC,MAAM,MAAM,UAAU,KAAK;CAC3B,MAAM,MAAM,UAAU,KAAK;CAC3B,MAAM,MAAM;CACZ,MAAM,MAAM,IAAI;AAEhB,QAAO;EACN,IAAI,CAAC,KAAK,IAAI;EACd,IAAI,CAAC,KAAK,IAAI;EACd,KAAK,CAAC,KAAK,IAAI,GAAG,MAAM,IAAI,EAAE;EAC9B,QAAQ,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM;EAC/C;;;;;AAMF,SAAgB,+BACf,MACA,YAC2C;AAC3C,KAAI,SAAS,OACZ,QAAO;AAGR,KAAI,eAAe,SAClB,QAAO;AAGR,KAAI,eAAe,YAClB,QAAO;AAGR,QAAO;;;;;AAMR,SAAgB,qBAAqB,aAAkC;AACtE,KAAI,gBAAgB,WAAW,gBAAgB,SAAS,gBAAgB,QACvE,QAAO;AAGR,QAAO"}
|
package/dist/react/advanced.js
CHANGED
|
@@ -8,7 +8,8 @@ import { applySchedulerPreset, captureSchedulerDebugSnapshot } from "../core/sch
|
|
|
8
8
|
import { useMotionGPU } from "./motiongpu-context.js";
|
|
9
9
|
import { useFrame } from "./frame-context.js";
|
|
10
10
|
import { FragCanvas } from "./FragCanvas.js";
|
|
11
|
+
import { usePointer } from "./use-pointer.js";
|
|
11
12
|
import { useTexture } from "./use-texture.js";
|
|
12
13
|
import "./index.js";
|
|
13
14
|
import { setMotionGPUUserContext, useMotionGPUUserContext, useSetMotionGPUUserContext } from "./use-motiongpu-user-context.js";
|
|
14
|
-
export { BlitPass, ComputePass, CopyPass, FragCanvas, PingPongComputePass, ShaderPass, applySchedulerPreset, captureSchedulerDebugSnapshot, defineMaterial, setMotionGPUUserContext, useFrame, useMotionGPU, useMotionGPUUserContext, useSetMotionGPUUserContext, useTexture };
|
|
15
|
+
export { BlitPass, ComputePass, CopyPass, FragCanvas, PingPongComputePass, ShaderPass, applySchedulerPreset, captureSchedulerDebugSnapshot, defineMaterial, setMotionGPUUserContext, useFrame, useMotionGPU, useMotionGPUUserContext, usePointer, useSetMotionGPUUserContext, useTexture };
|
package/dist/react/index.d.ts
CHANGED
|
@@ -6,12 +6,14 @@ export { defineMaterial } from '../core/material.js';
|
|
|
6
6
|
export { BlitPass, CopyPass, ShaderPass, ComputePass, PingPongComputePass } from '../passes/index.js';
|
|
7
7
|
export { useMotionGPU } from './motiongpu-context.js';
|
|
8
8
|
export { useFrame } from './frame-context.js';
|
|
9
|
+
export { usePointer } from './use-pointer.js';
|
|
9
10
|
export { useTexture } from './use-texture.js';
|
|
10
11
|
export type { FrameInvalidationToken, FrameState, OutputColorSpace, AnyPass, ComputePassLike, RenderPass, RenderPassContext, RenderPassFlags, RenderPassInputSlot, RenderPassOutputSlot, RenderMode, RenderTarget, RenderTargetDefinition, RenderTargetDefinitionMap, TextureData, TextureDefinition, TextureDefinitionMap, TextureUpdateMode, TextureMap, TextureSource, TextureValue, TypedUniform, UniformMat4Value, UniformMap, UniformType, UniformValue } from '../core/types.js';
|
|
11
12
|
export type { LoadedTexture, TextureDecodeOptions, TextureLoadOptions } from '../core/texture-loader.js';
|
|
12
13
|
export type { FragMaterial, FragMaterialInput, MaterialIncludes, MaterialDefineValue, MaterialDefines, TypedMaterialDefineValue } from '../core/material.js';
|
|
13
14
|
export type { MotionGPUContext } from './motiongpu-context.js';
|
|
14
15
|
export type { UseFrameOptions, UseFrameResult } from './frame-context.js';
|
|
16
|
+
export type { PointerClick, PointerFrameRequestMode, PointerKind, PointerPoint, PointerState, UsePointerOptions, UsePointerResult } from './use-pointer.js';
|
|
15
17
|
export type { TextureUrlInput, UseTextureResult } from './use-texture.js';
|
|
16
18
|
export type { StorageBufferAccess, StorageBufferDefinition, StorageBufferDefinitionMap, StorageBufferType, ComputePassContext } from '../core/types.js';
|
|
17
19
|
export type { ComputePassOptions, ComputeDispatchContext } from '../passes/ComputePass.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,yBAAyB,EACzB,WAAW,EACX,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACX,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EACX,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,EAC1B,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC3F,YAAY,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,OAAO,EACP,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,yBAAyB,EACzB,WAAW,EACX,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACX,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACX,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC1E,YAAY,EACX,YAAY,EACZ,uBAAuB,EACvB,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EACX,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,EAC1B,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC3F,YAAY,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC"}
|
package/dist/react/index.js
CHANGED
|
@@ -8,5 +8,6 @@ import "../passes/index.js";
|
|
|
8
8
|
import { useMotionGPU } from "./motiongpu-context.js";
|
|
9
9
|
import { useFrame } from "./frame-context.js";
|
|
10
10
|
import { FragCanvas } from "./FragCanvas.js";
|
|
11
|
+
import { usePointer } from "./use-pointer.js";
|
|
11
12
|
import { useTexture } from "./use-texture.js";
|
|
12
|
-
export { BlitPass, ComputePass, CopyPass, FragCanvas, PingPongComputePass, ShaderPass, defineMaterial, useFrame, useMotionGPU, useTexture };
|
|
13
|
+
export { BlitPass, ComputePass, CopyPass, FragCanvas, PingPongComputePass, ShaderPass, defineMaterial, useFrame, useMotionGPU, usePointer, useTexture };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { type CurrentReadable } from '../core/current-value.js';
|
|
2
|
+
import { type PointerClick, type PointerFrameRequestMode, type PointerState } from '../core/pointer.js';
|
|
3
|
+
export type { PointerClick, PointerFrameRequestMode, PointerKind, PointerPoint, PointerState } from '../core/pointer.js';
|
|
4
|
+
/**
|
|
5
|
+
* Configuration for pointer input handling in `usePointer`.
|
|
6
|
+
*/
|
|
7
|
+
export interface UsePointerOptions {
|
|
8
|
+
/**
|
|
9
|
+
* Enables pointer listeners.
|
|
10
|
+
*
|
|
11
|
+
* @default true
|
|
12
|
+
*/
|
|
13
|
+
enabled?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Frame wake-up strategy for pointer-driven state changes.
|
|
16
|
+
*
|
|
17
|
+
* @default 'auto'
|
|
18
|
+
*/
|
|
19
|
+
requestFrame?: PointerFrameRequestMode;
|
|
20
|
+
/**
|
|
21
|
+
* Requests pointer capture on pointer down.
|
|
22
|
+
*
|
|
23
|
+
* @default true
|
|
24
|
+
*/
|
|
25
|
+
capturePointer?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Tracks pointer move/up outside canvas while pointer is pressed.
|
|
28
|
+
*
|
|
29
|
+
* @default true
|
|
30
|
+
*/
|
|
31
|
+
trackWhilePressedOutsideCanvas?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Enables click/tap synthesis on pointer up.
|
|
34
|
+
*
|
|
35
|
+
* @default true
|
|
36
|
+
*/
|
|
37
|
+
clickEnabled?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Maximum press duration to consider pointer up a click (milliseconds).
|
|
40
|
+
*
|
|
41
|
+
* @default 350
|
|
42
|
+
*/
|
|
43
|
+
clickMaxDurationMs?: number;
|
|
44
|
+
/**
|
|
45
|
+
* Maximum pointer travel from down to up to consider pointer up a click (pixels).
|
|
46
|
+
*
|
|
47
|
+
* @default 8
|
|
48
|
+
*/
|
|
49
|
+
clickMaxMovePx?: number;
|
|
50
|
+
/**
|
|
51
|
+
* Allowed pointer buttons for click synthesis.
|
|
52
|
+
*
|
|
53
|
+
* @default [0]
|
|
54
|
+
*/
|
|
55
|
+
clickButtons?: number[];
|
|
56
|
+
/**
|
|
57
|
+
* Called after pointer move state update.
|
|
58
|
+
*/
|
|
59
|
+
onMove?: (state: PointerState, event: PointerEvent) => void;
|
|
60
|
+
/**
|
|
61
|
+
* Called after pointer down state update.
|
|
62
|
+
*/
|
|
63
|
+
onDown?: (state: PointerState, event: PointerEvent) => void;
|
|
64
|
+
/**
|
|
65
|
+
* Called after pointer up/cancel state update.
|
|
66
|
+
*/
|
|
67
|
+
onUp?: (state: PointerState, event: PointerEvent) => void;
|
|
68
|
+
/**
|
|
69
|
+
* Called when click/tap is synthesized.
|
|
70
|
+
*/
|
|
71
|
+
onClick?: (click: PointerClick, state: PointerState, event: PointerEvent) => void;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Reactive state returned by `usePointer`.
|
|
75
|
+
*/
|
|
76
|
+
export interface UsePointerResult {
|
|
77
|
+
/**
|
|
78
|
+
* Current pointer state.
|
|
79
|
+
*/
|
|
80
|
+
state: CurrentReadable<PointerState>;
|
|
81
|
+
/**
|
|
82
|
+
* Last synthesized click/tap event.
|
|
83
|
+
*/
|
|
84
|
+
lastClick: CurrentReadable<PointerClick | null>;
|
|
85
|
+
/**
|
|
86
|
+
* Clears last click snapshot.
|
|
87
|
+
*/
|
|
88
|
+
resetClick: () => void;
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Tracks normalized pointer coordinates and click/tap snapshots for the active `FragCanvas`.
|
|
92
|
+
*/
|
|
93
|
+
export declare function usePointer(options?: UsePointerOptions): UsePointerResult;
|
|
94
|
+
//# sourceMappingURL=use-pointer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-pointer.d.ts","sourceRoot":"","sources":["../../src/lib/react/use-pointer.ts"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,eAAe,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAMN,KAAK,YAAY,EACjB,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EAEjB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EACX,YAAY,EACZ,uBAAuB,EACvB,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,MAAM,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAClF;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC;;OAEG;IACH,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACrC;;OAEG;IACH,SAAS,EAAE,eAAe,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAChD;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB;AA0CD;;GAEG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CAqW5E"}
|