lots of bug fixes

4 files changed, 26 insertions, 18 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 810f9a057..c872b8740 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -13,7 +13,6 @@ import { InkField, StrokeData } from "../../../new_fields/InkField";
 import { TimelineMenu } from "./TimelineMenu";
 import { Docs } from "../../documents/Documents";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { thisTypeAnnotation } from "babel-types";
 
 export namespace KeyframeFunc {
     export enum KeyframeType {
@@ -167,6 +166,7 @@ export class Keyframe extends React.Component<IProps> {
             (fadeOut.key! as Doc).opacity = 1;
             (start.key! as Doc).opacity = 0.1;
             (finish.key! as Doc).opacity = 0.1;
+            this.forceUpdate(); 
         }); 
     }
 
@@ -315,6 +315,7 @@ export class Keyframe extends React.Component<IProps> {
         this.keyframes[this.keyframes.length - 1].time = this.regiondata.position + this.regiondata.duration; 
     }
 
+
     @action
     createKeyframe = async (clientX:number) => {
         this._mouseToggled = true; 
@@ -327,7 +328,7 @@ export class Keyframe extends React.Component<IProps> {
         }
     }
 
-
+    
     @action
     moveKeyframe = async (e: React.MouseEvent, kf: Doc) => {
         e.preventDefault();
@@ -346,12 +347,13 @@ export class Keyframe extends React.Component<IProps> {
     @action 
     makeKeyframeMenu = (kf :Doc, e:MouseEvent) => {
         TimelineMenu.Instance.addItem("button", "Show Data", () => {
-        runInAction(() => {let kvp = Docs.Create.KVPDocument(Cast(kf.key, Doc) as Doc, { width: 300, height: 300 }); 
-            CollectionDockingView.AddRightSplit(kvp, (kf.key as Doc).data as Doc); });
-        }), 
+            runInAction(() => {let kvp = Docs.Create.KVPDocument(Cast(kf.key, Doc) as Doc, { width: 300, height: 300 }); 
+                CollectionDockingView.AddRightSplit(kvp, (kf.key as Doc).data as Doc); });
+            }), 
         TimelineMenu.Instance.addItem("button", "Delete", () => {
             runInAction(() => {
                 (this.regiondata.keyframes as List<Doc>).splice(this.keyframes.indexOf(kf), 1);
+                this.forceUpdate(); 
             });         
         }), 
         TimelineMenu.Instance.addItem("input", "Move", (val) => {
@@ -381,7 +383,10 @@ export class Keyframe extends React.Component<IProps> {
         TimelineMenu.Instance.addItem("button", "Add Path", () => {
             this.onContainerDown(kf, "path");
         }),         
-        TimelineMenu.Instance.addItem("button", "Remove Region", ()=>{this.regions.splice(this.regions.indexOf(this.regiondata), 1);}),
+        TimelineMenu.Instance.addItem("button", "Remove Region", ()=>{
+            runInAction(() => {
+            this.regions.splice(this.regions.indexOf(this.regiondata), 1);}
+        );}),
         TimelineMenu.Instance.addItem("input", `fadeIn: ${this.regiondata.fadeIn}ms`, (val) => {
             runInAction(() => {
                 if (this.checkInput(val)){
@@ -554,9 +559,9 @@ export class Keyframe extends React.Component<IProps> {
     }
 
     @action
-    drawKeyframes = () => {
+    drawKeyframes =  () => {
         let keyframeDivs:JSX.Element[] = []; 
-        this.keyframes.forEach( kf => {
+        DocListCast(this.regiondata.keyframes).forEach( kf => {
             if (kf.type as KeyframeFunc.KeyframeType === KeyframeFunc.KeyframeType.default) {
                 keyframeDivs.push(
                     <div className="keyframe" style={{ left: `${KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement) - this.pixelPosition}px` }}>
@@ -581,9 +586,9 @@ export class Keyframe extends React.Component<IProps> {
     }
 
     @action 
-    drawKeyframeDividers = () => {
+    drawKeyframeDividers = () =>  {
         let keyframeDividers:JSX.Element[] = []; 
-        this.keyframes.forEach(kf => {
+        DocListCast(this.regiondata.keyframes).forEach(kf => {
             if(this.keyframes.indexOf(kf ) !== this.keyframes.length - 1) {
                 let left = this.keyframes[this.keyframes.indexOf(kf) + 1]; 
                 let bodyRef = React.createRef<HTMLDivElement>(); 
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 9ac5d98d2..666048a54 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -155,7 +155,7 @@ export class Timeline extends React.Component<FieldViewProps> {
         let scrubberbox = this._infoContainer.current!;
         let left = scrubberbox.getBoundingClientRect().left;
         let offsetX = Math.round(e.clientX - left) * this.props.ScreenToLocalTransform().Scale;
-        this.changeCurrentBarX(offsetX);
+        this.changeCurrentBarX(offsetX + this._visibleStart);
     }
 
     @action
@@ -201,6 +201,9 @@ export class Timeline extends React.Component<FieldViewProps> {
         let infoContainer = this._infoContainer.current!;
         infoContainer.scrollLeft = pixel;
         this._visibleStart = infoContainer.scrollLeft;
+        console.log(infoContainer.scrollLeft); 
+        console.log(this._totalLength); 
+        console.log(this._visibleLength); 
     }
 
     @action
@@ -317,15 +320,14 @@ export class Timeline extends React.Component<FieldViewProps> {
             roundToggle.style.transform = "translate(0px, 0px)";
             roundToggle.style.animationName = "turnoff";
             roundToggleContainer.style.animationName = "turnoff";
-            timelineContainer.style.transform = `translate(0px, ${0}px)`;
-            setTimeout(() => {
-                this.props.Document.isAnimating = false;
-            }, 500);
+            timelineContainer.style.top = `${-this._containerHeight}px`;
+            this.props.Document.isAnimating = false;
+        
         } else {
             roundToggle.style.transform = "translate(45px, 0px)";
             roundToggle.style.animationName = "turnon";
             roundToggleContainer.style.animationName = "turnon";
-            timelineContainer.style.transform = `translate(0px, ${this._containerHeight}px)`;
+            timelineContainer.style.top = "0px"; 
             this.props.Document.isAnimating = true;
         }
     }
@@ -334,7 +336,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             <div>
                 <div style={{ visibility: this._timelineVisible ? "visible" : "hidden" }}>
                     <div key="timeline_wrapper" style={{ visibility: BoolCast(this.props.Document.isAnimating && this._timelineVisible) ? "visible" : "hidden", left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)" }}>
-                        <div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, top: `-${this._containerHeight}px` }}>
+                        <div key="timeline_container" className="timeline-container" ref={this._timelineContainer} style={{ height: `${this._containerHeight}px`, top: `0px` }}>
                             <div key="timeline_info" className="info-container" ref={this._infoContainer} onWheel={this.onWheelZoom}>
                                 {this.drawTicks()}
                                 <div key="timeline_scrubber" className="scrubber" onPointerDown={this.onScrubberDown} style={{ transform: `translate(${this._currentBarX}px)` }}>
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 3ec410216..7a8f42ea7 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -270,6 +270,7 @@ export class Track extends React.Component<IProps> {
         let inner = this._inner.current!;
         let offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this.props.transform.Scale);
         this.createRegion(KeyframeFunc.convertPixelTime(offsetX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
+        this.forceUpdate(); 
     }
 
     createRegion = (position: number) => {
diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts
index 04194509c..a92b1858d 100644
--- a/src/new_fields/util.ts
+++ b/src/new_fields/util.ts
@@ -69,7 +69,7 @@ const _setterImpl = action(function (target: any, prop: string | symbol | number
         } else {
             target.__fields[prop] = value;
         }
-        if (typeof value === "object" && !(value instanceof ObjectField)) debugger;
+        // if (typeof value === "object" && !(value instanceof ObjectField)) debugger;
         if (writeToServer) {
             if (value === undefined) target[Update]({ '$unset': { ["fields." + prop]: "" } });
             else target[Update]({ '$set': { ["fields." + prop]: value instanceof ObjectField ? SerializationHelper.Serialize(value) : (value === undefined ? null : value) } });