2 files changed, 45 insertions, 41 deletions

diff --git a/src/client/apis/recording/recordingApi.ts b/src/client/apis/recording/recordingApi.ts
index 9ad7b5165..50d6f8038 100644
--- a/src/client/apis/recording/recordingApi.ts
+++ b/src/client/apis/recording/recordingApi.ts
@@ -1,6 +1,7 @@
 import { CollectionFreeFormView } from "../../views/collections/collectionFreeForm";
 import React, { useState } from "react";
-import { observable, observe } from "mobx";
+import { IReactionDisposer, observable, reaction } from "mobx";
+import { NumCast } from "../../../fields/Types";
 
 type Movement = {
     time: number,
@@ -39,6 +40,9 @@ export class RecordingApi {
         this.currentPresentation = RecordingApi.NULL_PRESENTATION
         this.isRecording = false;
         this.absoluteStart = -1;
+
+        // used for tracking movements in the view frame
+        this.disposeFunc = null;
     }
 
     // little helper :)
@@ -79,6 +83,9 @@ export class RecordingApi {
         this.isRecording = false
         // clear absoluteStart
         this.absoluteStart = -1
+
+        // clear the disposeFunc
+        this.disposeFunc = null
     }
 
     public pause = (): Error | undefined => {
@@ -117,7 +124,7 @@ export class RecordingApi {
         return { ...this.currentPresentation }
     }
 
-    public trackMovements = (panX: number, panY: number): Error | undefined => {
+    private trackMovements = (panX: number, panY: number): Error | undefined => {
         // ensure we are recording
         if (!this.isRecording) {
              console.error('[recordingApi.ts] pause() failed: recording is paused()')
@@ -151,13 +158,42 @@ export class RecordingApi {
         })
     }
 
-    // observer that can be updated to track the relevant FreeFormView
-    // public setFreeFormView = (view: CollectionFreeFormView): void => {
-    //     observe(view, 'Document', (change) => {
-    //         if (change.name === '_panX') {
-    //             this.trackMovements(view.Document._panX, view.Document._panY)
-    //         }
-    //     }
+    // instance variable for the FFView
+    private disposeFunc: IReactionDisposer | null;
+    
+    // set the FFView that will be used in a reaction to track the movements
+    public setRecordingFFView = (view: CollectionFreeFormView): void => {
+        // set the view to the current view
+        if (view === null) return;
+        
+        //this.recordingFFView = view;
+        // set the reaction to track the movements
+        this.disposeFunc = reaction(
+            () => ({ x: NumCast(view.Document.panX, -1), y: NumCast(view.Document.panY, -1) }),
+            (res) => (res.x !== -1 && res.y !== -1) && this.trackMovements(res.x, res.y)
+        )
+    }
+
+    // call on dispose function to stop tracking movements
+    public removeRecordingFFView = (): void => {
+        this.disposeFunc?.();
+        this.disposeFunc = null;
+    }
+
+
+    // export let pres: Map<CollectionFreeFormView, IReactionDisposer> = new Map()
+
+    // export function AddRecordingFFView(ffView: CollectionFreeFormView): void {
+    //     pres.set(ffView,
+    //          reaction(() => ({ x: ffView.panX, y: ffView.panY }),
+    //     (pt) => RecordingApi.trackMovements(ffView, pt.x, pt.y)))
+    //     )
+    // }
+
+    // export function RemoveRecordingFFView(ffView: CollectionFreeFormView): void {
+    //     const disposer = pres.get(ffView);
+    //     disposer?.();
+    //     pres.delete(ffView)
     // }
 
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 1db90a65a..100526983 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -118,8 +118,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @observable _keyframeEditing = false;
     @observable ChildDrag: DocumentView | undefined; // child document view being dragged.  needed to update drop areas of groups when a group item is dragged.
 
-    @observable storedMovements: object[] = []; // stores the movement if in recoding mode
-
     @computed get views() { return this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z).map(ele => ele.ele); }
     @computed get backgroundEvents() { return this.props.layerProvider?.(this.layoutDoc) === false && SnappingManager.GetIsDragging(); }
     @computed get backgroundActive() { return this.props.layerProvider?.(this.layoutDoc) === false && this.props.isContentActive(); }
@@ -959,38 +957,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
     }
 
-
-    followMovements = (): void => {
-        // need the first for subtraction
-        let first = null;
-
-        this.storedMovements.forEach(movement => {
-            if (first === null) first = movement.time;
-
-            // set the pan to what was stored
-            setTimeout(() => {
-                this.Document._panX = movement.panX;
-                this.Document._panY = movement.panY;
-            }, movement.time - first)
-        })
-
-        // for now, clear the movements
-        this.storedMovements = []
-    }
-
     @action
     setPan(panX: number, panY: number, panTime: number = 0, clamp: boolean = false) {
-        // if not presenting, just retrace the movements
-        if (Doc.UserDoc()?.presentationMode === 'watching') {
-            this.followMovements()
-            return;
-        }
-
-        if (Doc.UserDoc()?.presentationMode === 'recording') {
-            // store as many movments as possible
-            this.storedMovements.push({time: new Date().getTime(), panX, panY})
-        }
-
         if (!this.isAnnotationOverlay && clamp) {
             // this section wraps the pan position, horizontally and/or vertically whenever the content is panned out of the viewing bounds
             const docs = this.childLayoutPairs.map(pair => pair.layout).filter(doc => doc instanceof Doc);