autokeyframe still doesn't work

3 files changed, 28 insertions, 127 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 5e4676f56..2f2639c76 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -9,7 +9,6 @@ import { Cast, NumCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema";
 import { Transform } from "../../util/Transform";
-import { InkField, StrokeData } from "../../../new_fields/InkField";
 import { TimelineMenu } from "./TimelineMenu";
 import { Docs } from "../../documents/Documents";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
@@ -172,7 +171,6 @@ interface IProps {
     check: string;
     changeCurrentBarX: (x: number) => void;
     transform: Transform;
-    checkCallBack: (visible: boolean) => void;
 }
 
 
@@ -214,17 +212,7 @@ export class Keyframe extends React.Component<IProps> {
     @computed private get pixelDuration() { return KeyframeFunc.convertPixelTime(this.regiondata.duration, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
     @computed private get pixelFadeIn() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeIn, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
     @computed private get pixelFadeOut() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeOut, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
-    @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;
-            }
-        }
-    }
-
+   
     componentWillMount() {
         runInAction(async () => {
             if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();
@@ -418,12 +406,6 @@ export class Keyframe extends React.Component<IProps> {
      */
     @action
     makeRegionMenu = (kf: Doc, e: MouseEvent) => {
-        TimelineMenu.Instance.addItem("button", "Add Ease", () => {
-            this.onContainerDown(kf, "interpolate");
-        }),
-            TimelineMenu.Instance.addItem("button", "Add Path", () => {
-                this.onContainerDown(kf, "path");
-            }),
             TimelineMenu.Instance.addItem("button", "Remove Region", () => {
                 runInAction(() => {
                     this.regions.splice(this.regions.indexOf(this.props.RegionData), 1);
@@ -525,88 +507,7 @@ export class Keyframe extends React.Component<IProps> {
         div.style.opacity = "0";
         Doc.UnBrushDoc(this.props.node);
     }
-
-
-    private _reac: (undefined | IReactionDisposer) = undefined;
-    private _plotList: ([string, StrokeData] | undefined) = undefined;
-    private _interpolationKeyframe: (Doc | undefined) = undefined;
-    private _type: string = "";
-
-
-    /**
-     * Need to fix this. skip
-     */
-    @action
-    onContainerDown = (kf: Doc, type: string) => {
-        let listenerCreated = false;
-        this.props.checkCallBack(true);
-        this._type = type;
-        this.props.collection.backgroundColor = "rgb(0,0,0)";
-        this._reac = reaction(() => {
-            return this.inks;
-        }, data => {
-            if (!listenerCreated) {
-                this._plotList = Array.from(data!)[data!.size - 1]!;
-                this._interpolationKeyframe = kf;
-                listenerCreated = true;
-                const reac = reaction(() => {
-                    return this.props.check;
-                }, () => {
-                    if (this.props.check === "yes") this.onReactionListen();
-                    reac();
-                    this.props.checkCallBack(false);
-                });
-            }
-        });
-    }
-
-    /**
-     * for custom draw interpolation. Need to be refactored
-     */
-    @action
-    onReactionListen = () => {
-        if (this._reac && this._plotList && this._interpolationKeyframe) {
-            this.props.collection.backgroundColor = "#FFF";
-            this._reac();
-            let xPlots = new List<number>();
-            let yPlots = new List<number>();
-            let maxY = 0;
-            let minY = Infinity;
-            let pathData = this._plotList![1].pathData;
-            for (let i = 0; i < pathData.length - 1;) {
-                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);
-                let increment = Math.floor(pathData.length / this._gain);
-                if (pathData.length > this._gain) {
-                    if (i + increment < pathData.length) {
-                        i = i + increment;
-                    } else {
-                        i = pathData.length - 1;
-                    }
-                } else {
-                    i++;
-                }
-            }
-            let index = this.keyframes.indexOf(this._interpolationKeyframe!);
-            if (this._type === "interpolate") {
-                (Cast(this.regiondata.functions![index], Doc) as Doc).interpolationX = xPlots;
-                (Cast(this.regiondata.functions![index], Doc) as Doc).interpolationY = yPlots;
-            } else if (this._type === "path") {
-                (Cast(this.regiondata.functions![index], Doc) as Doc).pathX = xPlots;
-                (Cast(this.regiondata.functions![index], Doc) as Doc).pathY = yPlots;
-            }
-            this._reac = undefined;
-            this._interpolationKeyframe = undefined;
-            this._plotList = undefined;
-        }
-    }
+  
 
     ///////////////////////UI STUFF /////////////////////////
 
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index df25f709a..fedffe8c1 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -508,7 +508,7 @@ export class Timeline extends React.Component<FieldViewProps> {
                                     <div key="timeline_scrubberhead" className="scrubberhead" onPointerDown={this.onScrubberDown} ></div>
                                 </div>
                                 <div key="timeline_trackbox" className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown} style={{ width: `${this._totalLength}px` }}>
-                                    {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={this._timelineVisible} check={this._check} checkCallBack={this.checkCallBack} />)}
+                                    {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} collection={this.props.Document} timelineVisible={this._timelineVisible} check={this._check} />)}
                                 </div>
                             </div>
                             <div key="timeline_title" className="title-container" ref={this._titleContainer}>
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index c27a24ecf..fc8d0852f 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 , toJS} from "mobx";
+import { observable, reaction, action, IReactionDisposer, computed, runInAction, autorun , toJS, isObservableArray, IObservableArray} from "mobx";
 import "./Track.scss";
 import { Doc, DocListCastAsync, DocListCast, Field } from "../../../new_fields/Doc";
 import { listSpec } from "../../../new_fields/Schema";
@@ -22,8 +22,6 @@ interface IProps {
     timelineVisible: boolean;
     check: string;
     changeCurrentBarX: (x: number) => void;
-    checkCallBack: (visible: boolean) => void;
-
 }
 
 @observer
@@ -58,18 +56,6 @@ export class Track extends React.Component<IProps> {
         "zIndex"
     ];
 
-    private whiteList = [
-        "data", 
-        "height", 
-        "opacity", 
-        "width", 
-        "x", 
-        "y"
-    ]
-
-    @observable private whitelist = [
-
-    ]; 
     private readonly MAX_TITLE_HEIGHT = 75; 
     private _trackHeight = 0;
 
@@ -143,24 +129,38 @@ export class Track extends React.Component<IProps> {
         this._isOnKeyframe = false;
     }
 
+
+    private whitelist = [
+        "x", 
+        "y", 
+        "width", 
+        "height", 
+        "data"
+    ]
     /**
      * 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!"); 
+    autoCreateKeyframe = async () => {        
+        return reaction(async () => {
+            return this.whitelist.map(key => this.props.node[key]);
+        }, (changed, reaction) => {            
             //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");
-                } 
-            }
+            //let region:(Doc | undefined) = await this.findRegion(time); 
+            console.log(this.props.node.x);
+            console.log(this.props.node.y); 
+            console.log(changed);  
             
+            // 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");
+            //     } 
+            // }
+            //reaction.dispose(); 
         });
+        
     }
 
     /**
@@ -185,7 +185,7 @@ export class Track extends React.Component<IProps> {
             let regiondata: (Doc | undefined) = await this.findRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
             if (regiondata) {
                 this.props.node.hidden = false;
-                await this.timeChange(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
+                //await this.timeChange(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
             } else {
                 this.props.node.hidden = true;
                 this.props.node.opacity = 0;