From 5b05e4f916c5555fd3ccf833181a08635926a05d Mon Sep 17 00:00:00 2001
From: Chung Min Kim <chungmin99@gmail.com>
Date: Thu, 28 Sep 2023 16:47:47 -0700
Subject: [PATCH 1/2] Account for minimum motion for node clicks

---
 src/viser/client/src/SceneTree.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/viser/client/src/SceneTree.tsx b/src/viser/client/src/SceneTree.tsx
index 421786e43..7bc989b42 100644
--- a/src/viser/client/src/SceneTree.tsx
+++ b/src/viser/client/src/SceneTree.tsx
@@ -113,6 +113,12 @@ export function SceneNodeThreeObject(props: {
     false;
   const [obj, setRef] = React.useState<THREE.Object3D | null>(null);
 
+  const dragInfo = React.useRef({
+    dragging: false,
+    startClientX: 0,
+    startClientY: 0,
+  });
+
   // Create object + children.
   //
   // For not-fully-understood reasons, wrapping makeObject with useMemo() fixes
@@ -219,11 +225,20 @@ export function SceneNodeThreeObject(props: {
           onPointerDown={(e) => {
             if (!isDisplayed()) return;
             e.stopPropagation();
+            const state = dragInfo.current;
+            state.startClientX = e.clientX;
+            state.startClientY = e.clientY;
             setDragged(false);
           }}
           onPointerMove={(e) => {
             if (!isDisplayed()) return;
             e.stopPropagation();
+            const state = dragInfo.current;
+            const deltaX = e.clientX - state.startClientX;
+            const deltaY = e.clientY - state.startClientY;
+            // Minimum motion.
+            console.log(deltaX, deltaY);
+            if (Math.abs(deltaX) <= 3 && Math.abs(deltaY) <= 3) return;
             setDragged(true);
           }}
           onPointerUp={(e) => {

From 60b846a566d16bc46aa9736d892c5d1868a7cf93 Mon Sep 17 00:00:00 2001
From: Chung Min Kim <chungmin99@gmail.com>
Date: Thu, 28 Sep 2023 17:49:15 -0700
Subject: [PATCH 2/2] Remove stale useref

---
 src/viser/client/src/SceneTree.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/viser/client/src/SceneTree.tsx b/src/viser/client/src/SceneTree.tsx
index 7bc989b42..8f7918e1c 100644
--- a/src/viser/client/src/SceneTree.tsx
+++ b/src/viser/client/src/SceneTree.tsx
@@ -206,7 +206,6 @@ export function SceneNodeThreeObject(props: {
     50
   );
   const [hovered, setHovered] = React.useState(false);
-  const [dragged, setDragged] = React.useState(false);
   useCursor(hovered);
   if (!clickable && hovered) setHovered(false);
 
@@ -228,7 +227,7 @@ export function SceneNodeThreeObject(props: {
             const state = dragInfo.current;
             state.startClientX = e.clientX;
             state.startClientY = e.clientY;
-            setDragged(false);
+            state.dragging = false;
           }}
           onPointerMove={(e) => {
             if (!isDisplayed()) return;
@@ -239,12 +238,13 @@ export function SceneNodeThreeObject(props: {
             // Minimum motion.
             console.log(deltaX, deltaY);
             if (Math.abs(deltaX) <= 3 && Math.abs(deltaY) <= 3) return;
-            setDragged(true);
+            state.dragging = true;
           }}
           onPointerUp={(e) => {
             if (!isDisplayed()) return;
             e.stopPropagation();
-            if (dragged) return;
+            const state = dragInfo.current;
+            if (state.dragging) return;
             sendClicksThrottled({
               type: "SceneNodeClickedMessage",
               name: props.name,