Account for minimum motion for node clicks (#109)

* Account for minimum motion for node clicks

* Remove stale useref

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
@@ -200,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);
 
@@ -219,17 +224,27 @@ export function SceneNodeThreeObject(props: {
           onPointerDown={(e) => {
             if (!isDisplayed()) return;
             e.stopPropagation();
-            setDragged(false);
+            const state = dragInfo.current;
+            state.startClientX = e.clientX;
+            state.startClientY = e.clientY;
+            state.dragging = false;
           }}
           onPointerMove={(e) => {
             if (!isDisplayed()) return;
             e.stopPropagation();
-            setDragged(true);
+            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;
+            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,