Create smooth record and playback of tracking.

1 files changed, 32 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e2ea81392..75855f5d9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -50,6 +50,7 @@ import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCurso
 import "./CollectionFreeFormView.scss";
 import { MarqueeView } from "./MarqueeView";
 import React = require("react");
+import e = require("connect-flash");
 
 export const panZoomSchema = createSchema({
     _panX: "number",
@@ -117,6 +118,8 @@ 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 presenting 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(); }
@@ -956,8 +959,37 @@ 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);