STABLE path and interpolation

2 files changed, 88 insertions, 36 deletions

diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 291bb1739..780928e77 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -114,7 +114,7 @@ interface IProps {
 export class Keyframe extends React.Component<IProps> {
 
     @observable private _bar = React.createRef<HTMLDivElement>();
-    @observable private _gain = 5; //default
+    @observable private _gain = 20; //default
 
     @computed
     private get regiondata() {
@@ -194,7 +194,6 @@ export class Keyframe extends React.Component<IProps> {
                 this.forceUpdate();
             }
         });
-        document.addEventListener("pointerup", this.onReactionListen);
     }
 
     @action
@@ -418,21 +417,33 @@ export class Keyframe extends React.Component<IProps> {
     private _reac: (undefined | IReactionDisposer) = undefined;
     private _plotList: ([string, StrokeData] | undefined) = undefined;
     private _interpolationKeyframe: (Doc | undefined) = undefined; 
-    private _prevBackgroundColor: string = "";
+    private _type: string = ""; 
 
     @action
     onContainerDown = (e: React.MouseEvent, kf: Doc) => {
         e.preventDefault();
         e.stopPropagation();
-        this._reac = reaction(() => {
-            return this.inks;
-        }, data => {
-            let prevColor = StrCast(this.props.collection.backgroundColor); 
-            this._prevBackgroundColor = prevColor;
+        let listenerCreated = false;                 
+        let type = prompt("Type? (interpolate or path)"); 
+        if (type) {
+            if (type !== "interpolate" && type !=="path") {
+                alert("Wrong type. Try again."); 
+                return; 
+            }
+            this._type = type; 
             this.props.collection.backgroundColor = "rgb(0,0,0)";
-            this._plotList = Array.from(data!)[data!.size - 1]!;
-            this._interpolationKeyframe = kf; 
-        });
+            this._reac = reaction(() => {
+                return this.inks;
+            }, data => {
+                if (!listenerCreated) {
+                    this._plotList = Array.from(data!)[data!.size - 1]!;
+                    this._interpolationKeyframe = kf; 
+                    document.addEventListener("pointerup", this.onReactionListen); 
+                    listenerCreated = true; 
+                }
+            });
+        }
+        
     }
 
 
@@ -442,8 +453,18 @@ export class Keyframe extends React.Component<IProps> {
     onReactionListen = (e: PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        if (this._reac && this._plotList) {
-            this.props.collection.backgroundColor = this._prevBackgroundColor;
+        let message = prompt("GRAPHING MODE: Enter gain");      
+        if (message) {
+            let messageContent = parseInt(message, 10); 
+            if (messageContent === NaN) {
+                this._gain = Infinity; 
+            } else {
+                this._gain = messageContent; 
+            }
+        
+        }   
+        if (this._reac && this._plotList && this._interpolationKeyframe) {
+            this.props.collection.backgroundColor = "#FFF";
             this._reac();
             let xPlots = new List<number>();
             let yPlots = new List<number>();
@@ -469,16 +490,22 @@ export class Keyframe extends React.Component<IProps> {
                     }
                 } else {
                     i++;
-                }
+                } 
             }
             let index = this.keyframes.indexOf(this._interpolationKeyframe!); 
-            (Cast(this.regiondata.functions![index], Doc) as Doc).interpolationX = xPlots;
-            (Cast(this.regiondata.functions![index], Doc) as Doc).interpolationY = xPlots;
-            this.inks!.delete(this._plotList![0]);
-
+            if (this._type === "interpolate"){
+                (Cast(this.regiondata.functions![index], Doc) as Doc).interpolationX = xPlots;
+                (Cast(this.regiondata.functions![index], Doc) as Doc).interpolationY = yPlots;
+            } else if (this._type === "path") {
+                (Cast(this.regiondata.functions![index], Doc) as Doc).pathX = xPlots;
+                (Cast(this.regiondata.functions![index], Doc) as Doc).pathY = yPlots;
+            }
+          
             this._reac = undefined; 
             this._interpolationKeyframe = undefined; 
             this._plotList = undefined; 
+            this._type = ""; 
+            document.removeEventListener("pointerup", this.onReactionListen); 
         }
     }
 
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index 55f079986..2d6d3a5d8 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -118,7 +118,7 @@ export class Track extends React.Component<IProps> {
                 await this.applyKeys(currentkf);
                 this._keyReaction = this.keyReaction(); //reactivates reaction. 
             } else if (leftkf && rightkf) {
-                this.interpolate(leftkf, rightkf, regiondata);
+                await this.interpolate(leftkf, rightkf, regiondata);
             }
         }
     }
@@ -157,33 +157,58 @@ export class Track extends React.Component<IProps> {
     }
 
     @action
-    interpolate = (left: Doc, right: Doc, regiondata:Doc) => {
+    interpolate = async (left: Doc, right: Doc, regiondata:Doc) => {
         console.log("interpolating");
         let leftNode = left.key as Doc;
         let rightNode = right.key as Doc;
         const dif_time = NumCast(right.time) - NumCast(left.time);
         const timeratio = (this.props.currentBarX - NumCast(left.time)) / dif_time; //linear 
-        let indexLeft = DocListCast(regiondata.keyframes!).indexOf(left); 
-        let interpolationY:List<number> = ((regiondata.functions as List<Doc>)[indexLeft] as Doc).interpolationY as List<number>;  
-        let realIndex = (interpolationY.length - 1) * timeratio; 
+        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 = interpolationY[xIndex]; 
+        let yValue = interY[xIndex]; 
         let secondYOffset:number = yValue; 
-        let minY = interpolationY[0];  // for now
-        let maxY = interpolationY[interpolationY.length - 1]; //for now 
-        if (interpolationY.length !== 1) {
-            secondYOffset = interpolationY[xIndex] + ((realIndex - xIndex) / 1) * (interpolationY[xIndex + 1] - interpolationY[xIndex]) - minY; 
-        }
-        console.log(secondYOffset); 
-        console.log(maxY - minY); 
-        console.log(minY); 
+        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); 
-        console.log(finalRatio); 
+        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]);
+            }
+           
+        }
+
+        
         this.filterKeys(Doc.allKeys(leftNode)).forEach(key => {
             if (leftNode[key] && rightNode[key] && typeof (leftNode[key]) === "number" && typeof (rightNode[key]) === "number") { //if it is number, interpolate
-                const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]);
-                const adjusted = diff * finalRatio;
-                this.props.node[key] = NumCast(leftNode[key]) + adjusted;
+                if ((key === "x" || key === "y") && pathX.length !== 0){
+                    if (key === "x") this.props.node[key] = proposedX; 
+                    if (key === "y") this.props.node[key] = proposedY; 
+                    console.log(pathX.length); 
+                  
+                } else {
+                    const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]);
+                    const adjusted = diff * finalRatio;
+                    this.props.node[key] = NumCast(leftNode[key]) + adjusted;
+                }
             } else {
                 this.props.node[key] = leftNode[key];
             }