diff options
| -rw-r--r-- | src/client/views/nodes/Timeline.tsx | 59 |
1 files changed, 38 insertions, 21 deletions
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx index c55e6e9b8..6d93b06d1 100644 --- a/src/client/views/nodes/Timeline.tsx +++ b/src/client/views/nodes/Timeline.tsx @@ -7,11 +7,10 @@ import { KeyFrame } from "./KeyFrame"; import { CollectionViewProps } from "../collections/CollectionBaseView"; import { CollectionSubView, SubCollectionViewProps } from "../collections/CollectionSubView"; import { DocumentViewProps, DocumentView } from "./DocumentView"; - import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; -import { Doc, DocListCastAsync, FieldResult } from "../../../new_fields/Doc"; +import { Doc, DocListCastAsync } from "../../../new_fields/Doc"; import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema"; -import { FieldValue, Cast } from "../../../new_fields/Types"; +import { FieldValue, Cast, NumCast } from "../../../new_fields/Types"; import { emptyStatement } from "babel-types"; import { DocumentManager } from "../../util/DocumentManager"; import { SelectionManager } from "../../util/SelectionManager"; @@ -37,6 +36,7 @@ const TimeAndPositionSchema = createSchema({ type TimeAndPosition = makeInterface<[typeof TimeAndPositionSchema]>; const TimeAndPosition = makeInterface(TimeAndPositionSchema); + @observer export class Timeline extends CollectionSubView(Document) { @observable private _inner = React.createRef<HTMLDivElement>(); @@ -53,10 +53,9 @@ export class Timeline extends CollectionSubView(Document) { @observable private _onBar: Boolean = false; @observable private _keys = ["x", "y"]; @observable private _frames: Doc[] = []; - // @observable private _keyList: String[] = []; //list of _keys - // @observable private _keyFrameList: String[] = []; //list of _keyList - // @observable private _topLevelList: String[] = []; //list of _keyFrameList + private temp1: any = null; + private temp2: any = null; @action onRecord = (e: React.MouseEvent) => { @@ -113,7 +112,6 @@ export class Timeline extends CollectionSubView(Document) { observe(childrenList as IObservableArray<Doc>, change => { - if (change.type === "update") { this._reactionDisposers[change.index](); this._reactionDisposers[change.index] = addReaction(change.newValue); @@ -143,23 +141,14 @@ export class Timeline extends CollectionSubView(Document) { const list = await Promise.all(kfList.map(l => Promise.all(l))); for (let i in docs) { let oneDoc = docs[i]; - let oneKf: TimeAndPosition[] = list[i].map(TimeAndPosition); //use child getter if keyframes is list of keyframes (because collection is list of children) - - //first find frame with closest time - //after find frame: need to do await for specific frame, except cast to Doc instead of listSpec(Doc) - //then make a promise for that - //_frames array is probably irrelevant (so can probably get rid of this._keyFrames.forEach(async).. section) - //lastly, set all properties of current keyframe to that of the stored and now accessed keyframe (singleKf)*** - - let updatedKf!: TimeAndPosition; - + let oneKf: TimeAndPosition[] = list[i].map(TimeAndPosition); + let leftKf!: TimeAndPosition; + let rightKf!: TimeAndPosition; for (let j in oneKf) { let singleKf: TimeAndPosition = oneKf[j]; let leftMin: Number = Infinity; let rightMin: Number = Infinity; - let leftKf: TimeAndPosition; - let rightKf: TimeAndPosition; - if (singleKf.time !== time) { //choose closest time neighbor and reset singleKf to that keyFrame + if (singleKf.time !== time) { //choose closest time neighbors for (let k in oneKf) { if (oneKf[k].time < time) { const diff: Number = Math.abs(oneKf[k].time - time); @@ -177,9 +166,37 @@ export class Timeline extends CollectionSubView(Document) { } } } + this.interpolate(oneDoc, leftKf, rightKf, time); } } + /** + * Linearly interpolates a document from time1 to time2 + * @param Doc that needs to be modified + * @param + */ + @action + interpolate = async (doc: Doc, kf1: TimeAndPosition, kf2: TimeAndPosition, time: number) => { + const keyFrame1 = Position(await kf1.keyframe); + const keyFrame2 = Position(await kf2.keyframe); + + const dif_X = NumCast(keyFrame2.X) - NumCast(keyFrame1.X); + 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; + } + + + @action + onInterpolate = (e: React.MouseEvent) => { + + } + @action displayKeyFrames = (dv: DocumentView) => { console.log(dv); @@ -187,7 +204,6 @@ export class Timeline extends CollectionSubView(Document) { } - @action onInnerPointerUp = (e: React.PointerEvent) => { if (this._inner.current) { @@ -273,6 +289,7 @@ export class Timeline extends CollectionSubView(Document) { </div> </div> <button onClick={this.onRecord}>Record</button> + <button onClick={this.onInterpolate}>Inter</button> <input placeholder="Time" ref={this._timeInput} onKeyDown={this.onTimeEntered}></input> </div> </div> |