diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 49 |
1 files changed, 37 insertions, 12 deletions
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index 6d93b06d1..3bc6b1d7d 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -54,8 +54,9 @@ export class Timeline extends CollectionSubView(Document) { @observable private _keys = ["x", "y"]; @observable private _frames: Doc[] = []; - private temp1: any = null; - private temp2: any = null; + private temp1:any = null; + private temp2:any = null; + private tempdoc: any = null; @action onRecord = (e: React.MouseEvent) => { @@ -69,6 +70,7 @@ export class Timeline extends CollectionSubView(Document) { const addReaction = (element: Doc) => { element = (element as any).value(); + this.tempdoc = element; return reaction(() => { return this._keys.map(key => FieldValue(element[key])); }, async data => { //where is the data index actually being set? @@ -88,12 +90,13 @@ export class Timeline extends CollectionSubView(Document) { 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); + this._keyFrames.push(keyFrame); } this._keys.forEach((key, index) => { @@ -106,6 +109,24 @@ export class Timeline extends CollectionSubView(Document) { }); } }); + + + // for (let i in this._keys) { //add _keys to _keyList + // let key = this._keys[i]; + // this._keyList.push(key); + // } + + // for (let i in this._keyList) { //add keyList to _keyFrameList + // let keyList = this._keyList[i]; + // this._keyFrameList.push(keyList); + // } + + // for (let i in this._topLevelList) { //add _keyFrameList to _topLevelList + // let keyFrameList = this._keyFrameList[i]; + // this._topLevelList.push(keyFrameList); + // } + + //keyFrame.document[key] = data[index]; } }); }; @@ -184,17 +205,21 @@ export class Timeline extends CollectionSubView(Document) { const dif_Y = NumCast(keyFrame2.Y) - NumCast(keyFrame1.Y); const dif_time = kf2.time - kf1.time; const ratio = (time - kf1.time) / dif_time; - const adjusted_X = dif_X * ratio; - const adjusted_Y = dif_Y * ratio; - - doc.X = keyFrame1.x + adjusted_X; - doc.Y = keyFrame1.y + adjusted_Y; + const adjusted_X = dif_X * ratio; + const adjusted_Y = dif_Y * ratio; + + console.log(doc.X); + doc.X = keyFrame1.x + adjusted_X; + doc.Y = keyFrame1.y + adjusted_Y; } - @action + /** + * TEMPORARY + */ + @action onInterpolate = (e: React.MouseEvent) => { - + } @action @@ -223,6 +248,7 @@ export class Timeline extends CollectionSubView(Document) { this._currentBar.style.transform = `translate(${offsetX}px)`; this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove); //reset this._inner.current.addEventListener("pointermove", this.onInnerPointerMove); + this.timeChange(this._currentBarX); } } } @@ -234,8 +260,7 @@ export class Timeline extends CollectionSubView(Document) { let offsetX = Math.round(e.offsetX); this._currentBarX = offsetX; this._currentBar.style.transform = `translate(${offsetX}px)`; //styling should not have to be done this way...maybe done through react?? - console.log(offsetX); - console.log(this._currentBarX); + this.timeChange(this._currentBarX); } createBar = (width: number, pos: number = 0, color: string = "green"): HTMLDivElement => { |