diff options
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 62 |
1 files changed, 32 insertions, 30 deletions
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index a64e1a7a8..4b6767e7d 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -20,9 +20,11 @@ export class Timeline extends React.Component<SubCollectionViewProps> { @observable private _currentBar: any = null; @observable private _newBar: any = null; private _reactionDisposers: IReactionDisposer[] = []; - private _keyFrames: KeyFrame[] = []; + private _keyFrames: HTMLDivElement[] = []; + private _currentBarX:number = 0; @observable private _onBar: Boolean = false; + @action onRecord = (e: React.MouseEvent) => { this._isRecording = true; @@ -30,16 +32,16 @@ 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); - } + // 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 @@ -48,6 +50,7 @@ export class Timeline extends React.Component<SubCollectionViewProps> { if (this._inner.current) { let mouse = e.nativeEvent; this._currentBar.style.transform = `translate(${mouse.offsetX}px)`; + this._currentBarX = mouse.offsetX; } } } @@ -56,18 +59,15 @@ export class Timeline extends React.Component<SubCollectionViewProps> { } - createBar = (width: number) => { - if (this._inner.current) { - this._currentBar = document.createElement("div"); - this._currentBar.style.height = "100%"; - this._currentBar.style.width = `${width}px`; - this._currentBar.style.left = "mouse.offsetX"; - this._currentBar.style.backgroundColor = "green"; - this._currentBar.style.transform = `translate(${0}px)`; - this._currentBar.style.position = "absolute"; - this._currentBar.onPointerDown(this.selectFrame); - this._inner.current.appendChild(this._currentBar); - } + 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) => { @@ -76,22 +76,24 @@ export class Timeline extends React.Component<SubCollectionViewProps> { } componentDidMount() { - this.createBar(5); + 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[]); // let keyFrame = new KeyFrame(); //should not be done here... // this._keyFrames.push(keyFrame); let keys = [KeyStore.X, KeyStore.Y]; const addReaction = (element: Document) => { + let keyFrame = new KeyFrame(); + if (this._inner.current){ + this._inner.current.appendChild(this.createBar(5, this._currentBarX, "orange")); + } return reaction(() => { return keys.map(key => element.GetNumber(key, 0)); }, data => { - let keyFrame = new KeyFrame(); - if (this._onBar) { //need to set value of onBar somewhere... -> if already on key frame use this keyframe - // keyFrame = function that returns current keyFrame; - } else { //else create new keyframe - this._keyFrames.push(keyFrame); - } + keys.forEach((key, index) => { console.log("moved!"); //store key frames -> need to create a way to do this (data structure??) keyFrame.document().SetNumber(key, data[index]); //Tyler working on better Doc.ts functions...(this is currently not comprehensive...) |