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  Mouse,
23  MouseConstraint,
24  Query,
25  Render,
26  Runner,
27  World,
28} from "matter-js"
29 
30import { cn } from "@/lib/utils"
31 
32type GravityProps = {
33  children: ReactNode
34  debug?: boolean
35  gravity?: { x: number; y: number }
36  resetOnResize?: boolean
37  grabCursor?: boolean
38  addTopWall?: boolean
39  autoStart?: boolean
40  className?: string
41}
42 
43type PhysicsBody = {
44  element: HTMLElement
45  body: Matter.Body
46  props: MatterBodyProps
47}
48 
49type MatterBodyProps = {
50  children: ReactNode
51  matterBodyOptions?: Matter.IBodyDefinition
52  isDraggable?: boolean
53  bodyType?: "rectangle" | "circle" | "svg"
54  sampleLength?: number
55  x?: number | string
56  y?: number | string
57  angle?: number
58  className?: string
59}
60 
61export type GravityRef = {
62  start: () => void
63  stop: () => void
64  reset: () => void
65}
66 
67const GravityContext = createContext<{
68  registerElement: (
69    id: string,
70    element: HTMLElement,
71    props: MatterBodyProps
72  ) => void
73  unregisterElement: (id: string) => void
74} | null>(null)
75 
76export const MatterBody = ({
77  children,
78  className,
79  matterBodyOptions = {
80    friction: 0.1,
81    restitution: 0.1,
82    density: 0.001,
83    isStatic: false,
84  },
85  bodyType = "rectangle",
86  isDraggable = true,
87  sampleLength = 15,
88  x = 0,
89  y = 0,
90  angle = 0,
91  ...props
92}: MatterBodyProps) => {
93  const elementRef = useRef<HTMLDivElement>(null)
94  const idRef = useRef(Math.random().toString(36).substring(7))
95  const context = useContext(GravityContext)
96 
97  useEffect(() => {
98    if (!elementRef.current || !context) return
99    context.registerElement(idRef.current, elementRef.current, {
100      children,
101      matterBodyOptions,
102      bodyType,
103      sampleLength,
104      isDraggable,
105      x,
106      y,
107      angle,
108      ...props,
109    })
110 
111    return () => context.unregisterElement(idRef.current)
112  }, [props, children, matterBodyOptions, isDraggable])
113 
114  return (
115    <div
116      ref={elementRef}
117      className={cn(
118        "absolute",
119        className,
120        isDraggable && "pointer-events-none"
121      )}
122    >
123      {children}
124    </div>
125  )
126}
127 
128const Gravity = forwardRef<GravityRef, GravityProps>(
129  (
130    {
131// … truncated