From 3eba08ff324cb99a088284678a328a3d9660b5e0 Mon Sep 17 00:00:00 2001
From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com>
Date: Fri, 13 May 2022 19:43:09 +0200
Subject: [PATCH] Merge pull request #159

* Fix raycasting-related perf issues
---
 packages/r3f/src/components/DragDetector.tsx  | 44 +++++++++++++++++++
 packages/r3f/src/components/EditableProxy.tsx | 32 ++++++++++----
 .../r3f/src/components/SnapshotEditor.tsx     |  5 ++-
 3 files changed, 71 insertions(+), 10 deletions(-)
 create mode 100644 packages/r3f/src/components/DragDetector.tsx

diff --git a/packages/r3f/src/components/DragDetector.tsx b/packages/r3f/src/components/DragDetector.tsx
new file mode 100644
index 0000000..d4a56be
--- /dev/null
+++ b/packages/r3f/src/components/DragDetector.tsx
@@ -0,0 +1,44 @@
+import type {
+  FC,
+  ReactNode} from 'react';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+const dragDetectorContext = createContext(false)
+
+interface DragDetectorProviderProps {
+  children: ReactNode
+}
+
+export const DragDetectorProvider: FC<DragDetectorProviderProps> = ({
+  children,
+}) => {
+  const mouseDownRef = useRef(false)
+  const [dragging, setDragging] = useState(false)
+
+  useEffect(() => {
+    document.addEventListener('mousedown', () => (mouseDownRef.current = true))
+    document.addEventListener('mousemove', () => {
+      if (mouseDownRef.current) {
+        setDragging(true)
+      }
+    })
+    document.addEventListener('mouseup', () => {
+      mouseDownRef.current = false
+      setDragging(false)
+    })
+  }, [])
+
+  return (
+    <dragDetectorContext.Provider value={dragging}>
+      {children}
+    </dragDetectorContext.Provider>
+  )
+}
+
+export const useDragDetector = () => useContext(dragDetectorContext)
diff --git a/packages/r3f/src/components/EditableProxy.tsx b/packages/r3f/src/components/EditableProxy.tsx
index bc817a7..dbb94f7 100644
--- a/packages/r3f/src/components/EditableProxy.tsx
+++ b/packages/r3f/src/components/EditableProxy.tsx
@@ -12,6 +12,7 @@ import type {IconID} from '../icons'
 import icons from '../icons'
 import type {Helper} from '../editableFactoryConfigUtils'
 import {invalidate, useFrame, useThree} from '@react-three/fiber'
+import {useDragDetector} from './DragDetector'
 
 export interface EditableProxyProps {
   editableName: string
@@ -28,6 +29,8 @@ const EditableProxy: VFC<EditableProxyProps> = ({
     shallow,
   )
 
+  const dragging = useDragDetector()
+
   const editable = editables[uniqueName]
 
   const selected = useSelected()
@@ -76,6 +79,11 @@ const EditableProxy: VFC<EditableProxyProps> = ({
       helper.update()
     }
   })
+  useEffect(() => {
+    if (dragging) {
+      setHovered(false)
+    }
+  }, [dragging])
 
   return (
     <>
@@ -94,14 +102,22 @@ const EditableProxy: VFC<EditableProxyProps> = ({
             }
           }
         }}
-        onPointerOver={(e) => {
-          e.stopPropagation()
-          setHovered(true)
-        }}
-        onPointerOut={(e) => {
-          e.stopPropagation()
-          setHovered(false)
-        }}
+        onPointerOver={
+          !dragging
+            ? (e) => {
+                e.stopPropagation()
+                setHovered(true)
+              }
+            : undefined
+        }
+        onPointerOut={
+          !dragging
+            ? (e) => {
+                e.stopPropagation()
+                setHovered(false)
+              }
+            : undefined
+        }
       >
         <primitive object={object}>
           {(showOverlayIcons ||
diff --git a/packages/r3f/src/components/SnapshotEditor.tsx b/packages/r3f/src/components/SnapshotEditor.tsx
index 1c26e13..3a5b3ac 100644
--- a/packages/r3f/src/components/SnapshotEditor.tsx
+++ b/packages/r3f/src/components/SnapshotEditor.tsx
@@ -15,6 +15,7 @@ import useSnapshotEditorCamera from './useSnapshotEditorCamera'
 import {getEditorSheet, getEditorSheetObject} from './editorStuff'
 import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import {InfiniteGridHelper} from '../InfiniteGridHelper'
+import {DragDetectorProvider} from './DragDetector'
 
 const GlobalStyle = createGlobalStyle`
   :host {
@@ -54,7 +55,7 @@ const EditorScene: React.FC<{snapshotEditorSheet: ISheet; paneId: string}> = ({
   const grid = useMemo(() => new InfiniteGridHelper(), [])
 
   return (
-    <>
+    <DragDetectorProvider>
       {showGrid && <primitive object={grid} />}
       {showAxes && <axesHelper args={[500]} />}
       {editorCamera}
@@ -62,7 +63,7 @@ const EditorScene: React.FC<{snapshotEditorSheet: ISheet; paneId: string}> = ({
       <primitive object={helpersRoot}></primitive>
       <ProxyManager orbitControlsRef={orbitControlsRef} />
       <color attach="background" args={[0.24, 0.24, 0.24]} />
-    </>
+    </DragDetectorProvider>
   )
 }