removed async nonsense from tracks and regions. added some comments.

3 files changed, 34 insertions, 26 deletions

diff --git a/src/client/views/animationtimeline/Region.tsx b/src/client/views/animationtimeline/Region.tsx
index df00924c6..53c5c4718 100644
--- a/src/client/views/animationtimeline/Region.tsx
+++ b/src/client/views/animationtimeline/Region.tsx
@@ -313,7 +313,7 @@ export class Region extends React.Component<IProps> {
     };
 
     @action
-    createKeyframe = async (clientX: number) => {
+    createKeyframe = (clientX: number) => {
         this._mouseToggled = true;
         const bar = this._bar.current!;
         const offset = RegionHelpers.convertPixelTime(Math.round((clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale), 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement);
@@ -327,7 +327,7 @@ export class Region extends React.Component<IProps> {
     };
 
     @action
-    moveKeyframe = async (e: React.MouseEvent, kf: Doc) => {
+    moveKeyframe = (e: React.MouseEvent, kf: Doc) => {
         e.preventDefault();
         e.stopPropagation();
         this.props.changeCurrentBarX(RegionHelpers.convertPixelTime(NumCast(kf.time!), 'mili', 'pixel', this.props.tickSpacing, this.props.tickIncrement));
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 3675238fd..71517d4fe 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -22,13 +22,20 @@ import { Track } from './Track';
  * 
  * The hierarchy works this way: 
  * 
- *              Timeline.tsx --> Track.tsx --> Region.tsx
+ *              Timeline.tsx --> Track.tsx --> Region.tsx 
                       |                              |
                       |                   TimelineMenu.tsx (timeline's custom contextmenu)
                       |
                       |
                 TimelineOverview.tsx (youtube like dragging thing is play mode, complex dragging thing in editing mode)
 
+                
+                Timeline (Track[])
+                      Track(Region[],animatedDoc)    ->   Region1(K[])    Region2 ... 
+                                                          F1 K1 K2...FL    K1 K2 K...
+                                                           K(x,y,_width,opacity)
+                      ...
+                      Track
 
     Most style changes are in SCSS file. 
     If you have any questions, email me or text me. 
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 2fd062a88..b90ff5eaf 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -44,18 +44,19 @@ export class Track extends React.Component<IProps> {
         return NumCast(RegionHelpers.convertPixelTime(this.props.currentBarX, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement));
     }
 
-    async componentDidMount() {
-        const regions = await DocListCastAsync(this.props.animatedDoc.regions);
-        if (!regions) this.props.animatedDoc.regions = new List<Doc>(); //if there is no region, then create new doc to store stuff
-        //these two lines are exactly same from timeline.tsx
-        const relativeHeight = window.innerHeight / 20;
-        runInAction(() => (this._trackHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT)); //for responsiveness
-        this._timelineVisibleReaction = this.timelineVisibleReaction();
-        this._currentBarXReaction = this.currentBarXReaction();
-        if (DocListCast(this.props.animatedDoc.regions).length === 0) this.createRegion(this.time);
-        this.props.animatedDoc.hidden = false;
-        this.props.animatedDoc.opacity = 1;
-        // this.autoCreateKeyframe();
+    componentDidMount() {
+        DocListCastAsync(this.props.animatedDoc.regions).then(regions => {
+            if (!regions) this.props.animatedDoc.regions = new List<Doc>(); //if there is no region, then create new doc to store stuff
+            //these two lines are exactly same from timeline.tsx
+            const relativeHeight = window.innerHeight / 20;
+            runInAction(() => (this._trackHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT)); //for responsiveness
+            this._timelineVisibleReaction = this.timelineVisibleReaction();
+            this._currentBarXReaction = this.currentBarXReaction();
+            if (DocListCast(this.props.animatedDoc.regions).length === 0) this.createRegion(this.time);
+            this.props.animatedDoc.hidden = false;
+            this.props.animatedDoc.opacity = 1;
+            // this.autoCreateKeyframe();
+        });
     }
 
     /**
@@ -86,7 +87,7 @@ export class Track extends React.Component<IProps> {
      *
      */
     @action
-    saveKeyframe = async () => {
+    saveKeyframe = () => {
         if (this.props.timeline.IsPlaying || !this.saveStateRegion || !this.saveStateKf) {
             this.saveStateKf = undefined;
             this.saveStateRegion = undefined;
@@ -223,23 +224,23 @@ export class Track extends React.Component<IProps> {
      * when scrubber position changes. Need to edit the logic
      */
     @action
-    timeChange = async () => {
+    timeChange = () => {
         if (this.saveStateKf !== undefined || this._newKeyframe) {
-            await this.saveKeyframe();
+            this.saveKeyframe();
         }
-        const regiondata = await this.findRegion(Math.round(this.time)); //finds a region that the scrubber is on
+        const regiondata = this.findRegion(Math.round(this.time)); //finds a region that the scrubber is on
         if (regiondata) {
-            const leftkf: Doc | undefined = await RegionHelpers.calcMinLeft(regiondata, this.time); // lef keyframe, if it exists
-            const rightkf: Doc | undefined = await RegionHelpers.calcMinRight(regiondata, this.time); //right keyframe, if it exists
-            const currentkf: Doc | undefined = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe
+            const leftkf: Doc | undefined = RegionHelpers.calcMinLeft(regiondata, this.time); // lef keyframe, if it exists
+            const rightkf: Doc | undefined = RegionHelpers.calcMinRight(regiondata, this.time); //right keyframe, if it exists
+            const currentkf: Doc | undefined = this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe
             if (currentkf) {
-                await this.applyKeys(currentkf);
+                this.applyKeys(currentkf);
                 runInAction(() => {
                     this.saveStateKf = currentkf;
                     this.saveStateRegion = regiondata;
                 });
             } else if (leftkf && rightkf) {
-                await this.interpolate(leftkf, rightkf);
+                this.interpolate(leftkf, rightkf);
             }
         }
     };
@@ -249,7 +250,7 @@ export class Track extends React.Component<IProps> {
      * need to change the logic here
      */
     @action
-    private applyKeys = async (kf: Doc) => {
+    private applyKeys = (kf: Doc) => {
         this.primitiveWhitelist.forEach(key => {
             if (!kf[key]) {
                 this.props.animatedDoc[key] = undefined;
@@ -277,7 +278,7 @@ export class Track extends React.Component<IProps> {
      * basic linear interpolation function
      */
     @action
-    interpolate = async (left: Doc, right: Doc) => {
+    interpolate = (left: Doc, right: Doc) => {
         this.primitiveWhitelist.forEach(key => {
             if (typeof left[key] === 'number' && typeof right[key] === 'number') {
                 //if it is number, interpolate