Merge pull request #257 from wey-gu/react-use-gesture/to/use-gesture/…

…react

replace react-use-gesture to @use-gesture/react

.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import { Stats } from 'glodrei';
 import theme from './theme';
 import { Preview } from '@storybook/react';
+import React from 'react';
 
 const withProvider = (Story, context) => (
   <>

package.json

@@ -53,6 +53,7 @@
   "dependencies": {
     "@react-spring/three": "9.6.1",
     "@react-three/fiber": "8.13.5",
+    "@use-gesture/react": "^10.3.1",
     "camera-controls": "^2.8.3",
     "classnames": "^2.5.1",
     "d3-array": "^3.2.4",
@@ -68,7 +69,6 @@
     "graphology-metrics": "^2.1.0",
     "graphology-shortest-path": "^2.0.2",
     "hold-event": "^0.2.0",
-    "react-use-gesture": "^9.1.3",
     "reakeys": "^2.0.3",
     "three": "^0.154.0",
     "three-stdlib": "^2.23.13",

src/utils/useDrag.ts

@@ -1,6 +1,6 @@
 import { useThree } from '@react-three/fiber';
 import { useMemo } from 'react';
-import { useGesture } from 'react-use-gesture';
+import { useGesture } from '@use-gesture/react';
 import { Vector2, Vector3, Plane } from 'three';
 import { InternalGraphPosition } from '../types';
 
@@ -61,12 +61,10 @@ export const useDrag = ({
         // Run user callback
         onDragStart();
       },
-      onDrag: ({ event }) => {
+      onDrag: ({ xy }) => {
         // Compute normalized mouse coordinates (screen space)
-        const nx =
-          ((event.clientX - (clientRect?.left ?? 0)) / size.width) * 2 - 1;
-        const ny =
-          -((event.clientY - (clientRect?.top ?? 0)) / size.height) * 2 + 1;
+        const nx = ((xy[0] - (clientRect?.left ?? 0)) / size.width) * 2 - 1;
+        const ny = -((xy[1] - (clientRect?.top ?? 0)) / size.height) * 2 + 1;
 
         // Unlike the mouse from useThree, this works offscreen
         mouse2D.set(nx, ny);