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 = ({ + 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 ( + + {children} + + ) +} + +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 = ({ shallow, ) + const dragging = useDragDetector() + const editable = editables[uniqueName] const selected = useSelected() @@ -76,6 +79,11 @@ const EditableProxy: VFC = ({ helper.update() } }) + useEffect(() => { + if (dragging) { + setHovered(false) + } + }, [dragging]) return ( <> @@ -94,14 +102,22 @@ const EditableProxy: VFC = ({ } } }} - 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 + } > {(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 ( - <> + {showGrid && } {showAxes && } {editorCamera} @@ -62,7 +63,7 @@ const EditorScene: React.FC<{snapshotEditorSheet: ISheet; paneId: string}> = ({ - + ) }