@infinit-canvas/react 0.1.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 +62 -0
- package/dist/react-infinite-canvas.cjs +830 -0
- package/dist/react-infinite-canvas.js +4555 -0
- package/dist/styles.css +117 -0
- package/package.json +54 -0
- package/src/types.d.ts +472 -0
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# react-infinite-canvas
|
|
2
|
+
|
|
3
|
+
A high-performance infinite canvas React component powered by OffscreenCanvas and Web Workers. Handles 2000+ cards at 60fps with spatial indexing, batched rendering, and automatic LOD.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install react-infinite-canvas
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```jsx
|
|
14
|
+
import { InfiniteCanvas } from 'react-infinite-canvas';
|
|
15
|
+
import 'react-infinite-canvas/styles.css';
|
|
16
|
+
|
|
17
|
+
const cards = [
|
|
18
|
+
{ x: 60, y: 80, w: 160, h: 90, title: 'Note A', body: 'Hello!' },
|
|
19
|
+
{ x: 320, y: 140, w: 160, h: 90, title: 'Note B', body: 'World!' },
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
function App() {
|
|
23
|
+
return <InfiniteCanvas cards={cards} height="500px" />;
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Props
|
|
28
|
+
|
|
29
|
+
| Prop | Default | Description |
|
|
30
|
+
|------|---------|-------------|
|
|
31
|
+
| `cards` | `[]` | Array of `{ x, y, w, h, title, body }` |
|
|
32
|
+
| `dark` | auto | Force dark/light mode |
|
|
33
|
+
| `gridSize` | `40` | Grid cell size in px |
|
|
34
|
+
| `zoomMin` / `zoomMax` | `0.1` / `4` | Zoom limits |
|
|
35
|
+
| `initialCamera` | `{ x:0, y:0, zoom:1 }` | Starting position |
|
|
36
|
+
| `onHudUpdate` | - | Callback: `{ wx, wy, zoom, renderMs, fps, visible }` |
|
|
37
|
+
| `showHud` / `showHint` | `true` | Toggle overlays |
|
|
38
|
+
| `width` / `height` | `'100%'` / `'420px'` | Container size |
|
|
39
|
+
| `className` / `style` | - | Custom styling |
|
|
40
|
+
| `children` | - | Render inside canvas wrapper |
|
|
41
|
+
|
|
42
|
+
## Hook API
|
|
43
|
+
|
|
44
|
+
```jsx
|
|
45
|
+
import { useInfiniteCanvas } from 'react-infinite-canvas';
|
|
46
|
+
|
|
47
|
+
const { wrapRef, canvasRef, onPointerDown, onPointerMove, onPointerUp,
|
|
48
|
+
resetView, addCard, getCamera, setCamera } = useInfiniteCanvas({ cards });
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Performance
|
|
52
|
+
|
|
53
|
+
- **Spatial grid index** for O(1) viewport culling
|
|
54
|
+
- **Batched multi-pass rendering** (~10 draw calls for any number of cards)
|
|
55
|
+
- **Level of Detail** — text/shadows hidden at low zoom
|
|
56
|
+
- **Web Worker rendering** — main thread never blocked
|
|
57
|
+
- **Pre-computed colors** and font constants
|
|
58
|
+
- **Throttled HUD** updates (100ms)
|
|
59
|
+
|
|
60
|
+
## License
|
|
61
|
+
|
|
62
|
+
MIT
|