diff options
| -rw-r--r-- | src/client/views/nodes/KeyFrame.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 47 |
2 files changed, 36 insertions, 18 deletions
diff --git a/src/client/views/nodes/KeyFrame.tsx b/src/client/views/nodes/KeyFrame.tsx index 5c1157c9d..fb072f4d6 100644 --- a/src/client/views/nodes/KeyFrame.tsx +++ b/src/client/views/nodes/KeyFrame.tsx @@ -4,14 +4,13 @@ export class KeyFrame { private _document: Doc; constructor() { this._document = new Doc(); - + } - get document() { - console.log(this._document); + get doc():Doc { return this._document; - } + }
\ No newline at end of file diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index bc38a0ede..aba1a6065 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -15,6 +15,7 @@ import { FieldValue, Cast } from "../../../new_fields/Types"; import { emptyStatement } from "babel-types"; import { DocumentManager } from "../../util/DocumentManager"; import { SelectionManager } from "../../util/SelectionManager"; +import { List } from "../../../new_fields/List"; @observer @@ -37,9 +38,6 @@ export class Timeline extends CollectionSubView(Document) { onRecord = (e: React.MouseEvent) => { this._isRecording = true; let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)); - - // let keyFrame = new KeyFrame(); //should not be done here... - // this._keyFrames.push(keyFrame)"; if (!children) { return; } @@ -52,18 +50,39 @@ export class Timeline extends CollectionSubView(Document) { return keys.map(key => FieldValue(element[key])); }, data => { 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]; + let keyFrame: KeyFrame; //keyframe reference + let exists:boolean = false; + let time:number = this._currentBarX; //time that indicates what frame you are in. Whole numbers. + let frames:List<Doc>; + this._keyFrames.forEach(kf => { //checks if there is a keyframe that is tracking htis document. + if (kf.doc.document === element) { + keyFrame = kf; + frames = Cast(keyFrame.doc.frames, listSpec(Doc))!; + exists = true; + } + }); + + if (!exists){ + keyFrame = new KeyFrame(); + let bar:HTMLDivElement = this.createBar(5, time, "yellow"); + this._inner.current.appendChild(bar); + keyFrame.doc.bar = bar; + keyFrame.doc.frames = new List<Doc>(); + + this._keyFrames.push(keyFrame); } + keys.forEach((key, index) => { - keyFrame.document[key] = data[index]; + console.log(data[index]); + if (keyFrame.doc.frames !== undefined){ + frames.forEach(frame => { + if (frame.time === this._currentBarX){ + frame.key = data[index]; + } + }); + } + + //keyFrame.document[key] = data[index]; }); } }); @@ -125,7 +144,7 @@ export class Timeline extends CollectionSubView(Document) { console.log(this._currentBarX); } - createBar = (width: number, pos = 0, color = "green"): HTMLDivElement => { + createBar = (width: number, pos:number = 0, color:string = "green"): HTMLDivElement => { let bar = document.createElement("div"); bar.style.height = "100%"; bar.style.width = `${width}px`; |