remove react-spring in favour of maath

package.json

@@ -48,7 +48,6 @@
     "@babel/runtime": "^7.26.0",
     "@mediapipe/tasks-vision": "0.10.17",
     "@monogrid/gainmap-js": "^3.0.6",
-    "@react-spring/three": "~9.7.5",
     "@use-gesture/react": "^10.3.1",
     "camera-controls": "^2.9.0",
     "cross-env": "^7.0.3",

src/web/PresentationControls.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react'
 import { MathUtils } from 'three'
-import { useThree } from '@react-three/fiber'
-import { a, SpringConfig, useSpring } from '@react-spring/three'
+import { useFrame, useThree } from '@react-three/fiber'
 import { useGesture } from '@use-gesture/react'
+import { easing } from 'maath'
 
 export type PresentationControlProps = {
-  snap?: Boolean | SpringConfig
+  snap?: Boolean | number
   global?: boolean
   cursor?: boolean
   speed?: number
   zoom?: number
   rotation?: [number, number, number]
   polar?: [number, number]
   azimuth?: [number, number]
-  config?: any
+  damping?: number
   enabled?: boolean
   children?: React.ReactNode
   domElement?: HTMLElement
@@ -31,7 +31,7 @@ export function PresentationControls({
   zoom = 1,
   polar = [0, Math.PI / 2],
   azimuth = [-Infinity, Infinity],
-  config = { mass: 1, tension: 170, friction: 26 },
+  damping = 0.25,
 }: PresentationControlProps) {
   const events = useThree((state) => state.events)
   const gl = useThree((state) => state.gl)
@@ -50,8 +50,7 @@ export function PresentationControls({
     () => [MathUtils.clamp(rotation[0], ...rPolar), MathUtils.clamp(rotation[1], ...rAzimuth), rotation[2]],
     [rotation[0], rotation[1], rotation[2], rPolar, rAzimuth]
   )
-  const [spring, api] = useSpring(() => ({ scale: 1, rotation: rInitial, config }))
-  React.useEffect(() => void api.start({ scale: 1, rotation: rInitial, config }), [rInitial])
+
   React.useEffect(() => {
     if (global && cursor && enabled) {
       explDomElement.style.cursor = 'grab'
@@ -62,30 +61,36 @@ export function PresentationControls({
       }
     }
   }, [global, cursor, explDomElement, enabled])
+
+  const [animation] = React.useState({ scale: 1, rotation: rInitial, damping })
+  const ref = React.useRef<THREE.Group>(null!)
+  useFrame((state, delta) => {
+    easing.damp3(ref.current.scale, animation.scale, animation.damping, delta)
+    easing.dampE(ref.current.rotation, animation.rotation as any, animation.damping, delta)
+  })
+
   const bind = useGesture(
     {
       onHover: ({ last }) => {
         if (cursor && !global && enabled) explDomElement.style.cursor = last ? 'auto' : 'grab'
       },
-      onDrag: ({ down, delta: [x, y], memo: [oldY, oldX] = spring.rotation.animation.to || rInitial }) => {
+      onDrag: ({ down, delta: [x, y], memo: [oldY, oldX] = animation.rotation || rInitial }) => {
         if (!enabled) return [y, x]
         if (cursor) explDomElement.style.cursor = down ? 'grabbing' : 'grab'
         x = MathUtils.clamp(oldX + (x / size.width) * Math.PI * speed, ...rAzimuth)
         y = MathUtils.clamp(oldY + (y / size.height) * Math.PI * speed, ...rPolar)
-        const sConfig = snap && !down && typeof snap !== 'boolean' ? snap : config
-        api.start({
-          scale: down && y > rPolar[1] / 2 ? zoom : 1,
-          rotation: snap && !down ? rInitial : [y, x, 0],
-          config: (n) => (n === 'scale' ? { ...sConfig, friction: sConfig.friction * 3 } : sConfig),
-        })
+
+        animation.scale = down && y > rPolar[1] / 2 ? zoom : 1
+        animation.rotation = snap && !down ? rInitial : [y, x, 0]
+        animation.damping = snap && !down && typeof snap !== 'boolean' ? (snap as number) : damping
         return [y, x]
       },
     },
     { target: global ? explDomElement : undefined }
   )
   return (
-    <a.group {...bind?.()} {...(spring as any)}>
+    <group ref={ref} {...(bind?.() as any)}>
       {children}
-    </a.group>
+    </group>
   )
 }

yarn.lock

@@ -1689,51 +1689,6 @@
     "@pnpm/network.ca-file" "^1.0.1"
     config-chain "^1.1.11"
 
-"@react-spring/animated@~9.7.5":
-  version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.5.tgz#eb0373aaf99b879736b380c2829312dae3b05f28"
-  integrity sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==
-  dependencies:
-    "@react-spring/shared" "~9.7.5"
-    "@react-spring/types" "~9.7.5"
-
-"@react-spring/core@~9.7.5":
-  version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.5.tgz#72159079f52c1c12813d78b52d4f17c0bf6411f7"
-  integrity sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==
-  dependencies:
-    "@react-spring/animated" "~9.7.5"
-    "@react-spring/shared" "~9.7.5"
-    "@react-spring/types" "~9.7.5"
-
-"@react-spring/rafz@~9.7.5":
-  version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.7.5.tgz#ee7959676e7b5d6a3813e8c17d5e50df98b95df9"
-  integrity sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==
-
-"@react-spring/shared@~9.7.5":
-  version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.5.tgz#6d513622df6ad750bbbd4dedb4ca0a653ec92073"
-  integrity sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==
-  dependencies:
-    "@react-spring/rafz" "~9.7.5"
-    "@react-spring/types" "~9.7.5"
-
-"@react-spring/three@~9.7.5":
-  version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.7.5.tgz#46bcd22354afa873a809f1c6d7e07b59600b4d08"
-  integrity sha512-RxIsCoQfUqOS3POmhVHa1wdWS0wyHAUway73uRLp3GAL5U2iYVNdnzQsep6M2NZ994BlW8TcKuMtQHUqOsy6WA==
-  dependencies:
-    "@react-spring/animated" "~9.7.5"
-    "@react-spring/core" "~9.7.5"
-    "@react-spring/shared" "~9.7.5"
-    "@react-spring/types" "~9.7.5"
-
-"@react-spring/types@~9.7.5":
-  version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.5.tgz#e5dd180f3ed985b44fd2cd2f32aa9203752ef3e8"
-  integrity sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==
-
 "@react-three/[email protected]":
   version "9.0.0-rc.1"
   resolved "https://registry.yarnpkg.com/@react-three/fiber/-/fiber-9.0.0-rc.1.tgz#d0e386e89790d47ad1bdb69acbeb9befdac7b59c"