diff --git a/src/viser/client/src/SceneTree.tsx b/src/viser/client/src/SceneTree.tsx index 421786e43..8f7918e1c 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(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,