testing interpolation types

6 files changed, 110 insertions, 10 deletions

diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 2578b47fc..a838d1deb 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -38,11 +38,11 @@
                 text-transform: uppercase;
                 letter-spacing: 2px;
                 background: rgb(238, 238, 238);
-                color: grey;
+                color: purple;
                 outline-color: black;
                 border: none;
                 padding: 12px 10px 11px 10px;
-                margin-left: 50px;
+                margin-left: 10px;
             }
 
             .collectionViewBaseChrome-collapse {
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index e91d31486..79b6b35ac 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -251,9 +251,9 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
                                 </div>
                             </div>
                         </div>
-                        <button className="collectionViewBaseChrome-button" >
+                        {/* <button className="collectionViewBaseChrome-button" >
                             SHOW TIMELINE
-                        </button>
+                        </button> */}
                     </div>
                     {this.subChrome()}
                 </div>
diff --git a/src/client/views/nodes/Keyframe.scss b/src/client/views/nodes/Keyframe.scss
index 11672388f..b1e8b0b65 100644
--- a/src/client/views/nodes/Keyframe.scss
+++ b/src/client/views/nodes/Keyframe.scss
@@ -80,6 +80,13 @@
         position:absolute; 
     }
 
+    .fadeIn-container, .fadeOut-container, .body-container{
+        position:absolute; 
+        height:100%; 
+        background-color: rgba(0, 0, 0, 0.5);
+        opacity: 0; 
+    }
+ 
 
 }
     
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 6ff925cb5..880c5aee5 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -10,6 +10,9 @@ import { List } from "../../../new_fields/List";
 import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema";
 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";
 
 export namespace KeyframeFunc {
     export enum KeyframeType {
@@ -48,6 +51,7 @@ export namespace KeyframeFunc {
         regiondata.position = 0;
         regiondata.fadeIn = 20;
         regiondata.fadeOut = 20;
+        regiondata.fadeInX = new List([1, 100]); 
         return regiondata;
     };
 }
@@ -65,6 +69,7 @@ export const RegionData = makeInterface(RegionDataSchema);
 interface IProps {
     node: Doc;
     RegionData: Doc;
+    collection:Doc; 
     changeCurrentBarX: (x: number) => void;
     setFlyout: (props: FlyoutProps) => any;
     transform: Transform; 
@@ -74,6 +79,9 @@ interface IProps {
 export class Keyframe extends React.Component<IProps> {
 
     @observable private _bar = React.createRef<HTMLDivElement>();
+    @observable private _fadeInContainer = React.createRef<HTMLDivElement>(); 
+    @observable private _fadeOutContainer = React.createRef<HTMLDivElement>(); 
+    @observable private _bodyContainer = React.createRef<HTMLDivElement>(); 
 
     @computed
     private get regiondata() {
@@ -112,6 +120,17 @@ export class Keyframe extends React.Component<IProps> {
         return last;
     }
 
+    @computed
+    private get inks(){
+        if (this.props.collection.data_ext){        
+            let data_ext = Cast(this.props.collection.data_ext, Doc) as Doc; 
+            let ink = Cast(data_ext.ink, InkField) as InkField; 
+            if (ink){
+                return ink.inkData; 
+            }
+        }
+    }
+
 
     async componentWillMount() {
         if (!this.regiondata.keyframes) {
@@ -300,6 +319,13 @@ export class Keyframe extends React.Component<IProps> {
     }
 
 
+    @action 
+    onKeyframeOver = (e: React.PointerEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        this.props.node.backgroundColor = "#000000"; 
+        
+    }
     @action
     private createKeyframeJSX = (kf: Doc, type = KeyframeFunc.KeyframeType.default) => {
         if (type === KeyframeFunc.KeyframeType.default) {
@@ -319,6 +345,34 @@ export class Keyframe extends React.Component<IProps> {
         );
     }
 
+    onContainerOver = (e: React.PointerEvent, ref:React.RefObject<HTMLDivElement>) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        let div = ref.current!; 
+        div.style.opacity = "1"; 
+    }
+
+    onContainerOut = (e: React.PointerEvent, ref: React.RefObject<HTMLDivElement>) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        let div = ref.current!; 
+        div.style.opacity ="0"; 
+    }
+
+    onContainerDown = (e: React.PointerEvent, 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"); }); 
+        }
+        
+    }
     render() {
         return (
             <div>
@@ -337,6 +391,18 @@ export class Keyframe extends React.Component<IProps> {
                     {this.regiondata.keyframes!.map(kf => {
                         return this.createKeyframeJSX(kf as Doc, (kf! as Doc).type as KeyframeFunc.KeyframeType);
                     })}
+                    <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> 
+                    <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>
+                    <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>
                 </div>
             </div>
         );
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 99db2a643..923e99e63 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -18,6 +18,9 @@ import { VideoField } from "../../../new_fields/URLField";
 import { CollectionVideoView } from "../collections/CollectionVideoView";
 import { Transform } from "../../util/Transform";
 import { faGrinTongueSquint } from "@fortawesome/free-regular-svg-icons";
+import { InkField } from "../../../new_fields/InkField";
+import { AddComparisonParameters } from "../../northstar/model/idea/idea";
+import { keepAlive } from "mobx-utils";
 
 
 export interface FlyoutProps {
@@ -65,6 +68,7 @@ export class Timeline extends CollectionSubView(Document) {
     @computed
     private get children(): List<Doc> {
         let extendedDocument = ["image", "video", "pdf"].includes(StrCast(this.props.Document.type));
+       
         if (extendedDocument) {
             if (this.props.Document.data_ext) {
                 return Cast((Cast(this.props.Document.data_ext, Doc) as Doc).annotations, listSpec(Doc)) as List<Doc>;
@@ -75,6 +79,17 @@ export class Timeline extends CollectionSubView(Document) {
         return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List<Doc>;
     }
 
+    @computed
+    private get inks(){
+        if (this.props.Document.data_ext){        
+            let data_ext = Cast(this.props.Document.data_ext, Doc) as Doc; 
+            let ink = Cast(data_ext.ink, InkField) as InkField; 
+            if (ink){
+                return ink.inkData; 
+            }
+        }
+    }
+
   
     componentDidMount() {
         if (StrCast(this.props.Document.type) === "video") {
@@ -348,7 +363,7 @@ export class Timeline extends CollectionSubView(Document) {
                             <div className="scrubberhead"></div>
                         </div>
                         <div className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown}>
-                            {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} transform={this.props.ScreenToLocalTransform()}/>)}
+                            {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} transform={this.props.ScreenToLocalTransform()} collection = {this.props.Document}/>)}
                         </div>
                     </div>
                     <div className="title-container" ref={this._titleContainer}>
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index 39f83639c..431eb5d37 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -15,6 +15,7 @@ interface IProps {
     node: Doc;
     currentBarX: number;
     transform: Transform;
+    collection: Doc; 
     changeCurrentBarX: (x: number) => void;
     setFlyout: (props: FlyoutProps) => any;
 }
@@ -116,7 +117,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);
+                this.interpolate(leftkf, rightkf, regiondata);
             }
         }
     }
@@ -193,16 +194,27 @@ export class Track extends React.Component<IProps> {
     }
 
     @action
-    interpolate = (left: Doc, right: Doc) => {
+    interpolate = (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 ratio = (this.props.currentBarX - NumCast(left.time)) / dif_time; //linear 
+        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]; 
+
         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 * ratio;
+                const adjusted = diff * timeratio;
                 this.props.node[key] = NumCast(leftNode[key]) + adjusted;
             } else {
                 this.props.node[key] = leftNode[key];
@@ -250,7 +262,7 @@ export class Track extends React.Component<IProps> {
                 <div className="track">
                     <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}>
                         {DocListCast(this.regions).map((region) => {
-                            return <Keyframe node={this.props.node} RegionData={region} changeCurrentBarX={this.props.changeCurrentBarX} setFlyout={this.props.setFlyout} transform={this.props.transform} />;
+                            return <Keyframe node={this.props.node} RegionData={region} changeCurrentBarX={this.props.changeCurrentBarX} setFlyout={this.props.setFlyout} transform={this.props.transform} collection={this.props.collection}/>;
                         })}
                     </div>
                 </div>