zooming fixes

3 files changed, 139 insertions, 114 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 4e58b07d8..b02d89bf0 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -82,16 +82,30 @@ export namespace KeyframeFunc {
     };
 
     export const defaultKeyframe = () => {
-        let regiondata = new Doc(); //creating regiondata
-        regiondata.duration = 200;
+        let regiondata = new Doc(); //creating regiondata in MILI
+        regiondata.duration = 4000;
         regiondata.position = 0;
-        regiondata.fadeIn = 20;
-        regiondata.fadeOut = 20;
+        regiondata.fadeIn = 1000;
+        regiondata.fadeOut = 1000;
         regiondata.functions = new List<Doc>(); 
         return regiondata;
     };
 
-    
+    export const convertPixelTime = (pos: number, unit: "mili" | "sec" | "min" | "hr", dir: "pixel" | "time", tickSpacing:number, tickIncrement:number) => {
+        let time = dir === "pixel" ? (pos * tickSpacing) / tickIncrement : (pos / tickSpacing) * tickIncrement; 
+        switch (unit) {
+            case "mili":
+                return time; 
+            case "sec":
+                return dir === "pixel" ? time / 1000 : time * 1000; 
+            case "min":
+                return dir === "pixel" ? time / 60000 : time * 60000; 
+            case "hr":
+                return dir === "pixel" ? time / 3600000 : time * 3600000; 
+            default: 
+                return time; 
+        }
+    };
 }
 
 export const RegionDataSchema = createSchema({
@@ -109,6 +123,9 @@ interface IProps {
     node: Doc;
     RegionData: Doc;
     collection: Doc;
+    tickSpacing: number; 
+    tickIncrement: number; 
+    time: number; 
     changeCurrentBarX: (x: number) => void;
     transform: Transform;
 }
@@ -118,6 +135,8 @@ export class Keyframe extends React.Component<IProps> {
 
     @observable private _bar = React.createRef<HTMLDivElement>();
     @observable private _gain = 20; //default
+    @observable private _mouseToggled = false; 
+    @observable private _doubleClickEnabled = false; 
 
     @computed
     private get regiondata() {
@@ -155,6 +174,7 @@ export class Keyframe extends React.Component<IProps> {
         });
         return last;
     }
+
     @computed
     private get keyframes(){
         return DocListCast(this.regiondata.keyframes); 
@@ -171,6 +191,26 @@ export class Keyframe extends React.Component<IProps> {
         }
     }
 
+    @computed 
+    private get pixelPosition(){
+        return KeyframeFunc.convertPixelTime(this.regiondata.position, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement);
+    }
+
+    @computed 
+    private get pixelDuration(){
+        return KeyframeFunc.convertPixelTime(this.regiondata.duration, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); 
+    }
+
+    @computed
+    private get pixelFadeIn() {
+        return KeyframeFunc.convertPixelTime(this.regiondata.fadeIn, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); 
+    }
+
+    @computed
+    private get pixelFadeOut(){
+        return KeyframeFunc.convertPixelTime(this.regiondata.fadeOut, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); 
+    }
+
     async componentWillMount() {
         if (!this.regiondata.keyframes) {
             this.regiondata.keyframes = new List<Doc>();
@@ -183,20 +223,6 @@ 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;
-
-        observe(this.regiondata, change => {
-            if (change.type === "update") {
-                fadeIn.time = this.regiondata.position + this.regiondata.fadeIn;
-                fadeOut.time = this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut;
-                start.time = this.regiondata.position;
-                finish.time = this.regiondata.position + this.regiondata.duration;
-                this.regiondata.keyframes![this.regiondata.keyframes!.indexOf(fadeIn)] = fadeIn;
-                this.regiondata.keyframes![this.regiondata.keyframes!.indexOf(fadeOut)] = fadeOut;
-                this.regiondata.keyframes![this.regiondata.keyframes!.indexOf(start)] = start;
-                this.regiondata.keyframes![this.regiondata.keyframes!.indexOf(finish)] = finish;
-                this.forceUpdate();
-            }
-        });
     }
 
     @action
@@ -236,8 +262,7 @@ export class Keyframe extends React.Component<IProps> {
         return TK;
     }
 
-    @observable private _mouseToggled = false; 
-    @observable private _doubleClickEnabled = false; 
+    
     @action
     onBarPointerDown = (e: React.PointerEvent) => {
         e.preventDefault();
@@ -247,14 +272,14 @@ export class Keyframe extends React.Component<IProps> {
             this.createKeyframe(clientX); 
             this._doubleClickEnabled = false; 
         } else {
-            setTimeout(() => {if(!this._mouseToggled && this._doubleClickEnabled)this.props.changeCurrentBarX(this.regiondata.position + (clientX - this._bar.current!.getBoundingClientRect().left) * this.props.transform.Scale); 
+            setTimeout(() => {if(!this._mouseToggled && this._doubleClickEnabled)this.props.changeCurrentBarX(this.pixelPosition + (clientX - this._bar.current!.getBoundingClientRect().left) * this.props.transform.Scale); 
                 this._mouseToggled = false;            
                 this._doubleClickEnabled = false; }, 200); 
             this._doubleClickEnabled = true; 
             document.addEventListener("pointermove", this.onBarPointerMove);
             document.addEventListener("pointerup", (e: PointerEvent) => {
                 document.removeEventListener("pointermove", this.onBarPointerMove);
-        });
+            });
         }
     }
 
@@ -269,23 +294,20 @@ export class Keyframe extends React.Component<IProps> {
         let left = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.left, this.regiondata, this.regions)!;
         let right = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, this.regiondata, this.regions!);
         let prevX = this.regiondata.position;
-        let futureX = this.regiondata.position + e.movementX;
+        let futureX = this.regiondata.position + KeyframeFunc.convertPixelTime(e.movementX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
         if (futureX <= 0) {
             this.regiondata.position = 0;
         } else if ((left && left.position + left.duration >= futureX)) {
             this.regiondata.position = left.position + left.duration;
-        } else if ((right && right.position <= futureX + this.regiondata.duration)) {
-            this.regiondata.position = right.position - this.regiondata.duration;
+        } else if ((right && right.position <= futureX + this.pixelDuration)) {
+            this.regiondata.position = right.position - this.pixelDuration;
         } else {
             this.regiondata.position = futureX;
-        }
-        for (let i = 0; i < this.regiondata.keyframes!.length; i++) {
-            if ((this.regiondata.keyframes![i] as Doc).type !== KeyframeFunc.KeyframeType.fade) {
-                let movement = this.regiondata.position - prevX;
-                (this.regiondata.keyframes![i] as Doc).time = NumCast((this.regiondata.keyframes![i] as Doc).time) + movement;
-            }
-        }
-        this.forceUpdate();
+        }            
+        let movement = this.regiondata.position - prevX; 
+        this.keyframes.forEach(kf => {
+            kf.time = NumCast(kf.time) + movement; 
+        });
     }
 
     @action
@@ -313,11 +335,11 @@ export class Keyframe extends React.Component<IProps> {
         e.preventDefault();
         e.stopPropagation();
         let bar = this._bar.current!;
-        let offset = Math.round((e.clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale);
+        let offset = KeyframeFunc.convertPixelTime(Math.round((e.clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale), "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
         let leftRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.left, this.regiondata, this.regions);
         let firstkf: (Doc | undefined) = this.firstKeyframe;
         if (firstkf && this.regiondata.position + this.regiondata.fadeIn + offset >= NumCast(firstkf!.time)) {
-            let dif = NumCast(firstkf!.time) - (this.regiondata.position + this.regiondata.fadeIn);
+            let dif = NumCast(firstkf!.time) - (this.pixelPosition + this.pixelFadeIn);
             this.regiondata.position = NumCast(firstkf!.time) - this.regiondata.fadeIn;
             this.regiondata.duration -= dif;
         } else if (this.regiondata.duration - offset < this.regiondata.fadeIn + this.regiondata.fadeOut) { // no keyframes, just fades
@@ -331,6 +353,7 @@ export class Keyframe extends React.Component<IProps> {
             this.regiondata.duration -= offset;
             this.regiondata.position += offset;
         }
+        
     }
 
 
@@ -339,7 +362,7 @@ export class Keyframe extends React.Component<IProps> {
         e.preventDefault();
         e.stopPropagation();
         let bar = this._bar.current!;
-        let offset = Math.round((e.clientX - bar.getBoundingClientRect().right) * this.props.transform.Scale);
+        let offset = KeyframeFunc.convertPixelTime(Math.round((e.clientX - bar.getBoundingClientRect().right) * this.props.transform.Scale), "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
         let rightRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, this.regiondata, this.regions);
         if (this.lastKeyframe! && this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut + offset <= NumCast((this.lastKeyframe! as Doc).time)) {
             let dif = this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut - NumCast((this.lastKeyframe! as Doc).time);
@@ -352,27 +375,18 @@ export class Keyframe extends React.Component<IProps> {
         } else {
             this.regiondata.duration += offset;
         }
-    }
-
-    createDivider = (type?: KeyframeFunc.Direction): JSX.Element => {
-        if (type === "left") {
-            return <div className="divider" style={{ right: "0px" }}></div>;
-        } else if (type === "right") {
-            return <div className="divider" style={{ left: "0px" }}> </div>;
-        }
-        return <div className="divider"></div>;
+       
     }
 
     @action
     createKeyframe = async (clientX:number) => {
         this._mouseToggled = true; 
         let bar = this._bar.current!;
-        let offset = Math.round((clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale);
+        let offset = KeyframeFunc.convertPixelTime(Math.round((clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale), "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
         if (offset > this.regiondata.fadeIn && offset < this.regiondata.duration - this.regiondata.fadeOut) { //make sure keyframe is not created inbetween fades and ends
-            let position = NumCast(this.regiondata.position);
+            let position = this.regiondata.position;
             await this.makeKeyData(Math.round(position + offset));
-            console.log(this.regiondata.keyframes!.length);
-            this.props.changeCurrentBarX(NumCast(Math.round(position + offset))); //first move the keyframe to the correct location and make a copy so the correct file gets coppied
+            this.props.changeCurrentBarX(KeyframeFunc.convertPixelTime(Math.round(position + offset), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement)); //first move the keyframe to the correct location and make a copy so the correct file gets coppied
         }
     }
 
@@ -381,7 +395,7 @@ export class Keyframe extends React.Component<IProps> {
     moveKeyframe = async (e: React.MouseEvent, kf: Doc) => {
         e.preventDefault();
         e.stopPropagation();
-        this.props.changeCurrentBarX(NumCast(kf.time!));
+        this.props.changeCurrentBarX(KeyframeFunc.convertPixelTime(NumCast(kf.time!), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement));
     }
 
 
@@ -390,33 +404,38 @@ export class Keyframe extends React.Component<IProps> {
         e.preventDefault();
         e.stopPropagation();
         this.props.node.backgroundColor = "#000000";
-
     }
+
+    @action 
+    makeKeyframeMenu = (kf :Doc, e:MouseEvent) => {
+        let items = [
+            TimelineMenu.Instance.addItem("button", "Show Data", () => {
+            runInAction(() => {let kvp = Docs.Create.KVPDocument(Cast(kf.key, Doc) as Doc, { width: 300, height: 300 }); 
+            CollectionDockingView.Instance.AddRightSplit(kvp, (kf.key as Doc).data as Doc); });
+            }), 
+            TimelineMenu.Instance.addItem("button", "Delete", () => {}), 
+            TimelineMenu.Instance.addItem("input", "Move", (val) => {kf.time = parseInt(val, 10);})  
+        ]; 
+        TimelineMenu.Instance.addMenu("Keyframe", items); 
+        TimelineMenu.Instance.openMenu(e.clientX, e.clientY); 
+}
     @action
     private createKeyframeJSX = (kf: Doc, type = KeyframeFunc.KeyframeType.default) => {
         if (type === KeyframeFunc.KeyframeType.default) {
             return (
-                <div className="keyframe" style={{ left: `${NumCast(kf.time) - this.regiondata.position}px` }}>
-                    {this.createDivider()}
+                <div className="keyframe" style={{ left: `${KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement) - this.pixelPosition}px` }}>
+                    <div className="divider"></div>
                     <div className="keyframeCircle" onPointerDown={(e) => { this.moveKeyframe(e, kf as Doc); }} onContextMenu={(e: React.MouseEvent) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        let items = [
-                            TimelineMenu.Instance.addItem("button", "Show Data", () => {
-                            runInAction(() => {let kvp = Docs.Create.KVPDocument(Cast(kf.key, Doc) as Doc, { width: 300, height: 300 }); 
-                            CollectionDockingView.Instance.AddRightSplit(kvp, (kf.key as Doc).data as Doc); });
-                           }), 
-                            TimelineMenu.Instance.addItem("button", "Delete", () => {}), 
-                            TimelineMenu.Instance.addItem("input", "Move", (val) => {kf.time = parseInt(val, 10);})  
-                        ]; 
-                        TimelineMenu.Instance.addMenu("Keyframe", items); 
-                        TimelineMenu.Instance.openMenu(e.clientX, e.clientY); 
+                        this.makeKeyframeMenu(kf, e.nativeEvent); 
                     }}></div>
-                </div>);
+                </div>
+            );
         }
         return (
-            <div className="keyframe" style={{ left: `${NumCast(kf.time) - this.regiondata.position}px` }}>
-                {this.createDivider()}
+            <div className="keyframe" style={{ left: `${KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement) - this.pixelPosition}px` }}>
+                <div className="divider"></div>
             </div>
         );
     }
@@ -460,9 +479,6 @@ export class Keyframe extends React.Component<IProps> {
         
     }
 
-
-
-
     @action
     onReactionListen = (e: PointerEvent) => {
         e.preventDefault();
@@ -514,7 +530,6 @@ export class Keyframe extends React.Component<IProps> {
                 (Cast(this.regiondata.functions![index], Doc) as Doc).pathX = xPlots;
                 (Cast(this.regiondata.functions![index], Doc) as Doc).pathY = yPlots;
             }
-          
             this._reac = undefined; 
             this._interpolationKeyframe = undefined; 
             this._plotList = undefined; 
@@ -525,19 +540,21 @@ export class Keyframe extends React.Component<IProps> {
     render() {
         return (
             <div>
-                <div className="bar" ref={this._bar} style={{ transform: `translate(${this.regiondata.position}px)`, width: `${this.regiondata.duration}px`, background: `linear-gradient(90deg, rgba(77, 153, 0, 0) 0%, rgba(77, 153, 0, 1) ${this.regiondata.fadeIn / this.regiondata.duration * 100}%, rgba(77, 153, 0, 1) ${(this.regiondata.duration - this.regiondata.fadeOut) / this.regiondata.duration * 100}%, rgba(77, 153, 0, 0) 100% )` }}
+                <div className="bar" ref={this._bar} style={{ transform: `translate(${this.pixelPosition}px)`, 
+                width: `${this.pixelDuration}px`, 
+                background: `linear-gradient(90deg, rgba(77, 153, 0, 0) 0%, rgba(77, 153, 0, 1) ${this.pixelFadeIn / this.pixelDuration}%, rgba(77, 153, 0, 1) ${(this.pixelDuration - this.pixelFadeOut) / this.pixelDuration * 100}%, rgba(77, 153, 0, 0) 100% )` }}
                     onPointerDown={this.onBarPointerDown}>
                     <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
                     <div className="rightResize" onPointerDown={this.onResizeRight}></div>
-                    {this.regiondata.keyframes!.map(kf => {
-                        return this.createKeyframeJSX(kf as Doc, (kf! as Doc).type as KeyframeFunc.KeyframeType);
-                    })}
+                    {this.keyframes.map(kf => { this.createKeyframeJSX(kf, kf.type as KeyframeFunc.KeyframeType); })}
                     {this.keyframes.map( kf => {
                        if(this.keyframes.indexOf(kf ) !== this.keyframes.length - 1) {
                             let left = this.keyframes[this.keyframes.indexOf(kf) + 1]; 
                             let bodyRef = React.createRef<HTMLDivElement>(); 
+                            let kfPos = KeyframeFunc.convertPixelTime(NumCast(kf.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); 
+                            let leftPos = KeyframeFunc.convertPixelTime(NumCast(left!.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); 
                             return (
-                                <div ref={bodyRef}className="body-container" style={{left: `${NumCast(kf.time) - this.regiondata.position}px`, width:`${NumCast(left!.time) - NumCast(kf.time)}px`}}
+                                <div ref={bodyRef}className="body-container" style={{left: `${kfPos - this.pixelPosition}px`, width:`${leftPos - kfPos}px`}}
                                 onPointerOver={(e) => { this.onContainerOver(e, bodyRef); }}
                                 onPointerOut={(e) => { this.onContainerOut(e, bodyRef); }}
                                 onContextMenu={(e) => {
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index d0f83676b..036c3ad9b 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -110,7 +110,7 @@ export class Timeline extends React.Component<FieldViewProps> {
                     this._ticks.push(i);
                     i += 1000;
                 }
-                this._totalLength = this._tickSpacing * (this._ticks.length/ this._tickIncrement); 
+                this._totalLength = this._tickSpacing * (this._time/ this._tickIncrement); 
             }, {fireImmediately:true}); 
             this._totalLength = this._tickSpacing * (this._ticks.length/ this._tickIncrement); 
             this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width; 
@@ -322,22 +322,6 @@ export class Timeline extends React.Component<FieldViewProps> {
     }
 
 
-    convertPixelTime = (pos: number, unit: "mili" | "sec" | "min" | "hr", dir: "pixel" | "time") => {
-        let time = dir === "pixel" ?  pos / this._tickSpacing * this._tickIncrement : pos * this._tickSpacing / this._tickIncrement; 
-        switch (unit) {
-            case "mili":
-                return time; 
-            case "sec":
-                return dir === "pixel" ? time / 1000 : time * 1000; 
-            case "min":
-                return dir === "pixel" ? time / 60000 : time * 60000; 
-            case "hr":
-                return dir === "pixel" ? time / 3600000 : time * 3600000; 
-            default: 
-                return time; 
-        }
-    }
-
     timelineContextMenu = (e:MouseEvent): void => {
         let subitems: ContextMenuProps[] = [];
         let timelineContainer = this._timelineWrapper.current!;
@@ -380,20 +364,21 @@ export class Timeline extends React.Component<FieldViewProps> {
                 if (this._tickSpacing >= 100) {
                     this._tickIncrement /= 2; 
                     this._tickSpacing = 50; 
-                    this._totalLength = this._tickSpacing * (this._ticks.length/ this._tickIncrement); //CONSIDER THIS MUST CHANGE
                 } else {
                     this._tickSpacing += 10; 
                 }
             } 
         } else {
-            if (this._tickSpacing <= 50) {
-                this._tickSpacing = 100; 
-                this._tickIncrement *= 2; 
-                this._totalLength = this._tickSpacing * (this._ticks.length/ this._tickIncrement); //CONSIDER THIS MUST CHANGE
-            } else {
-                this._tickSpacing -= 10; 
+            if (this._totalLength >= this._infoContainer.current!.getBoundingClientRect().width){
+                if (this._tickSpacing <= 50) {
+                    this._tickSpacing = 100; 
+                    this._tickIncrement *= 2; 
+                } else {
+                    this._tickSpacing -= 10; 
+                }
             }
         }
+        this._totalLength = this._tickSpacing * (this._time/ this._tickIncrement); 
     }
 
     private timelineToolBox = (scale:number) => {
@@ -424,7 +409,7 @@ export class Timeline extends React.Component<FieldViewProps> {
                                 <div key="timeline_scrubberhead" className="scrubberhead"></div>
                             </div>
                             <div key="timeline_trackbox" className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown} style={{width: `${this._totalLength}px`}}>
-                                {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} collection = {this.props.Document}/>)}
+                                {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} transform={this.props.ScreenToLocalTransform()} time={this._time} tickSpacing = {this._tickSpacing} tickIncrement ={this._tickIncrement} collection = {this.props.Document}/>)}
                             </div>
                         </div>
                         <div key="timeline_title"className="title-container" ref={this._titleContainer}>
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index d91954022..5a43f5b2a 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -10,12 +10,17 @@ import { Keyframe, KeyframeFunc, RegionData } from "./Keyframe";
 import { FlyoutProps } from "./Timeline";
 import { Transform } from "../../util/Transform";
 import { RichTextField } from "../../../new_fields/RichTextField";
+import { createObjectBindingPattern } from "typescript";
+import { DateField } from "../../../new_fields/DateField";
 
 interface IProps {
     node: Doc;
     currentBarX: number;
     transform: Transform;
     collection: Doc; 
+    time: number; 
+    tickIncrement: number; 
+    tickSpacing: number; 
     changeCurrentBarX: (x: number) => void;
 }
 
@@ -44,7 +49,7 @@ export class Track extends React.Component<IProps> {
     componentDidMount() {
         runInAction(() => {
             this._currentBarXReaction = this.currentBarXReaction();
-            if (this.regions.length === 0) this.createRegion(this.props.currentBarX);
+            if (this.regions.length === 0) this.createRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
             this.props.node.hidden = false;
         });
     }
@@ -62,17 +67,33 @@ export class Track extends React.Component<IProps> {
         let kf = keyframes[kfIndex] as Doc; 
         if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades
             kf.key = Doc.MakeCopy(this.props.node, true);
-            let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.props.currentBarX, kf); // lef keyframe, if it exists
-            let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.props.currentBarX, kf); //right keyframe, if it exists
+            let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), kf); // lef keyframe, if it exists
+            let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), kf); //right keyframe, if it exists
+            // while (leftkf !== undefined) {
+            //     if (leftkf!.type === KeyframeFunc.KeyframeType.fade) {
+            //         let edge:(Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), leftkf!);
+            //         edge!.key = Doc.MakeCopy(kf.key as Doc, true);
+            //         leftkf!.key = Doc.MakeCopy(kf.key as Doc, true);
+            //         (Cast(edge!.key, Doc)! as Doc).opacity = 0.1;
+            //         (Cast(leftkf!.key, Doc)! as Doc).opacity = 1;
+            //     } else if (leftkf!.key ) {
+            //         leftkf!.key = Doc.MakeCopy(kf.key as Doc, true);
+            //     }
+
+            // }
+            
+            
+            
+            
             if (leftkf!.type === KeyframeFunc.KeyframeType.fade) { //replicating this keyframe to fades
-                let edge:(Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.props.currentBarX, leftkf!);
+                let edge:(Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), leftkf!);
                 edge!.key = Doc.MakeCopy(kf.key as Doc, true);
                 leftkf!.key = Doc.MakeCopy(kf.key as Doc, true);
                 (Cast(edge!.key, Doc)! as Doc).opacity = 0.1;
                 (Cast(leftkf!.key, Doc)! as Doc).opacity = 1;
             }
             if (rightkf!.type === KeyframeFunc.KeyframeType.fade) {
-                let edge:(Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!,this.props.currentBarX, rightkf!);
+                let edge:(Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!,KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), rightkf!);
                 edge!.key = Doc.MakeCopy(kf.key as Doc, true);
                 rightkf!.key = Doc.MakeCopy(kf.key as Doc, true);
                 (Cast(edge!.key, Doc)! as Doc).opacity = 0.1;
@@ -88,10 +109,10 @@ export class Track extends React.Component<IProps> {
     @action 
     currentBarXReaction = () => {
         return reaction(() => this.props.currentBarX, async () => {
-            let regiondata: (Doc | undefined) = await this.findRegion(this.props.currentBarX);
+            let regiondata: (Doc | undefined) = await this.findRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
             if (regiondata) {
                 this.props.node.hidden = false;
-                await this.timeChange(this.props.currentBarX);
+                await this.timeChange(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
             } else {
                   this.props.node.hidden = true;
                   this.props.node.opacity = 0; 
@@ -107,8 +128,8 @@ export class Track extends React.Component<IProps> {
         }
         let regiondata = await this.findRegion(Math.round(time)); //finds a region that the scrubber is on
         if (regiondata) {
-            let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata, this.props.currentBarX); // lef keyframe, if it exists
-            let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, this.props.currentBarX); //right keyframe, if it exists            
+            let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); // lef keyframe, if it exists
+            let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement)); //right keyframe, if it exists            
             let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe
             if (currentkf) {
                 await this.applyKeys(currentkf);
@@ -139,6 +160,8 @@ export class Track extends React.Component<IProps> {
                         this.props.node[key] = new RichTextField(nodeData); 
                     }
                 } else if (key === "creationDate") {
+                    
+                    this.props.node[key] = new DateField(); 
                 }  else {
                     this.props.node[key] = kfNode[key];
                 }
@@ -162,7 +185,7 @@ export class Track extends React.Component<IProps> {
         let currentkf: (Doc | undefined) = undefined;
         let keyframes = await DocListCastAsync(region.keyframes!); 
         keyframes!.forEach((kf) => {
-            if (NumCast(kf.time) === Math.round(this.props.currentBarX)) currentkf = kf;
+            if (NumCast(kf.time) === Math.round(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement))) currentkf = kf;
         });
         return currentkf;
     }
@@ -173,7 +196,7 @@ export class Track extends React.Component<IProps> {
         let leftNode = left.key as Doc;
         let rightNode = right.key as Doc;
         const dif_time = NumCast(right.time) - NumCast(left.time);
-        const timeratio = (this.props.currentBarX - NumCast(left.time)) / dif_time; //linear 
+        const timeratio = (KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement) - NumCast(left.time)) / dif_time; //linear 
         let keyframes = (await DocListCastAsync(regiondata.keyframes!))!; 
         let indexLeft = keyframes.indexOf(left); 
         let interY:List<number> = (await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).interpolationY as List<number>)!;  
@@ -251,7 +274,7 @@ export class Track extends React.Component<IProps> {
     onInnerDoubleClick = (e: React.MouseEvent) => {
         let inner = this._inner.current!;
         let offsetX = Math.round((e.clientX - inner.getBoundingClientRect().left) * this.props.transform.Scale);
-        this.createRegion(offsetX);
+        this.createRegion(KeyframeFunc.convertPixelTime(offsetX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
     }
 
     createRegion = (position: number) => {
@@ -275,7 +298,7 @@ export class Track extends React.Component<IProps> {
                 <div className="track">
                     <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}>
                         {DocListCast(this.regions).map((region) => {
-                            return <Keyframe node={this.props.node} RegionData={region} changeCurrentBarX={this.props.changeCurrentBarX} transform={this.props.transform} collection={this.props.collection}/>;
+                            return <Keyframe {...this.props} RegionData={region}/>;
                         })}
                     </div>
                 </div>