diff options
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 32 |
1 files changed, 6 insertions, 26 deletions
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index 9995193c1..a5a41a385 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { observer } from "mobx-react"; -import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed } from "mobx"; +import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS } from "mobx"; import "./Timeline.scss"; import { CollectionViewProps } from "../collections/CollectionBaseView"; import { CollectionSubView, SubCollectionViewProps } from "../collections/CollectionSubView"; @@ -19,6 +19,7 @@ import { list } from "serializr"; import { arrays, Dictionary } from "typescript-collections"; import { forEach } from "typescript-collections/dist/lib/arrays"; import { CompileScript } from "../../util/Scripting"; +import { FieldView } from "./FieldView"; type Data = List<Doc>; type Keyframes = List<List<Doc>>; @@ -412,7 +413,8 @@ export class Timeline extends CollectionSubView(Document) { } - componentDidMount() { + async componentDidMount() { + console.log(toJS(this.props.Document.proto) || null); if (!this._keyframes) { console.log("new data"); this.props.Document.keyframes = new List<List<Doc>>(); @@ -423,13 +425,11 @@ export class Timeline extends CollectionSubView(Document) { /** * removes reaction when the component is removed from the timeline */ - componentWillUnmount() { this._reactionDisposers.forEach(disp => disp()); this._reactionDisposers = []; } - /** * Displays yellow bars per node when selected */ @@ -457,41 +457,21 @@ export class Timeline extends CollectionSubView(Document) { return views; } - private inner:(JSX.Element|null) = ( - <div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp}> - {SelectionManager.SelectedDocuments().map(dv => this.displayKeyFrames(dv.props.Document))} - {this._bars.map((data) => { - return this.createBar(5, data.x, "yellow"); - })} - {this.createBar(5, this._currentBarX)} - </div> - ); - - private reset:(JSX.Element|null) = ( - <div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp}> - {SelectionManager.SelectedDocuments().map(dv => this.displayKeyFrames(dv.props.Document))} - {this._bars.map((data) => { - return this.createBar(5, data.x, "yellow"); - })} - {this.createBar(5, this._currentBarX)} - </div> - ); render() { return ( <div> <div className="timeline-container"> <div className="timeline"> - <div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp}> + <div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp}> {SelectionManager.SelectedDocuments().map(dv => this.displayKeyFrames(dv.props.Document))} {this._bars.map((data) => { return this.createBar(5, data.x, "yellow"); - })} + })} {this.createBar(5, this._currentBarX)} </div> </div> <button onClick={this.onRecord}>Record</button> - <input placeholder={this._currentBarX.toString()} ref={this._timeInput} onKeyDown={this.onTimeEntered} ></input> <button onClick={this.windBackward}> {"<"}</button> <button onClick={this.onPlay} ref={this._playButton}> Play </button> |