2 files changed, 58 insertions, 15 deletions

diff --git a/src/client/views/nodes/KeyFrame.tsx b/src/client/views/nodes/KeyFrame.tsx
new file mode 100644
index 000000000..adc97fe4a
--- /dev/null
+++ b/src/client/views/nodes/KeyFrame.tsx
@@ -0,0 +1,13 @@
+export class KeyFrame{
+    private _document:any; 
+    constructor(){
+        this._document = new Document(); 
+        
+    }
+
+
+    get 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 45e37dd8a..321f91471 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -1,35 +1,65 @@
 import * as React from "react"
 import * as ReactDOM from "react-dom"
 import { observer } from "mobx-react"
-import { observable, reaction } from "mobx"
-import { TimelineField } from "../../../fields/TimelineField";
+import { observable, reaction, action} from "mobx"
 import "./Timeline.scss"
 import { KeyStore } from "../../../fields/KeyStore";
 import { Document } from "../../../fields/Document";
+import { KeyFrame } from "./KeyFrame";
 
 @observer
-export class Timeline extends React.Component<TimelineField>{
+export class Timeline extends React.Component{
+    @observable private _inner = React.createRef<HTMLDivElement>(); 
+    @observable private _isRecording:Boolean = false;
+    @observable private _currentBar:any; 
 
-    private _isRecording = false;
+    @action
     onRecord = (e: React.MouseEvent) => {
         this._isRecording = true;
     }
 
+    @action
     onStop = (e: React.MouseEvent) => {
         this._isRecording = false;
     }
 
+    @action
+    onInnerPointerDown = (e:React.PointerEvent) => {
+        if (this._isRecording) {
+            if (this._inner.current){
+                if (this._currentBar == null){
+                    let mouse = e.nativeEvent; 
+                    let _currentBar = document.createElement("div"); 
+                    _currentBar.style.height = "100%"; 
+                    _currentBar.style.width = "5px"
+                    _currentBar.style.left = "mouse.offsetX"; 
+                    _currentBar.style.backgroundColor = "white"
+                    _currentBar.style.transform = `translate(${mouse.offsetX}px)`; 
+                    this._inner.current.appendChild(_currentBar); 
+                } else {
+                    this._currentBar.remove()
+                    this._currentBar = null; 
+                }
+                
+            }
+        }
+    }
+
+
+    private _keyFrames:KeyFrame[] = []; 
+
     componentDidMount() {
-        let doc: Document;
-        let keyFrame: Document;
-        let keys = [KeyStore.X, KeyStore.Y];
-        reaction(() => {
-            return keys.map(key => doc.GetNumber(key, 0));
-        }, data => {
-            keys.forEach((key, index) => {
-                keyFrame.SetNumber(key, data[index]);
-            });
-        });
+        // 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]);
+        //     });
+        // });
     }
 
     render() {
@@ -37,7 +67,7 @@ export class Timeline extends React.Component<TimelineField>{
             <div>
                 <div className="timeline-container">
                     <div className="timeline">
-                        <div className="inner">
+                        <div className="inner" ref = {this._inner} onPointerDown  = {this.onInnerPointerDown}>
                         </div>
                     </div>
                     <button>Record</button>