Cursor Attractor And Gravity

1"use client"
2 
3import {
4  createContext,
5  forwardRef,
6  ReactNode,
7  useCallback,
8  useContext,
9  useEffect,
10  useImperativeHandle,
11  useRef,
12  useState,
13} from "react"
14import { calculatePosition } from "@/utils/calculate-position"
15import { parsePathToVertices } from "@/utils/svg-path-to-vertices"
16import { debounce } from "lodash"
17import Matter, {
18  Bodies,
19  Common,
20  Engine,
21  Events,
22  Render,
23  Runner,
24  World,
25  Body,
26} from "matter-js"
27 
28import { cn } from "@/lib/utils"
29import { useMousePositionRef } from "@/hooks/use-mouse-position-ref"
30 
31type GravityProps = {
32  children: ReactNode
33  debug?: boolean
34  attractorPoint?: { x: number | string; y: number | string }
35  attractorStrength?: number
36  cursorStrength?: number
37  cursorFieldRadius?: number
38  resetOnResize?: boolean
39  addTopWall?: boolean
40  autoStart?: boolean
41  className?: string
42}
43 
44type PhysicsBody = {
45  element: HTMLElement
46  body: Matter.Body
47  props: MatterBodyProps
48}
49 
50type MatterBodyProps = {
51  children: ReactNode
52  matterBodyOptions?: Matter.IBodyDefinition
53  isDraggable?: boolean
54  bodyType?: "rectangle" | "circle" | "svg"
55  sampleLength?: number
56  x?: number | string
57  y?: number | string
58  angle?: number
59  className?: string
60}
61 
62export type GravityRef = {
63  start: () => void
64  stop: () => void
65  reset: () => void
66}
67 
68const GravityContext = createContext<{
69  registerElement: (
70    id: string,
71    element: HTMLElement,
72    props: MatterBodyProps
73  ) => void
74  unregisterElement: (id: string) => void
75} | null>(null)
76 
77export const MatterBody = ({
78  children,
79  className,
80  matterBodyOptions = {
81    friction: 0.1,
82    restitution: 0.1,
83    density: 0.001,
84    isStatic: false,
85  },
86  bodyType = "rectangle",
87  isDraggable = true,
88  sampleLength = 15,
89  x = 0,
90  y = 0,
91  angle = 0,
92  ...props
93}: MatterBodyProps) => {
94  const elementRef = useRef<HTMLDivElement>(null)
95  const idRef = useRef(Math.random().toString(36).substring(7))
96  const context = useContext(GravityContext)
97 
98  useEffect(() => {
99    if (!elementRef.current || !context) return
100    context.registerElement(idRef.current, elementRef.current, {
101      children,
102      matterBodyOptions,
103      bodyType,
104      sampleLength,
105      isDraggable,
106      x,
107      y,
108      angle,
109      ...props,
110    })
111 
112    return () => context.unregisterElement(idRef.current)
113  }, [props, children, matterBodyOptions, isDraggable])
114 
115  return (
116    <div
117      ref={elementRef}
118      className={cn(
119        "absolute",
120        className,
121      )}
122    >
123      {children}
124// … truncated