restored animation timeline

1 files changed, 37 insertions, 31 deletions

diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index d959241d0..00aa51cac 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -1,4 +1,4 @@
-import { action, computed, intercept, observable, reaction, runInAction } from 'mobx';
+import { action, computed, intercept, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, DocListCastAsync, Opt } from '../../../fields/Doc';
@@ -11,6 +11,7 @@ import { Transform } from '../../util/Transform';
 import { Region, RegionData, RegionHelpers } from './Region';
 import { Timeline } from './Timeline';
 import './Track.scss';
+import { ObservableReactComponent } from '../ObservableReactComponent';
 
 interface IProps {
     timeline: Timeline;
@@ -26,7 +27,7 @@ interface IProps {
 }
 
 @observer
-export class Track extends React.Component<IProps> {
+export class Track extends ObservableReactComponent<IProps> {
     @observable private _inner = React.createRef<HTMLDivElement>();
     @observable private _currentBarXReaction: any;
     @observable private _timelineVisibleReaction: any;
@@ -37,24 +38,29 @@ export class Track extends React.Component<IProps> {
     private primitiveWhitelist = ['x', 'y', '_freeform_panX', '_freeform_panY', '_width', '_height', '_rotation', 'opacity', '_layout_scrollTop'];
     private objectWhitelist = ['data'];
 
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @computed private get regions() {
-        return DocListCast(this.props.animatedDoc.regions);
+        return DocListCast(this._props.animatedDoc.regions);
     }
     @computed private get time() {
-        return NumCast(RegionHelpers.convertPixelTime(this.props.currentBarX, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement));
+        return NumCast(RegionHelpers.convertPixelTime(this._props.currentBarX, 'mili', 'time', this._props.tickSpacing, this._props.tickIncrement));
     }
 
     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
+        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;
+            if (DocListCast(this._props.animatedDoc.regions).length === 0) this.createRegion(this.time);
+            this._props.animatedDoc.hidden = false;
+            this._props.animatedDoc.opacity = 1;
             // this.autoCreateKeyframe();
         });
     }
@@ -88,7 +94,7 @@ export class Track extends React.Component<IProps> {
      */
     @action
     saveKeyframe = () => {
-        if (this.props.timeline.IsPlaying || !this.saveStateRegion || !this.saveStateKf) {
+        if (this._props.timeline.IsPlaying || !this.saveStateRegion || !this.saveStateKf) {
             this.saveStateKf = undefined;
             this.saveStateRegion = undefined;
             return;
@@ -130,13 +136,13 @@ export class Track extends React.Component<IProps> {
      */
     @action
     autoCreateKeyframe = () => {
-        const objects = this.objectWhitelist.map(key => this.props.animatedDoc[key]);
-        intercept(this.props.animatedDoc, change => {
+        const objects = this.objectWhitelist.map(key => this._props.animatedDoc[key]);
+        intercept(this._props.animatedDoc, change => {
             return change;
         });
         return reaction(
             () => {
-                return [...this.primitiveWhitelist.map(key => this.props.animatedDoc[key]), ...objects];
+                return [...this.primitiveWhitelist.map(key => this._props.animatedDoc[key]), ...objects];
             },
             (changed, reaction) => {
                 //check for region
@@ -170,18 +176,18 @@ export class Track extends React.Component<IProps> {
     @action
     currentBarXReaction = () => {
         return reaction(
-            () => this.props.currentBarX,
+            () => this._props.currentBarX,
             () => {
                 const regiondata = this.findRegion(this.time);
                 if (regiondata) {
-                    this.props.animatedDoc.hidden = false;
+                    this._props.animatedDoc.hidden = false;
                     // if (!this._autoKfReaction) {
                     //     // this._autoKfReaction = this.autoCreateKeyframe();
                     // }
                     this.timeChange();
                 } else {
-                    this.props.animatedDoc.hidden = true;
-                    this.props.animatedDoc !== this.props.collection && (this.props.animatedDoc.opacity = 0);
+                    this._props.animatedDoc.hidden = true;
+                    this._props.animatedDoc !== this._props.collection && (this._props.animatedDoc.opacity = 0);
                     //if (this._autoKfReaction) this._autoKfReaction();
                 }
             }
@@ -195,7 +201,7 @@ export class Track extends React.Component<IProps> {
     timelineVisibleReaction = () => {
         return reaction(
             () => {
-                return this.props.timelineVisible;
+                return this._props.timelineVisible;
             },
             isVisible => {
                 if (isVisible) {
@@ -252,14 +258,14 @@ export class Track extends React.Component<IProps> {
     @action
     private applyKeys = (kf: Doc) => {
         this.primitiveWhitelist.forEach(key => {
-            if (key === 'opacity' && this.props.animatedDoc === this.props.collection) {
+            if (key === 'opacity' && this._props.animatedDoc === this._props.collection) {
                 return;
             }
             if (!kf[key]) {
-                this.props.animatedDoc[key] = undefined;
+                this._props.animatedDoc[key] = undefined;
             } else {
                 const stored = kf[key];
-                this.props.animatedDoc[key] = stored instanceof ObjectField ? stored[Copy]() : stored;
+                this._props.animatedDoc[key] = stored instanceof ObjectField ? stored[Copy]() : stored;
             }
         });
     };
@@ -283,7 +289,7 @@ export class Track extends React.Component<IProps> {
     @action
     interpolate = (left: Doc, right: Doc) => {
         this.primitiveWhitelist.forEach(key => {
-            if (key === 'opacity' && this.props.animatedDoc === this.props.collection) {
+            if (key === 'opacity' && this._props.animatedDoc === this._props.collection) {
                 return;
             }
             if (typeof left[key] === 'number' && typeof right[key] === 'number') {
@@ -291,11 +297,11 @@ export class Track extends React.Component<IProps> {
                 const dif = NumCast(right[key]) - NumCast(left[key]);
                 const deltaLeft = this.time - NumCast(left.time);
                 const ratio = deltaLeft / (NumCast(right.time) - NumCast(left.time));
-                this.props.animatedDoc[key] = NumCast(left[key]) + dif * ratio;
+                this._props.animatedDoc[key] = NumCast(left[key]) + dif * ratio;
             } else {
                 // case data
                 const stored = left[key];
-                this.props.animatedDoc[key] = stored instanceof ObjectField ? stored[Copy]() : stored;
+                this._props.animatedDoc[key] = stored instanceof ObjectField ? stored[Copy]() : stored;
             }
         });
     };
@@ -314,8 +320,8 @@ export class Track extends React.Component<IProps> {
     @action
     onInnerDoubleClick = (e: React.MouseEvent) => {
         const inner = this._inner.current!;
-        const offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this.props.transform.Scale);
-        this.createRegion(RegionHelpers.convertPixelTime(offsetX, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement));
+        const offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this._props.transform.Scale);
+        this.createRegion(RegionHelpers.convertPixelTime(offsetX, 'mili', 'time', this._props.tickSpacing, this._props.tickIncrement));
     };
 
     /**
@@ -335,7 +341,7 @@ export class Track extends React.Component<IProps> {
                 regiondata.duration = rightRegion.position - regiondata.position;
             }
             if (this.regions.length === 0 || !rightRegion || (rightRegion && rightRegion.position - regiondata.position >= NumCast(regiondata.fadeIn) + NumCast(regiondata.fadeOut))) {
-                Cast(this.props.animatedDoc.regions, listSpec(Doc))?.push(regiondata);
+                Cast(this._props.animatedDoc.regions, listSpec(Doc))?.push(regiondata);
                 this._newKeyframe = true;
                 this.saveStateRegion = regiondata;
                 return regiondata;
@@ -370,7 +376,7 @@ export class Track extends React.Component<IProps> {
     copyDocDataToKeyFrame = (doc: Doc) => {
         var somethingChanged = false;
         this.primitiveWhitelist.map(key => {
-            const originalVal = this.props.animatedDoc[key];
+            const originalVal = this._props.animatedDoc[key];
             somethingChanged = somethingChanged || originalVal !== doc[key];
             if (doc.type === RegionHelpers.KeyframeType.end && key === 'opacity') doc.opacity = 0;
             else doc[key] = originalVal instanceof ObjectField ? originalVal[Copy]() : originalVal;
@@ -391,10 +397,10 @@ export class Track extends React.Component<IProps> {
                         ref={this._inner}
                         style={{ height: `${this._trackHeight}px` }}
                         onDoubleClick={this.onInnerDoubleClick}
-                        onPointerOver={() => Doc.BrushDoc(this.props.animatedDoc)}
-                        onPointerOut={() => Doc.UnBrushDoc(this.props.animatedDoc)}>
+                        onPointerOver={() => Doc.BrushDoc(this._props.animatedDoc)}
+                        onPointerOut={() => Doc.UnBrushDoc(this._props.animatedDoc)}>
                         {this.regions?.map((region, i) => {
-                            return <Region key={`${i}`} {...this.props} saveStateKf={saveStateKf} RegionData={region} makeKeyData={this.makeKeyData} />;
+                            return <Region key={`${i}`} {...this._props} saveStateKf={saveStateKf} RegionData={region} makeKeyData={this.makeKeyData} />;
                         })}
                     </div>
                 </div>