fix update order to prevent transform & pivot handles size flickering when drastic position changes occur

Author: bbohlender

packages/handle/src/computations/utils.ts

@@ -396,8 +396,9 @@ function projectOntoPlane(
 ): void {
   normalHelper.crossVectors(_axis1, _axis2).normalize()
   planeHelper.setFromNormalAndCoplanarPoint(normalHelper, initialWorldPoint)
+  const angleDifference = worldDirection == null ? 0 : Math.abs(normalHelper.dot(worldDirection))
 
-  if (worldDirection == null) {
+  if (worldDirection == null || angleDifference < 0.01) {
     //project point onto plane
     planeHelper.projectPoint(worldPoint, worldPoint)
     return
@@ -426,7 +427,8 @@ export function projectOntoAxis(
   worldPoint: Vector3,
   worldDirection: Vector3 | undefined,
 ): void {
-  if (worldDirection == null) {
+  const angleDifference = worldDirection == null ? 0 : 1 - Math.abs(axis.dot(worldDirection))
+  if (worldDirection == null || angleDifference < 0.001) {
     projectPointOntoAxis(worldPoint, initialWorldPoint, axis)
     return
   }

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

@@ -45,7 +45,7 @@ export const PivotHandlesContext = forwardRef<Group, PivotHandlesContextProperti
     const optionsRef = useRef(options)
     optionsRef.current = options
     const context = useMemo(() => new HandlesContextImpl(internalRef, () => optionsRef.current), [])
-    useFrame((state) => context.update(state.clock.getElapsedTime()))
+    useFrame((state) => context.update(state.clock.getElapsedTime()), -1)
     return (
       <group {...props} ref={internalRef}>
         <HandlesContext.Provider value={context}>{children}</HandlesContext.Provider>

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

@@ -75,7 +75,7 @@ export const TransformHandlesContext = forwardRef<Group, TransformHandlesContext
     if (space !== null) {
       context.space = space
     }
-    useFrame((state) => context.update(state.clock.getElapsedTime()))
+    useFrame((state) => context.update(state.clock.getElapsedTime()), -1)
     return (
       <group {...props} ref={internalRef}>
         <HandlesContext.Provider value={context}>{children}</HandlesContext.Provider>

packages/react/handle/src/hook.ts

@@ -28,7 +28,7 @@ export function useHandle<T>(
     () => new HandleStore(target, () => ({ ...getHandleOptionsRef.current?.(), ...optionsRef.current })),
     [target],
   )
-  useFrame((state) => store.update(state.clock.getElapsedTime()))
+  useFrame((state) => store.update(state.clock.getElapsedTime()), -1)
   const handleRef = options.handle ?? target
   useEffect(() => {
     if (options.bind === false) {