for demo

3 files changed, 94 insertions, 81 deletions

diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 352e5e0d7..c6177e5b3 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -20,6 +20,8 @@ import { List } from "../../../new_fields/List";
 import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema";
 import { CollectionBaseView } from "../collections/CollectionBaseView";
 import { notDeepEqual } from "assert";
+import { DocUtils, Docs } from "../../documents/Documents";
+import { DragLinksAsDocuments } from "../../util/DragManager";
 
 
 
@@ -30,6 +32,8 @@ interface IProp {
 }
 
 const KeyDataSchema = createSchema({});  
+
+
 const TimeAndKeyDataSchema = createSchema({
     time: defaultSpec("number", 0),
     key: Doc
@@ -71,9 +75,7 @@ export class Keyframe extends React.Component<IProp> {
         // need edge case here when keyframe data already exists when loading.....................;
         // let keyframes = Cast(this.props.node.keyframes, listSpec(Doc)) as List<Doc>;
         // if keyframes.indexOf() 
-        
-        let keyframes = Cast(this.props.node.keyframes, listSpec(Doc)) as List<Doc>;     
-        keyframes.indexOf(this.props.keyframedata);
+
     }
 
     componentWillUnmount() {
@@ -95,15 +97,13 @@ export class Keyframe extends React.Component<IProp> {
     // }
 
     @computed
-    get keyframes() {
+    private get keyframes() {
         return Cast(this.props.node.keyframes, listSpec(Doc)) as List<Doc>;
     }
     @action 
     makeKeyData = (kfpos: number) => { //Kfpos is mouse offsetX, representing time 
         let hasData = false; 
-        let index = this.keyframes.indexOf(this.props.keyframedata); 
-        let kfd = KeyframeData(this.keyframes[index] as Doc); 
-        kfd.kfs!.forEach(TK => { //TK is TimeAndKey
+        this.kfd.kfs!.forEach(TK => { //TK is TimeAndKey
             TK = TK as Doc; 
             if (TK.time === kfpos){
                 hasData = true; 
@@ -112,13 +112,19 @@ export class Keyframe extends React.Component<IProp> {
         if (!hasData){
             let TK:Doc = new Doc(); 
             TK.time = kfpos; 
-            TK.key = this.props.node; 
-            kfd.kfs!.push(TK);
-            (this.keyframes[index] as Doc) = TK; 
+            TK.key = Doc.MakeCopy(this.props.node); 
+            this.kfd.kfs!.push(TK);
         } 
         
     }
 
+
+    @computed
+    private get kfd(){
+        let index = this.keyframes.indexOf(this.props.keyframedata); 
+        return KeyframeData(this.keyframes[index] as Doc); 
+    }
+
     @action 
     onBarPointerDown = (e: React.PointerEvent) => {
         e.preventDefault(); 
@@ -133,12 +139,12 @@ export class Keyframe extends React.Component<IProp> {
     onBarPointerMove = (e:PointerEvent) => {
         e.preventDefault(); 
         e.stopPropagation(); 
-        if (this._position >= 0){
-            let futureX = this._position + e.movementX; 
+        if (this.kfd.position >= 0){
+            let futureX = this.kfd.position + e.movementX; 
             if (futureX <= 0){
-                this._position = 0; 
+                this.kfd.position = 0; 
             } else{
-                this._position += e.movementX; 
+                this.kfd.position += e.movementX; 
             }
         }
     }
@@ -171,7 +177,14 @@ export class Keyframe extends React.Component<IProp> {
         let barX = bar.getBoundingClientRect().left; 
         let offset = e.clientX - barX; 
         this._duration -= offset; 
-        this._position += offset; 
+        this.kfd.position += offset; 
+        this.kfd.kfs!.forEach(kf => {
+            kf = kf as Doc; 
+            kf.time = NumCast(kf.time) + offset; 
+        }); 
+        this._keyframes.forEach(num => {
+            num += offset; 
+        }); 
     }
    
     
@@ -184,6 +197,7 @@ export class Keyframe extends React.Component<IProp> {
         let offset = e.clientX - barX; 
         console.log(offset); 
         this._duration += offset; 
+        this.kfd.duration = this._duration; 
     }
 
     createDivider = (type?: string):JSX.Element => {
@@ -202,7 +216,8 @@ export class Keyframe extends React.Component<IProp> {
         let mouse = e.nativeEvent;
         let position = NumCast(this.props.keyframedata.position);  
         this._keyframes.push(mouse.offsetX); 
-        this.makeKeyData(position); 
+        this.makeKeyData(position + mouse.offsetX); 
+
     }
 
     render() {
@@ -217,7 +232,7 @@ export class Keyframe extends React.Component<IProp> {
                     {this._keyframes.map(kf => {return <div className="keyframe" style={{left: `${kf}px`}}>
                         {this.createDivider()}
                         <div className="keyframeCircle"></div>
-                    </div>})}
+                    </div>;})}
                     {this.createDivider("left")}
                     {this.createDivider("right")}
                 </div>
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index fc3b8f454..e6b57ec75 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -213,15 +213,15 @@ export class Timeline extends CollectionSubView(Document){
                     <div onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x"/> </div>  
                     <div onClick={this.onPlay}> <FontAwesomeIcon icon={faPlayCircle} size="2x"/> </div>
                     <div onClick={this.windForward}> <FontAwesomeIcon icon={faForward} size="2x"/> </div>
-                    <div>
+                    {/* <div>
                         <p>Timeline Overview</p>
                         <div className="overview"></div>
-                    </div>
+                    </div> */}
                 </div>  
                 <div className="info-container" ref ={this._infoContainer}> 
                     <div className="scrubberbox" ref ={this._scrubberbox} onClick={this.onScrubberClick}>
                         {this._ticks.map(element => {
-                            return <div className="tick" style={{transform:`translate(${element / 20}px)`, position:"absolute", pointerEvent:"none"}}> <p>{this.toTime(element)}</p></div>;
+                            return <div className="tick" style={{transform:`translate(${element / 20}px)`, position:"absolute", pointerEvents:"none"}}> <p>{this.toTime(element)}</p></div>;
                         })}
                     </div>
                     <div className="scrubber" onPointerDown = {this.onScrubberDown} style={{transform:`translate(${this._currentBarX}px)`}}>
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index a774fe2d3..c7154fbb3 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -25,8 +25,6 @@ import { Tapable } from "tapable";
 import { Keyframe, KeyframeData } from "./Keyframe";
 import { timingSafeEqual } from "crypto";
 import { node } from "prop-types";
-type Data = List<Doc>;
-type Keyframes = List<List<Doc>>;
 
 const PositionSchema = createSchema({
     x: defaultSpec("number", 0),
@@ -56,34 +54,36 @@ export class Track extends React.Component<IProp> {
     private _reactionDisposers: IReactionDisposer[] = [];
     private _selectionManagerChanged?: IReactionDisposer;
 
-    @observable private _currentBarX: number = 0;
     @observable private _keys = ["x", "y", "width", "height", "panX", "panY", "scale"];
 
-    // @computed private get _keyframes() {
-    //     return Cast(this.props.Document.keyframes, listSpec(Doc)) as any as List<List<Doc>>;
-    // }
-
-    // @computed private get _data() {
-    //     //return Cast(this.props.Document.dataa, listSpec(Doc)) as List<Doc>; 
-    //     return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))!;
-    // }
 
+    @computed
+    private get keyframes(){
+        return Cast(this.props.node.keyframes, listSpec(Doc)) as List<Doc> ; 
+    }
 
 
 
     @action
     timeChange = async (time: number) => {
-        let leftkf: (Doc | undefined) = this.calcMinLeft(time);
-        let rightkf: (Doc | undefined) = this.calcMinRight(time); 
-        if (this.props.node.keyframedata!.kfs!.length < 2){
-            return; 
-        }
+        let singlekfd = this.findKeyframe(time); 
+        let leftkf: (Doc | undefined) = this.calcMinLeft(singlekfd!);
+        let rightkf: (Doc | undefined) = this.calcMinRight(singlekfd!); 
+
         if (leftkf && rightkf){ 
-            this.interpolate(leftkf, rightkf, time); 
+            this.interpolate(leftkf, rightkf); 
         } else if(leftkf){
-
+            console.log("left exists"); 
+            this._keys.forEach(k => {
+                let data = leftkf!.key as Doc; 
+                this.props.node[k] = data[k]; 
+            }); 
         } else if (rightkf){
-
+            console.log("right exists"); 
+            this._keys.forEach(k => {
+                let data = rightkf!.key as Doc; 
+                this.props.node[k] = data[k]; 
+            }); 
         }
     }
 
@@ -94,12 +94,12 @@ export class Track extends React.Component<IProp> {
      * @param time 
      */
     @action
-    calcMinLeft = (time: number): (Doc|undefined) => { //returns the time of the closet keyframe to the left
+    calcMinLeft = (singlekfd: Doc): (Doc|undefined) => { //returns the time of the closet keyframe to the left
         let leftKf:Doc = new Doc();
-        leftKf.time = Infinity; 
-        this._data.forEach((kf) => {
+        leftKf.time = Infinity;  
+        (singlekfd.kfs! as List<Doc>).forEach((kf) => {
             kf = kf as Doc;
-            if (NumCast(kf.time) < time && NumCast(leftKf.time) > NumCast(kf.time)) {
+            if (NumCast(kf.time) < this.props.currentBarX && NumCast(leftKf.time) > NumCast(kf.time)) {
                 leftKf = kf;  
             }
         });
@@ -115,12 +115,12 @@ export class Track extends React.Component<IProp> {
      * @param time: time
      */
     @action
-    calcMinRight = (time: number): (Doc|undefined) => { //returns the time of the closest keyframe to the right 
+    calcMinRight = (singlekfd: Doc): (Doc|undefined) => { //returns the time of the closest keyframe to the right 
         let rightKf:Doc = new Doc();
         rightKf.time = Infinity; 
-        this._data.forEach((kf) => {
+        (singlekfd.kfs! as List<Doc>).forEach((kf) => {
             kf = kf as Doc;
-            if (NumCast(kf.time) > time && NumCast(rightKf.time) > NumCast(kf.time)) {
+            if (NumCast(kf.time) > this.props.currentBarX && NumCast(rightKf.time) > NumCast(kf.time)) {
                 rightKf = kf;  
             }
         });
@@ -140,61 +140,63 @@ export class Track extends React.Component<IProp> {
      * @param time time that you want to interpolate
      */
     @action
-    interpolate = async (kf1: Doc, kf2: Doc, time: number) => {
-        const keyFrame1 = (await kf1)!;
-        const keyFrame2 = (await kf2)!;
-
+    interpolate = async (kf1: Doc, kf2: Doc) => {
+        let node1 = kf1.key as Doc; 
+        let node2 = kf2.key as Doc; 
+        console.log(toJS(node1)); 
+        console.log(toJS(node2)); 
         const dif_time = NumCast(kf2.time) - NumCast(kf1.time);
-        const ratio = (time - NumCast(kf1.time)) / dif_time; //linear 
+        const ratio = (this.props.currentBarX - NumCast(kf1.time)) / dif_time; //linear 
 
         this._keys.forEach(key => {
-            const diff = NumCast(keyFrame2[key]) - NumCast(keyFrame1[key]);
+            const diff = NumCast(node2[key]) - NumCast(node1[key]);
             const adjusted = diff * ratio;
-            this.props.node[key] = NumCast(keyFrame1[key]) + adjusted;
+            this.props.node[key] = NumCast(node1[key]) + adjusted;
         });
     }
 
     @action
     componentDidMount() {
         this.props.node.hidden = true; 
+        this.props.node.opacity = 0; 
         this.props.node.keyframes = new List<Doc>(); 
-        let keyframes = Cast(this.props.node.keyframes, listSpec(Doc)) as List<Doc>; 
         reaction (() => this.props.currentBarX, () => {
-            keyframes.forEach((datum) => {
-                datum = KeyframeData(datum as Doc); 
-                if (keyframes.length !== 0){
-                    let kf:(Doc | undefined) = this.findKeyframe(this.props.currentBarX); 
-                    if (kf !== undefined){
+            this.keyframes.forEach((kfd) => {
+                kfd = KeyframeData(kfd as Doc); 
+                if (kfd.length !== 0){
+                    let singlekfd:(Doc | undefined) = this.findKeyframe(this.props.currentBarX); 
+                    if (singlekfd !== undefined){
                         this.props.node.hidden = false; 
-                        console.log(toJS(kf.kfs!));
+                        this.timeChange(this.props.currentBarX); 
+                    } else {
+                        this.props.node.hidden = true; 
                     }
                 }
             }); 
         }); 
 
-        reaction(() => {
-            let keys = Doc.allKeys(this.props.node); 
-            let x = keys.indexOf("keyframes"); 
-            let afterX = keys.slice(x + 1); 
-            let beforeX = keys.slice(0, x); 
-            keys = beforeX.concat(afterX); 
-            return keys.map(key => FieldValue(this.props.node[key]));
-        }, data => {
-            if (keyframes.length !== 0){
-                let kf:(Doc | undefined) = this.findKeyframe(this.props.currentBarX); 
-                console.log(kf + "from reaction wheh moving"); 
-            }
-        }); 
+        // reaction(() => {
+        //     let keys = Doc.allKeys(this.props.node); 
+        //     let x = keys.indexOf("keyframes"); 
+        //     let afterX = keys.slice(x + 1); 
+        //     let beforeX = keys.slice(0, x); 
+        //     keys = beforeX.concat(afterX); 
+        //     return keys.map(key => FieldValue(this.props.node[key]));
+        // }, data => {
+        //     if (this.keyframes.length !== 0){
+        //         let kf:(Doc | undefined) = this.findKeyframe(this.props.currentBarX); 
+        //     }
+        // }); 
     }
 
 
     @action 
     findKeyframe(time:number): (Doc | undefined){
         let foundKeyframe = undefined; 
-        (Cast(this.props.node.keyframes, listSpec(Doc)) as List<Doc>).map(kf => {
-            kf = kf as Doc; 
-            if (time >= NumCast(kf.position) && time <= (NumCast(kf.position) + NumCast(kf.duration))){
-                foundKeyframe = kf; 
+        this.keyframes.map(kfd => {
+            kfd = KeyframeData(kfd as Doc); 
+            if (time >= NumCast(kfd.position) && time <= (NumCast(kfd.position) + NumCast(kfd.duration))){
+                foundKeyframe = kfd; 
             }    
         }); 
         return foundKeyframe; 
@@ -209,10 +211,6 @@ export class Track extends React.Component<IProp> {
 
     @observable private _keyframes: JSX.Element[] = []; 
     
-    @computed
-    get keyframes() {
-       return Cast(this.props.node.keyframes, listSpec(Doc)) as List<Doc>;
-    }
 
     @action 
     onInnerDoubleClick = (e: React.MouseEvent) => {