From f8011e1d5702a76cd2f3195ab9ce496ee3d2026e Mon Sep 17 00:00:00 2001
From: Wey Gu <weyl.gu@gmail.com>
Date: Thu, 25 Jul 2024 22:01:16 +0800
Subject: [PATCH 1/2] replace react-use-gesture to @use-gesture/react

---
 .storybook/preview.tsx |  1 +
 package-lock.json      | 11 +----------
 package.json           |  2 +-
 src/utils/useDrag.ts   | 19 ++++++++++++++-----
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 5fea76b7..4fdb88e4 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 import { Stats } from '@react-three/drei';
 import theme from './theme';
 import { Preview } from '@storybook/react';
+import React from 'react';
 
 const withProvider = (Story, context) => (
   <>
diff --git a/package-lock.json b/package-lock.json
index 2aaa2c6f..b73583fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@react-spring/three": "9.6.1",
         "@react-three/drei": "^9.109.2",
         "@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",
@@ -26,7 +27,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",
@@ -18061,15 +18061,6 @@
         }
       }
     },
-    "node_modules/react-use-gesture": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.1.3.tgz",
-      "integrity": "sha512-CdqA2SmS/fj3kkS2W8ZU8wjTbVBAIwDWaRprX7OKaj7HlGwBasGEFggmk5qNklknqk9zK/h8D355bEJFTpqEMg==",
-      "deprecated": "This package is no longer maintained. Please use @use-gesture/react instead",
-      "peerDependencies": {
-        "react": ">= 16.8.0"
-      }
-    },
     "node_modules/react-use-measure": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
diff --git a/package.json b/package.json
index befbb162..2a4677f1 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@react-spring/three": "9.6.1",
     "@react-three/drei": "^9.109.2",
     "@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",
diff --git a/src/utils/useDrag.ts b/src/utils/useDrag.ts
index 7ac83239..f4526b9e 100644
--- a/src/utils/useDrag.ts
+++ b/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';
 
@@ -63,10 +63,19 @@ export const useDrag = ({
       },
       onDrag: ({ event }) => {
         // 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;
+        let clientX, clientY;
+        if (event instanceof MouseEvent || event instanceof PointerEvent) {
+          clientX = event.clientX;
+          clientY = event.clientY;
+        } else if (event instanceof TouchEvent) {
+          clientX = event.touches[0].clientX;
+          clientY = event.touches[0].clientY;
+        } else {
+          return;
+        }
+
+        const nx = ((clientX - (clientRect?.left ?? 0)) / size.width) * 2 - 1;
+        const ny = -((clientY - (clientRect?.top ?? 0)) / size.height) * 2 + 1;
 
         // Unlike the mouse from useThree, this works offscreen
         mouse2D.set(nx, ny);

From b94a0d30fc4a10284b787853ad2934ca7c221cd2 Mon Sep 17 00:00:00 2001
From: Wey Gu <weyl.gu@gmail.com>
Date: Fri, 26 Jul 2024 14:08:48 +0800
Subject: [PATCH 2/2] fix: wrong impl. for useDrag, addressed by ghsteff

---
 src/utils/useDrag.ts | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/utils/useDrag.ts b/src/utils/useDrag.ts
index f4526b9e..26804b15 100644
--- a/src/utils/useDrag.ts
+++ b/src/utils/useDrag.ts
@@ -61,21 +61,10 @@ export const useDrag = ({
         // Run user callback
         onDragStart();
       },
-      onDrag: ({ event }) => {
+      onDrag: ({ xy }) => {
         // Compute normalized mouse coordinates (screen space)
-        let clientX, clientY;
-        if (event instanceof MouseEvent || event instanceof PointerEvent) {
-          clientX = event.clientX;
-          clientY = event.clientY;
-        } else if (event instanceof TouchEvent) {
-          clientX = event.touches[0].clientX;
-          clientY = event.touches[0].clientY;
-        } else {
-          return;
-        }
-
-        const nx = ((clientX - (clientRect?.left ?? 0)) / size.width) * 2 - 1;
-        const ny = -((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);