lots of changes

4 files changed, 79 insertions, 142 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 9f4d80d2b..4f6ba728d 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -20,15 +20,18 @@ import { undoBatch, UndoManager } from "../../util/UndoManager";
  * Useful static functions that you can use. Mostly for logic, but you can also add UI logic here also 
  */
 export namespace KeyframeFunc {
+
     export enum KeyframeType {
         end = "end",
         fade = "fade",
         default = "default",
     }
+
     export enum Direction {
         left = "left",
         right = "right"
     }
+
     export const findAdjacentRegion = (dir: KeyframeFunc.Direction, currentRegion: Doc, regions: List<Doc>): (RegionData | undefined) => {
         let leftMost: (RegionData | undefined) = undefined;
         let rightMost: (RegionData | undefined) = undefined;
@@ -97,41 +100,6 @@ export namespace KeyframeFunc {
         return regiondata;
     };
 
-    export const makeKeyData = async (regiondata:RegionData, time: number, badNode:Doc, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time 
-        runInAction(async () => {
-            console.log("ran"); 
-            let doclist = (await DocListCastAsync(regiondata.keyframes))!;
-            let existingkf: (Doc | undefined) = undefined;
-            doclist.forEach(TK => {
-                if (TK.time === time) existingkf = TK;
-            });
-            if (existingkf) return existingkf;
-            let TK: Doc = new Doc();
-            TK.time = time;
-            TK.key = Doc.MakeCopy(badNode, true);
-            TK.type = type;
-            regiondata.keyframes!.push(TK);
-            let interpolationFunctions = new Doc();
-            interpolationFunctions.interpolationX = new List<number>([0, 1]);
-            interpolationFunctions.interpolationY = new List<number>([0, 100]);
-            interpolationFunctions.pathX = new List<number>();
-            interpolationFunctions.pathY = new List<number>();
-            regiondata.functions!.push(interpolationFunctions);
-            let found: boolean = false;
-            regiondata.keyframes!.forEach(compkf => {
-                compkf = compkf as Doc;
-                if (time < NumCast(compkf.time) && !found) {
-                    runInAction(() => {
-                        regiondata.keyframes!.splice(doclist.indexOf(compkf as Doc), 0, TK);
-                        regiondata.keyframes!.pop();
-                        found = true;
-                    });
-                    return;
-                }
-            });
-            return TK;
-        });
-    };
 
     export const convertPixelTime = (pos: number, unit: "mili" | "sec" | "min" | "hr", dir: "pixel" | "time", tickSpacing: number, tickIncrement: number) => {
         let time = dir === "pixel" ? (pos * tickSpacing) / tickIncrement : (pos / tickSpacing) * tickIncrement;
@@ -202,7 +170,6 @@ interface IProps {
 export class Keyframe extends React.Component<IProps> {
 
     @observable private _bar = React.createRef<HTMLDivElement>();
-    @observable private _gain = 20; //default
     @observable private _mouseToggled = false;
     @observable private _doubleClickEnabled = false;
 
@@ -215,18 +182,15 @@ export class Keyframe extends React.Component<IProps> {
     @computed private get pixelFadeOut() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeOut, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
    
     componentWillMount() {
-        runInAction(async () => {
-            if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();
-            let fadeIn = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, this.props.node, KeyframeFunc.KeyframeType.fade))! as any as Doc;
-            let fadeOut = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, this.props.node, KeyframeFunc.KeyframeType.fade))! as any as Doc;
-            let start = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position, this.props.node, KeyframeFunc.KeyframeType.end))! as any as Doc;
-            let finish = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration, this.props.node, KeyframeFunc.KeyframeType.end))! as any as Doc;
-            (fadeIn.key! as Doc).opacity = 1;
-            (fadeOut.key! as Doc).opacity = 1;
-            (start.key! as Doc).opacity = 0.1;
-            (finish.key! as Doc).opacity = 0.1;
-            this.forceUpdate();
-        });
+        if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();        
+        let start = this.makeKeyData(this.regiondata, this.regiondata.position,  KeyframeFunc.KeyframeType.end);
+        let fadeIn = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade);
+        let fadeOut = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade);
+        let finish = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration,KeyframeFunc.KeyframeType.end);
+        (fadeIn.key as Doc).opacity = 1;
+        (fadeOut.key as Doc).opacity = 1;
+        (start.key as Doc).opacity = 0.1;
+        (finish.key as Doc).opacity = 0.1;
     }
 
     
@@ -253,7 +217,32 @@ export class Keyframe extends React.Component<IProps> {
             });
         }
     }
-
+    private makeKeyData = (regiondata:RegionData, time: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time 
+        let doclist =  DocListCast(regiondata.keyframes)!;
+        let existingkf: (Doc | undefined) = undefined;
+        doclist.forEach(TK => {
+            if (TK.time === time) existingkf = TK;
+        });
+        if (existingkf) return existingkf;
+        //else creates a new doc. 
+        let TK: Doc = new Doc();
+        TK.time = time;
+        TK.key = Doc.MakeCopy(this.props.node, true);
+        TK.type = type;
+        //assuming there are already keyframes (for keeping keyframes in order, sorted by time)
+        console.log("making..."); 
+        if (doclist.length === 0) regiondata.keyframes!.push(TK); 
+        doclist.forEach(kf => {
+            let index = doclist.indexOf(kf); 
+            let kfTime = NumCast(kf.time);
+                console.log(kfTime); 
+            if ((kfTime < time && index === doclist.length - 1) || (kfTime < time && time < NumCast(doclist[index + 1].time))){
+               regiondata.keyframes!.splice(index + 1, 0, TK);
+                return; 
+            }
+        });
+        return TK; 
+    }
 
     @action
     onBarPointerMove = (e: PointerEvent) => {
@@ -353,7 +342,7 @@ export class Keyframe extends React.Component<IProps> {
         let offset = KeyframeFunc.convertPixelTime(Math.round((clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale), "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
         if (offset > this.regiondata.fadeIn && offset < this.regiondata.duration - this.regiondata.fadeOut) { //make sure keyframe is not created inbetween fades and ends
             let position = this.regiondata.position;
-            await KeyframeFunc.makeKeyData(this.regiondata, Math.round(position + offset), this.props.node);
+            this.makeKeyData(this.regiondata, Math.round(position + offset));
             this.regiondata.hasData = true; 
             this.props.changeCurrentBarX(KeyframeFunc.convertPixelTime(Math.round(position + offset), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement)); //first move the keyframe to the correct location and make a copy so the correct file gets coppied
         
@@ -552,12 +541,12 @@ export class Keyframe extends React.Component<IProps> {
         DocListCast(this.regiondata.keyframes).forEach(kf => {
             let index = this.keyframes.indexOf(kf);
             if (index !== this.keyframes.length - 1) {
-                let left = this.keyframes[this.keyframes.indexOf(kf) + 1];
+                let right = this.keyframes[index + 1];
                 let bodyRef = React.createRef<HTMLDivElement>();
                 let kfPos = KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement);
-                let leftPos = KeyframeFunc.convertPixelTime(NumCast(left!.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement);
+                let rightPos = KeyframeFunc.convertPixelTime(NumCast(right.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement);
                 keyframeDividers.push(
-                    <div ref={bodyRef} className="body-container" style={{ left: `${kfPos - this.pixelPosition}px`, width: `${leftPos - kfPos}px` }}
+                    <div ref={bodyRef} className="body-container" style={{ left: `${kfPos - this.pixelPosition}px`, width: `${rightPos - kfPos}px` }}
                         onPointerOver={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOver(e, bodyRef); }}
                         onPointerOut={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOut(e, bodyRef); }}
                         onContextMenu={(e) => {
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 8b943f209..604827213 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -449,9 +449,6 @@ export class Timeline extends React.Component<FieldViewProps> {
         // let overviewString: string = "Overview:";
         // let lengthString: string = "Length: ";
 
-        console.log("visible: " + this._visibleLength)
-        console.log("total: " + this._totalLength)
-
         return (
             <div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
                 <div className="playbackControls">
@@ -572,7 +569,6 @@ export class Timeline extends React.Component<FieldViewProps> {
         runInAction(() => {
             this._panelWidth = this.props.PanelWidth();
             this.changeLenths();
-            console.log("changing!!")
         });
 
         // change visible and total width
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index caa97bb70..553ba890d 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -127,10 +127,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     render() {
 
-        console.log("helo")
         // calculates where everything should fall based on its size
         let percentVisible = this.props.visibleLength / this.props.totalLength;
-        console.log(this.props.visibleLength)
         let visibleBarWidth = percentVisible * this.overviewBarWidth;
 
         let percentScrubberStart = this.props.currentBarX / this.props.totalLength;
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index e5e7a364c..17466bd1a 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -10,6 +10,7 @@ import { Keyframe, KeyframeFunc, RegionData } from "./Keyframe";
 import { Transform } from "../../util/Transform";
 import { Copy } from "../../../new_fields/FieldSymbols";
 import { ObjectField } from "../../../new_fields/ObjectField";
+import { fromCallback } from "bluebird";
 
 interface IProps {
     node: Doc;
@@ -40,10 +41,12 @@ export class Track extends React.Component<IProps> {
         "y",
         "width",
         "height",
-        "data"
+        "data", 
+        "opacity"
     ];
+
     @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>; }
-    // @computed private get time() {}
+    @computed private get time() {return NumCast(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));}
 
     ////////// life cycle functions///////////////
     componentWillMount() {
@@ -59,7 +62,7 @@ export class Track extends React.Component<IProps> {
         runInAction(async () => {
             this._timelineVisibleReaction = this.timelineVisibleReaction();
             this._currentBarXReaction = this.currentBarXReaction();
-            if (this.regions.length === 0) this.createRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
+            if (this.regions.length === 0) this.createRegion(this.time);
             this.props.node.hidden = false;
             this.props.node.opacity = 1;
            // this.autoCreateKeyframe(); 
@@ -90,17 +93,17 @@ export class Track extends React.Component<IProps> {
         if (!kf) return;
         if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades
             kf.key = Doc.MakeCopy(this.props.node, true);
-            let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), kf); // lef keyframe, if it exists
-            let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), kf); //right keyframe, if it exists 
+            let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.time, kf); // lef keyframe, if it exists
+            let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.time, kf); //right keyframe, if it exists 
             if (leftkf!.type === KeyframeFunc.KeyframeType.fade) { //replicating this keyframe to fades
-                let edge: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), leftkf!);
+                let edge: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.time, leftkf!);
                 edge!.key = Doc.MakeCopy(kf.key as Doc, true);
                 leftkf!.key = Doc.MakeCopy(kf.key as Doc, true);
                 (Cast(edge!.key, Doc)! as Doc).opacity = 0.1;
                 (Cast(leftkf!.key, Doc)! as Doc).opacity = 1;
             }
             if (rightkf!.type === KeyframeFunc.KeyframeType.fade) {
-                let edge: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), rightkf!);
+                let edge: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.time, rightkf!);
                 edge!.key = Doc.MakeCopy(kf.key as Doc, true);
                 rightkf!.key = Doc.MakeCopy(kf.key as Doc, true);
                 (Cast(edge!.key, Doc)! as Doc).opacity = 0.1;
@@ -124,14 +127,12 @@ export class Track extends React.Component<IProps> {
             return this.whitelist.map(key => node[key]);
         }, (changed, reaction) => {
             console.log(changed); 
-            //convert scrubber pos(pixel) to time
-            let time = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
             //check for region 
-            this.findRegion(time).then((region) => {
+            this.findRegion(this.time).then((region) => {
                 if (region !== undefined){ //if region at scrub time exist
                     let r = region as any as RegionData; //for some region is returning undefined... which is not the case
-                    if (DocListCast(r.keyframes).find(kf => kf.time === time) === undefined ){ //basically when there is no additional keyframe at that timespot 
-                        KeyframeFunc.makeKeyData(r, time, this.props.node, KeyframeFunc.KeyframeType.default); 
+                    if (DocListCast(r.keyframes).find(kf => kf.time === this.time) === undefined ){ //basically when there is no additional keyframe at that timespot 
+                        KeyframeFunc.makeKeyData(r, this.time, this.props.node, KeyframeFunc.KeyframeType.default); 
                     } 
                 }
                 // reaction.dispose(); 
@@ -158,10 +159,10 @@ export class Track extends React.Component<IProps> {
     @action
     currentBarXReaction = () => {
         return reaction(() => this.props.currentBarX, async () => {
-            let regiondata: (Doc | undefined) = await this.findRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
+            let regiondata: (Doc | undefined) = await this.findRegion(this.time);
             if (regiondata) {
                 this.props.node.hidden = false;
-                await this.timeChange(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
+                await this.timeChange();
             } else {
                 this.props.node.hidden = true;
                 this.props.node.opacity = 0;
@@ -198,14 +199,14 @@ export class Track extends React.Component<IProps> {
      * when scrubber position changes. Need to edit the logic
      */
     @action
-    timeChange = async (time: number) => {
+    timeChange = async () => {
         if (this._isOnKeyframe && this._onKeyframe && this._onRegionData) {
             await this.saveKeyframe(this._onKeyframe, this._onRegionData);
         }
-        let regiondata = await this.findRegion(Math.round(time)); //finds a region that the scrubber is on
+        let regiondata = await this.findRegion(Math.round(this.time)); //finds a region that the scrubber is on
         if (regiondata) {
-            let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); // lef keyframe, if it exists
-            let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); //right keyframe, if it exists            
+            let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata, this.time); // lef keyframe, if it exists
+            let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, this.time); //right keyframe, if it exists        
             let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe
             if (currentkf) {
                 await this.applyKeys(currentkf);
@@ -213,7 +214,7 @@ export class Track extends React.Component<IProps> {
                 this._onKeyframe = currentkf;
                 this._onRegionData = regiondata;
             } else if (leftkf && rightkf) {
-                await this.interpolate(leftkf, rightkf, regiondata);
+                await this.interpolate(leftkf, rightkf);
             }
         }
     }
@@ -225,17 +226,12 @@ export class Track extends React.Component<IProps> {
     @action
     private applyKeys = async (kf: Doc) => {
         let kfNode = await Cast(kf.key, Doc) as Doc;
-        let docFromApply = kfNode;
         this.whitelist.forEach(key => {
             if (!kfNode[key]) {
                 this.props.node[key] = undefined;
             } else {
                 let stored = kfNode[key];
-                if (stored instanceof ObjectField) {
-                    this.props.node[key] = stored[Copy]();
-                } else {
-                    this.props.node[key] = stored;
-                }
+                this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; 
             }
         });
     }
@@ -245,77 +241,35 @@ export class Track extends React.Component<IProps> {
      *  calculating current keyframe, if the scrubber is right on the keyframe
      */
     @action
-    calcCurrent = async (region: Doc) => {
+    calcCurrent = (region: Doc) => {
         let currentkf: (Doc | undefined) = undefined;
-        let keyframes = await DocListCastAsync(region.keyframes!);
-        keyframes!.forEach((kf) => {
-            if (NumCast(kf.time) === Math.round(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement))) currentkf = kf;
+        let keyframes = DocListCast(region.keyframes!);
+        keyframes.forEach((kf) => {
+            if (NumCast(kf.time) === Math.round(this.time)) currentkf = kf;
         });
         return currentkf;
     }
 
 
     /**
-     * interpolation. definetely needs to be changed. (currently involves custom linear splicing interpolations). 
-     * Too complex right now. Also need to apply quadratic spline later on (for smoothness, instead applying "gains")
+     * basic linear interpolation function 
      */
     @action
-    interpolate = async (left: Doc, right: Doc, regiondata: Doc) => {
-        let leftNode = left.key as Doc;
-        let rightNode = right.key as Doc;
-        // const dif_time = NumCast(right.time) - NumCast(left.time);
-        // const timeratio = (KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement) - NumCast(left.time)) / dif_time; //linear 
-        // let keyframes = (await DocListCastAsync(regiondata.keyframes!))!;
-        // let indexLeft = keyframes.indexOf(left);
-        // let interY: List<number> = (await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).interpolationY as List<number>)!;
-        // let realIndex = (interY.length - 1) * timeratio;
-        // let xIndex = Math.floor(realIndex);
-        // let yValue = interY[xIndex];
-        // let secondYOffset: number = yValue;
-        // let minY = interY[0];  // for now
-        // let maxY = interY[interY.length - 1]; //for now 
-        // if (interY.length !== 1) {
-        //     secondYOffset = interY[xIndex] + ((realIndex - xIndex) / 1) * (interY[xIndex + 1] - interY[xIndex]) - minY;
-        // }
-        // let finalRatio = secondYOffset / (maxY - minY);
-        // let pathX: List<number> = await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).pathX as List<number>;
-        // let pathY: List<number> = await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).pathY as List<number>;
-        // let proposedX = 0;
-        // let proposedY = 0;
-        // if (pathX.length !== 0) {
-        //     let realPathCorrespondingIndex = finalRatio * (pathX.length - 1);
-        //     let pathCorrespondingIndex = Math.floor(realPathCorrespondingIndex);
-        //     if (pathCorrespondingIndex >= pathX.length - 1) {
-        //         proposedX = pathX[pathX.length - 1];
-        //         proposedY = pathY[pathY.length - 1];
-        //     } else if (pathCorrespondingIndex < 0) {
-        //         proposedX = pathX[0];
-        //         proposedY = pathY[0];
-        //     } else {
-        //         proposedX = pathX[pathCorrespondingIndex] + ((realPathCorrespondingIndex - pathCorrespondingIndex) / 1) * (pathX[pathCorrespondingIndex + 1] - pathX[pathCorrespondingIndex]);
-        //         proposedY = pathY[pathCorrespondingIndex] + ((realPathCorrespondingIndex - pathCorrespondingIndex) / 1) * (pathY[pathCorrespondingIndex + 1] - pathY[pathCorrespondingIndex]);
-        //     }
-
-        // }
+    interpolate = async (left: Doc, right: Doc) => {
+        let leftNode = await(left.key) as Doc;
+        let rightNode = await(right.key) as Doc;
         this.whitelist.forEach(key => {
+            console.log(key); 
+            console.log(leftNode[key]); 
+            console.log(rightNode[key]); 
             if (leftNode[key] && rightNode[key] && typeof (leftNode[key]) === "number" && typeof (rightNode[key]) === "number") { //if it is number, interpolate
-                // if ((key === "x" || key === "y") && pathX.length !== 0) {
-                //     if (key === "x") this.props.node[key] = proposedX;
-                //     if (key === "y") this.props.node[key] = proposedY;
-                // } else {
-                //     const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]);
-                //     const adjusted = diff * finalRatio;
-                //     this.props.node[key] = NumCast(leftNode[key]) + adjusted;
-                // }
                 let dif = NumCast(rightNode[key]) - NumCast(leftNode[key]); 
-                
-            } else {
+                let deltaLeft = this.time - NumCast(left.time);
+                let ratio = deltaLeft / (NumCast(right.time) - NumCast(left.time)); 
+                this.props.node[key] = NumCast(leftNode[key]) + (dif * ratio); 
+            } else { // case data 
                 let stored = leftNode[key];
-                if (stored instanceof ObjectField) {
-                    this.props.node[key] = stored[Copy]();
-                } else {
-                    this.props.node[key] = stored;
-                }
+                this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; 
             }
         });
     }