Dot Matrix

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/registry/wise-ui/lib/utils"
5 
6interface DotMatrixProps extends React.HTMLAttributes<HTMLDivElement> {
7  gap?: number
8  dotSize?: number
9  color?: string
10  activeColor?: string
11  influence?: number
12  maxScale?: number
13}
14 
15function parseColor(color: string): [number, number, number] | null {
16  const ctx = typeof document !== "undefined"
17    ? document.createElement("canvas").getContext("2d")
18    : null
19  if (!ctx) return null
20  ctx.fillStyle = color
21  ctx.fillRect(0, 0, 1, 1)
22  const d = ctx.getImageData(0, 0, 1, 1).data
23  return [d[0], d[1], d[2]]
24}
25 
26const DotMatrix = React.forwardRef<HTMLDivElement, DotMatrixProps>(
27  (
28    {
29      gap = 24,
30      dotSize = 2,
31      color = "currentColor",
32      activeColor,
33      influence = 100,
34      maxScale = 3,
35      className,
36      children,
37      ...props
38    },
39    ref
40  ) => {
41    const canvasRef = React.useRef<HTMLCanvasElement>(null)
42    const containerRef = React.useRef<HTMLDivElement>(null)
43    const mouseRef = React.useRef({ x: -9999, y: -9999 })
44 
45    React.useImperativeHandle(ref, () => containerRef.current!)
46 
47    React.useEffect(() => {
48      const canvas = canvasRef.current
49      const container = containerRef.current
50      if (!canvas || !container) return
51 
52      const ctx = canvas.getContext("2d")
53      if (!ctx) return
54 
55      let w = 0
56      let h = 0
57      let rafId = 0
58      let baseRgb: [number, number, number] = [128, 128, 128]
59      let activeRgb: [number, number, number] = [128, 128, 128]
60 
61      function resolveColors() {
62        const computed = getComputedStyle(container!)
63        const resolvedColor = color === "currentColor" ? computed.color : color
64        const resolvedActive = activeColor
65          ? (activeColor === "currentColor" ? computed.color : activeColor)
66          : resolvedColor
67        baseRgb = parseColor(resolvedColor) ?? [128, 128, 128]
68        activeRgb = parseColor(resolvedActive) ?? baseRgb
69      }
70 
71      function resize() {
72        const rect = container!.getBoundingClientRect()
73        const dpr = Math.min(window.devicePixelRatio, 2)
74        w = rect.width
75        h = rect.height
76        canvas!.width = w * dpr
77        canvas!.height = h * dpr
78        canvas!.style.width = `${w}px`
79        canvas!.style.height = `${h}px`
80        ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
81        resolveColors()
82      }
83 
84      function draw() {
85        ctx!.clearRect(0, 0, w, h)
86        const mx = mouseRef.current.x
87// … truncated