3 files changed, 28 insertions, 25 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index a77a28aa7..fb3304e1f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -20,7 +20,7 @@ import React = require("react");
 import v5 = require("uuid/v5");
 import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCursors";
 import { PreviewCursor } from "./PreviewCursor";
-import { Timeline } from "../../nodes/Timeline"
+import { Timeline } from "../../nodes/Timeline";
 import { DocumentManager } from "../../../util/DocumentManager";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { NumberField } from "../../../../fields/NumberField";
@@ -285,6 +285,7 @@ export class CollectionFreeFormView extends CollectionSubView {
             }
             return prev;
         }, [] as JSX.Element[]);
+      
     }
 
     @computed
@@ -313,7 +314,7 @@ export class CollectionFreeFormView extends CollectionSubView {
         const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
 
         return (
-            <Measure onResize={(r: any) => runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height })}>
+            <Measure onResize={(r: any) => runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height; })}>
                 {({ measureRef }) => (
                     <div className={`collectionfreeformview-measure`} ref={measureRef}>
                         <div className={`collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`}
@@ -337,7 +338,8 @@ export class CollectionFreeFormView extends CollectionSubView {
                                     </div>
                                     {this.overlayView}
                                 </PreviewCursor>
-                                <Timeline />
+                                
+                                <Timeline {...this.getDocumentViewProps(this.props.Document)} />
                             </MarqueeView>
                         </div>
                     </div>)}
diff --git a/src/client/views/nodes/KeyFrame.tsx b/src/client/views/nodes/KeyFrame.tsx
index adc97fe4a..223e8f962 100644
--- a/src/client/views/nodes/KeyFrame.tsx
+++ b/src/client/views/nodes/KeyFrame.tsx
@@ -3,11 +3,13 @@ export class KeyFrame{
     constructor(){
         this._document = new Document(); 
         
+        
     }
 
-
     get document(){
+        console.log(this._document); 
         return this._document; 
+        
     }
 
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index c6aa0b146..42e434413 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -6,9 +6,13 @@ import "./Timeline.scss";
 import { KeyStore } from "../../../fields/KeyStore";
 import { Document } from "../../../fields/Document";
 import { KeyFrame } from "./KeyFrame";
+import { CollectionViewProps } from "../collections/CollectionBaseView";
+import { CollectionSubView } from "../collections/CollectionSubView"; 
+import { DocumentViewProps } from "./DocumentView";
+
 
 @observer
-export class Timeline extends React.Component {
+export class Timeline extends React.Component<DocumentViewProps> {
     @observable private _inner = React.createRef<HTMLDivElement>();
     @observable private _isRecording: Boolean = false;
     @observable private _currentBar: any = null;
@@ -23,16 +27,8 @@ export class Timeline extends React.Component {
     onStop = (e: React.MouseEvent) => {
         this._isRecording = false;
         if (this._inner.current) {
-            this._newBar = document.createElement("div");
-            this._newBar.style.height = "100%";
-            this._newBar.style.width = "5px";
-            this._newBar.style.left = this._currentBar.style.left;
-            this._newBar.style.backgroundColor = "yellow";
-            this._newBar.style.transform = this._currentBar.style.transform;
-            this._inner.current.appendChild(this._newBar);
+            
         }
-        this._currentBar.remove();
-        this._currentBar = null;
     }
 
     @action
@@ -62,17 +58,20 @@ export class Timeline extends React.Component {
     }
     componentDidMount() {
         this.createBar(5);
-        // let doc: Document;
-        // let keyFrame = new KeyFrame(); 
-        // this._keyFrames.push(keyFrame); 
-        // let keys = [KeyStore.X, KeyStore.Y];
-        // reaction(() => {
-        //     return keys.map(key => doc.GetNumber(key, 0));
-        // }, data => {
-        //     keys.forEach((key, index) => {
-        //         keyFrame.document().SetNumber(key, data[index]);
-        //     });
-        // });
+        let doc: Document = this.props.Document;
+        console.log(doc.Get(KeyStore.BackgroundColor)); 
+        let keyFrame = new KeyFrame(); 
+        this._keyFrames.push(keyFrame); 
+        let keys = [KeyStore.X, KeyStore.Y];
+        reaction(() => {       
+            return keys.map(key => doc.GetNumber(key, 0));
+        }, data => {
+            keys.forEach((key, index) => {
+                keyFrame.document().SetNumber(key, data[index]);
+            });
+        });
+
+        console.log(keyFrame.document +  "Document"); 
     }
 
     render() {