diff options
| -rw-r--r-- | src/client/views/nodes/KeyFrame.tsx | 22 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.scss | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 33 |
3 files changed, 38 insertions, 18 deletions
diff --git a/src/client/views/nodes/KeyFrame.tsx b/src/client/views/nodes/KeyFrame.tsx index 223e8f962..0f0615c5a 100644 --- a/src/client/views/nodes/KeyFrame.tsx +++ b/src/client/views/nodes/KeyFrame.tsx @@ -1,15 +1,17 @@ -export class KeyFrame{ - private _document:any; - constructor(){ - this._document = new Document(); - - +import { Document } from '../../../fields/Document'; + +export class KeyFrame { + private _document: any; + constructor() { + this._document = new Document(); + + } - get document(){ - console.log(this._document); - return this._document; - + get document() { + console.log(this._document); + return this._document; + } }
\ No newline at end of file diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss index d2055c946..d16f3b4ee 100644 --- a/src/client/views/nodes/Timeline.scss +++ b/src/client/views/nodes/Timeline.scss @@ -19,6 +19,7 @@ height: 44px; width: 484px; background-color: black; + opacity: 0.5; position: absolute; margin: 8px; } diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index 164a2db2c..3296aecff 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -20,9 +20,13 @@ export class Timeline extends React.Component<SubCollectionViewProps> { @observable private _currentBar: any = null; @observable private _newBar: any = null; private _reactionDisposers: IReactionDisposer[] = []; - private _keyFrames: HTMLDivElement[] = []; + private _keyFrames: KeyFrame[] = []; + private _keyBars: HTMLDivElement[] = []; private _actualKeyFrame: KeyFrame[] = []; + private _currentBarX: number = 0; + @observable private _onBar: Boolean = false; + @action onRecord = (e: React.MouseEvent) => { @@ -30,12 +34,17 @@ export class Timeline extends React.Component<SubCollectionViewProps> { } @action + onStop = (e: React.MouseEvent) => { + } + + @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; + console.log(mouse.offsetX); } } } @@ -48,9 +57,9 @@ export class Timeline extends React.Component<SubCollectionViewProps> { bar.style.backgroundColor = color; bar.style.transform = `translate(${pos}px)`; bar.style.position = "absolute"; + bar.style.zIndex = "2"; return bar; } - componentDidMount() { if (this._inner.current && this._currentBar === null) { this._currentBar = this.createBar(5); @@ -63,16 +72,24 @@ export class Timeline extends React.Component<SubCollectionViewProps> { 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")); + let keyFrame: KeyFrame; + if (!this._keyBars[this._currentBarX]) { + let bar = this.createBar(5, this._currentBarX, "orange"); + this._inner.current.appendChild(bar); + this._keyBars[this._currentBarX] = bar; + keyFrame = new KeyFrame(); + this._keyFrames[this._currentBarX] = keyFrame; + } else { + keyFrame = this._keyFrames[this._currentBarX]; + } + keys.forEach((key, index) => { + keyFrame.document.SetNumber(key, data[index]); //Tyler working on better Doc.ts functions...(this is currently not comprehensive...) + }); } - 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...) - }); }); }; observe(childrenList as IObservableArray<Document>, change => { |