1 files changed, 45 insertions, 9 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