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>