| 1 | "use client" |
| 2 | |
| 3 | import { type RefObject, useEffect, useMemo, useRef } from "react" |
| 4 | import { type ChartContextValue, |
| 5 | import { |
| 6 | backingSize, |
| 7 | bloomLayerStyle, |
| 8 | easeInOutCubic, |
| 9 | paintColumn, |
| 10 | prefersReducedMotion, |
| 11 | resample, |
| 12 | } from "./dither-paint" |
| 13 | import { rgb } |
| 14 | |
| 15 | type Star |
| 16 | type Surface |
| 17 | |
| 18 | type LoopArgs |
| 19 | canvas: HTMLCanvasElement |
| 20 | bloomCanvas: HTMLCanvasElement |
| 21 | cols: number |
| 22 | rows: number |
| 23 | state: RefObject |
| 24 | targets: RefObject |
| 25 | stars: RefObject |
| 26 | } |
| 27 | |
| 28 | /** |
| 29 | * The requestAnimationFrame paint loop — eases each series toward its target |
| 30 | * surface, paints the dither fill (with the entrance reveal), then layers the |
| 31 | * crosshair marker and winking stars on top. Lives outside the component so the |
| 32 | * component stays small and this hot closure isn't re-created on every render. |
| 33 | * Returns a cleanup that cancels the loop. |
| 34 | */ |
| 35 | function startCartesianLoop({ |
| 36 | canvas, |
| 37 | bloomCanvas, |
| 38 | cols, |
| 39 | rows, |
| 40 | state, |
| 41 | targets, |
| 42 | stars, |
| 43 | }: LoopArgs) |
| 44 | const c = |
| 45 | if (!c || |
| 46 | canvas.width = |
| 47 | canvas.height = |
| 48 | |
| 49 | const off = |
| 50 | off.width = |
| 51 | off.height = |
| 52 | const octx = |
| 53 | if (!octx) |
| 54 | |
| 55 | // Bloom layer: a blurred, additive copy of the crisp canvas. |
| 56 | const bloomCtx = |
| 57 | if (bloomCanvas) { |
| 58 | bloomCanvas.width = |
| 59 | bloomCanvas.height = |
| 60 | } |
| 61 | |
| 62 | const reduce = |
| 63 | const EASE = |
| 64 | const animate = |
| 65 | const duration = |
| 66 | const current: |
| 67 | |
| 68 | // `reveal` (0–1) sweeps the fill in left-to-right on first paint. |
| 69 | const paintFill = |
| 70 | octx.clearRect(0, |
| 71 | const s = |
| 72 | const stacked = |
| 73 | const revealCols = |
| 74 | s.configKeys.forEach |
| 75 | const cur = |
| 76 | if (!cur) |
| 77 | const seed = |
| 78 | const variant = |
| 79 | const isLine = |
| 80 | (s.seriesSpecs[key |
| 81 | (s.chartType === |
| 82 | const emphasis = |
| 83 | const dim = |
| 84 | // Overlapping (non-stacked) layers thin out front-to-back so they |
| 85 | // read as distinct layers instead of a muddy blend. |
| 86 | const sparse = |
| 87 | for (let x |
| 88 | if (x > |
| 89 | paintColumn(octx, x |
| 90 | variant, |
| 91 | intensity, |
| 92 | dim, |
| 93 | stacked: stacked && |
| 94 | sparse, |
| 95 | }) |
| 96 | } |
| 97 | }) |
| 98 | } |
| 99 | |
| 100 | let raf = |
| 101 | let tick = |
| 102 | let last = |
| 103 | let animStart = |
| 104 | let lastProg = |
| 105 | let lastRevision = |
| 106 | let entranceReported = |
| 107 | let intensity = |
| 108 | let needsFill = |
| 109 | let lastPaintSig = |
| 110 | let lastSelected: |
| 111 | |
| 112 | const draw = |
| 113 | raf = requestAnimationFrame( |
| 114 | const s = |
| 115 | if (!s.ready |
| 116 | // Keep the bloom layer in sync with the crisp canvas while it's active. |
| 117 | if (bloomCtx) { |
| 118 | const on = |
| 119 | s.bloom !== |
| 120 | if (on) { |
| 121 | bloomCtx.clearRect(0, |
| 122 | bloomCtx.drawImage(canvas |
| 123 | } |
| 124 | } |
| 125 | const tgt = |
| 126 | if (s.revision |
| 127 | lastRevision = s. |
| 128 | animStart = 0 // |
| 129 | lastProg = -1 |
| 130 | entranceReported = false |
| 131 | } |
| 132 | if (!animStart) |
| 133 | const prog = |
| 134 | const progChanged = |
| 135 | // Tell the context the reveal is done so DOM markers fade in in sync. |
| 136 | if (prog >= |
| 137 | entranceReported = true |
| 138 | s.markEntranceDone() |
| 139 | } |
| 140 | |
| 141 | let moving = |
| 142 | for (const key |
| 143 | const t = |
| 144 | if (!t) |
| 145 | const cur = |
| 146 | if (!cur || |
| 147 | current[key] = |
| 148 | needsFill = true |
| 149 | continue |
| 150 | } |
| 151 | for (let x |
| 152 | const dt = |
| 153 | const df = |
| 154 | if (Math.abs |
| 155 | cur.top[x |
| 156 | cur.floor[x |
| 157 | moving = true |
| 158 | } else { |
| 159 | cur.top[x |
| 160 | cur.floor[x |
| 161 | } |
| 162 | } |
| 163 | } |
| 164 | for (const key |
| 165 | if (!tgt[key |
| 166 | delete current[key] |
| 167 | needsFill = true |
| 168 | } |
| 169 | } |
| 170 | if (moving) needsFill |
| 171 | const emphasisNow = |
| 172 | if (emphasisNow !== |
| 173 | lastSelected = emphasisNow |
| 174 | needsFill = true |
| 175 | } |
| 176 | |
| 177 | const itTarget = |
| 178 | let settling = |
| 179 | if (Math.abs |
| 180 | intensity += (itTarget |
| 181 | settling = true |
| 182 | needsFill = true |
| 183 | } else intensity = |
| 184 | |
| 185 | // Live hover wins; the controlled markerIndex (e.g. a committed point) |
| 186 | // is the fallback shown when nothing is hovered. |
| 187 | const marker = |
| 188 | const winkDue = |
| 189 | // Repaint when a tweak-driven paint input changes (variant, stacking) so |
| 190 | // the panel updates the fill live — without resetting the entrance reveal. |
| 191 | const paintSig = |
| 192 | .map((k) |
| 193 | .join(",") |
| 194 | const sigChanged = |
| 195 | if (sigChanged) { |
| 196 | lastPaintSig = paintSig |
| 197 | needsFill = true |
| 198 | } |
| 199 | if ( |
| 200 | !( |
| 201 | moving || |
| 202 | settling || |
| 203 | winkDue || |
| 204 | marker != null || |
| 205 | progChanged || |
| 206 | sigChanged |
| 207 | ) |
| 208 | ) |
| 209 | return |
| 210 | if (progChanged) { |
| 211 | lastProg = prog |
| 212 | needsFill = true |
| 213 | } |
| 214 | if (winkDue) { |
| 215 | last = now |
| 216 | tick += 1 |
| 217 | } |
| 218 | |
| 219 | // Reveal front (left-to-right) — stars + crosshair stay behind it so |
| 220 | // they don't float over the not-yet-drawn area during the entrance. |
| 221 | const reveal = |
| 222 | const revealCols = |
| 223 | |
| 224 | if (needsFill) { |
| 225 | paintFill(intensity, reveal |
| 226 | needsFill = false |
| 227 | } |
| 228 | c.clearRect(0, |
| 229 | c.drawImage(off |
| 230 | |
| 231 | const mx = |
| 232 | marker != null && |
| 233 | ? Math.round(( |
| 234 | : -1 |
| 235 | if (mx >= |
| 236 | for (const key |
| 237 | const cur = |
| 238 | if (!cur) |
| 239 | const seed = |
| 240 | const my = |
| 241 | // Full-height column + a chunky marker block at the point — the |
| 242 | // series colour at higher opacity, so it reads on either theme. |
| 243 | c.fillStyle = |
| 244 | for (let y |
| 245 | c.fillStyle = |
| 246 | c.fillRect(mx |
| 247 | } |
| 248 | } |
| 249 | |
| 250 | for (const star |
| 251 | const cur = |
| 252 | if (!cur) |
| 253 | const sx = |
| 254 | (star.xi / |
| 255 | ) |
| 256 | if (sx > |
| 257 | const top = |
| 258 | const floor = |
| 259 | const sy = |
| 260 | const tw = |
| 261 | const lift = |
| 262 | if (lift < |
| 263 | // Sparkles glint in the series colour via opacity (the `lift` wink) |
| 264 | // rather than a lighter shade — so they never read as stray white |
| 265 | // pixels on a light background. |
| 266 | const starColor = |
| 267 | c.fillStyle = |
| 268 | c.fillRect(sx |
| 269 | // At the peak of a wink the star flares into a 4-point glint. |
| 270 | if (tw > |
| 271 | c.fillStyle = |
| 272 | c.fillRect(sx |
| 273 | c.fillRect(sx |
| 274 | c.fillRect(sx |
| 275 | c.fillRect(sx |
| 276 | } |
| 277 | } |
| 278 | } |
| 279 | |
| 280 | raf = requestAnimationFrame( |
| 281 | return () => |
| 282 | } |
| 283 | |
| 284 | /** |
| 285 | * Continuous dither canvas for area and line charts. Each series is reduced to a |
| 286 | * `[top, floor]` band per backing column: areas fill from their value line down |
| 287 | * to their floor; lines fill only a thin glow band hugging the line. The shared |
| 288 | * {@link |
| 289 | * series line, with winking stars + scrub crosshair on top. |
| 290 | */ |
| 291 | export function CartesianCanvas() |
| 292 | const ctx = |
| 293 | const canvasRef = |
| 294 | const bloomRef = |
| 295 | |
| 296 | const { width, |
| 297 | const { cols, |
| 298 | const { ready, |
| 299 | |
| 300 | // Memoized: the pricey bit in the render path — a `resample` per series to |
| 301 | // the backing column count. The canvas re-renders on every hover/cursor tick |
| 302 | // (it consumes ctx), so without this the whole surface is rebuilt each time. |
| 303 | // Pinned to the exact ctx fields it reads, plus the backing geometry. |
| 304 | const targets = |
| 305 | const out: |
| 306 | if (!ready) |
| 307 | const h = |
| 308 | const glow = |
| 309 | const defaultKind = |
| 310 | for (const key |
| 311 | const band = |
| 312 | if (!band) |
| 313 | const line = |
| 314 | const top = |
| 315 | const floor = |
| 316 | line ? Math. |
| 317 | ) |
| 318 | out[key] = |
| 319 | } |
| 320 | return out |
| 321 | }, [ready, |
| 322 | |
| 323 | // Memoized: the star field is deterministic — only its shape (series × |
| 324 | // column count) matters, so it need not be rebuilt on unrelated re-renders. |
| 325 | const stars = |
| 326 | const out: |
| 327 | const per = |
| 328 | configKeys.forEach((key |
| 329 | for (let i |
| 330 | const seed = |
| 331 | out.push({ |
| 332 | key, |
| 333 | xi: seed % |
| 334 | depth: ((seed * |
| 335 | phase: (seed * |
| 336 | }) |
| 337 | } |
| 338 | }) |
| 339 | return out |
| 340 | }, [configKeys, |
| 341 | |
| 342 | // The RAF loop reads these through refs so it always sees the latest values |
| 343 | // without re-subscribing. Refs are written in an effect (never during |
| 344 | // render) — mutating a ref mid-render is a React anti-pattern that tears |
| 345 | // under Strict Mode / concurrent rendering. |
| 346 | const stateRef = |
| 347 | const targetsRef = |
| 348 | const starsRef = |
| 349 | useEffect(() => |
| 350 | stateRef.current = |
| 351 | targetsRef.current = |
| 352 | starsRef.current = |
| 353 | }) |
| 354 | |
| 355 | useEffect(() => |
| 356 | const canvas = |
| 357 | if (!canvas) |
| 358 | return startCartesianLoop({ |
| 359 | canvas, |
| 360 | bloomCanvas: bloomRef.current |
| 361 | cols, |
| 362 | rows, |
| 363 | state: stateRef, |
| 364 | targets: targetsRef, |
| 365 | stars: starsRef, |
| 366 | }) |
| 367 | }, [cols, |
| 368 | |
| 369 | const bloomActive = |
| 370 | ? ctx.isMouseInChart |
| 371 | : true |
| 372 | const bloom = |
| 373 | const pos = |
| 374 | left: ctx.margins |
| 375 | top: ctx.margins |
| 376 | width, |
| 377 | height, |
| 378 | } as const |
| 379 | |
| 380 | return ( |
| 381 | <> |
| 382 | <canvas |
| 383 | ref={canvasRef} |
| 384 | className="pointer-events-none absolute" |
| 385 | style={{ ... |
| 386 | /> |
| 387 | <canvas |
| 388 | ref={bloomRef} |
| 389 | className="pointer-events-none absolute" |
| 390 | style={{ |
| 391 | ...pos, |
| 392 | transition: "opacity 220ms ease", |
| 393 | ...(bloom ?? |
| 394 | }} |
| 395 | /> |
| 396 | </> |
| 397 | ) |
| 398 | } |