@stroke-stabilizer/react 0.2.13 → 0.2.15
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 +24 -12
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -33,12 +33,17 @@ function DrawingCanvas() {
|
|
|
33
33
|
})
|
|
34
34
|
|
|
35
35
|
const handlePointerMove = (e: React.PointerEvent) => {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
// IMPORTANT: Use getCoalescedEvents() for smoother input
|
|
37
|
+
const events = e.nativeEvent.getCoalescedEvents?.() ?? [e.nativeEvent]
|
|
38
|
+
|
|
39
|
+
for (const ce of events) {
|
|
40
|
+
process({
|
|
41
|
+
x: ce.offsetX,
|
|
42
|
+
y: ce.offsetY,
|
|
43
|
+
pressure: ce.pressure,
|
|
44
|
+
timestamp: ce.timeStamp,
|
|
45
|
+
})
|
|
46
|
+
}
|
|
42
47
|
}
|
|
43
48
|
|
|
44
49
|
const handlePointerUp = () => {
|
|
@@ -53,6 +58,8 @@ function DrawingCanvas() {
|
|
|
53
58
|
}
|
|
54
59
|
```
|
|
55
60
|
|
|
61
|
+
> **Important:** Always use `getCoalescedEvents()` to capture all pointer events between frames. Without it, browsers throttle events and you'll get choppy strokes.
|
|
62
|
+
|
|
56
63
|
### With rAF Batch Processing
|
|
57
64
|
|
|
58
65
|
For high-frequency input devices, use the underlying `StabilizedPointer`'s batch processing:
|
|
@@ -72,12 +79,17 @@ function DrawingCanvas() {
|
|
|
72
79
|
}, [pointer])
|
|
73
80
|
|
|
74
81
|
const handlePointerMove = (e: React.PointerEvent) => {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
82
|
+
// IMPORTANT: Use getCoalescedEvents() for smoother input
|
|
83
|
+
const events = e.nativeEvent.getCoalescedEvents?.() ?? [e.nativeEvent]
|
|
84
|
+
|
|
85
|
+
for (const ce of events) {
|
|
86
|
+
pointer.queue({
|
|
87
|
+
x: ce.offsetX,
|
|
88
|
+
y: ce.offsetY,
|
|
89
|
+
pressure: ce.pressure,
|
|
90
|
+
timestamp: ce.timeStamp,
|
|
91
|
+
})
|
|
92
|
+
}
|
|
81
93
|
}
|
|
82
94
|
|
|
83
95
|
return <canvas onPointerMove={handlePointerMove} />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stroke-stabilizer/react",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.15",
|
|
4
4
|
"description": "React hooks for stroke stabilization",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"typecheck": "tsc --noEmit"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@stroke-stabilizer/core": "^0.2.
|
|
25
|
+
"@stroke-stabilizer/core": "^0.2.14"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"react": ">=17.0.0"
|