changed node prop to animatedDoc in timeline animation

3 files changed, 27 insertions, 27 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 3465a5283..addc00c85 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -123,7 +123,7 @@ export type RegionData = makeInterface<[typeof RegionDataSchema]>;
 export const RegionData = makeInterface(RegionDataSchema);
 
 interface IProps {
-    node: Doc;
+    animatedDoc: Doc;
     RegionData: Doc;
     collection: Doc;
     tickSpacing: number;
@@ -167,7 +167,7 @@ export class Keyframe extends React.Component<IProps> {
         return RegionData(this.props.RegionData);
     }
     @computed private get regions() {
-        return DocListCast(this.props.node.regions);
+        return DocListCast(this.props.animatedDoc.regions);
     }
     @computed private get keyframes() {
         return DocListCast(this.regiondata.keyframes);
@@ -375,7 +375,7 @@ export class Keyframe extends React.Component<IProps> {
      */
     @action
     makeRegionMenu = (kf: Doc, e: MouseEvent) => {
-        TimelineMenu.Instance.addItem('button', 'Remove Region', () => Cast(this.props.node.regions, listSpec(Doc))?.splice(this.regions.indexOf(this.props.RegionData), 1)),
+        TimelineMenu.Instance.addItem('button', 'Remove Region', () => Cast(this.props.animatedDoc.regions, listSpec(Doc))?.splice(this.regions.indexOf(this.props.RegionData), 1)),
             TimelineMenu.Instance.addItem('input', `fadeIn: ${this.regiondata.fadeIn}ms`, val => {
                 runInAction(() => {
                     let cannotMove: boolean = false;
@@ -461,7 +461,7 @@ export class Keyframe extends React.Component<IProps> {
         e.stopPropagation();
         const div = ref.current!;
         div.style.opacity = '1';
-        Doc.BrushDoc(this.props.node);
+        Doc.BrushDoc(this.props.animatedDoc);
     };
 
     /**
@@ -473,7 +473,7 @@ export class Keyframe extends React.Component<IProps> {
         e.stopPropagation();
         const div = ref.current!;
         div.style.opacity = '0';
-        Doc.UnBrushDoc(this.props.node);
+        Doc.UnBrushDoc(this.props.animatedDoc);
     };
 
     ///////////////////////UI STUFF /////////////////////////
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index adc97bbb4..7ca13756a 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -535,7 +535,7 @@ export class Timeline extends React.Component<FieldViewProps> {
                                 {this.children.map(doc => (
                                     <Track
                                         ref={ref => this.mapOfTracks.push(ref)}
-                                        node={doc}
+                                        animatedDoc={doc}
                                         currentBarX={this._currentBarX}
                                         changeCurrentBarX={this.changeCurrentBarX}
                                         transform={this.props.ScreenToLocalTransform()}
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 2349ba786..1010332f5 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -12,7 +12,7 @@ import { Keyframe, KeyframeFunc, RegionData } from './Keyframe';
 import './Track.scss';
 
 interface IProps {
-    node: Doc;
+    animatedDoc: Doc;
     currentBarX: number;
     transform: Transform;
     collection: Doc;
@@ -36,23 +36,23 @@ export class Track extends React.Component<IProps> {
     private objectWhitelist = ['data'];
 
     @computed private get regions() {
-        return DocListCast(this.props.node.regions);
+        return DocListCast(this.props.animatedDoc.regions);
     }
     @computed private get time() {
         return NumCast(KeyframeFunc.convertPixelTime(this.props.currentBarX, 'mili', 'time', this.props.tickSpacing, this.props.tickIncrement));
     }
 
     async componentDidMount() {
-        const regions = await DocListCastAsync(this.props.node.regions);
-        if (!regions) this.props.node.regions = new List<Doc>(); //if there is no region, then create new doc to store stuff
+        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.node.regions).length === 0) this.createRegion(this.time);
-        this.props.node.hidden = false;
-        this.props.node.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();
     }
 
@@ -127,13 +127,13 @@ export class Track extends React.Component<IProps> {
      */
     @action
     autoCreateKeyframe = () => {
-        const objects = this.objectWhitelist.map(key => this.props.node[key]);
-        intercept(this.props.node, 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.node[key]), ...objects];
+                return [...this.primitiveWhitelist.map(key => this.props.animatedDoc[key]), ...objects];
             },
             (changed, reaction) => {
                 //check for region
@@ -171,14 +171,14 @@ export class Track extends React.Component<IProps> {
             () => {
                 const regiondata = this.findRegion(this.time);
                 if (regiondata) {
-                    this.props.node.hidden = false;
+                    this.props.animatedDoc.hidden = false;
                     // if (!this._autoKfReaction) {
                     //     // this._autoKfReaction = this.autoCreateKeyframe();
                     // }
                     this.timeChange();
                 } else {
-                    this.props.node.hidden = true;
-                    this.props.node.opacity = 0;
+                    this.props.animatedDoc.hidden = true;
+                    this.props.animatedDoc.opacity = 0;
                     //if (this._autoKfReaction) this._autoKfReaction();
                 }
             }
@@ -250,10 +250,10 @@ export class Track extends React.Component<IProps> {
     private applyKeys = async (kf: Doc) => {
         this.primitiveWhitelist.forEach(key => {
             if (!kf[key]) {
-                this.props.node[key] = undefined;
+                this.props.animatedDoc[key] = undefined;
             } else {
                 const stored = kf[key];
-                this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored;
+                this.props.animatedDoc[key] = stored instanceof ObjectField ? stored[Copy]() : stored;
             }
         });
     };
@@ -282,11 +282,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.node[key] = NumCast(left[key]) + dif * ratio;
+                this.props.animatedDoc[key] = NumCast(left[key]) + dif * ratio;
             } else {
                 // case data
                 const stored = left[key];
-                this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored;
+                this.props.animatedDoc[key] = stored instanceof ObjectField ? stored[Copy]() : stored;
             }
         });
     };
@@ -326,7 +326,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.node.regions, listSpec(Doc))?.push(regiondata);
+                Cast(this.props.animatedDoc.regions, listSpec(Doc))?.push(regiondata);
                 this._newKeyframe = true;
                 this.saveStateRegion = regiondata;
                 return regiondata;
@@ -360,7 +360,7 @@ export class Track extends React.Component<IProps> {
     @action
     copyDocDataToKeyFrame = (doc: Doc) => {
         this.primitiveWhitelist.map(key => {
-            const originalVal = this.props.node[key];
+            const originalVal = this.props.animatedDoc[key];
             doc[key] = originalVal instanceof ObjectField ? originalVal[Copy]() : originalVal;
         });
     };
@@ -377,8 +377,8 @@ export class Track extends React.Component<IProps> {
                         ref={this._inner}
                         style={{ height: `${this._trackHeight}px` }}
                         onDoubleClick={this.onInnerDoubleClick}
-                        onPointerOver={() => Doc.BrushDoc(this.props.node)}
-                        onPointerOut={() => Doc.UnBrushDoc(this.props.node)}>
+                        onPointerOver={() => Doc.BrushDoc(this.props.animatedDoc)}
+                        onPointerOut={() => Doc.UnBrushDoc(this.props.animatedDoc)}>
                         {this.regions?.map((region, i) => {
                             return <Keyframe key={`${i}`} {...this.props} RegionData={region} makeKeyData={this.makeKeyData} />;
                         })}