cool interpolation

2 files changed, 87 insertions, 40 deletions

diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 880c5aee5..cab4e59c8 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -12,7 +12,7 @@ import { FlyoutProps } from "./Timeline";
 import { Transform } from "../../util/Transform";
 import { DocumentManager } from "../../util/DocumentManager";
 import { CollectionView } from "../collections/CollectionView";
-import { InkField } from "../../../new_fields/InkField";
+import { InkField, StrokeData } from "../../../new_fields/InkField";
 
 export namespace KeyframeFunc {
     export enum KeyframeType {
@@ -51,7 +51,10 @@ export namespace KeyframeFunc {
         regiondata.position = 0;
         regiondata.fadeIn = 20;
         regiondata.fadeOut = 20;
-        regiondata.fadeInX = new List([1, 100]); 
+        regiondata.fadeInX = new List([0, 1]); 
+        regiondata.fadeInY = new List([0, 100]); 
+        regiondata.fadeInMaxY = 100; 
+        regiondata.fadeInMinX = 0; 
         return regiondata;
     };
 }
@@ -61,7 +64,11 @@ export const RegionDataSchema = createSchema({
     duration: defaultSpec("number", 0),
     keyframes: listSpec(Doc),
     fadeIn: defaultSpec("number", 0),
-    fadeOut: defaultSpec("number", 0)
+    fadeOut: defaultSpec("number", 0), 
+    fadeInX: listSpec("number"), 
+    fadeInY: listSpec("number"), 
+    fadeInMaxY: defaultSpec("number", 0), 
+    fadeInMinY: defaultSpec("number", 0)
 });
 export type RegionData = makeInterface<[typeof RegionDataSchema]>;
 export const RegionData = makeInterface(RegionDataSchema);
@@ -359,20 +366,54 @@ export class Keyframe extends React.Component<IProps> {
         div.style.opacity ="0"; 
     }
 
-    onContainerDown = (e: React.PointerEvent, ref: React.RefObject<HTMLDivElement>) => {
+    onContainerDown = (e: React.MouseEvent, ref: React.RefObject<HTMLDivElement>) => {
         e.preventDefault(); 
-        let mouse = e.nativeEvent; 
-        if (mouse.which === 3){        
-            let reac = reaction(() => {
-                return this.inks;}, () => {
-                    document.addEventListener("pointerup", () => {
-                        reac(); 
-                    console.log("disposed"); 
-                }); 
-            console.log("drawing"); }); 
-        }
-        
+        let reac: (undefined | IReactionDisposer) = undefined; 
+        let plotList: ([string, StrokeData] | undefined) = undefined; 
+        let listener = (e:PointerEvent) => {
+            if (reac){
+                reac(); 
+                let xPlots = new List<number>(); 
+                let yPlots = new List<number>(); 
+                let maxY = 0; 
+                let minY = Infinity; 
+                let pathData = plotList![1].pathData; 
+
+                for (let i = pathData.length - 1; i >= 0; i--) {
+                    let val = pathData[i];  
+                    if(val.y > maxY) {
+                        maxY = val.y; 
+                    } 
+                    if (val.y < minY) {
+                        minY = val.y; 
+                    }
+                    xPlots.push(val.x); 
+                    yPlots.push(val.y); 
+                }
+                this.regiondata.fadeInX = xPlots; 
+                this.regiondata.fadeInY = yPlots; 
+                this.regiondata.fadeInMaxY = maxY; 
+                this.regiondata.fadeInMinY = minY; 
+                this.inks!.delete(plotList![0]); 
+                document.removeEventListener("pointerup", listener); 
+                
+            }
+        }; 
+        let listenerCreated = false; 
+        reac = reaction(() => {
+            return this.inks;
+        }, data => {
+            plotList = Array.from(data!)[data!.size - 1]!;  
+            if (!listenerCreated) {
+                e.stopPropagation(); 
+                document.addEventListener("pointerup", listener); 
+                listenerCreated = true; 
+            }
+        }); 
     }
+
+
+
     render() {
         return (
             <div>
@@ -394,15 +435,15 @@ export class Keyframe extends React.Component<IProps> {
                     <div ref={this._fadeOutContainer}className="fadeOut-container" style={{right: `0px`, width: `${this.regiondata.fadeOut}px`}}
                     onPointerOver={(e) => {this.onContainerOver(e, this._fadeOutContainer); }}
                     onPointerOut ={(e) => {this.onContainerOut(e, this._fadeOutContainer);}}
-                    onPointerDown={(e) => {this.onContainerDown(e, this._fadeOutContainer); }}> </div> 
+                    onContextMenu={(e) => {this.onContainerDown(e, this._fadeOutContainer); }}> </div> 
                     <div ref={this._fadeInContainer}className="fadeIn-container" style={{left: "0px", width:`${this.regiondata.fadeIn}px`}}
                     onPointerOver={(e) => {this.onContainerOver(e, this._fadeInContainer); }}
                     onPointerOut ={(e) => {this.onContainerOut(e, this._fadeInContainer);}}
-                    onPointerDown={(e) => {this.onContainerDown(e, this._fadeInContainer); }}></div>
+                    onContextMenu={(e) => {this.onContainerDown(e, this._fadeInContainer); }}></div>
                     <div ref={this._bodyContainer}className="body-container" style={{left: `${this.regiondata.fadeIn}px`, width:`${this.regiondata.duration - this.regiondata.fadeIn - this.regiondata.fadeOut}px`}}
                     onPointerOver={(e) => {this.onContainerOver(e, this._bodyContainer); }}
                     onPointerOut ={(e) => {this.onContainerOut(e, this._bodyContainer);}}
-                    onPointerDown={(e) => {this.onContainerDown(e, this._bodyContainer); }}> </div>
+                    onContextMenu={(e) => {this.onContainerDown(e, this._bodyContainer); }}> </div>
                 </div>
             </div>
         );
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index 431eb5d37..5cc4b2876 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -10,6 +10,7 @@ import { Keyframe, KeyframeFunc, RegionData } from "./Keyframe";
 import { FlyoutProps } from "./Timeline";
 import { Transform } from "../../util/Transform";
 import { AddComparisonParameters } from "../../northstar/model/idea/idea";
+import { CollectionSchemaBooleanCell } from "../collections/CollectionSchemaCells";
 
 interface IProps {
     node: Doc;
@@ -59,9 +60,9 @@ export class Track extends React.Component<IProps> {
         return reaction( () => {
             return Doc.allKeys(this.props.node).map(key => FieldValue(this.props.node[key]));
         }, async () => {
-            let regiondata = this.findRegion(this.props.currentBarX);
+            let regiondata: (Doc | undefined) = await this.findRegion(this.props.currentBarX) ;
             if (regiondata) {
-                let keyframes = await DocListCastAsync(regiondata.keyframes!); 
+                let keyframes = await DocListCastAsync((regiondata as Doc).keyframes!); 
                 keyframes!.forEach( async (kf) => {
                     if (kf.type === KeyframeFunc.KeyframeType.default && kf.time === this.props.currentBarX) {
                         console.log("full keychange triggered"); 
@@ -95,7 +96,7 @@ export class Track extends React.Component<IProps> {
     currentBarXReaction = () => {
         return reaction(() => this.props.currentBarX, async () => {
             if (this._keyReaction) this._keyReaction(); //dispose previous reaction first
-            let regiondata: (Doc | undefined) = this.findRegion(this.props.currentBarX);
+            let regiondata: (Doc | undefined) = await this.findRegion(this.props.currentBarX);
             if (regiondata) {
                 this.props.node.hidden = false;
                 await this.timeChange(this.props.currentBarX);
@@ -108,11 +109,11 @@ export class Track extends React.Component<IProps> {
 
     @action
     timeChange = async (time: number) => {
-        let regiondata = this.findRegion(Math.round(time)); //finds a region that the scrubber is on
+        let regiondata = await this.findRegion(Math.round(time)); //finds a region that the scrubber is on
         if (regiondata) {
-            let leftkf: (Doc | undefined) = await this.calcMinLeft(regiondata!); // lef keyframe, if it exists
-            let rightkf: (Doc | undefined) = await this.calcMinRight(regiondata!); //right keyframe, if it exists            
-            let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata!); //if the scrubber is on top of the keyframe
+            let leftkf: (Doc | undefined) = await this.calcMinLeft(regiondata); // lef keyframe, if it exists
+            let rightkf: (Doc | undefined) = await this.calcMinRight(regiondata); //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);
                 this._keyReaction = this.keyReaction(); //reactivates reaction. 
@@ -200,21 +201,25 @@ export class Track extends React.Component<IProps> {
         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 fadeInX:List<number> = regiondata.fadeInX as List<number>; 
-        let fadeInY:List<number> = regiondata.fadeInY as List<number>; 
-        let index = fadeInX[Math.round(fadeInX.length - 1 * timeratio)];  
-        let correspondingY = fadeInY[index]; 
-        let correspondingYRatio = correspondingY / fadeInY[fadeInY.length - 1] - fadeInY[0]; 
-
+        let fadeInY:List<number> = regiondata.fadeInY as List<number>;  
+        let realIndex = (fadeInY.length - 1) * timeratio; 
+        let xIndex = Math.floor(realIndex);  
+        let yValue = fadeInY[xIndex]; 
+        let secondYOffset:number = yValue; 
+        let minY = fadeInY[0];  // for now
+        let maxY = fadeInY[fadeInY.length - 1]; //for now 
+        if (fadeInY.length !== 1) {
+            secondYOffset = fadeInY[xIndex] + ((realIndex - xIndex) / 1) * (fadeInY[xIndex + 1] - fadeInY[xIndex]) - minY; 
+        }
+        console.log(secondYOffset); 
+        console.log(maxY - minY); 
+        console.log(minY); 
+        let finalRatio = secondYOffset / (maxY - minY); 
+        console.log(finalRatio); 
         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
-                if(index + 1 <= fadeInX.length) {
-
-                } else if (index - 1 >= fadeInX.length) {
-
-                }
                 const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]);
-                const adjusted = diff * timeratio;
+                const adjusted = diff * finalRatio;
                 this.props.node[key] = NumCast(leftNode[key]) + adjusted;
             } else {
                 this.props.node[key] = leftNode[key];
@@ -223,9 +228,10 @@ export class Track extends React.Component<IProps> {
     }
 
     @action
-    findRegion(time: number): (RegionData | undefined) {
-        let foundRegion = undefined;
-        DocListCast(this.regions).map(region => {
+    findRegion = async (time: number)  => {
+        let foundRegion:(Doc | undefined) = undefined;
+        let regions = await DocListCastAsync(this.regions); 
+        regions!.forEach(region => {
             region = region as RegionData;
             if (time >= NumCast(region.position) && time <= (NumCast(region.position) + NumCast(region.duration))) {
                 foundRegion = region;