disable default controls while dragging the pivot or transform handles

Author: bbohlender

packages/react/handle/src/handles/pivot.tsx

@@ -7,6 +7,7 @@ import {
 import { ThreeElements, useFrame } from '@react-three/fiber'
 import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { Group } from 'three'
+import { useApplyThatDisablesDefaultControls } from './utils.js'
 
 export type PivotHandlesProperties = PivotHandlesContextProperties & PivotHandlesHandlesProperties
 
@@ -37,9 +38,10 @@ export const PivotHandlesContext = forwardRef<Group, PivotHandlesContextProperti
   ({ alwaysUpdate, apply, stopPropagation, children, ...props }, ref) => {
     const internalRef = useRef<Group>(null)
     useImperativeHandle(ref, () => internalRef.current!, [])
+    const applyThatDisablesControls = useApplyThatDisablesDefaultControls(apply)
     const options: HandleOptions<any> = {
       alwaysUpdate,
-      apply,
+      apply: applyThatDisablesControls,
       stopPropagation,
     }
     const optionsRef = useRef(options)

packages/react/handle/src/handles/transform.tsx

@@ -11,6 +11,7 @@ import {
 import { ThreeElements, useFrame } from '@react-three/fiber'
 import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { Euler, Group, Vector2Tuple } from 'three'
+import { useApplyThatDisablesDefaultControls } from './utils.js'
 
 export type TransformHandlesProperties = TransformHandlesContextProperties & TransformHandlesHandlesProperties
 
@@ -60,10 +61,11 @@ export type TransformHandlesContextProperties = Omit<ThreeElements['group'], 'sc
 export const TransformHandlesContext = forwardRef<Group, TransformHandlesContextProperties>(
   ({ alwaysUpdate, apply, stopPropagation, children, context: providedContext, space, ...props }, ref) => {
     const internalRef = useRef<Group>(null)
+    const applyThatDisablesControls = useApplyThatDisablesDefaultControls(apply)
     useImperativeHandle(ref, () => internalRef.current!, [])
     const options: HandleOptions<any> = {
       alwaysUpdate,
-      apply,
+      apply: applyThatDisablesControls,
       stopPropagation,
     }
     const optionsRef = useRef(options)

packages/react/handle/src/handles/utils.ts

@@ -0,0 +1,24 @@
+import { defaultApply, HandleOptions, HandleState } from '@pmndrs/handle'
+import { useThree } from '@react-three/fiber'
+import { useCallback } from 'react'
+import { Object3D } from 'three'
+
+type ControlsProto = {
+  enabled: boolean
+}
+
+export function useApplyThatDisablesDefaultControls<T>(apply: HandleOptions<T>['apply']): HandleOptions<T>['apply'] {
+  const controls = useThree((s) => s.controls as unknown as ControlsProto | undefined)
+  return useCallback(
+    (state: HandleState<T>, target: Object3D) => {
+      if (controls != null && state.first) {
+        controls.enabled = false
+      }
+      if (controls != null && state.last) {
+        controls.enabled = true
+      }
+      return (apply ?? defaultApply)(state, target)
+    },
+    [apply, controls],
+  )
+}