diff options
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 50 |
1 files changed, 11 insertions, 39 deletions
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index 5f4eab796..164a2db2c 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -22,10 +22,7 @@ export class Timeline extends React.Component<SubCollectionViewProps> { private _reactionDisposers: IReactionDisposer[] = []; private _keyFrames: HTMLDivElement[] = []; private _actualKeyFrame: KeyFrame[] = []; - - private _currentBarX:number = 0; - @observable private _onBar: Boolean = false; - + private _currentBarX: number = 0; @action onRecord = (e: React.MouseEvent) => { @@ -33,54 +30,31 @@ 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); - // } - } - - @action onInnerPointerDown = (e: React.PointerEvent) => { if (this._isRecording) { if (this._inner.current) { let mouse = e.nativeEvent; this._currentBar.style.transform = `translate(${mouse.offsetX}px)`; - this._currentBarX = mouse.offsetX; + this._currentBarX = mouse.offsetX; } } } - createMark = (width: number) => { - - } - - createBar = (width: number, pos = 0, color = "green"):HTMLDivElement => { - let bar = document.createElement("div"); + 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) => { - this._onBar = true; //where to set back to false? - //let frame = document.getSelectedElement(e) + return bar; } componentDidMount() { - if (this._inner.current && this._currentBar === null){ - this._currentBar = this.createBar(5); - this._inner.current.appendChild(this._currentBar); + 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[]); @@ -88,14 +62,12 @@ export class Timeline extends React.Component<SubCollectionViewProps> { // 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._inner.current){ - this._inner.current.appendChild(this.createBar(5, this._currentBarX, "orange")); - + if (this._inner.current) { + this._inner.current.appendChild(this.createBar(5, this._currentBarX, "orange")); } keys.forEach((key, index) => { console.log("moved!"); //store key frames -> need to create a way to do this (data structure??) @@ -128,7 +100,7 @@ export class Timeline extends React.Component<SubCollectionViewProps> { </div> </div> <button onClick={this.onRecord}>Record</button> - <button onClick={this.onStop}>Stop</button> + {/* <button onClick={this.onStop}>Stop</button> */} <input placeholder="Time"></input> </div> </div> |