From a3b1938d4307ba70d4fd6ae18f56c01ffb9ba759 Mon Sep 17 00:00:00 2001
From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com>
Date: Fri, 6 May 2022 14:07:29 +0200
Subject: [PATCH] Remove `debouncedScrub()` from r3f (#147)

---
 packages/r3f/src/components/ProxyManager.tsx  | 20 ++++++++++++-------
 .../components/useSnapshotEditorCamera.tsx    | 10 ++++++----
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/r3f/src/components/ProxyManager.tsx b/packages/r3f/src/components/ProxyManager.tsx
index 578fcae..596e69e 100644
--- a/packages/r3f/src/components/ProxyManager.tsx
+++ b/packages/r3f/src/components/ProxyManager.tsx
@@ -6,8 +6,8 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import type {Editable} from '../store';
-import { useEditorStore} from '../store'
+import type {Editable} from '../store'
+import {useEditorStore} from '../store'
 import {createPortal} from '@react-three/fiber'
 import EditableProxy from './EditableProxy'
 import type {OrbitControls} from 'three-stdlib'
@@ -15,6 +15,7 @@ import TransformControls from './TransformControls'
 import shallow from 'zustand/shallow'
 import type {Material, Mesh, Object3D} from 'three'
 import {MeshBasicMaterial, MeshPhongMaterial} from 'three'
+import type {IScrub} from '@theatre/studio';
 import studio from '@theatre/studio'
 import {useSelected} from './useSelected'
 import {useVal} from '@theatre/react'
@@ -213,9 +214,7 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
     })
   }, [viewportShading, renderMaterials, sceneProxy])
 
-  const scrub = useMemo(() => {
-    return studio.debouncedScrub(1000)
-  }, [selected, editableProxyOfSelected])
+  const scrub = useRef<IScrub>(undefined!)
 
   if (!sceneProxy) {
     return null
@@ -237,7 +236,7 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
               const sheetObject = editableProxyOfSelected.editable.sheetObject
               const obj = editableProxyOfSelected.object
 
-              scrub.capture(({set}) => {
+              scrub.current.capture(({set}) => {
                 set(sheetObject.props, {
                   ...sheetObject.value,
                   position: {
@@ -258,7 +257,14 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
                 })
               })
             }}
-            onDraggingChange={(event) => (isBeingEdited.current = event.value)}
+            onDraggingChange={(event) => {
+              if (event.value) {
+                scrub.current = studio.scrub()
+              } else {
+                scrub.current.commit()
+              }
+              return (isBeingEdited.current = event.value)
+            }}
           />
         )}
       {Object.values(editableProxies).map(
diff --git a/packages/r3f/src/components/useSnapshotEditorCamera.tsx b/packages/r3f/src/components/useSnapshotEditorCamera.tsx
index 8e81d50..a26c88c 100644
--- a/packages/r3f/src/components/useSnapshotEditorCamera.tsx
+++ b/packages/r3f/src/components/useSnapshotEditorCamera.tsx
@@ -4,6 +4,7 @@ import type {MutableRefObject} from 'react'
 import {useLayoutEffect, useRef} from 'react'
 import React from 'react'
 import useRefAndState from './useRefAndState'
+import type {IScrub} from '@theatre/studio';
 import studio from '@theatre/studio'
 import type {PerspectiveCamera as PerspectiveCameraImpl} from 'three'
 import type {ISheet} from '@theatre/core'
@@ -88,17 +89,18 @@ function usePassValuesFromOrbitControlsToTheatre(
   useLayoutEffect(() => {
     if (!cam || orbitControls == null) return
 
-    let currentScrub: undefined | ReturnType<typeof studio['debouncedScrub']>
+    let currentScrub: undefined | IScrub
 
     let started = false
 
     const onStart = () => {
       started = true
-      if (!currentScrub) {
-        currentScrub = studio.debouncedScrub(600)
-      }
+      currentScrub = studio.scrub()
     }
     const onEnd = () => {
+      if (currentScrub) {
+        currentScrub.commit()
+      }
       started = false
     }