1 files changed, 17 insertions, 6 deletions

diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 4e6fe567c..a64e1a7a8 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -21,6 +21,7 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
     @observable private _newBar: any = null;
     private _reactionDisposers: IReactionDisposer[] = [];
     private _keyFrames: KeyFrame[] = [];
+    @observable private _onBar: Boolean = false;
 
     @action
     onRecord = (e: React.MouseEvent) => {
@@ -30,7 +31,7 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
     @action
     onStop = (e: React.MouseEvent) => {
         this._isRecording = false;
-        if (this._inner.current) { //if you comment this section out it works as before...
+        if (this._inner.current) {
             this._newBar = document.createElement("div");
             this._newBar.style.height = "100%";
             this._newBar.style.width = "5px";
@@ -64,26 +65,36 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
             this._currentBar.style.backgroundColor = "green";
             this._currentBar.style.transform = `translate(${0}px)`;
             this._currentBar.style.position = "absolute";
+            this._currentBar.onPointerDown(this.selectFrame);
             this._inner.current.appendChild(this._currentBar);
         }
+    }
 
+    selectFrame = (e: React.PointerEvent) => {
+        this._onBar = true; //where to set back to false?
+        //let frame = document.getSelectedElement(e)
     }
 
     componentDidMount() {
         this.createBar(5);
         let doc: Document = this.props.Document;
         let childrenList = this.props.Document.GetList(this.props.fieldKey, [] as Document[]);
-        let keyFrame = new KeyFrame();
-        this._keyFrames.push(keyFrame);
+        // let keyFrame = new KeyFrame(); //should not be done here...
+        // this._keyFrames.push(keyFrame);
         let keys = [KeyStore.X, KeyStore.Y];
         const addReaction = (element: Document) => {
             return reaction(() => {
                 return keys.map(key => element.GetNumber(key, 0));
             }, data => {
+                let keyFrame = new KeyFrame();
+                if (this._onBar) { //need to set value of onBar somewhere... -> if already on key frame use this keyframe
+                    // keyFrame = function that returns current keyFrame;
+                } else { //else create new keyframe
+                    this._keyFrames.push(keyFrame);
+                }
                 keys.forEach((key, index) => {
-                    console.log("moved!"); //now need to store key frames -> create a way to do this (data structure??)
-                    this._keyFrames.push(); //change thisss
-                    //keyFrame.document().SetNumber(key, data[index]);
+                    console.log("moved!"); //store key frames -> need to create a way to do this (data structure??)
+                    keyFrame.document().SetNumber(key, data[index]); //Tyler working on better Doc.ts functions...(this is currently not comprehensive...)
                 });
             });
         };