diff options
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 59 |
1 files changed, 31 insertions, 28 deletions
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 |