autocreate keyframe UNSTABLE

2 files changed, 77 insertions, 39 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 62528483b..5e4676f56 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -98,6 +98,41 @@ export namespace KeyframeFunc {
         return regiondata;
     };
 
+    export const makeKeyData = async (regiondata:RegionData, time: number, badNode:Doc, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time 
+        runInAction(async () => {
+            let doclist = (await DocListCastAsync(regiondata.keyframes))!;
+            let existingkf: (Doc | undefined) = undefined;
+            doclist.forEach(TK => {
+                if (TK.time === time) existingkf = TK;
+            });
+            if (existingkf) return existingkf;
+            let TK: Doc = new Doc();
+            TK.time = time;
+            TK.key = Doc.MakeCopy(badNode, true);
+            TK.type = type;
+            regiondata.keyframes!.push(TK);
+            let interpolationFunctions = new Doc();
+            interpolationFunctions.interpolationX = new List<number>([0, 1]);
+            interpolationFunctions.interpolationY = new List<number>([0, 100]);
+            interpolationFunctions.pathX = new List<number>();
+            interpolationFunctions.pathY = new List<number>();
+            regiondata.functions!.push(interpolationFunctions);
+            let found: boolean = false;
+            regiondata.keyframes!.forEach(compkf => {
+                compkf = compkf as Doc;
+                if (time < NumCast(compkf.time) && !found) {
+                    runInAction(() => {
+                        regiondata.keyframes!.splice(doclist.indexOf(compkf as Doc), 0, TK);
+                        regiondata.keyframes!.pop();
+                        found = true;
+                    });
+                    return;
+                }
+            });
+            return TK;
+        });
+    };
+
     export const convertPixelTime = (pos: number, unit: "mili" | "sec" | "min" | "hr", dir: "pixel" | "time", tickSpacing: number, tickIncrement: number) => {
         let time = dir === "pixel" ? (pos * tickSpacing) / tickIncrement : (pos / tickSpacing) * tickIncrement;
         switch (unit) {
@@ -193,10 +228,10 @@ export class Keyframe extends React.Component<IProps> {
     componentWillMount() {
         runInAction(async () => {
             if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();
-            let fadeIn = await this.makeKeyData(this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade)!;
-            let fadeOut = await this.makeKeyData(this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade)!;
-            let start = await this.makeKeyData(this.regiondata.position, KeyframeFunc.KeyframeType.end)!;
-            let finish = await this.makeKeyData(this.regiondata.position + this.regiondata.duration, KeyframeFunc.KeyframeType.end)!;
+            let fadeIn = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, this.props.node, KeyframeFunc.KeyframeType.fade))! as any as Doc;
+            let fadeOut = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, this.props.node, KeyframeFunc.KeyframeType.fade))! as any as Doc;
+            let start = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position, this.props.node, KeyframeFunc.KeyframeType.end))! as any as Doc;
+            let finish = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration, this.props.node, KeyframeFunc.KeyframeType.end))! as any as Doc;
             (fadeIn.key! as Doc).opacity = 1;
             (fadeOut.key! as Doc).opacity = 1;
             (start.key! as Doc).opacity = 0.1;
@@ -205,39 +240,7 @@ export class Keyframe extends React.Component<IProps> {
         });
     }
 
-    @action
-    makeKeyData = async (kfpos: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time 
-        let doclist = (await DocListCastAsync(this.regiondata.keyframes))!;
-        let existingkf: (Doc | undefined) = undefined;
-        doclist.forEach(TK => {
-            if (TK.time === kfpos) existingkf = TK;
-        });
-        if (existingkf) return existingkf;
-        let TK: Doc = new Doc();
-        TK.time = kfpos;
-        TK.key = Doc.MakeCopy(this.props.node, true);
-        TK.type = type;
-        this.regiondata.keyframes!.push(TK);
-        let interpolationFunctions = new Doc();
-        interpolationFunctions.interpolationX = new List<number>([0, 1]);
-        interpolationFunctions.interpolationY = new List<number>([0, 100]);
-        interpolationFunctions.pathX = new List<number>();
-        interpolationFunctions.pathY = new List<number>();
-        this.regiondata.functions!.push(interpolationFunctions);
-        let found: boolean = false;
-        this.regiondata.keyframes!.forEach(compkf => {
-            compkf = compkf as Doc;
-            if (kfpos < NumCast(compkf.time) && !found) {
-                runInAction(() => {
-                    this.regiondata.keyframes!.splice(doclist.indexOf(compkf as Doc), 0, TK);
-                    this.regiondata.keyframes!.pop();
-                    found = true;
-                });
-                return;
-            }
-        });
-        return TK;
-    }
+    
 
 
     @action
@@ -361,9 +364,10 @@ export class Keyframe extends React.Component<IProps> {
         let offset = KeyframeFunc.convertPixelTime(Math.round((clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale), "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
         if (offset > this.regiondata.fadeIn && offset < this.regiondata.duration - this.regiondata.fadeOut) { //make sure keyframe is not created inbetween fades and ends
             let position = this.regiondata.position;
-            await this.makeKeyData(Math.round(position + offset));
+            await KeyframeFunc.makeKeyData(this.regiondata, Math.round(position + offset), this.props.node);
             this.regiondata.hasData = true; 
             this.props.changeCurrentBarX(KeyframeFunc.convertPixelTime(Math.round(position + offset), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement)); //first move the keyframe to the correct location and make a copy so the correct file gets coppied
+        
         }
     }
 
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 2ea3d168f..c27a24ecf 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { observer } from "mobx-react";
-import { observable, reaction, action, IReactionDisposer, computed, runInAction, autorun } from "mobx";
+import { observable, reaction, action, IReactionDisposer, computed, runInAction, autorun , toJS} from "mobx";
 import "./Track.scss";
 import { Doc, DocListCastAsync, DocListCast, Field } from "../../../new_fields/Doc";
 import { listSpec } from "../../../new_fields/Schema";
@@ -57,6 +57,19 @@ export class Track extends React.Component<IProps> {
         "type", 
         "zIndex"
     ];
+
+    private whiteList = [
+        "data", 
+        "height", 
+        "opacity", 
+        "width", 
+        "x", 
+        "y"
+    ]
+
+    @observable private whitelist = [
+
+    ]; 
     private readonly MAX_TITLE_HEIGHT = 75; 
     private _trackHeight = 0;
 
@@ -79,6 +92,7 @@ export class Track extends React.Component<IProps> {
             if (this.regions.length === 0) this.createRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
             this.props.node.hidden = false;
             this.props.node.opacity = 1;
+            this.autoCreateKeyframe(); 
         });
     }
 
@@ -130,6 +144,26 @@ export class Track extends React.Component<IProps> {
     }
 
     /**
+     * autocreates keyframe
+     */
+    @action 
+    autoCreateKeyframe = async () => {
+        return reaction(() => [this.props.node.data, this.props.node.height, this.props.node.width, this.props.node.x, this.props.node.y, this.props.node.opacity], async changed => {            
+            console.log("RAN!"); 
+            //convert scrubber pos(pixel) to time
+            let time = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement); 
+            //check for region 
+            let region:(Doc | undefined) = await this.findRegion(time); 
+            if (region !== undefined){ //if region at scrub time exist
+                if (DocListCast(region!.keyframes).find(kf => {return kf.time === time}) === undefined ){
+                   console.log("change has occured");
+                } 
+            }
+            
+        });
+    }
+
+    /**
      * reverting back to previous state before editing on AT
      */
     @action