diff options
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 41 |
1 files changed, 31 insertions, 10 deletions
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index 759b96d43..037caacbd 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -18,6 +18,7 @@ import { List } from "../../../new_fields/List"; import { Self } from "../../../new_fields/FieldSymbols"; import { list } from "serializr"; import { arrays } from "typescript-collections"; +import { forEach } from "typescript-collections/dist/lib/arrays"; type Data = List<Doc>; //data? type Keyframes = List<List<Doc>>; @@ -72,7 +73,7 @@ export class Timeline extends CollectionSubView(Document) { return reaction(() => { return this._keys.map(key => FieldValue(node[key])); - }, async data => { + }, async data => { if (this._inner.current) { if (this._data.indexOf(node) === -1) { const kf = new List(); @@ -126,6 +127,7 @@ export class Timeline extends CollectionSubView(Document) { }, true); } + setTimeAndPos = (node: Doc) => { let pos: Position = Position(node); let timeandpos = new Doc; @@ -156,21 +158,17 @@ export class Timeline extends CollectionSubView(Document) { let leftMin = Infinity; let rightMin = Infinity; if (singleKf.time !== time) { //choose closest time neighbors - console.log("hello"); - if (singleKf.time! < time) { - console.log("world"); + if (singleKf.time! < time) { leftMin = NumCast(singleKf.time); leftKf = TimeAndPosition(this._keyframes[i][leftMin]); - } else { + } else { rightMin = NumCast(singleKf.time); rightKf = TimeAndPosition(this._keyframes[i][rightMin]); - console.log("there"); } } } }); if (leftKf && rightKf) { - console.log("interpolate"); this.interpolate(oneDoc, leftKf, rightKf, this._currentBarX); } }); @@ -216,6 +214,29 @@ export class Timeline extends CollectionSubView(Document) { // } } + calcMinLeft = (kfList: Doc[], time: Number): Number => { + let leftMin: Number = Infinity; + kfList.forEach((kf) => { + const diff: Number = Math.abs(kf.time! - time); + if (diff < leftMin) { + leftMin = diff; + } + }); + return leftMin; + } + + calcMinRight = (kfList: Doc[]): Number => { + let rightMin: Number = Infinity; + kfList.forEach((kf) => { + const diff: Number = Math.abs(kf.time! - time); + if (diff < rightMin) { + rightMin = diff; + } + }); + return rightMin; + } + + /** * Linearly interpolates a document from time1 to time2 * @param Doc that needs to be modified @@ -269,7 +290,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); + this.timeChange(this._currentBarX); } } } @@ -281,7 +302,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?? - //this.timeChange(this._currentBarX); + this.timeChange(this._currentBarX); } createBar = (width: number, pos: number = 0, color: string = "green"): HTMLDivElement => { @@ -335,7 +356,7 @@ export class Timeline extends CollectionSubView(Document) { </div> </div> <button onClick={this.onRecord}>Record</button> - <button onClick={this.onInterpolate}>Inter</button> + {/* <button onClick={this.onInterpolate}>Inter</button> */} <input placeholder="Time" ref={this._timeInput} onKeyDown={this.onTimeEntered}></input> </div> </div> |