Merge pull request #159

* Fix raycasting-related perf issues

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)

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) => {
+        onPointerOver={
+          !dragging
+            ? (e) => {
                 e.stopPropagation()
                 setHovered(true)
-        }}
+              }
-        onPointerOut={(e) => {
+            : undefined
+        }
+        onPointerOut={
+          !dragging
+            ? (e) => {
                 e.stopPropagation()
                 setHovered(false)
-        }}
+              }
+            : undefined
+        }
       >
         <primitive object={object}>
           {(showOverlayIcons ||

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>
   )
 }