diff options
Diffstat (limited to 'src')
| -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 | 66 |
3 files changed, 41 insertions, 48 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 5f4eab796..8c7c4e4a7 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -20,10 +20,11 @@ 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; + private _currentBarX: number = 0; @observable private _onBar: Boolean = false; @@ -34,16 +35,6 @@ 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 @@ -52,35 +43,27 @@ 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; + this._currentBarX = mouse.offsetX; + console.log(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) + bar.style.zIndex = "2"; + 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,19 +71,26 @@ 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) { + 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 => { |