1 files changed, 32 insertions, 30 deletions

diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index a64e1a7a8..4b6767e7d 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -20,9 +20,11 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
     @observable private _currentBar: any = null;
     @observable private _newBar: any = null;
     private _reactionDisposers: IReactionDisposer[] = [];
-    private _keyFrames: KeyFrame[] = [];
+    private _keyFrames: HTMLDivElement[] = [];
+    private _currentBarX:number = 0; 
     @observable private _onBar: Boolean = false;
 
+
     @action
     onRecord = (e: React.MouseEvent) => {
         this._isRecording = true;
@@ -30,16 +32,16 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
 
     @action
     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.backgroundColor = "yellow";
-            this._newBar.style.position = "absolute";
-            this._newBar.style.transform = this._currentBar.style.transform;
-            this._inner.current.appendChild(this._newBar);
-        }
+        // 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.backgroundColor = "yellow";
+        //     this._newBar.style.position = "absolute";
+        //     this._newBar.style.transform = this._currentBar.style.transform;
+        //     this._inner.current.appendChild(this._newBar);
+        // }
     }
 
     @action
@@ -48,6 +50,7 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
             if (this._inner.current) {
                 let mouse = e.nativeEvent;
                 this._currentBar.style.transform = `translate(${mouse.offsetX}px)`;
+                this._currentBarX = mouse.offsetX; 
             }
         }
     }
@@ -56,18 +59,15 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
 
     }
 
-    createBar = (width: number) => {
-        if (this._inner.current) {
-            this._currentBar = document.createElement("div");
-            this._currentBar.style.height = "100%";
-            this._currentBar.style.width = `${width}px`;
-            this._currentBar.style.left = "mouse.offsetX";
-            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);
-        }
+    createBar = (width: number, pos = 0, color = "green"):HTMLDivElement => {
+        let bar  = document.createElement("div");
+        bar.style.height = "100%";
+        bar.style.width = `${width}px`;
+        bar.style.left = "mouse.offsetX";
+        bar.style.backgroundColor = color;
+        bar.style.transform = `translate(${pos}px)`;
+        bar.style.position = "absolute";
+        return bar; 
     }
 
     selectFrame = (e: React.PointerEvent) => {
@@ -76,22 +76,24 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
     }
 
     componentDidMount() {
-        this.createBar(5);
+        if (this._inner.current && this._currentBar === null){
+            this._currentBar = this.createBar(5); 
+            this._inner.current.appendChild(this._currentBar); 
+        }
         let doc: Document = this.props.Document;
         let childrenList = this.props.Document.GetList(this.props.fieldKey, [] as Document[]);
         // let keyFrame = new KeyFrame(); //should not be done here...
         // this._keyFrames.push(keyFrame);
         let keys = [KeyStore.X, KeyStore.Y];
         const addReaction = (element: Document) => {
+            let keyFrame = new KeyFrame();
+            if (this._inner.current){
+                this._inner.current.appendChild(this.createBar(5, this._currentBarX, "orange")); 
+            }
             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!"); //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...)