From c12573ba5e45271493acf01ee7d63ce9387ac606 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Sat, 1 Feb 2020 16:23:51 -0500
Subject: lots of changes

---
 src/client/views/animationtimeline/Keyframe.tsx | 95 +++++++++++--------------
 1 file changed, 42 insertions(+), 53 deletions(-)

(limited to 'src/client/views/animationtimeline/Keyframe.tsx')

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 9f4d80d2b..4f6ba728d 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -20,15 +20,18 @@ import { undoBatch, UndoManager } from "../../util/UndoManager";
  * Useful static functions that you can use. Mostly for logic, but you can also add UI logic here also 
  */
 export namespace KeyframeFunc {
+
     export enum KeyframeType {
         end = "end",
         fade = "fade",
         default = "default",
     }
+
     export enum Direction {
         left = "left",
         right = "right"
     }
+
     export const findAdjacentRegion = (dir: KeyframeFunc.Direction, currentRegion: Doc, regions: List<Doc>): (RegionData | undefined) => {
         let leftMost: (RegionData | undefined) = undefined;
         let rightMost: (RegionData | undefined) = undefined;
@@ -97,41 +100,6 @@ 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 () => {
-            console.log("ran"); 
-            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;
@@ -202,7 +170,6 @@ interface IProps {
 export class Keyframe extends React.Component<IProps> {
 
     @observable private _bar = React.createRef<HTMLDivElement>();
-    @observable private _gain = 20; //default
     @observable private _mouseToggled = false;
     @observable private _doubleClickEnabled = false;
 
@@ -215,18 +182,15 @@ export class Keyframe extends React.Component<IProps> {
     @computed private get pixelFadeOut() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeOut, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
    
     componentWillMount() {
-        runInAction(async () => {
-            if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();
-            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;
-            (finish.key! as Doc).opacity = 0.1;
-            this.forceUpdate();
-        });
+        if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();        
+        let start = this.makeKeyData(this.regiondata, this.regiondata.position,  KeyframeFunc.KeyframeType.end);
+        let fadeIn = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade);
+        let fadeOut = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade);
+        let finish = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration,KeyframeFunc.KeyframeType.end);
+        (fadeIn.key as Doc).opacity = 1;
+        (fadeOut.key as Doc).opacity = 1;
+        (start.key as Doc).opacity = 0.1;
+        (finish.key as Doc).opacity = 0.1;
     }
 
     
@@ -253,7 +217,32 @@ export class Keyframe extends React.Component<IProps> {
             });
         }
     }
-
+    private makeKeyData = (regiondata:RegionData, time: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time 
+        let doclist =  DocListCast(regiondata.keyframes)!;
+        let existingkf: (Doc | undefined) = undefined;
+        doclist.forEach(TK => {
+            if (TK.time === time) existingkf = TK;
+        });
+        if (existingkf) return existingkf;
+        //else creates a new doc. 
+        let TK: Doc = new Doc();
+        TK.time = time;
+        TK.key = Doc.MakeCopy(this.props.node, true);
+        TK.type = type;
+        //assuming there are already keyframes (for keeping keyframes in order, sorted by time)
+        console.log("making..."); 
+        if (doclist.length === 0) regiondata.keyframes!.push(TK); 
+        doclist.forEach(kf => {
+            let index = doclist.indexOf(kf); 
+            let kfTime = NumCast(kf.time);
+                console.log(kfTime); 
+            if ((kfTime < time && index === doclist.length - 1) || (kfTime < time && time < NumCast(doclist[index + 1].time))){
+               regiondata.keyframes!.splice(index + 1, 0, TK);
+                return; 
+            }
+        });
+        return TK; 
+    }
 
     @action
     onBarPointerMove = (e: PointerEvent) => {
@@ -353,7 +342,7 @@ 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 KeyframeFunc.makeKeyData(this.regiondata, Math.round(position + offset), this.props.node);
+            this.makeKeyData(this.regiondata, Math.round(position + offset));
             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
         
@@ -552,12 +541,12 @@ export class Keyframe extends React.Component<IProps> {
         DocListCast(this.regiondata.keyframes).forEach(kf => {
             let index = this.keyframes.indexOf(kf);
             if (index !== this.keyframes.length - 1) {
-                let left = this.keyframes[this.keyframes.indexOf(kf) + 1];
+                let right = this.keyframes[index + 1];
                 let bodyRef = React.createRef<HTMLDivElement>();
                 let kfPos = KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement);
-                let leftPos = KeyframeFunc.convertPixelTime(NumCast(left!.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement);
+                let rightPos = KeyframeFunc.convertPixelTime(NumCast(right.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement);
                 keyframeDividers.push(
-                    <div ref={bodyRef} className="body-container" style={{ left: `${kfPos - this.pixelPosition}px`, width: `${leftPos - kfPos}px` }}
+                    <div ref={bodyRef} className="body-container" style={{ left: `${kfPos - this.pixelPosition}px`, width: `${rightPos - kfPos}px` }}
                         onPointerOver={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOver(e, bodyRef); }}
                         onPointerOut={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOut(e, bodyRef); }}
                         onContextMenu={(e) => {
-- 
cgit v1.2.3-70-g09d2

