bug fixes

3 files changed, 28 insertions, 52 deletions

diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 9be1d9ed2..d992b1c44 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -92,14 +92,7 @@ export class Keyframe extends React.Component<IProps> {
     @computed
     private get regions() {
         return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>;
-    }
- 
-
-    @observable fadeIn = new Doc(); 
-    @observable fadeOut = new Doc(); 
-    @observable start = new Doc(); 
-    @observable finish = new Doc(); 
-    
+    }    
 
     @action
     componentDidMount() {
@@ -111,40 +104,24 @@ export class Keyframe extends React.Component<IProps> {
         (fadeOut.key! as Doc).opacity = 1;  
         (start.key! as Doc).opacity = 0.1; 
         (finish.key! as Doc).opacity = 0.1; 
-        let fadeInIndex = this.regiondata.keyframes!.indexOf(fadeIn); 
-        let fadeOutIndex = this.regiondata.keyframes!.indexOf(fadeOut); 
-        let startIndex = this.regiondata.keyframes!.indexOf(start); 
-        let finishIndex = this.regiondata.keyframes!.indexOf(finish); 
-        this.regiondata.keyframes![fadeInIndex] =fadeIn; 
-        this.regiondata.keyframes![fadeOutIndex] =fadeOut;  
-        this.regiondata.keyframes![startIndex] = start; 
-        this.regiondata.keyframes![finishIndex] =finish;
-
-        this.fadeIn = fadeIn; 
-        this.fadeOut = fadeOut; 
-        this.start = start; 
-        this.finish = finish; 
-
 
         observe(this.regiondata, change => {
             if (change.type === "update"){
-                console.log("updated");
-                this.fadeIn.time = this.regiondata.position + this.regiondata.fadeIn; 
-                this.fadeOut.time = this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut; 
-                this.start.time = this.regiondata.position; 
-                this.finish.time = this.regiondata.position + this.regiondata.duration;
-
-                let fadeInIndex = this.regiondata.keyframes!.indexOf(this.fadeIn); 
-                let fadeOutIndex = this.regiondata.keyframes!.indexOf(this.fadeOut); 
-                let startIndex = this.regiondata.keyframes!.indexOf(this.start); 
-                let finishIndex = this.regiondata.keyframes!.indexOf(this.finish); 
+                fadeIn.time = this.regiondata.position + this.regiondata.fadeIn; 
+                fadeOut.time = this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut; 
+                start.time = this.regiondata.position; 
+                finish.time = this.regiondata.position + this.regiondata.duration;
+
+                let fadeInIndex = this.regiondata.keyframes!.indexOf(fadeIn); 
+                let fadeOutIndex = this.regiondata.keyframes!.indexOf(fadeOut); 
+                let startIndex = this.regiondata.keyframes!.indexOf(start); 
+                let finishIndex = this.regiondata.keyframes!.indexOf(finish); 
         
-                this.regiondata.keyframes![fadeInIndex] = this.fadeIn; 
-                this.regiondata.keyframes![fadeOutIndex] = this.fadeOut;  
-                this.regiondata.keyframes![startIndex] = this.start; 
-                this.regiondata.keyframes![finishIndex] = this.finish;
+                this.regiondata.keyframes![fadeInIndex] = fadeIn; 
+                this.regiondata.keyframes![fadeOutIndex] =  fadeOut;  
+                this.regiondata.keyframes![startIndex] = start; 
+                this.regiondata.keyframes![finishIndex] = finish;
                
-
                 this.forceUpdate(); 
             }
         }); 
@@ -158,10 +135,6 @@ export class Keyframe extends React.Component<IProps> {
        
     }
 
-
-
-
-
     @action
     makeKeyData = (kfpos: number, type:KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.new) => { //Kfpos is mouse offsetX, representing time 
         let hasData = false;
@@ -174,8 +147,9 @@ export class Keyframe extends React.Component<IProps> {
         if (!hasData) {
             let TK: Doc = new Doc();
             TK.time = kfpos; 
+            console.log(kfpos + " from makeKeyDat"); 
             if (type === KeyframeFunc.KeyframeType.fade){
-                TK.key = new Doc(); 
+                TK.key = Doc.MakeAlias(this.props.node); 
             } else {
                 TK.key = Doc.MakeCopy(this.props.node, true); 
                 console.log(toJS(TK.key)); 
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 7076e21ab..a9add619c 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -217,6 +217,7 @@ export class Timeline extends CollectionSubView(Document) {
         titleContainer.scrollTop = titleContainer.scrollTop - e.movementY;
     }
 
+    
     @action
     onResizeDown = (e: React.PointerEvent) => {
         e.preventDefault();
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index 5f7d7619c..c1c722d62 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -24,7 +24,6 @@ interface IProps {
 @observer
 export class Track extends React.Component<IProps> {
     @observable private _inner = React.createRef<HTMLDivElement>();   
-    @observable private _keys = ["x", "y", "width", "height", "panX", "panY", "scale", "opacity"];
     @observable private _onInterpolate:boolean = false; 
 
     private _reactionDisposers: IReactionDisposer[] = [];
@@ -64,18 +63,19 @@ export class Track extends React.Component<IProps> {
             }
         }));
         this._reactionDisposers.push(reaction(() => {
-            if (!this._onInterpolate){
-                let keys = Doc.allKeys(this.props.node); 
-                return keys.map(key => FieldValue(this.props.node[key]));
-            }
+            let keys = Doc.allKeys(this.props.node); 
+            return keys.map(key => FieldValue(this.props.node[key]));
+            
         }, data => {
             let regiondata = this.findRegion(this.props.currentBarX);
             if (regiondata){
                 (Cast(regiondata.keyframes!, listSpec(Doc)) as List<Doc>).forEach((kf) => {
                     kf = kf as Doc; 
-                    if(NumCast(kf.time!) === this.props.currentBarX && kf.type !== KeyframeFunc.KeyframeType.fade){
+                    if(NumCast(kf.time!) === this.props.currentBarX && kf.type !== KeyframeFunc.KeyframeType.fade && !this._onInterpolate){
                         kf.key = Doc.MakeCopy(this.props.node, true); 
-                    } 
+                    } else {
+                        this._onInterpolate = false; 
+                    }
                 }); 
             }
         })); 
@@ -92,16 +92,17 @@ export class Track extends React.Component<IProps> {
 
     @action
     timeChange = async (time: number) => {
-        let region = this.findRegion(time);
+        let region = this.findRegion(Math.round(time));
         let leftkf: (Doc | undefined) = this.calcMinLeft(region!);
         let rightkf: (Doc | undefined) = this.calcMinRight(region!);
         let currentkf: (Doc | undefined) = this.calcCurrent(region!); 
+        console.log(currentkf); 
         if (currentkf && (currentkf.type !== KeyframeFunc.KeyframeType.new)){
             this._onInterpolate = true;   
             this.filterKeys(Doc.allKeys(currentkf.key as Doc)).forEach(k => {
                 this.props.node[k] = (currentkf!.key as Doc)[k];  
             }); 
-            this._onInterpolate = false;
+            console.log("current"); 
         } else if (leftkf && rightkf) {
             this.interpolate(leftkf, rightkf);
         } else if (leftkf) {                
@@ -132,7 +133,7 @@ export class Track extends React.Component<IProps> {
         let currentkf:(Doc|undefined) = undefined; 
         (region.keyframes! as List<Doc>).forEach((kf) => {
             kf = kf as Doc; 
-            if (NumCast(kf.time) === this.props.currentBarX){
+            if (NumCast(kf.time) === Math.round(this.props.currentBarX)){
                 currentkf = kf; 
             }
         });