1 files changed, 27 insertions, 22 deletions

diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 7ca13756a..3675238fd 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -1,28 +1,28 @@
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { faBackward, faForward, faGripLines, faPauseCircle, faPlayCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, runInAction, trace } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast } from '../../../fields/Doc';
-import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types';
-import { Utils, setupMoveUpEvents, emptyFunction, returnFalse } from '../../../Utils';
+import { BoolCast, NumCast, StrCast } from '../../../fields/Types';
+import { emptyFunction, setupMoveUpEvents, Utils } from '../../../Utils';
+import { DocumentType } from '../../documents/DocumentTypes';
+import clamp from '../../util/clamp';
 import { FieldViewProps } from '../nodes/FieldView';
-import { KeyframeFunc } from './Keyframe';
+import { RegionHelpers } from './Region';
 import './Timeline.scss';
 import { TimelineOverview } from './TimelineOverview';
 import { Track } from './Track';
-import clamp from '../../util/clamp';
-import { DocumentType } from '../../documents/DocumentTypes';
-import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 
 /**
- * Timeline class controls most of timeline functions besides individual keyframe and track mechanism. Main functions are 
+ * Timeline class controls most of timeline functions besides individual region and track mechanism. Main functions are 
  * zooming, panning, currentBarX (scrubber movement). Most of the UI stuff is also handled here. You shouldn't really make 
  * any logical changes here. Most work is needed on UI. 
  * 
  * The hierarchy works this way: 
  * 
- *              Timeline.tsx --> Track.tsx --> Keyframe.tsx 
+ *              Timeline.tsx --> Track.tsx --> Region.tsx
                       |                              |
                       |                   TimelineMenu.tsx (timeline's custom contextmenu)
                       |
@@ -58,7 +58,6 @@ export class Timeline extends React.Component<FieldViewProps> {
     //boolean vars and instance vars
     @observable private _currentBarX: number = 0;
     @observable private _windSpeed: number = 1;
-    @observable private _isPlaying: boolean = false; //scrubber playing
     @observable private _totalLength: number = 0;
     @observable private _visibleLength: number = 0;
     @observable private _visibleStart: number = 0;
@@ -69,6 +68,8 @@ export class Timeline extends React.Component<FieldViewProps> {
     @observable private _playButton = faPlayCircle;
     @observable private _titleHeight = 0;
 
+    @observable public IsPlaying: boolean = false; //scrubber playing
+
     /**
      * collection get method. Basically defines what defines collection's children. These will be tracked in the timeline. Do not edit.
      */
@@ -144,14 +145,17 @@ export class Timeline extends React.Component<FieldViewProps> {
     @action
     play = () => {
         const playTimeline = () => {
-            if (this._isPlaying) {
+            if (this.IsPlaying) {
                 this.changeCurrentBarX(this._currentBarX >= this._totalLength ? 0 : this._currentBarX + this._windSpeed);
                 setTimeout(playTimeline, 15);
             }
         };
-        this._isPlaying = !this._isPlaying;
-        this._playButton = this._isPlaying ? faPauseCircle : faPlayCircle;
-        this._isPlaying && playTimeline();
+        Array.from(this.mapOfTracks.values())
+            .filter(key => key)
+            .forEach(key => key!.saveKeyframe());
+        this.IsPlaying = !this.IsPlaying;
+        this._playButton = this.IsPlaying ? faPauseCircle : faPlayCircle;
+        this.IsPlaying && playTimeline();
     };
 
     /**
@@ -221,7 +225,7 @@ export class Timeline extends React.Component<FieldViewProps> {
         if (this._visibleStart + this._visibleLength + 20 >= this._totalLength) {
             this._visibleStart -= e.movementX;
             this._totalLength -= e.movementX;
-            this._time -= KeyframeFunc.convertPixelTime(e.movementX, 'mili', 'time', this._tickSpacing, this._tickIncrement);
+            this._time -= RegionHelpers.convertPixelTime(e.movementX, 'mili', 'time', this._tickSpacing, this._tickIncrement);
             this.props.Document.AnimationLength = this._time;
         }
         return false;
@@ -278,11 +282,11 @@ export class Timeline extends React.Component<FieldViewProps> {
         e.preventDefault();
         e.stopPropagation();
         const offset = e.clientX - this._infoContainer.current!.getBoundingClientRect().left;
-        const prevTime = KeyframeFunc.convertPixelTime(this._visibleStart + offset, 'mili', 'time', this._tickSpacing, this._tickIncrement);
-        const prevCurrent = KeyframeFunc.convertPixelTime(this._currentBarX, 'mili', 'time', this._tickSpacing, this._tickIncrement);
+        const prevTime = RegionHelpers.convertPixelTime(this._visibleStart + offset, 'mili', 'time', this._tickSpacing, this._tickIncrement);
+        const prevCurrent = RegionHelpers.convertPixelTime(this._currentBarX, 'mili', 'time', this._tickSpacing, this._tickIncrement);
         this.zoom(e.deltaY < 0);
-        const currPixel = KeyframeFunc.convertPixelTime(prevTime, 'mili', 'pixel', this._tickSpacing, this._tickIncrement);
-        const currCurrent = KeyframeFunc.convertPixelTime(prevCurrent, 'mili', 'pixel', this._tickSpacing, this._tickIncrement);
+        const currPixel = RegionHelpers.convertPixelTime(prevTime, 'mili', 'pixel', this._tickSpacing, this._tickIncrement);
+        const currCurrent = RegionHelpers.convertPixelTime(prevCurrent, 'mili', 'pixel', this._tickSpacing, this._tickIncrement);
         this._infoContainer.current!.scrollLeft = currPixel - offset;
         this._visibleStart = currPixel - offset > 0 ? currPixel - offset : 0;
         this._visibleStart += this._visibleLength + this._visibleStart > this._totalLength ? this._totalLength - (this._visibleStart + this._visibleLength) : 0;
@@ -478,7 +482,7 @@ export class Timeline extends React.Component<FieldViewProps> {
 
     // @computed
     getCurrentTime = () => {
-        const current = KeyframeFunc.convertPixelTime(this._currentBarX, 'mili', 'time', this._tickSpacing, this._tickIncrement);
+        const current = RegionHelpers.convertPixelTime(this._currentBarX, 'mili', 'time', this._tickSpacing, this._tickIncrement);
         return this.toReadTime(current > this._time ? this._time : current);
     };
 
@@ -505,13 +509,13 @@ export class Timeline extends React.Component<FieldViewProps> {
     @action
     toAuthoring = () => {
         this._time = Math.ceil((this.findLongestTime() ?? 1) / 100000) * 100000;
-        this._totalLength = KeyframeFunc.convertPixelTime(this._time, 'mili', 'pixel', this._tickSpacing, this._tickIncrement);
+        this._totalLength = RegionHelpers.convertPixelTime(this._time, 'mili', 'pixel', this._tickSpacing, this._tickIncrement);
     };
 
     @action
     toPlay = () => {
         this._time = this.findLongestTime();
-        this._totalLength = KeyframeFunc.convertPixelTime(this._time, 'mili', 'pixel', this._tickSpacing, this._tickIncrement);
+        this._totalLength = RegionHelpers.convertPixelTime(this._time, 'mili', 'pixel', this._tickSpacing, this._tickIncrement);
     };
 
     /**
@@ -535,6 +539,7 @@ export class Timeline extends React.Component<FieldViewProps> {
                                 {this.children.map(doc => (
                                     <Track
                                         ref={ref => this.mapOfTracks.push(ref)}
+                                        timeline={this}
                                         animatedDoc={doc}
                                         currentBarX={this._currentBarX}
                                         changeCurrentBarX={this.changeCurrentBarX}