From 466ed4b7abb1ddf9a101d573c2ab720f1c47b527 Mon Sep 17 00:00:00 2001
From: Andrew Kim <andrewdkim@users.noreply.github.com>
Date: Mon, 15 Apr 2019 18:00:29 -0400
Subject: clickable pointer

---
 src/client/views/nodes/Timeline.tsx | 59 +++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 28 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 321f91471..7881bf7fd 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -1,21 +1,22 @@
-import * as React from "react"
-import * as ReactDOM from "react-dom"
-import { observer } from "mobx-react"
-import { observable, reaction, action} from "mobx"
-import "./Timeline.scss"
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { observer } from "mobx-react";
+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{
-    @observable private _inner = React.createRef<HTMLDivElement>(); 
-    @observable private _isRecording:Boolean = false;
-    @observable private _currentBar:any; 
+export class Timeline extends React.Component {
+    @observable private _inner = React.createRef<HTMLDivElement>();
+    @observable private _isRecording: Boolean = false;
+    @observable private _currentBar: any = null;
 
     @action
     onRecord = (e: React.MouseEvent) => {
         this._isRecording = true;
+        console.log("hello");
     }
 
     @action
@@ -24,29 +25,31 @@ export class Timeline extends React.Component{
     }
 
     @action
-    onInnerPointerDown = (e:React.PointerEvent) => {
+    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); 
+            if (this._inner.current) {
+                if (this._currentBar === null) {
+                    console.log("rr");
+                    let mouse = e.nativeEvent;
+                    this._currentBar = document.createElement("div");
+                    this._currentBar.style.height = "100%";
+                    this._currentBar.style.width = "5px";
+                    this._currentBar.style.left = "mouse.offsetX";
+                    this._currentBar.style.backgroundColor = "white";
+                    this._currentBar.style.transform = `translate(${mouse.offsetX}px)`;
+                    this._inner.current.appendChild(this._currentBar);
                 } else {
-                    this._currentBar.remove()
-                    this._currentBar = null; 
+                    this._currentBar.remove();
+                    this._currentBar = null;
+                    this.onInnerPointerDown(e); 
                 }
-                
+
             }
         }
     }
 
 
-    private _keyFrames:KeyFrame[] = []; 
+    private _keyFrames: KeyFrame[] = [];
 
     componentDidMount() {
         // let doc: Document;
@@ -67,14 +70,14 @@ export class Timeline extends React.Component{
             <div>
                 <div className="timeline-container">
                     <div className="timeline">
-                        <div className="inner" ref = {this._inner} onPointerDown  = {this.onInnerPointerDown}>
+                        <div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown}>
                         </div>
                     </div>
-                    <button>Record</button>
-                    <button> Stop </button>
+                    <button onClick = {this.onRecord}>Record</button>
+                    <button onClick = {this.onStop}> Stop </button>
                     <input placeholder="Time"></input>
                 </div>
             </div>
-        )
+        );
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2