Scope
File: src/components/spatial/GridMap.tsx
Problem
Rendering 500+ grid resource nodes with per-frame resource pulsation, status coloring, and connection lines causes significant UI lag on mid-range devices. The current requestAnimationFrame loop performs full canvas redraws without spatial indexing or dirty-rect tracking, leading to dropped frames and jank during browser resize or scroll.
Requirements
- Implement a spatial hash grid (
src/utils/spatial.ts) that partitions the canvas into cells and only re-renders nodes within dirty cells.
- Use off-screen canvas double-buffering to separate drawing from compositing.
- Batch node data updates: collect all mutations within a single rAF frame before issuing a draw command.
- Add a
devicePixelRatio-aware canvas scaling to keep sharp rendering on Retina displays without redundant work.
- Support zoom/pan via a virtual camera transform that culls off-screen nodes entirely.
Resolution Strategy
- Add
useRef<OffscreenCanvas> for the off-screen buffer.
- Implement
SpatialHashGrid class with cellSize = NODE_RADIUS * 4.
- Only nodes whose bounding box intersects the viewport are drawn.
- Use
ResizeObserver + debounce (100ms) for canvas resize to avoid thrashing.
Tags
spatial, performance, canvas
Scope
File:
src/components/spatial/GridMap.tsxProblem
Rendering 500+ grid resource nodes with per-frame resource pulsation, status coloring, and connection lines causes significant UI lag on mid-range devices. The current requestAnimationFrame loop performs full canvas redraws without spatial indexing or dirty-rect tracking, leading to dropped frames and jank during browser resize or scroll.
Requirements
src/utils/spatial.ts) that partitions the canvas into cells and only re-renders nodes within dirty cells.devicePixelRatio-aware canvas scaling to keep sharp rendering on Retina displays without redundant work.Resolution Strategy
useRef<OffscreenCanvas>for the off-screen buffer.SpatialHashGridclass withcellSize = NODE_RADIUS * 4.ResizeObserver+ debounce (100ms) for canvas resize to avoid thrashing.Tags
spatial, performance, canvas