From eab360d4c415163e4bfe14f167c84b58902971b5 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Mon, 12 Aug 2019 17:04:36 -0400
Subject: authoring/play mode and timeline overview

---
 .../views/animationtimeline/TimelineOverview.tsx   | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/client/views/animationtimeline/TimelineOverview.tsx

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
new file mode 100644
index 000000000..0e10e655d
--- /dev/null
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"; 
+import {observable} from "mobx"; 
+import {observer} from "mobx-react";
+import "./TimelineOverview.scss"; 
+
+
+
+interface TimelineOverviewProps{
+    totalLength: number; 
+    visibleLength:number; 
+    visibleStart:number;
+    changeCurrentBarX: (x:number) => any; 
+}
+
+
+export class TimelineOverview extends React.Component<TimelineOverviewProps>{
+
+
+    render(){
+        return(
+            <div key="timeline-overview-container" className="timeline-overview-container">
+                <div key="timeline-overview-visible" className="timeline-overview-visible" style={{left:`${this.props.visibleStart}px`, width:`${this.props.visibleLength}px`}}></div>
+                <div key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container">
+                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
+                    <div key="timeline-overview-scrubber-tail" className="tiemline-overview-scrubber-tail"></div>
+                </div>
+            </div>
+        ); 
+    }
+
+}
+
+
-- 
cgit v1.2.3-70-g09d2


From 91335b57dafdeda7a1feb703b0839337fcbbfecd Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Tue, 13 Aug 2019 17:26:32 -0400
Subject: timeline overview completed!

---
 src/client/views/animationtimeline/Keyframe.tsx    |  2 +
 src/client/views/animationtimeline/Timeline.tsx    | 77 ++++++++++++++--------
 .../views/animationtimeline/TimelineOverview.scss  | 24 +++++++
 .../views/animationtimeline/TimelineOverview.tsx   | 61 +++++++++++++++--
 src/client/views/animationtimeline/Track.tsx       |  1 +
 5 files changed, 134 insertions(+), 31 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index dbc26e3d4..f6c04d43e 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -91,6 +91,8 @@ export namespace KeyframeFunc {
         regiondata.functions = new List<Doc>(); 
         return regiondata;
     };
+
+    
 }
 
 export const RegionDataSchema = createSchema({
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 97b9ad4db..a29758694 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import "./Timeline.scss";
-import { CollectionSubView } from "../collections/CollectionSubView";
+import { CollectionSubView, SubCollectionViewProps } from "../collections/CollectionSubView";
 import { Document, listSpec } from "../../../new_fields/Schema";
 import { observer } from "mobx-react";
 import { Track } from "./Track";
@@ -35,8 +35,6 @@ export interface FlyoutProps {
 
 @observer
 export class Timeline extends CollectionSubView(Document) {
-    static Instance:Timeline; 
-   
 
     private readonly DEFAULT_CONTAINER_HEIGHT: number = 300;
     private readonly DEFAULT_TICK_SPACING: number = 50;
@@ -53,16 +51,16 @@ export class Timeline extends CollectionSubView(Document) {
     @observable private _trackbox = React.createRef<HTMLDivElement>();
     @observable private _titleContainer = React.createRef<HTMLDivElement>();
     @observable private _timelineContainer = React.createRef<HTMLDivElement>();
-
     @observable private _timelineWrapper = React.createRef<HTMLDivElement>();
     @observable private _infoContainer = React.createRef<HTMLDivElement>();
 
-
     @observable private _currentBarX: number = 0;
     @observable private _windSpeed: number = 1;
     @observable private _isPlaying: boolean = false; //scrubber playing
     @observable private _isFrozen: boolean = false; //timeline freeze
-    @observable private _boxLength: number = 0;
+    @observable private _totalLength: number = 0;
+    @observable private _visibleLength: number = 0; 
+    @observable private _visibleStart: number = 0; 
     @observable private _containerHeight: number = this.DEFAULT_CONTAINER_HEIGHT;
     @observable private _time = 100000; //DEFAULT
     @observable private _ticks: number[] = [];
@@ -83,8 +81,10 @@ export class Timeline extends CollectionSubView(Document) {
         return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc)) as List<Doc>;
     }
 
+
     componentWillMount() {
         this.props.Document.isAnimating ? this.props.Document.isAnimating = true : this.props.Document.isAnimating = false; 
+        console.log(this._currentBarX); 
     }
 
     componentDidMount() {
@@ -99,11 +99,10 @@ export class Timeline extends CollectionSubView(Document) {
                     this.changeCurrentBarX(curPage * this._tickIncrement / this._tickSpacing);
                 });
             }
-
         }
         runInAction(() => {
             reaction(() => {
-                return this._time; 
+                return this._time;  
             }, () => {
                 this._ticks = [];
                 for (let i = 0; i < this._time;) {
@@ -111,17 +110,22 @@ export class Timeline extends CollectionSubView(Document) {
                     i += this._tickIncrement;
                 }
                 let trackbox = this._trackbox.current!;
-                this._boxLength = this._tickIncrement / 1000 * this._tickSpacing * this._ticks.length;
-                trackbox.style.width = `${this._boxLength}`;
-                this._scrubberbox.current!.style.width = `${this._boxLength}`;
-            });
+                this._totalLength = this._tickSpacing * this._ticks.length;
+                trackbox.style.width = `${this._totalLength}`;
+                this._scrubberbox.current!.style.width = `${this._totalLength}`;
+            }, {fireImmediately:true}); 
+            this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width; 
+            this._visibleStart = this._infoContainer.current!.scrollLeft; 
         });
+       
     }
+
+    
    
 
     @action
-    changeCurrentBarX = (x: number) => {
-        this._currentBarX = x;
+    changeCurrentBarX = (pixel: number) => {
+        this._currentBarX = pixel;
     }
 
     //for playing
@@ -139,10 +143,10 @@ export class Timeline extends CollectionSubView(Document) {
 
     @action
     changeCurrentX = () => {
-        if (this._currentBarX === this._boxLength && this._isPlaying) {
+        if (this._currentBarX === this._totalLength && this._isPlaying) {
             this._currentBarX = 0;
         }
-        if (this._currentBarX <= this._boxLength && this._isPlaying) {
+        if (this._currentBarX <= this._totalLength && this._isPlaying) {
             this._currentBarX = this._currentBarX + this._windSpeed;
             setTimeout(this.changeCurrentX, 15);
         }
@@ -208,13 +212,18 @@ export class Timeline extends CollectionSubView(Document) {
     onPanMove = (e: PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        let infoContainer = this._infoContainer.current!;
         let trackbox = this._trackbox.current!;
         let titleContainer = this._titleContainer.current!;
-        infoContainer.scrollLeft = infoContainer.scrollLeft - e.movementX;
+        this.movePanX(this._visibleStart - e.movementX);
         trackbox.scrollTop = trackbox.scrollTop - e.movementY;
         titleContainer.scrollTop = titleContainer.scrollTop - e.movementY;
     }
+    @action 
+    movePanX = (pixel:number) => {
+        let infoContainer = this._infoContainer.current!;
+        infoContainer.scrollLeft = pixel; 
+        this._visibleStart = infoContainer.scrollLeft;
+    }
 
 
     @action
@@ -276,7 +285,7 @@ export class Timeline extends CollectionSubView(Document) {
     }
 
     @action
-    toTime = (time: number): string => {
+    toReadTime = (time: number): string => {
         const inSeconds = time / 1000;
         let min: (string | number) = Math.floor(inSeconds / 60);
         let sec: (string | number) = inSeconds % 60;
@@ -288,6 +297,23 @@ export class Timeline extends CollectionSubView(Document) {
     }
 
 
+    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; 
+        }
+    }
+
+
     private _freezeText = "Freeze Timeline";
 
     timelineContextMenu = (e: React.MouseEvent): void => {
@@ -337,22 +363,21 @@ export class Timeline extends CollectionSubView(Document) {
     }
 
     render() {
-           
-
         return (
             <div>
                 <div key="timeline_wrapper" style={{visibility: BoolCast(this.props.Document.isAnimating) ? "visible" :"hidden", left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)"}} ref={this._timelineWrapper}>
                     <button key="timeline_minimize" className="minimize" onClick={this.minimize}>Minimize</button>
                     <div key="timeline_container" className="timeline-container" style={{ height: `${this._containerHeight}px`, left: "0px", top: "30px" }} ref={this._timelineContainer} onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}>
                         <div key ="timeline_toolbox" className="timeline-toolbox">
-                            <div key ="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="4x" /> </div>
-                            <div key ="timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} size="4x" /> </div>
-                            <div key = "timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} size="4x" /> </div>
+                            <div key ="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div>
+                            <div key ="timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} size="2x" /> </div>
+                            <div key = "timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} size="2x" /> </div>
+                            <TimelineOverview currentBarX = { this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX}/> 
                         </div>
                         <div key ="timeline_info"className="info-container" ref={this._infoContainer}>
                             <div key="timeline_scrubberbox" className="scrubberbox" ref={this._scrubberbox} onClick={this.onScrubberClick}>
                                 {this._ticks.map(element => {
-                                    return <div className="tick" style={{ transform: `translate(${element / 1000 * this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toTime(element)}</p></div>;
+                                    return <div className="tick" style={{ transform: `translate(${element / 1000 * this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toReadTime(element)}</p></div>;
                                 })}
                             </div>
                             <div key="timeline_scrubber" className="scrubber" ref={this._scrubber} onPointerDown={this.onScrubberDown} style={{ transform: `translate(${this._currentBarX}px)` }}>
@@ -374,7 +399,7 @@ export class Timeline extends CollectionSubView(Document) {
                     <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="4x" /> </div>
                     <div key =" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} size="4x" /> </div>
                     <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} size="4x" /> </div>
-                    <TimelineOverview totalLength={this._time} visibleLength={20} visibleStart={0} changeCurrentBarX={this.changeCurrentBarX}/>
+                    <TimelineOverview currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX}/> 
                 </div>
             </div>
         );
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index a71abf348..21988927d 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -5,9 +5,33 @@
     margin-left: 20px;  
     background: white; 
     border: 1px solid black; 
+    padding: 0px; 
+    display:inline-block; 
     .timeline-overview-visible{
         height: 100%; 
         background: green; 
         border: 1px solid black; 
+        margin: 0px; 
+    }
+    .timeline-overview-scrubber-container{
+        height: 100%;
+        margin-top: -40px;  
+        margin-left: 0px; 
+        width: 2px; 
+        z-index: 1001;
+        background-color:black; 
+        display: inline-block; 
+        .timeline-overview-scrubber-head{
+            position:absolute; 
+            height: 30px; 
+            width: 30px;
+            background-color:transparent; 
+            border-radius: 50%; 
+            border: 5px solid black; 
+            margin-left: -15px; 
+            top: -15px; 
+
+        }
+        
     }
 }
\ No newline at end of file
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 0e10e655d..1ad7d20e5 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"; 
-import {observable} from "mobx"; 
+import {observable, action} from "mobx"; 
 import {observer} from "mobx-react";
 import "./TimelineOverview.scss"; 
 
@@ -9,20 +9,71 @@ interface TimelineOverviewProps{
     totalLength: number; 
     visibleLength:number; 
     visibleStart:number;
-    changeCurrentBarX: (x:number) => any; 
+    currentBarX:number; 
+    changeCurrentBarX: (pixel:number) => void; 
+    movePanX: (pixel:number) => any;
 }
 
 
+@observer
 export class TimelineOverview extends React.Component<TimelineOverviewProps>{
+    @observable private _visibleRef = React.createRef<HTMLDivElement>(); 
+    @observable private _scrubberRef = React.createRef<HTMLDivElement>(); 
+    
+    @action
+    onPointerDown = (e:React.PointerEvent) => {
+        document.removeEventListener("pointermove", this.onPanX); 
+        document.removeEventListener("pointerup", this.onPointerUp); 
+        document.addEventListener("pointermove", this.onPanX); 
+        document.addEventListener("pointerup", this.onPointerUp); 
+    }
+
+    @action
+    onPanX = (e: PointerEvent) => {
+        let movX = (this.props.visibleStart / this.props.totalLength)* 300 + e.movementX; 
+        this.props.movePanX((movX / 300) * this.props.totalLength); 
+    }
+
+    @action
+    onPointerUp = (e: PointerEvent) => {
+        document.removeEventListener("pointermove", this.onPanX); 
+        document.removeEventListener("pointerup", this.onPointerUp); 
+    }
 
+    @action
+    onScrubberDown = ( e:React.PointerEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        document.removeEventListener("pointermove", this.onScrubberMove); 
+        document.removeEventListener("pointerup", this.onScrubberUp); 
+        document.addEventListener("pointermove", this.onScrubberMove); 
+        document.addEventListener("pointerup", this.onScrubberUp);
+    }
+
+    @action
+    onScrubberMove = (e: PointerEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        let scrubberRef = this._scrubberRef.current!; 
+        let left = scrubberRef.getBoundingClientRect().left; 
+        let offsetX = Math.round(e.clientX - left); 
+        this.props.changeCurrentBarX(((offsetX / 300) * this.props.totalLength) + this.props.currentBarX); 
+    }
+
+    @action
+    onScrubberUp = (e:PointerEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        document.removeEventListener("pointermove", this.onScrubberMove); 
+        document.removeEventListener("pointerup", this.onScrubberUp);
+    }
 
     render(){
         return(
             <div key="timeline-overview-container" className="timeline-overview-container">
-                <div key="timeline-overview-visible" className="timeline-overview-visible" style={{left:`${this.props.visibleStart}px`, width:`${this.props.visibleLength}px`}}></div>
-                <div key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container">
+                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{marginLeft:`${(this.props.visibleStart / this.props.totalLength)* 300}px`, width:`${(this.props.visibleLength / this.props.totalLength) * 300}px`}} onPointerDown={this.onPointerDown}></div>
+                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{marginLeft:`${(this.props.currentBarX / this.props.totalLength) * 300}px`}} onPointerDown={this.onScrubberDown}>
                     <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
-                    <div key="timeline-overview-scrubber-tail" className="tiemline-overview-scrubber-tail"></div>
                 </div>
             </div>
         ); 
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 64e94f0f1..6bdabeb93 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -94,6 +94,7 @@ export class Track extends React.Component<IProps> {
                 this.props.node.hidden = false;
                 await this.timeChange(this.props.currentBarX);
             } else {
+                console.log("heuulloo"); 
                 this.props.node.hidden = true;
             }
         }, { fireImmediately: true });
-- 
cgit v1.2.3-70-g09d2


From e04277caf25be1c657a2f779a64eb5fcb4e19461 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Wed, 14 Aug 2019 16:08:01 -0400
Subject: UI improvements, pointerevents, and improved overview

---
 src/client/views/animationtimeline/Keyframe.tsx    |  51 +++++++----
 src/client/views/animationtimeline/Timeline.scss   |   2 +-
 src/client/views/animationtimeline/Timeline.tsx    | 100 ++++++++-------------
 .../views/animationtimeline/TimelineOverview.scss  |   5 +-
 .../views/animationtimeline/TimelineOverview.tsx   |  19 ++--
 src/client/views/animationtimeline/Track.tsx       |   5 +-
 src/client/views/graph/GraphManager.ts             |   2 +-
 src/client/views/nodes/DocumentView.tsx            |   2 +-
 8 files changed, 90 insertions(+), 96 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 6a0525eb8..784765318 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -2,10 +2,10 @@ import * as React from "react";
 import "./Keyframe.scss";
 import "./Timeline.scss";
 import "../globalCssVariables.scss";
-import { observer, Observer } from "mobx-react";
-import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, isComputedProp, runInAction } from "mobx";
+import { observer} from "mobx-react";
+import { observable, reaction, action, IReactionDisposer, observe, computed, runInAction } from "mobx";
 import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
-import { Cast, FieldValue, StrCast, NumCast } from "../../../new_fields/Types";
+import { Cast, NumCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema";
 import { FlyoutProps } from "./Timeline";
@@ -13,7 +13,6 @@ import { Transform } from "../../util/Transform";
 import { InkField, StrokeData } from "../../../new_fields/InkField";
 import { TimelineMenu } from "./TimelineMenu";
 import { Docs } from "../../documents/Documents";
-import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 
 export namespace KeyframeFunc {
@@ -111,7 +110,6 @@ interface IProps {
     RegionData: Doc;
     collection: Doc;
     changeCurrentBarX: (x: number) => void;
-    setFlyout: (props: FlyoutProps) => any;
     transform: Transform;
 }
 
@@ -183,8 +181,8 @@ export class Keyframe extends React.Component<IProps> {
         let finish = await this.makeKeyData(this.regiondata.position + this.regiondata.duration, KeyframeFunc.KeyframeType.fade)!;
         (fadeIn.key! as Doc).opacity = 1;
         (fadeOut.key! as Doc).opacity = 1;
-        (start.key! as Doc).opacity = 0;
-        (finish.key! as Doc).opacity = 0;
+        (start.key! as Doc).opacity = 0.1;
+        (finish.key! as Doc).opacity = 0.1;
 
         observe(this.regiondata, change => {
             if (change.type === "update") {
@@ -238,14 +236,32 @@ export class Keyframe extends React.Component<IProps> {
         return TK;
     }
 
+    @observable private _mouseToggled = false; 
+    @observable private _doubleClickEnabled = false; 
     @action
     onBarPointerDown = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        document.addEventListener("pointermove", this.onBarPointerMove);
-        document.addEventListener("pointerup", (e: PointerEvent) => {
+       
+        let clientX = e.clientX;  
+        if (this._doubleClickEnabled){
+            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); 
+                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);
         });
+        
+        }
+        
+        
+
+        
     }
 
 
@@ -253,6 +269,9 @@ export class Keyframe extends React.Component<IProps> {
     onBarPointerMove = (e: PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
+        if (e.movementX !== 0) {
+            this._mouseToggled = true; 
+        }
         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;
@@ -351,11 +370,10 @@ export class Keyframe extends React.Component<IProps> {
     }
 
     @action
-    createKeyframe = async (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
+    createKeyframe = async (clientX:number) => {
+        this._mouseToggled = true; 
         let bar = this._bar.current!;
-        let offset = Math.round((e.clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale);
+        let offset = Math.round((clientX - bar.getBoundingClientRect().left) * this.props.transform.Scale);
         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);
             await this.makeKeyData(Math.round(position + offset));
@@ -514,8 +532,7 @@ export class Keyframe extends React.Component<IProps> {
         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% )` }}
-                    onPointerDown={this.onBarPointerDown}
-                    onDoubleClick={this.createKeyframe}>
+                    onPointerDown={this.onBarPointerDown}>
                     <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
                     <div className="rightResize" onPointerDown={this.onResizeRight}></div>
                     {this.regiondata.keyframes!.map(kf => {
@@ -529,8 +546,10 @@ export class Keyframe extends React.Component<IProps> {
                                 <div ref={bodyRef}className="body-container" style={{left: `${NumCast(kf.time) - this.regiondata.position}px`, width:`${NumCast(left!.time) - NumCast(kf.time)}px`}}
                                 onPointerOver={(e) => { this.onContainerOver(e, bodyRef); }}
                                 onPointerOut={(e) => { this.onContainerOut(e, bodyRef); }}
-                                onPointerDown={(e) => { this.props.changeCurrentBarX(NumCast(kf.time) + (e.clientX - bodyRef.current!.getBoundingClientRect().left) * this.props.transform.Scale);}}
                                 onContextMenu={(e) => {
+                                    e.preventDefault(); 
+                                    e.stopPropagation(); 
+                                    this._mouseToggled = true; 
                                     let items = [
                                         TimelineMenu.Instance.addItem("button", "Add Ease", () => {this.onContainerDown(kf, "interpolate");}),
                                         TimelineMenu.Instance.addItem("button", "Add Path", () => {this.onContainerDown(kf, "path");}), 
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index e5d898502..1457d5a84 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -8,7 +8,7 @@
 }
 
 .timeline-toolbox{
-     position:absolute; 
+    position:absolute; 
     display:flex;
     align-items: flex-start; 
     flex-direction: row;  
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 29787fa03..3d878660d 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -1,26 +1,17 @@
 import * as React from "react";
 import "./Timeline.scss";
-import { CollectionSubView, SubCollectionViewProps } from "../collections/CollectionSubView";
+import { CollectionSubView } from "../collections/CollectionSubView";
 import { Document, listSpec } from "../../../new_fields/Schema";
 import { observer } from "mobx-react";
 import { Track } from "./Track";
-import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, Reaction, IObservableObject, trace, autorun, runInAction } from "mobx";
-import { Cast, NumCast, FieldValue, StrCast, BoolCast } from "../../../new_fields/Types";
+import { observable, reaction, action, IReactionDisposer, computed, runInAction } from "mobx";
+import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlayCircle, faBackward, faForward, faGripLines, faArrowUp, faArrowDown, faClock, faPauseCircle } from "@fortawesome/free-solid-svg-icons";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ContextMenu } from "../ContextMenu";
-import { DocumentManager } from "../../util/DocumentManager";
-import { VideoBox } from "../nodes/VideoBox";
-import { VideoField } from "../../../new_fields/URLField";
-import { CollectionVideoView } from "../collections/CollectionVideoView";
-import { Transform } from "../../util/Transform";
-import { faGrinTongueSquint } from "@fortawesome/free-regular-svg-icons";
-import { InkField } from "../../../new_fields/InkField";
-import { AddComparisonParameters } from "../../northstar/model/idea/idea";
-import { keepAlive } from "mobx-utils";
 import { TimelineOverview } from "./TimelineOverview";
 
 
@@ -57,7 +48,7 @@ export class Timeline extends CollectionSubView(Document) {
     @observable private _currentBarX: number = 0;
     @observable private _windSpeed: number = 1;
     @observable private _isPlaying: boolean = false; //scrubber playing
-    @observable private _isFrozen: boolean = false; //timeline freeze
+    @observable private _isFrozen: boolean = true; //timeline freeze
     @observable private _totalLength: number = 0;
     @observable private _visibleLength: number = 0; 
     @observable private _visibleStart: number = 0; 
@@ -65,7 +56,6 @@ export class Timeline extends CollectionSubView(Document) {
     @observable private _time = 100000; //DEFAULT
     @observable private _ticks: number[] = [];
     @observable private _playButton = faPlayCircle; 
-    @observable private flyoutInfo: FlyoutProps = { x: 0, y: 0, display: "none", regiondata: new Doc(), regions: new List<Doc>() };
 
     @computed
     private get children(): List<Doc> {
@@ -130,30 +120,33 @@ export class Timeline extends CollectionSubView(Document) {
 
     //for playing
     @action
-    onPlay = async (e: React.MouseEvent) => {
+    onPlay = (e: React.MouseEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
         if (this._isPlaying) {
             this._isPlaying = false;
             this._playButton = faPlayCircle; 
         } else {
             this._isPlaying = true;
             this._playButton = faPauseCircle; 
-            this.changeCurrentX();
-        }
-    }
-
-    @action
-    changeCurrentX = () => {
-        if (this._currentBarX === this._totalLength && this._isPlaying) {
-            this._currentBarX = 0;
-        }
-        if (this._currentBarX <= this._totalLength && this._isPlaying) {
-            this._currentBarX = this._currentBarX + this._windSpeed;
-            setTimeout(this.changeCurrentX, 15);
+            const playTimeline = () => {
+                if (this._isPlaying){
+                    if (this._currentBarX >= this._totalLength) {
+                        this.changeCurrentBarX(0); 
+                    } else {
+                        this.changeCurrentBarX(this._currentBarX + this._windSpeed);
+                        setTimeout(playTimeline, 15);  
+                    }
+                }
+            }; 
+            playTimeline(); 
         }
     }
 
     @action
     windForward = (e: React.MouseEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
         if (this._windSpeed < 64) { //max speed is 32
             this._windSpeed = this._windSpeed * 2;
         }
@@ -161,6 +154,8 @@ export class Timeline extends CollectionSubView(Document) {
 
     @action
     windBackward = (e: React.MouseEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
         if (this._windSpeed > 1 / 16) { // min speed is 1/8
             this._windSpeed = this._windSpeed / 2;
         }
@@ -313,16 +308,12 @@ export class Timeline extends CollectionSubView(Document) {
         }
     }
 
-
-    private _freezeText = "Freeze Timeline";
-
     timelineContextMenu = (e: React.MouseEvent): void => {
         let subitems: ContextMenuProps[] = [];
         let timelineContainer = this._timelineWrapper.current!;
         subitems.push({
             description: "Pin to Top", event: action(() => {
                 if (!this._isFrozen) {
-                    timelineContainer.style.transition = "top 1000ms ease-in, left 1000ms ease-in";  //?????
                     timelineContainer.style.left = "0px";
                     timelineContainer.style.top = "0px";
                     timelineContainer.style.transition = "none";
@@ -330,22 +321,11 @@ export class Timeline extends CollectionSubView(Document) {
             }), icon: faArrowUp
         });
         subitems.push({
-            description: "Pin to Bottom", event: action(() => {
-                console.log(this.props.Document.y);
-
-                if (!this._isFrozen) {
-                    timelineContainer.style.transform = `translate(0px, ${e.pageY - this._containerHeight}px)`;
-                }
-            }), icon: faArrowDown
-        });
-        subitems.push({
-            description: this._freezeText, event: action(() => {
+            description: this._isFrozen ? "Unfreeze Timeline" : "Freeze Timeline", event: action(() => {
                 if (this._isFrozen) {
                     this._isFrozen = false;
-                    this._freezeText = "Freeze Timeline";
                 } else {
                     this._isFrozen = true;
-                    this._freezeText = "Unfreeze Timeline";
                 }
             }), icon: "thumbtack"
         });
@@ -353,27 +333,24 @@ export class Timeline extends CollectionSubView(Document) {
     }
 
 
-
-    @action
-    getFlyout = (props: FlyoutProps) => {
-        for (const [k, v] of Object.entries(props)) {
-            (this.flyoutInfo as any)[k] = v;
-        }
-        console.log(this.flyoutInfo); 
+    private timelineToolBox = (scale:number) => {
+        let size = 50 * scale; //50 is default
+        return (
+        <div key="timeline_toolbox" className="timeline-toolbox" style={{height:`${size}px`}}>
+                <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{height:`${size}px`, width: `${size}px`}} /> </div>
+                <div key =" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{height:`${size}px`, width: `${size}px`}}  /> </div>
+                <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{height:`${size}px`, width: `${size}px`}}  /> </div>
+                <TimelineOverview scale={scale} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX}/> 
+        </div>
+        );
     }
-
     render() {
         return (
             <div>
                 <div key="timeline_wrapper" style={{visibility: BoolCast(this.props.Document.isAnimating) ? "visible" :"hidden", left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)"}} ref={this._timelineWrapper}>
                     <button key="timeline_minimize" className="minimize" onClick={this.minimize}>Minimize</button>
                     <div key="timeline_container" className="timeline-container" style={{ height: `${this._containerHeight}px`, left: "0px", top: "30px" }} ref={this._timelineContainer} onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}>
-                        <div key ="timeline_toolbox" className="timeline-toolbox">
-                            <div key ="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div>
-                            <div key ="timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} size="2x" /> </div>
-                            <div key = "timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} size="2x" /> </div>
-                            <TimelineOverview currentBarX = { this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX}/> 
-                        </div>
+                        {this.timelineToolBox(0.5)}
                         <div key ="timeline_info"className="info-container" ref={this._infoContainer}>
                             <div key="timeline_scrubberbox" className="scrubberbox" ref={this._scrubberbox} onClick={this.onScrubberClick}>
                                 {this._ticks.map(element => {
@@ -384,7 +361,7 @@ export class Timeline extends CollectionSubView(Document) {
                                 <div key="timeline_scrubberhead" className="scrubberhead"></div>
                             </div>
                             <div key="timeline_trackbox" className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown}>
-                                {DocListCast(this.children).map(doc => <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} 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()} collection = {this.props.Document}/>)}
                             </div>
                         </div>
                         <div key="timeline_title"className="title-container" ref={this._titleContainer}>
@@ -395,12 +372,7 @@ export class Timeline extends CollectionSubView(Document) {
                         </div>
                     </div>
                 </div>
-                <div key="timeline_toolbox" className="timeline-toolbox" style={{visibility: BoolCast(this.props.Document.isAnimating) ? "hidden" :"visible"}}>
-                    <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="4x" /> </div>
-                    <div key =" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} size="4x" /> </div>
-                    <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} size="4x" /> </div>
-                    <TimelineOverview currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX}/> 
-                </div>
+                {BoolCast(this.props.Document.isAnimating) ? <div></div>: this.timelineToolBox(1) }
             </div>
         );
     }
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index 21988927d..9e69c2adf 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -1,16 +1,17 @@
+@import "./../globalCssVariables.scss"; 
+
 .timeline-overview-container{
     width: 300px; 
     height: 40px;
     margin-top: 10px; 
     margin-left: 20px;  
     background: white; 
-    border: 1px solid black; 
+    border: 2px solid black; 
     padding: 0px; 
     display:inline-block; 
     .timeline-overview-visible{
         height: 100%; 
         background: green; 
-        border: 1px solid black; 
         margin: 0px; 
     }
     .timeline-overview-scrubber-container{
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 1ad7d20e5..4fdf1381e 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -6,6 +6,7 @@ import "./TimelineOverview.scss";
 
 
 interface TimelineOverviewProps{
+    scale: number; 
     totalLength: number; 
     visibleLength:number; 
     visibleStart:number;
@@ -19,7 +20,9 @@ interface TimelineOverviewProps{
 export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     @observable private _visibleRef = React.createRef<HTMLDivElement>(); 
     @observable private _scrubberRef = React.createRef<HTMLDivElement>(); 
-    
+    private readonly DEFAULT_HEIGHT = 50; 
+    private readonly DEFAULT_WIDTH = 300; 
+
     @action
     onPointerDown = (e:React.PointerEvent) => {
         document.removeEventListener("pointermove", this.onPanX); 
@@ -30,8 +33,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     @action
     onPanX = (e: PointerEvent) => {
-        let movX = (this.props.visibleStart / this.props.totalLength)* 300 + e.movementX; 
-        this.props.movePanX((movX / 300) * this.props.totalLength); 
+        let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH * this.props.scale) + e.movementX; 
+        this.props.movePanX((movX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength); 
     }
 
     @action
@@ -57,7 +60,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         let scrubberRef = this._scrubberRef.current!; 
         let left = scrubberRef.getBoundingClientRect().left; 
         let offsetX = Math.round(e.clientX - left); 
-        this.props.changeCurrentBarX(((offsetX / 300) * this.props.totalLength) + this.props.currentBarX); 
+        this.props.changeCurrentBarX(((offsetX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength) + this.props.currentBarX); 
     }
 
     @action
@@ -70,10 +73,10 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     render(){
         return(
-            <div key="timeline-overview-container" className="timeline-overview-container">
-                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{marginLeft:`${(this.props.visibleStart / this.props.totalLength)* 300}px`, width:`${(this.props.visibleLength / this.props.totalLength) * 300}px`}} onPointerDown={this.onPointerDown}></div>
-                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{marginLeft:`${(this.props.currentBarX / this.props.totalLength) * 300}px`}} onPointerDown={this.onScrubberDown}>
-                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
+            <div key="timeline-overview-container" className="timeline-overview-container" style={{height: `${this.DEFAULT_HEIGHT * this.props.scale * 0.8}px` ,width:`${this.DEFAULT_WIDTH * this.props.scale}`}}>
+                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{marginLeft:`${(this.props.visibleStart / this.props.totalLength)* this.DEFAULT_WIDTH * this.props.scale}px`, width:`${(this.props.visibleLength / this.props.totalLength) * this.DEFAULT_WIDTH * this.props.scale}px`}} onPointerDown={this.onPointerDown}></div>
+                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{marginLeft:`${(this.props.currentBarX / this.props.totalLength) * this.DEFAULT_WIDTH * this.props.scale}px`, marginTop: `${-this.DEFAULT_HEIGHT * this.props.scale * 0.8}px`}} onPointerDown={this.onScrubberDown}>
+                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head" style={{}}></div>
                 </div>
             </div>
         ); 
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 288a1d2ad..d91954022 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -17,7 +17,6 @@ interface IProps {
     transform: Transform;
     collection: Doc; 
     changeCurrentBarX: (x: number) => void;
-    setFlyout: (props: FlyoutProps) => any;
 }
 
 @observer
@@ -177,7 +176,7 @@ export class Track extends React.Component<IProps> {
         const timeratio = (this.props.currentBarX - 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>;  
+        let interY:List<number> = (await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).interpolationY as List<number>)!;  
         let realIndex = (interY.length - 1) * timeratio; 
         let xIndex = Math.floor(realIndex);  
         let yValue = interY[xIndex]; 
@@ -276,7 +275,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} setFlyout={this.props.setFlyout} transform={this.props.transform} collection={this.props.collection}/>;
+                            return <Keyframe node={this.props.node} RegionData={region} changeCurrentBarX={this.props.changeCurrentBarX} transform={this.props.transform} collection={this.props.collection}/>;
                         })}
                     </div>
                 </div>
diff --git a/src/client/views/graph/GraphManager.ts b/src/client/views/graph/GraphManager.ts
index 9d62b1ef8..b62f2337b 100644
--- a/src/client/views/graph/GraphManager.ts
+++ b/src/client/views/graph/GraphManager.ts
@@ -32,7 +32,7 @@ export class GraphManager {
 
     
     defaultGraphs = ()  => {
-        this.GraphData.linear = ; 
+        
     }
 
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f2be7097a..28af39fb3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -729,7 +729,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
 
     render() {
-        trace();
+        // trace();
         let backgroundColor = this.layoutDoc.isBackground || (this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.Document.clusterOverridesDefaultBackground && this.layoutDoc.backgroundColor === this.layoutDoc.defaultBackgroundColor) ?
             this.props.backgroundColor(this.layoutDoc) || StrCast(this.layoutDoc.backgroundColor) :
             StrCast(this.layoutDoc.backgroundColor) || this.props.backgroundColor(this.layoutDoc);
-- 
cgit v1.2.3-70-g09d2


From e507271488fe4c8dcb548dc766ab131fa84f4437 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Wed, 14 Aug 2019 16:52:19 -0400
Subject: ink fix and overview fix

---
 src/client/views/InkingCanvas.scss                      | 2 +-
 src/client/views/InkingCanvas.tsx                       | 4 ++--
 src/client/views/animationtimeline/TimelineOverview.tsx | 6 ++++++
 3 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index d95398f17..2052021d1 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -21,7 +21,7 @@
     width: 8192px;
     height: 8192px;
     cursor: "crosshair";
-    pointer-events: auto;
+    pointer-events: all;
 
 }
 
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
index b08133d80..1cfa8d644 100644
--- a/src/client/views/InkingCanvas.tsx
+++ b/src/client/views/InkingCanvas.tsx
@@ -170,12 +170,12 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
         return [!penPaths.length ? (null) :
             <svg className={`inkingCanvas-paths-ink`} key="Pens"
                 style={{ left: `${this.inkMidX - this.maxCanvasDim}px`, top: `${this.inkMidY - this.maxCanvasDim}px` }} >
-                {}
+                {penPaths}
             </svg>,
         !markerPaths.length ? (null) :
             <svg className={`inkingCanvas-paths-markers`} key="Markers"
                 style={{ left: `${this.inkMidX - this.maxCanvasDim}px`, top: `${this.inkMidY - this.maxCanvasDim}px` }}>
-                {}
+                {markerPaths}
             </svg>];
     }
 
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 4fdf1381e..38b823cbc 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -25,6 +25,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     @action
     onPointerDown = (e:React.PointerEvent) => {
+        e.stopPropagation(); 
+        e.preventDefault(); 
         document.removeEventListener("pointermove", this.onPanX); 
         document.removeEventListener("pointerup", this.onPointerUp); 
         document.addEventListener("pointermove", this.onPanX); 
@@ -33,12 +35,16 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     @action
     onPanX = (e: PointerEvent) => {
+        e.stopPropagation(); 
+        e.preventDefault(); 
         let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH * this.props.scale) + e.movementX; 
         this.props.movePanX((movX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength); 
     }
 
     @action
     onPointerUp = (e: PointerEvent) => {
+        e.stopPropagation(); 
+        e.preventDefault(); 
         document.removeEventListener("pointermove", this.onPanX); 
         document.removeEventListener("pointerup", this.onPointerUp); 
     }
-- 
cgit v1.2.3-70-g09d2


From 7977625e5b408d6e47432caaf7382aa315fc9832 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Sun, 3 Nov 2019 16:48:56 -0500
Subject: changes to timeline overview

---
 src/client/views/animationtimeline/Keyframe.tsx    |  1 -
 src/client/views/animationtimeline/Timeline.scss   | 35 +++++++----
 src/client/views/animationtimeline/Timeline.tsx    | 10 +--
 .../views/animationtimeline/TimelineOverview.scss  | 73 ++++++++++++++++++----
 .../views/animationtimeline/TimelineOverview.tsx   | 30 ++++++---
 5 files changed, 109 insertions(+), 40 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 35d7afc7a..55a2b2075 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -138,7 +138,6 @@ export class Keyframe extends React.Component<IProps> {
     @observable private _gain = 20; //default
     @observable private _mouseToggled = false; 
     @observable private _doubleClickEnabled = false; 
-    @observable private _index:number = 0; 
 
     @computed private get regiondata() { return RegionData(this.regions[this.regions.indexOf(this.props.RegionData)] as Doc);}
     @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>;}
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 0f98ed7c4..6270eed41 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -4,25 +4,33 @@
 
 .timeline-toolbox{
     position:absolute; 
+    margin: 0px; 
+    padding: 0px; 
     display:flex;
     align-items: flex-start; 
-    flex-direction: row;  
-    justify-content: space-evenly; 
-    align-items: baseline; 
-    top: 10px;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    top: 15px;
     div{
+        padding: 0px; 
         margin-left:10px; 
     }
     .animation-text{
         font-size: 20px; 
         height: auto; 
         width: auto; 
+        white-space: nowrap;
+        font-size: 16px;
+        color: grey;
+        letter-spacing: 2px;
+        text-transform: uppercase;
     }
     .round-toggle {
         height: 40px;
         width: 80px;
         background-color: white;
-        border: 2px solid purple;
+        border: 2px solid grey;
         border-radius: 20px;
         animation-fill-mode: forwards; 
         animation-duration: 500ms;
@@ -44,13 +52,18 @@
             margin-top: 0.5px; 
         } 
     }
-    .time-input{
-        height: 40px; 
-        width: 100px; 
-        
-    }
+    
+}
+.time-input{
+    height: 40px; 
+    width: 100px; 
+    white-space: nowrap;
+    font-size: 16px;
+    color: grey;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    
 }
-
 .tick{
     height:100%; 
     width: 1px; 
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 6028656dc..94cd0629d 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -321,14 +321,14 @@ export class Timeline extends React.Component<FieldViewProps> {
                 <div key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
                 <div key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${size}px`, width: `${size}px` }} /> </div>
                 <div key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${size}px`, width: `${size}px` }} /> </div>                
-                <div key="overview-text" className="animation-text"><p>Timeline Overview</p></div>
-                <TimelineOverview scale={scale} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
-                <div key="animation-text" className="animation-text"><p>Mode: {this.props.Document.isAnimating ? "Authoring" : "Play"}</p></div>
+                <div key="overview-text" className="animation-text">Timeline Overview</div>
+                <TimelineOverview isAuthoring = {BoolCast(this.props.Document.isAnimating)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
+                <div key="animation-text" className="animation-text">Mode: {this.props.Document.isAnimating ? "Authoring" : "Play"}</div>
                 <div key="round-toggle" ref={this._roundToggleContainerRef} className="round-toggle">
                     <div key="round-toggle-slider" ref={this._roundToggleRef} className="round-toggle-slider" onPointerDown={this.toggleChecked}> </div>
                 </div>
-                <div key="time-text" className="animation-text"><p>Length: </p></div>
-                <input placeholder={String(this._time) + "ms"} ref = {this._timeInputRef} onKeyDown={this.onTimeInput}/>
+                <div key="time-text" className="animation-text" style ={{visibility: this.props.Document.isAnimating ? "visible" : "hidden"}}>Length: </div>
+                <input className="time-input" style={{visibility: this.props.Document.isAnimating ? "visible" : "hidden"}} placeholder={String(this._time) + "ms"} ref = {this._timeInputRef} onKeyDown={this.onTimeInput}/>
             </div>
         );
     }
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index 9e69c2adf..c7f9bd059 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -1,38 +1,85 @@
 @import "./../globalCssVariables.scss"; 
 
-.timeline-overview-container{
+
+.timeline-overview-container{ 
+    padding: 0px; 
+    margin: 0px; 
     width: 300px; 
     height: 40px;
-    margin-top: 10px; 
-    margin-left: 20px;  
     background: white; 
+    position: relative; 
     border: 2px solid black; 
-    padding: 0px; 
-    display:inline-block; 
+    
     .timeline-overview-visible{
+        position: absolute; 
         height: 100%; 
         background: green; 
+        display: inline-block;
         margin: 0px; 
+        padding: 0px; 
     }
-    .timeline-overview-scrubber-container{
+    .timeline-overview-scrubber-container{   
+        margin: 0px; 
+        padding: 0px; 
+        position: absolute; 
         height: 100%;
-        margin-top: -40px;  
-        margin-left: 0px; 
         width: 2px; 
+        top: 0px; 
+        left: 0px; 
         z-index: 1001;
         background-color:black; 
         display: inline-block; 
-        .timeline-overview-scrubber-head{
+
+        .timeline-overview-scrubber-head{   
+            padding: 0px; 
+            margin: 0px; 
             position:absolute; 
             height: 30px; 
             width: 30px;
             background-color:transparent; 
             border-radius: 50%; 
             border: 5px solid black; 
-            margin-left: -15px; 
-            top: -15px; 
-
+            left: -15px;
+            top: -30px; 
         }
-        
     }
+}
+
+
+
+.timeline-play-bar{
+    position: relative; 
+    padding: 0px; 
+    margin: 0px; 
+    width: 300px; 
+    height: 4px; 
+    background-color: grey;
+    border-radius: 20px;
+    cursor: pointer; 
+    
+    .timeline-play-head{
+        position: absolute; 
+        padding: 0px; 
+        margin: 0px; 
+        width: 20px; 
+        height: 20px; 
+        border-radius: 50%; 
+        background-color: white; 
+        border: 3px grey solid; 
+        left: 0px; 
+        top: -10px; 
+        cursor: pointer; 
+    }
+}  
+.timeline-play-tail{
+    position: absolute; 
+    padding: 0px; 
+    margin: 0px; 
+    height: 4px; 
+    width: 0px;   
+    z-index: 1000; 
+    background-color: green;
+    border-radius: 20px;
+    margin-top: -4px; 
+    cursor: pointer; 
 }
\ No newline at end of file
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 38b823cbc..4741969dc 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -6,11 +6,11 @@ import "./TimelineOverview.scss";
 
 
 interface TimelineOverviewProps{
-    scale: number; 
     totalLength: number; 
     visibleLength:number; 
     visibleStart:number;
-    currentBarX:number; 
+    currentBarX:number;
+    isAuthoring: boolean;  
     changeCurrentBarX: (pixel:number) => void; 
     movePanX: (pixel:number) => any;
 }
@@ -37,8 +37,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     onPanX = (e: PointerEvent) => {
         e.stopPropagation(); 
         e.preventDefault(); 
-        let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH * this.props.scale) + e.movementX; 
-        this.props.movePanX((movX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength); 
+        let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH) + e.movementX; 
+        this.props.movePanX((movX / (this.DEFAULT_WIDTH )) * this.props.totalLength); 
     }
 
     @action
@@ -66,7 +66,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         let scrubberRef = this._scrubberRef.current!; 
         let left = scrubberRef.getBoundingClientRect().left; 
         let offsetX = Math.round(e.clientX - left); 
-        this.props.changeCurrentBarX(((offsetX / (this.DEFAULT_WIDTH * this.props.scale)) * this.props.totalLength) + this.props.currentBarX); 
+        this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX); 
     }
 
     @action
@@ -78,12 +78,22 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     }
 
     render(){
+        let timeline = this.props.isAuthoring ? [
+            <div key="timeline-overview-container" className="timeline-overview-container">
+                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{left:`${(Math.round(this.props.visibleStart) / Math.round(this.props.totalLength)) * 296}px`, width:`${(Math.round(this.props.visibleLength) / Math.round(this.props.totalLength)) * 296}px`}} onPointerDown={this.onPointerDown}></div>,
+                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{left:`${(this.props.currentBarX / this.props.totalLength) * 294}px`}} onPointerDown={this.onScrubberDown}>
+                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
+                </div>            
+            </div>
+        ] : [
+            <div className="timeline-play-bar">
+                <div ref={this._scrubberRef} className="timeline-play-head" style={{left:`${(this.props.currentBarX / this.props.totalLength) * 294}px`}} onPointerDown={this.onScrubberDown}></div>
+            </div>,
+            <div className="timeline-play-tail" style={{width: `${(this.props.currentBarX / this.props.totalLength) * 294}px`}}></div>
+        ]; 
         return(
-            <div key="timeline-overview-container" className="timeline-overview-container" style={{height: `${this.DEFAULT_HEIGHT * this.props.scale * 0.8}px` ,width:`${this.DEFAULT_WIDTH * this.props.scale}`}}>
-                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{marginLeft:`${(this.props.visibleStart / this.props.totalLength)* this.DEFAULT_WIDTH * this.props.scale}px`, width:`${(this.props.visibleLength / this.props.totalLength) * this.DEFAULT_WIDTH * this.props.scale}px`}} onPointerDown={this.onPointerDown}></div>
-                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{marginLeft:`${(this.props.currentBarX / this.props.totalLength) * this.DEFAULT_WIDTH * this.props.scale}px`, marginTop: `${-this.DEFAULT_HEIGHT * this.props.scale * 0.8}px`}} onPointerDown={this.onScrubberDown}>
-                    <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head" style={{}}></div>
-                </div>
+            <div>
+                {timeline}
             </div>
         ); 
     }
-- 
cgit v1.2.3-70-g09d2


From 68a8c2bdbeafc7bc799884a6c1dcea86dbfd9f27 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Fri, 24 Jan 2020 15:04:59 -0500
Subject: change branch

---
 src/client/views/animationtimeline/Timeline.scss   |  92 ++++++++---
 src/client/views/animationtimeline/Timeline.tsx    |  88 ++++++++--
 .../views/animationtimeline/TimelineOverview.scss  |  29 ++--
 .../views/animationtimeline/TimelineOverview.tsx   | 180 ++++++++++++++-------
 4 files changed, 284 insertions(+), 105 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 02c1bdb16..a8dd9b9e7 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -10,39 +10,79 @@ $timelineDark: #77a1aa;
     display: flex;
     align-items: flex-start;
     flex-direction: row;
-    justify-content: space-evenly;
+    // justify-content: space-evenly;
     align-items: center;
-    top: 20px;
+    top: 3px;
+    width: 100%;
 
-    .timeline-icon {
-        color: $timelineColor;
+    .overview-tool {
+        display: flex;
+        justify-content: center;
     }
 
-    div {
-        padding: 0px;
+    .playbackControls {
+        display: flex;
+        margin-left: 30px;
+        max-width: 84px;
+        width: 84px;
+
+        .timeline-icon {
+            color: $timelineColor;
+            margin-left: 3px;
+        }
+
+    }
+
+    .grid-box {
+        display: grid;
+        grid-template-columns: [first] 50% [line2] 25% [line3] 25%;
+        width: calc(100% - 150px);
+        // width: 100%;
         margin-left: 10px;
+
+        .time-box {
+            margin-left: 5px;
+            display: flex;
+        }
+
+        .mode-box {
+            display: flex;
+            margin-left: 5px;
+        }
+
+        .overview-box {
+            width: 100%;
+            display: flex;
+        }
+
+        div {
+            padding: 0px;
+            // margin-left: 10px;
+        }
     }
 
     .animation-text {
-        font-size: 20px;
+        // font-size: 16px;
         height: auto;
         width: auto;
         white-space: nowrap;
-        font-size: 16px;
+        font-size: 14px;
         color: black;
         letter-spacing: 2px;
         text-transform: uppercase;
     }
 
     .round-toggle {
-        height: 40px;
-        width: 80px;
+        height: 20px;
+        width: 40px;
+        min-width: 40px;
         background-color: white;
-        border: 2px solid black;
+        border: 2px solid $timelineDark;
         border-radius: 20px;
         animation-fill-mode: forwards;
         animation-duration: 500ms;
         top: 30px;
+        margin-left: 5px;
 
         input {
             position: absolute;
@@ -52,29 +92,30 @@ $timelineDark: #77a1aa;
         }
 
         .round-toggle-slider {
-            height: 35px;
-            width: 35px;
+            height: 17px;
+            width: 17px;
             background-color: white;
-            border: 3px solid black;
-            border-radius: 20px;
+            border: 2px solid $timelineDark;
+            border-radius: 50%;
             transition: transform 500ms ease-in-out;
             margin-left: 0px;
-            margin-top: 0.5px;
+            // margin-top: 0.5px;
         }
     }
 
 }
 
 .time-input {
-    height: 40px;
-    width: 120px;
+    height: 20px;
+    // width: 120px;
+    width: 100%;
     white-space: nowrap;
-    font-size: 16px;
+    font-size: 12px;
     color: black;
     letter-spacing: 2px;
     text-transform: uppercase;
     padding-left: 5px;
-
+    margin-left: 5px;
 }
 
 .tick {
@@ -99,7 +140,7 @@ $timelineDark: #77a1aa;
     transition: transform 500ms ease;
 
     .info-container {
-        margin-top: 80px;
+        margin-top: 50px;
         right: 20px;
         position: absolute;
         height: calc(100% - 100px);
@@ -138,9 +179,12 @@ $timelineDark: #77a1aa;
 
         .trackbox {
             top: 30px;
+            // TODO: where is this 30px coming from?
             height: calc(100% - 30px);
+            // height: 100%;
             width: 100%;
-            border: 2px solid black;
+            border-top: 2px solid black;
+            border-bottom: 2px solid black;
             overflow: hidden;
             background-color: white;
             position: absolute;
@@ -150,7 +194,7 @@ $timelineDark: #77a1aa;
     }
 
     .title-container {
-        margin-top: 110px;
+        margin-top: 80px;
         margin-left: 20px;
         height: calc(100% - 100px - 30px);
         width: 100px;
@@ -159,6 +203,7 @@ $timelineDark: #77a1aa;
         border-left: 2px solid black;
         border-top: 2px solid black;
         border-bottom: 2px solid black;
+        border-right: 2px solid $timelineDark;
 
         .datapane {
             top: 0px;
@@ -181,6 +226,7 @@ $timelineDark: #77a1aa;
         height: 20px;
         width: 40px;
         left: calc(50% - 25px);
+        color: $timelineDark;
     }
 }
 
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 37d93f6c1..e6201d431 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -3,7 +3,7 @@ import "./Timeline.scss";
 import { listSpec } from "../../../new_fields/Schema";
 import { observer } from "mobx-react";
 import { Track } from "./Track";
-import { observable, action, computed, runInAction } from "mobx";
+import { observable, action, computed, runInAction, IReactionDisposer, reaction } from "mobx";
 import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { Doc, DocListCast } from "../../../new_fields/Doc";
@@ -77,6 +77,11 @@ export class Timeline extends React.Component<FieldViewProps> {
     @observable private _doubleClickEnabled = false;
     @observable private _titleHeight = 0;
 
+    // so a reaction can be made
+    @observable public _isAuthoring = this.props.Document.isATOn;
+    @observable private _resizeReaction?: IReactionDisposer;
+    @observable private _panelWidth = 0;
+
     /**
      * collection get method. Basically defines what defines collection's children. These will be tracked in the timeline. Do not edit. 
      */
@@ -114,6 +119,19 @@ export class Timeline extends React.Component<FieldViewProps> {
             this.props.Document.isATOn = !this.props.Document.isATOn; //turns the boolean on, saying AT (animation timeline) is on
             this.toggleHandle();
         });
+
+        this._resizeReaction = reaction(
+            () => this.props.PanelWidth,
+            () => {
+                // if (!this.props.parent._isAuthoring) {
+                // runInAction(() => {
+                console.log("resizing");
+                // this.setOverviewWidth();
+                // });
+                // }
+            },
+        );
+
     }
 
     componentWillUnmount() {
@@ -402,19 +420,58 @@ export class Timeline extends React.Component<FieldViewProps> {
     private timelineToolBox = (scale: number) => {
         let size = 40 * scale; //50 is default
         let iconSize = 25;
+
+        //decides if information should be omitted because the timeline is very small
+        // if its less than 950 pixels then it's going to be overlapping
+        let shouldCompress = false;
+        let width: number = this.props.PanelWidth();
+        if (width < 850) {
+            shouldCompress = true;
+        }
+
+        let modeString, overviewString, lengthString;
+        let modeType = this.props.Document.isATOn ? "Author" : "Play";
+
+        if (!shouldCompress) {
+            modeString = "Mode: " + modeType;
+            overviewString = "Overview:";
+            lengthString = "Length: ";
+        }
+        else {
+            modeString = modeType;
+            overviewString = "";
+            lengthString = "";
+        }
+
+
+        // let modeType: string = this.props.Document.isATOn ? "Author" : "Play";
+        // let modeString: string = "Mode: " + modeType;
+        // let overviewString: string = "Overview:";
+        // let lengthString: string = "Length: ";
+
         return (
             <div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
-                <div className="timeline-icon" key="timeline_windBack" onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
-                <div className="timeline-icon" key=" timeline_play" onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
-                <div className="timeline-icon" key="timeline_windForward" onClick={this.windForward}> <FontAwesomeIcon icon={faForward} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
-                <div key="overview-text" className="animation-text">Timeline Overview</div>
-                <TimelineOverview isAuthoring={BoolCast(this.props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
-                <div key="animation-text" className="animation-text">Mode: {this.props.Document.isATOn ? "Authoring" : "Play"}</div>
-                <div key="round-toggle" ref={this._roundToggleContainerRef} className="round-toggle">
-                    <div key="round-toggle-slider" ref={this._roundToggleRef} className="round-toggle-slider" onPointerDown={this.toggleChecked}> </div>
+                <div className="playbackControls">
+                    <div className="timeline-icon" key="timeline_windBack" onClick={this.windBackward} title="Slow Down Animation"> <FontAwesomeIcon icon={faBackward} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
+                    <div className="timeline-icon" key=" timeline_play" onClick={this.onPlay} title="Play/Pause"> <FontAwesomeIcon icon={this._playButton} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
+                    <div className="timeline-icon" key="timeline_windForward" onClick={this.windForward} title="Speed Up Animation"> <FontAwesomeIcon icon={faForward} style={{ height: `${iconSize}px`, width: `${iconSize}px` }} /> </div>
+                </div>
+                <div className="grid-box overview-tool">
+                    <div className="overview-box">
+                        <div key="overview-text" className="animation-text">{overviewString}</div>
+                        <TimelineOverview parent={this} isAuthoring={BoolCast(this.props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
+                    </div>
+                    <div className="mode-box overview-tool">
+                        <div key="animation-text" className="animation-text">{modeString}</div>
+                        <div key="round-toggle" ref={this._roundToggleContainerRef} className="round-toggle">
+                            <div key="round-toggle-slider" ref={this._roundToggleRef} className="round-toggle-slider" onPointerDown={this.toggleChecked}> </div>
+                        </div>
+                    </div>
+                    <div className="time-box overview-tool" style={{ display: this._timelineVisible ? "flex" : "none" }}>
+                        <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden" }}>{lengthString}</div>
+                        <input className="time-input" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden" }} placeholder={String(Math.floor(this._time) / 1000) + " s"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} />
+                    </div>
                 </div>
-                <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden" }}>Length: </div>
-                <input className="time-input" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden" }} placeholder={String(this._time) + "ms"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} />
             </div>
         );
     }
@@ -457,13 +514,15 @@ export class Timeline extends React.Component<FieldViewProps> {
             roundToggleContainer.style.backgroundColor = "white";
             timelineContainer.style.top = `${-this._containerHeight}px`;
             this.props.Document.isATOn = false;
+            this._isAuthoring = false;
         } else {
-            roundToggle.style.transform = "translate(40px, 0px)";
+            roundToggle.style.transform = "translate(20px, 0px)";
             roundToggle.style.animationName = "turnon";
             roundToggleContainer.style.animationName = "turnon";
             roundToggleContainer.style.backgroundColor = "#9acedf";
             timelineContainer.style.top = "0px";
             this.props.Document.isATOn = true;
+            this._isAuthoring = true;
         }
     }
 
@@ -498,6 +557,11 @@ export class Timeline extends React.Component<FieldViewProps> {
      * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region)
      */
     render() {
+        console.log(this.props.PanelWidth());
+        runInAction(() => {
+            this._panelWidth = this.props.PanelWidth();
+            console.log("changing!!")
+        });
         return (
             <div>
                 <div style={{ visibility: this._timelineVisible ? "visible" : "hidden" }}>
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index 3517d3f39..a0b9d462b 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -1,23 +1,34 @@
 @import "./../globalCssVariables.scss";
 
 $timelineColor: #9acedf;
+$timelineDark: #77a1aa;
+
+.timelineOverview-bounding {
+    width: 100%;
+    margin-right: 10px;
+}
 
 .timeline-overview-container {
-    padding: 0px;
-    margin: 0px;
-    width: 300px;
-    height: 40px;
+    // padding: 0px;
+    margin-right: 5px;
+    // margin: 0px;
+    margin-left: 5px;
+    // width: 300px;
+    width: 100%;
+    height: 25px;
     background: white;
     position: relative;
-    border: 2px solid black;
+    border: 2px solid $timelineDark;
+    // width: 100%;
 
     .timeline-overview-visible {
         position: absolute;
-        height: 98%;
+        height: 21px;
         background: $timelineColor;
         display: inline-block;
         margin: 0px;
         padding: 0px;
+        // top: 1px;
     }
 
     .timeline-overview-scrubber-container {
@@ -38,9 +49,9 @@ $timelineColor: #9acedf;
             position: absolute;
             height: 10px;
             width: 10px;
-            background-color: black;
+            background-color: white;
             border-radius: 50%;
-            // border: 3px solid black;
+            border: 2px solid black;
             left: -4px;
             // top: -30px;
             top: -10px;
@@ -54,7 +65,7 @@ $timelineColor: #9acedf;
     position: relative;
     padding: 0px;
     margin: 0px;
-    width: 300px;
+    width: 100%;
     height: 4px;
     background-color: $timelineColor;
     border-radius: 20px;
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 4741969dc..4907a1ae1 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -1,101 +1,159 @@
-import * as React from "react"; 
-import {observable, action} from "mobx"; 
-import {observer} from "mobx-react";
-import "./TimelineOverview.scss"; 
+import * as React from "react";
+import { observable, action, computed, runInAction, reaction, IReactionDisposer } from "mobx";
+import { observer } from "mobx-react";
+import "./TimelineOverview.scss";
+import * as $ from 'jquery';
+import { Timeline } from "./Timeline";
 
 
-
-interface TimelineOverviewProps{
-    totalLength: number; 
-    visibleLength:number; 
-    visibleStart:number;
-    currentBarX:number;
-    isAuthoring: boolean;  
-    changeCurrentBarX: (pixel:number) => void; 
-    movePanX: (pixel:number) => any;
+interface TimelineOverviewProps {
+    totalLength: number;
+    visibleLength: number;
+    visibleStart: number;
+    currentBarX: number;
+    isAuthoring: boolean;
+    parent: Timeline;
+    changeCurrentBarX: (pixel: number) => void;
+    movePanX: (pixel: number) => any;
 }
 
 
 @observer
 export class TimelineOverview extends React.Component<TimelineOverviewProps>{
-    @observable private _visibleRef = React.createRef<HTMLDivElement>(); 
-    @observable private _scrubberRef = React.createRef<HTMLDivElement>(); 
-    private readonly DEFAULT_HEIGHT = 50; 
-    private readonly DEFAULT_WIDTH = 300; 
+    @observable private _visibleRef = React.createRef<HTMLDivElement>();
+    @observable private _scrubberRef = React.createRef<HTMLDivElement>();
+    @observable private overviewBarWidth: number = 0;
+    @observable private _authoringReaction?: IReactionDisposer;
+    @observable private _resizeReaction?: IReactionDisposer;
+    private readonly DEFAULT_HEIGHT = 50;
+    private readonly DEFAULT_WIDTH = 300;
+
+    componentDidMount = () => {
+        this.setOverviewWidth();
+
+        this._authoringReaction = reaction(
+            () => this.props.parent._isAuthoring,
+            () => {
+                if (!this.props.parent._isAuthoring) {
+                    runInAction(() => {
+                        this.setOverviewWidth();
+                    });
+                }
+            },
+        );
+        // this._resizeReaction = reaction(
+        //     () => this.props.parent.props.PanelWidth,
+        //     () => {
+        //         // if (!this.props.parent._isAuthoring) {
+        //         // runInAction(() => {
+        //         console.log("resizing");
+        //         this.setOverviewWidth();
+        //         // });
+        //         // }
+        //     },
+        // );
+    }
+
+    componentWillUnmount = () => {
+        this._authoringReaction && this._authoringReaction();
+        this._resizeReaction && this._resizeReaction();
+    }
 
     @action
-    onPointerDown = (e:React.PointerEvent) => {
-        e.stopPropagation(); 
-        e.preventDefault(); 
-        document.removeEventListener("pointermove", this.onPanX); 
-        document.removeEventListener("pointerup", this.onPointerUp); 
-        document.addEventListener("pointermove", this.onPanX); 
-        document.addEventListener("pointerup", this.onPointerUp); 
+    setOverviewWidth() {
+        let width = $("#timelineOverview").width();
+        if (width) this.overviewBarWidth = width;
+        else this.overviewBarWidth = 0;
+    }
+
+    @action
+    onPointerDown = (e: React.PointerEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        document.removeEventListener("pointermove", this.onPanX);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.addEventListener("pointermove", this.onPanX);
+        document.addEventListener("pointerup", this.onPointerUp);
     }
 
     @action
     onPanX = (e: PointerEvent) => {
-        e.stopPropagation(); 
-        e.preventDefault(); 
-        let movX = (this.props.visibleStart / this.props.totalLength)* (this.DEFAULT_WIDTH) + e.movementX; 
-        this.props.movePanX((movX / (this.DEFAULT_WIDTH )) * this.props.totalLength); 
+        e.stopPropagation();
+        e.preventDefault();
+        let movX = (this.props.visibleStart / this.props.totalLength) * (this.DEFAULT_WIDTH) + e.movementX;
+        // let movX = (this.props.visibleStart / this.props.totalLength) * (this.overviewWidth) + e.movementX;
+        this.props.movePanX((movX / (this.DEFAULT_WIDTH)) * this.props.totalLength);
+        // this.props.movePanX((movX / (this.overviewWidth) * this.props.totalLength);
+
+        // console.log(this.props.totalLength);
     }
 
     @action
     onPointerUp = (e: PointerEvent) => {
-        e.stopPropagation(); 
-        e.preventDefault(); 
-        document.removeEventListener("pointermove", this.onPanX); 
-        document.removeEventListener("pointerup", this.onPointerUp); 
+        e.stopPropagation();
+        e.preventDefault();
+        document.removeEventListener("pointermove", this.onPanX);
+        document.removeEventListener("pointerup", this.onPointerUp);
     }
 
     @action
-    onScrubberDown = ( e:React.PointerEvent) => {
-        e.preventDefault(); 
-        e.stopPropagation(); 
-        document.removeEventListener("pointermove", this.onScrubberMove); 
-        document.removeEventListener("pointerup", this.onScrubberUp); 
-        document.addEventListener("pointermove", this.onScrubberMove); 
+    onScrubberDown = (e: React.PointerEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.removeEventListener("pointermove", this.onScrubberMove);
+        document.removeEventListener("pointerup", this.onScrubberUp);
+        document.addEventListener("pointermove", this.onScrubberMove);
         document.addEventListener("pointerup", this.onScrubberUp);
     }
 
     @action
     onScrubberMove = (e: PointerEvent) => {
-        e.preventDefault(); 
-        e.stopPropagation(); 
-        let scrubberRef = this._scrubberRef.current!; 
-        let left = scrubberRef.getBoundingClientRect().left; 
-        let offsetX = Math.round(e.clientX - left); 
-        this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX); 
+        e.preventDefault();
+        e.stopPropagation();
+        let scrubberRef = this._scrubberRef.current!;
+        let left = scrubberRef.getBoundingClientRect().left;
+        let offsetX = Math.round(e.clientX - left);
+        this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX);
     }
 
     @action
-    onScrubberUp = (e:PointerEvent) => {
-        e.preventDefault(); 
-        e.stopPropagation(); 
-        document.removeEventListener("pointermove", this.onScrubberMove); 
+    onScrubberUp = (e: PointerEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.removeEventListener("pointermove", this.onScrubberMove);
         document.removeEventListener("pointerup", this.onScrubberUp);
     }
 
-    render(){
+    render() {
+        // calculates where everything should fall based on its size
+        let percentVisible = this.props.visibleLength / this.props.totalLength;
+        let visibleBarWidth = percentVisible * this.overviewBarWidth;
+
+        let percentScrubberStart = this.props.currentBarX / this.props.totalLength;
+        let scrubberStart = percentScrubberStart * this.overviewBarWidth;
+
+        let percentBarStart = this.props.visibleStart / this.props.totalLength;
+        let barStart = percentBarStart * this.overviewBarWidth;
+
         let timeline = this.props.isAuthoring ? [
-            <div key="timeline-overview-container" className="timeline-overview-container">
-                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{left:`${(Math.round(this.props.visibleStart) / Math.round(this.props.totalLength)) * 296}px`, width:`${(Math.round(this.props.visibleLength) / Math.round(this.props.totalLength)) * 296}px`}} onPointerDown={this.onPointerDown}></div>,
-                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{left:`${(this.props.currentBarX / this.props.totalLength) * 294}px`}} onPointerDown={this.onScrubberDown}>
+
+            <div key="timeline-overview-container" className="timeline-overview-container" id="timelineOverview">
+                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
+                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}>
                     <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
-                </div>            
+                </div>
             </div>
         ] : [
-            <div className="timeline-play-bar">
-                <div ref={this._scrubberRef} className="timeline-play-head" style={{left:`${(this.props.currentBarX / this.props.totalLength) * 294}px`}} onPointerDown={this.onScrubberDown}></div>
-            </div>,
-            <div className="timeline-play-tail" style={{width: `${(this.props.currentBarX / this.props.totalLength) * 294}px`}}></div>
-        ]; 
-        return(
-            <div>
+                <div className="timeline-play-bar">
+                    <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }} onPointerDown={this.onScrubberDown}></div>
+                </div>,
+                <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }}></div>
+            ];
+        return (
+            <div className="timelineOverview-bounding">
                 {timeline}
             </div>
-        ); 
+        );
     }
 
 }
-- 
cgit v1.2.3-70-g09d2


From 2320240229cd8e89e8f5abe917053caad7bf38c2 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Sat, 1 Feb 2020 13:50:32 -0500
Subject: overveiw resize

---
 src/client/views/animationtimeline/Timeline.tsx        | 18 ++++++++++++++++--
 .../views/animationtimeline/TimelineOverview.tsx       |  4 ++++
 2 files changed, 20 insertions(+), 2 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index e6201d431..8b943f209 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -449,6 +449,9 @@ export class Timeline extends React.Component<FieldViewProps> {
         // let overviewString: string = "Overview:";
         // let lengthString: string = "Length: ";
 
+        console.log("visible: " + this._visibleLength)
+        console.log("total: " + this._totalLength)
+
         return (
             <div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
                 <div className="playbackControls">
@@ -459,7 +462,7 @@ export class Timeline extends React.Component<FieldViewProps> {
                 <div className="grid-box overview-tool">
                     <div className="overview-box">
                         <div key="overview-text" className="animation-text">{overviewString}</div>
-                        <TimelineOverview parent={this} isAuthoring={BoolCast(this.props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
+                        <TimelineOverview panelWidth={this._panelWidth} parent={this} isAuthoring={BoolCast(this.props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
                     </div>
                     <div className="mode-box overview-tool">
                         <div key="animation-text" className="animation-text">{modeString}</div>
@@ -551,17 +554,28 @@ export class Timeline extends React.Component<FieldViewProps> {
 
     }
 
+    @action.bound
+    changeLenths() {
+        if (this._infoContainer.current) {
+            this._visibleLength = this._infoContainer.current!.getBoundingClientRect().width; //the visible length of the timeline (the length that you current see)
+            this._visibleStart = this._infoContainer.current!.scrollLeft; //where the div starts
+        }
+    }
+
 
     /**
      * if you have any question here, just shoot me an email or text. 
      * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region)
      */
     render() {
-        console.log(this.props.PanelWidth());
+        // console.log(this.props.PanelWidth());
         runInAction(() => {
             this._panelWidth = this.props.PanelWidth();
+            this.changeLenths();
             console.log("changing!!")
         });
+
+        // change visible and total width
         return (
             <div>
                 <div style={{ visibility: this._timelineVisible ? "visible" : "hidden" }}>
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 4907a1ae1..caa97bb70 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -15,6 +15,7 @@ interface TimelineOverviewProps {
     parent: Timeline;
     changeCurrentBarX: (pixel: number) => void;
     movePanX: (pixel: number) => any;
+    panelWidth: number;
 }
 
 
@@ -125,8 +126,11 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     }
 
     render() {
+
+        console.log("helo")
         // calculates where everything should fall based on its size
         let percentVisible = this.props.visibleLength / this.props.totalLength;
+        console.log(this.props.visibleLength)
         let visibleBarWidth = percentVisible * this.overviewBarWidth;
 
         let percentScrubberStart = this.props.currentBarX / this.props.totalLength;
-- 
cgit v1.2.3-70-g09d2


From 78810a40e22510eefe747c099e73fa3f2c4860a9 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Sat, 1 Feb 2020 15:03:15 -0500
Subject: ui changes cl.ose to done

---
 src/client/views/animationtimeline/Keyframe.scss   | 138 ++++++++++-----------
 src/client/views/animationtimeline/Keyframe.tsx    |  79 ++++++------
 src/client/views/animationtimeline/Timeline.scss   |  24 ++--
 src/client/views/animationtimeline/Timeline.tsx    |  24 +---
 .../views/animationtimeline/TimelineOverview.tsx   |  51 ++++----
 src/client/views/animationtimeline/Track.tsx       |   2 +-
 6 files changed, 153 insertions(+), 165 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Keyframe.scss b/src/client/views/animationtimeline/Keyframe.scss
index b1e8b0b65..8ff1c53f5 100644
--- a/src/client/views/animationtimeline/Keyframe.scss
+++ b/src/client/views/animationtimeline/Keyframe.scss
@@ -1,94 +1,94 @@
-@import "./../globalCssVariables.scss"; 
+@import "./../globalCssVariables.scss";
+
+
+$timelineColor: #9acedf;
+$timelineDark: #77a1aa;
 
 .bar {
     height: 100%;
     width: 5px;
     position: absolute;
-    
+
     // pointer-events: none; 
     .menubox {
-        width: 200px; 
-        height:200px;
+        width: 200px;
+        height: 200px;
         top: 50%;
-        position: relative; 
-        background-color: $light-color; 
-        .menutable{
-            tr:nth-child(odd){
-                background-color:$light-color-secondary;
+        position: relative;
+        background-color: $light-color;
+
+        .menutable {
+            tr:nth-child(odd) {
+                background-color: $light-color-secondary;
             }
         }
     }
 
-    .leftResize{
-        left:-12.5px; 
-        height:25px; 
-        width:25px; 
-        border-radius: 50%; 
-        background-color: white;
-        border:3px solid black;
-        top: calc(50% - 12.5px); 
-        z-index: 1000; 
-        position:absolute; 
+    .leftResize {
+        left: -10px;
+        border: 3px solid black;
+    }
+
+    .rightResize {
+        right: -10px;
+        border: 3px solid black;
     }
-    .rightResize{
-        right:-12.5px; 
-        height:25px; 
-        width:25px; 
-        border-radius: 50%; 
-        top:calc(50% - 12.5px); 
-        background-color:white; 
-        border:3px solid black;
-        z-index: 1000; 
-        position:absolute; 
+
+    .keyframe-indicator {
+        height: 20px;
+        width: 20px;
+        top: calc(50% - 10px);
+        background-color: white;
+        -ms-transform: rotate(45deg);
+        -webkit-transform: rotate(45deg);
+        transform: rotate(45deg);
+        z-index: 1000;
+        position: absolute;
     }
-    .fadeLeft{
-        left:0px; 
-        height:100%; 
-        position:absolute; 
-        pointer-events: none; 
-        background: linear-gradient(to left, #4d9900 10%,  $light-color);
+
+    .keyframeCircle {
+        left: -10px;
+        border: 3px solid $timelineDark;
     }
 
-    .fadeRight{
-        right:0px; 
-        height:100%; 
-        position:absolute; 
-        pointer-events: none; 
-        background: linear-gradient(to right, #4d9900 10%,  $light-color);
+    .fadeLeft {
+        left: 0px;
+        height: 100%;
+        position: absolute;
+        pointer-events: none;
+        background: linear-gradient(to left, $timelineColor 10%, $light-color);
     }
-    .divider{
-        height:100%; 
-        width: 1px; 
-        position: absolute; 
-        background-color:black; 
-        cursor: col-resize; 
-        pointer-events:none; 
+
+    .fadeRight {
+        right: 0px;
+        height: 100%;
+        position: absolute;
+        pointer-events: none;
+        background: linear-gradient(to right, $timelineColor 10%, $light-color);
     }
-    .keyframe{
-        height:100%; 
-        position:absolute;
+
+    .divider {
+        height: 100%;
+        width: 1px;
+        position: absolute;
+        background-color: black;
+        cursor: col-resize;
+        pointer-events: none;
     }
-    .keyframeCircle{        
-        left:-15px;         
-        height:30px; 
-        width:30px; 
-        border-radius: 50%; 
-        top:calc(50% - 15px); 
-        background-color:white; 
-        border:3px solid green;
-        z-index: 1000; 
-        position:absolute; 
+
+    .keyframe {
+        height: 100%;
+        position: absolute;
     }
 
-    .fadeIn-container, .fadeOut-container, .body-container{
-        position:absolute; 
-        height:100%; 
+    .fadeIn-container,
+    .fadeOut-container,
+    .body-container {
+        position: absolute;
+        height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
-        opacity: 0; 
+        opacity: 0;
     }
- 
-
-}
-    
 
 
+}
\ No newline at end of file
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 2f2639c76..9c486a6d6 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -93,11 +93,11 @@ export namespace KeyframeFunc {
         regiondata.fadeIn = 1000;
         regiondata.fadeOut = 1000;
         regiondata.functions = new List<Doc>();
-        regiondata.hasData = false; 
+        regiondata.hasData = false;
         return regiondata;
     };
 
-    export const makeKeyData = async (regiondata:RegionData, time: number, badNode:Doc, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time 
+    export const makeKeyData = async (regiondata: RegionData, time: number, badNode: Doc, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time 
         runInAction(async () => {
             let doclist = (await DocListCastAsync(regiondata.keyframes))!;
             let existingkf: (Doc | undefined) = undefined;
@@ -155,7 +155,7 @@ export const RegionDataSchema = createSchema({
     keyframes: listSpec(Doc),
     fadeIn: defaultSpec("number", 0),
     fadeOut: defaultSpec("number", 0),
-    functions: listSpec(Doc), 
+    functions: listSpec(Doc),
     hasData: defaultSpec("boolean", false)
 });
 export type RegionData = makeInterface<[typeof RegionDataSchema]>;
@@ -212,7 +212,7 @@ export class Keyframe extends React.Component<IProps> {
     @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); }
-   
+
     componentWillMount() {
         runInAction(async () => {
             if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();
@@ -228,7 +228,7 @@ export class Keyframe extends React.Component<IProps> {
         });
     }
 
-    
+
 
 
     @action
@@ -313,10 +313,10 @@ export class Keyframe extends React.Component<IProps> {
         } else if (NumCast(this.keyframes[1].time) + offset >= NumCast(this.keyframes[2].time)) {
             this.regiondata.position = NumCast(this.keyframes[2].time) - this.regiondata.fadeIn;
             this.regiondata.duration = NumCast(this.keyframes[this.keyframes.length - 1].time) - NumCast(this.keyframes[2].time) + this.regiondata.fadeIn;
-        } else if (NumCast(this.keyframes[0].time) + offset <= 0){
-            this.regiondata.position = 0; 
-            this.regiondata.duration = NumCast(this.keyframes[this.keyframes.length - 1].time); 
-        }else {
+        } else if (NumCast(this.keyframes[0].time) + offset <= 0) {
+            this.regiondata.position = 0;
+            this.regiondata.duration = NumCast(this.keyframes[this.keyframes.length - 1].time);
+        } else {
             this.regiondata.duration -= offset;
             this.regiondata.position += offset;
         }
@@ -353,9 +353,9 @@ export class Keyframe extends React.Component<IProps> {
         if (offset > this.regiondata.fadeIn && offset < this.regiondata.duration - this.regiondata.fadeOut) { //make sure keyframe is not created inbetween fades and ends
             let position = this.regiondata.position;
             await KeyframeFunc.makeKeyData(this.regiondata, Math.round(position + offset), this.props.node);
-            this.regiondata.hasData = true; 
+            this.regiondata.hasData = true;
             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
-        
+
         }
     }
 
@@ -386,15 +386,15 @@ export class Keyframe extends React.Component<IProps> {
             }),
             TimelineMenu.Instance.addItem("input", "Move", (val) => {
                 runInAction(() => {
-                        let cannotMove: boolean = false;
-                        let kfIndex: number = this.keyframes.indexOf(kf);
-                        if (val < 0 || (val < NumCast(this.keyframes[kfIndex - 1].time) || val > NumCast(this.keyframes[kfIndex + 1].time))) {
-                            cannotMove = true;
-                        }
-                        if (!cannotMove) {
-                            this.keyframes[kfIndex].time = parseInt(val, 10);
-                            this.keyframes[1].time = this.regiondata.position + this.regiondata.fadeIn;
-                        }
+                    let cannotMove: boolean = false;
+                    let kfIndex: number = this.keyframes.indexOf(kf);
+                    if (val < 0 || (val < NumCast(this.keyframes[kfIndex - 1].time) || val > NumCast(this.keyframes[kfIndex + 1].time))) {
+                        cannotMove = true;
+                    }
+                    if (!cannotMove) {
+                        this.keyframes[kfIndex].time = parseInt(val, 10);
+                        this.keyframes[1].time = this.regiondata.position + this.regiondata.fadeIn;
+                    }
                 });
             });
         TimelineMenu.Instance.addMenu("Keyframe");
@@ -406,22 +406,22 @@ export class Keyframe extends React.Component<IProps> {
      */
     @action
     makeRegionMenu = (kf: Doc, e: MouseEvent) => {
-            TimelineMenu.Instance.addItem("button", "Remove Region", () => {
-                runInAction(() => {
-                    this.regions.splice(this.regions.indexOf(this.props.RegionData), 1);
-                }
-                );
-            }),
+        TimelineMenu.Instance.addItem("button", "Remove Region", () => {
+            runInAction(() => {
+                this.regions.splice(this.regions.indexOf(this.props.RegionData), 1);
+            }
+            );
+        }),
             TimelineMenu.Instance.addItem("input", `fadeIn: ${this.regiondata.fadeIn}ms`, (val) => {
                 runInAction(() => {
-                        let cannotMove: boolean = false;
-                        if (val < 0 || val > NumCast(this.keyframes[2].time) - this.regiondata.position) {
-                            cannotMove = true;
-                        }
-                        if (!cannotMove) {
-                            this.regiondata.fadeIn = parseInt(val, 10);
-                            this.keyframes[1].time = this.regiondata.position + this.regiondata.fadeIn;
-                        }
+                    let cannotMove: boolean = false;
+                    if (val < 0 || val > NumCast(this.keyframes[2].time) - this.regiondata.position) {
+                        cannotMove = true;
+                    }
+                    if (!cannotMove) {
+                        this.regiondata.fadeIn = parseInt(val, 10);
+                        this.keyframes[1].time = this.regiondata.position + this.regiondata.fadeIn;
+                    }
                 });
             }),
             TimelineMenu.Instance.addItem("input", `fadeOut: ${this.regiondata.fadeOut}ms`, (val) => {
@@ -507,7 +507,7 @@ export class Keyframe extends React.Component<IProps> {
         div.style.opacity = "0";
         Doc.UnBrushDoc(this.props.node);
     }
-  
+
 
     ///////////////////////UI STUFF /////////////////////////
 
@@ -524,7 +524,7 @@ export class Keyframe extends React.Component<IProps> {
                 keyframeDivs.push(
                     <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) => { e.preventDefault(); e.stopPropagation(); this.moveKeyframe(e, kf); }} onContextMenu={(e: React.MouseEvent) => {
+                        <div className="keyframeCircle keyframe-indicator" onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); this.moveKeyframe(e, kf); }} onContextMenu={(e: React.MouseEvent) => {
                             e.preventDefault();
                             e.stopPropagation();
                             this.makeKeyframeMenu(kf, e.nativeEvent);
@@ -577,18 +577,19 @@ export class Keyframe extends React.Component<IProps> {
     /**
      * rendering that green region
      */
+    //154, 206, 223
     render() {
         return (
             <div>
                 <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 * 100}%, rgba(77, 153, 0, 1) ${(this.pixelDuration - this.pixelFadeOut) / this.pixelDuration * 100}%, rgba(77, 153, 0, 0) 100% )`
+                    background: `linear-gradient(90deg, rgba(154, 206, 223, 0) 0%, rgba(154, 206, 223, 1) ${this.pixelFadeIn / this.pixelDuration * 100}%, rgba(154, 206, 223, 1) ${(this.pixelDuration - this.pixelFadeOut) / this.pixelDuration * 100}%, rgba(154, 206, 223, 0) 100% )`
                 }}
                     onPointerDown={this.onBarPointerDown
                     }>
-                    <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
-                    <div className="rightResize" onPointerDown={this.onResizeRight}></div>
+                    <div className="leftResize keyframe-indicator" onPointerDown={this.onResizeLeft} ></div>
+                    <div className="rightResize keyframe-indicator" onPointerDown={this.onResizeRight}></div>
                     {this.drawKeyframes()}
                     {this.drawKeyframeDividers()}
                 </div>
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index a8dd9b9e7..40479559d 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -206,18 +206,18 @@ $timelineDark: #77a1aa;
         border-right: 2px solid $timelineDark;
 
         .datapane {
-            top: 0px;
-            width: 100px;
-            height: 30%;
-            border: 1px solid $dark-color;
-            background-color: $intermediate-color;
-            color: white;
-            position: relative;
-            float: left;
-            border-style: solid;
-            overflow-y: scroll;
-            overflow-x: hidden;
-        }
+    top: 0px;
+    width: 100px;
+    height: 30%;
+    border: 1px solid $dark-color;
+    background-color: $intermediate-color;
+    color: white;
+    position: relative;
+    float: left;
+    border-style: solid;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
     }
 
     .resize {
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 8b943f209..5ff721ebb 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -120,18 +120,6 @@ export class Timeline extends React.Component<FieldViewProps> {
             this.toggleHandle();
         });
 
-        this._resizeReaction = reaction(
-            () => this.props.PanelWidth,
-            () => {
-                // if (!this.props.parent._isAuthoring) {
-                // runInAction(() => {
-                console.log("resizing");
-                // this.setOverviewWidth();
-                // });
-                // }
-            },
-        );
-
     }
 
     componentWillUnmount() {
@@ -443,15 +431,6 @@ export class Timeline extends React.Component<FieldViewProps> {
             lengthString = "";
         }
 
-
-        // let modeType: string = this.props.Document.isATOn ? "Author" : "Play";
-        // let modeString: string = "Mode: " + modeType;
-        // let overviewString: string = "Overview:";
-        // let lengthString: string = "Length: ";
-
-        console.log("visible: " + this._visibleLength)
-        console.log("total: " + this._totalLength)
-
         return (
             <div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
                 <div className="playbackControls">
@@ -462,7 +441,7 @@ export class Timeline extends React.Component<FieldViewProps> {
                 <div className="grid-box overview-tool">
                     <div className="overview-box">
                         <div key="overview-text" className="animation-text">{overviewString}</div>
-                        <TimelineOverview panelWidth={this._panelWidth} parent={this} isAuthoring={BoolCast(this.props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
+                        <TimelineOverview tickSpacing={this._tickSpacing} tickIncrement={this._tickIncrement} time={this._time} parent={this} isAuthoring={BoolCast(this.props.Document.isATOn)} currentBarX={this._currentBarX} totalLength={this._totalLength} visibleLength={this._visibleLength} visibleStart={this._visibleStart} changeCurrentBarX={this.changeCurrentBarX} movePanX={this.movePanX} />
                     </div>
                     <div className="mode-box overview-tool">
                         <div key="animation-text" className="animation-text">{modeString}</div>
@@ -572,7 +551,6 @@ export class Timeline extends React.Component<FieldViewProps> {
         runInAction(() => {
             this._panelWidth = this.props.PanelWidth();
             this.changeLenths();
-            console.log("changing!!")
         });
 
         // change visible and total width
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index caa97bb70..9a881264f 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 import "./TimelineOverview.scss";
 import * as $ from 'jquery';
 import { Timeline } from "./Timeline";
+import { Keyframe, KeyframeFunc } from "./Keyframe";
 
 
 interface TimelineOverviewProps {
@@ -15,7 +16,9 @@ interface TimelineOverviewProps {
     parent: Timeline;
     changeCurrentBarX: (pixel: number) => void;
     movePanX: (pixel: number) => any;
-    panelWidth: number;
+    time: number;
+    tickSpacing: number;
+    tickIncrement: number;
 }
 
 
@@ -25,7 +28,9 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     @observable private _scrubberRef = React.createRef<HTMLDivElement>();
     @observable private overviewBarWidth: number = 0;
     @observable private _authoringReaction?: IReactionDisposer;
-    @observable private _resizeReaction?: IReactionDisposer;
+    @observable private visibleTime: number = 0;
+    @observable private currentX: number = 0;
+    @observable private visibleStart: number = 0;
     private readonly DEFAULT_HEIGHT = 50;
     private readonly DEFAULT_WIDTH = 300;
 
@@ -42,22 +47,10 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
                 }
             },
         );
-        // this._resizeReaction = reaction(
-        //     () => this.props.parent.props.PanelWidth,
-        //     () => {
-        //         // if (!this.props.parent._isAuthoring) {
-        //         // runInAction(() => {
-        //         console.log("resizing");
-        //         this.setOverviewWidth();
-        //         // });
-        //         // }
-        //     },
-        // );
     }
 
     componentWillUnmount = () => {
         this._authoringReaction && this._authoringReaction();
-        this._resizeReaction && this._resizeReaction();
     }
 
     @action
@@ -85,8 +78,6 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         // let movX = (this.props.visibleStart / this.props.totalLength) * (this.overviewWidth) + e.movementX;
         this.props.movePanX((movX / (this.DEFAULT_WIDTH)) * this.props.totalLength);
         // this.props.movePanX((movX / (this.overviewWidth) * this.props.totalLength);
-
-        // console.log(this.props.totalLength);
     }
 
     @action
@@ -125,18 +116,36 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         document.removeEventListener("pointerup", this.onScrubberUp);
     }
 
+    @action
+    getTimes() {
+        let vis = KeyframeFunc.convertPixelTime(this.props.visibleLength, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+        let x = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+        let start = KeyframeFunc.convertPixelTime(this.props.visibleStart, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+        this.visibleTime = vis;
+        this.currentX = x;
+        this.visibleStart = start;
+    }
+
     render() {
 
-        console.log("helo")
+        this.getTimes();
         // calculates where everything should fall based on its size
-        let percentVisible = this.props.visibleLength / this.props.totalLength;
-        console.log(this.props.visibleLength)
+        // let percentVisible = this.props.visibleLength / this.props.totalLength;
+        // let visibleBarWidth = percentVisible * this.overviewBarWidth;
+
+        // let percentScrubberStart = this.props.currentBarX / this.props.totalLength;
+        // let scrubberStart = percentScrubberStart * this.overviewBarWidth;
+
+        // let percentBarStart = this.props.visibleStart / this.props.totalLength;
+        // let barStart = percentBarStart * this.overviewBarWidth;
+
+        let percentVisible = this.visibleTime / this.props.time;
         let visibleBarWidth = percentVisible * this.overviewBarWidth;
 
-        let percentScrubberStart = this.props.currentBarX / this.props.totalLength;
+        let percentScrubberStart = this.currentX / this.props.time;
         let scrubberStart = percentScrubberStart * this.overviewBarWidth;
 
-        let percentBarStart = this.props.visibleStart / this.props.totalLength;
+        let percentBarStart = this.visibleStart / this.props.time;
         let barStart = percentBarStart * this.overviewBarWidth;
 
         let timeline = this.props.isAuthoring ? [
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 1ca8022a1..3ea34a2f3 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -66,7 +66,7 @@ export class Track extends React.Component<IProps> {
         runInAction(() => {
             if (!this.props.node.regions) this.props.node.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 
-            let relativeHeight = window.innerHeight / 14;
+            let relativeHeight = window.innerHeight / 20;
             this._trackHeight = relativeHeight < this.MAX_TITLE_HEIGHT ? relativeHeight : this.MAX_TITLE_HEIGHT; //for responsiveness
         });
     }
-- 
cgit v1.2.3-70-g09d2


From c12573ba5e45271493acf01ee7d63ce9387ac606 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Sat, 1 Feb 2020 16:23:51 -0500
Subject: lots of changes

---
 src/client/views/animationtimeline/Keyframe.tsx    |  95 ++++++++--------
 src/client/views/animationtimeline/Timeline.tsx    |   4 -
 .../views/animationtimeline/TimelineOverview.tsx   |   2 -
 src/client/views/animationtimeline/Track.tsx       | 120 +++++++--------------
 4 files changed, 79 insertions(+), 142 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 9f4d80d2b..4f6ba728d 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -20,15 +20,18 @@ import { undoBatch, UndoManager } from "../../util/UndoManager";
  * Useful static functions that you can use. Mostly for logic, but you can also add UI logic here also 
  */
 export namespace KeyframeFunc {
+
     export enum KeyframeType {
         end = "end",
         fade = "fade",
         default = "default",
     }
+
     export enum Direction {
         left = "left",
         right = "right"
     }
+
     export const findAdjacentRegion = (dir: KeyframeFunc.Direction, currentRegion: Doc, regions: List<Doc>): (RegionData | undefined) => {
         let leftMost: (RegionData | undefined) = undefined;
         let rightMost: (RegionData | undefined) = undefined;
@@ -97,41 +100,6 @@ export namespace KeyframeFunc {
         return regiondata;
     };
 
-    export const makeKeyData = async (regiondata:RegionData, time: number, badNode:Doc, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time 
-        runInAction(async () => {
-            console.log("ran"); 
-            let doclist = (await DocListCastAsync(regiondata.keyframes))!;
-            let existingkf: (Doc | undefined) = undefined;
-            doclist.forEach(TK => {
-                if (TK.time === time) existingkf = TK;
-            });
-            if (existingkf) return existingkf;
-            let TK: Doc = new Doc();
-            TK.time = time;
-            TK.key = Doc.MakeCopy(badNode, true);
-            TK.type = type;
-            regiondata.keyframes!.push(TK);
-            let interpolationFunctions = new Doc();
-            interpolationFunctions.interpolationX = new List<number>([0, 1]);
-            interpolationFunctions.interpolationY = new List<number>([0, 100]);
-            interpolationFunctions.pathX = new List<number>();
-            interpolationFunctions.pathY = new List<number>();
-            regiondata.functions!.push(interpolationFunctions);
-            let found: boolean = false;
-            regiondata.keyframes!.forEach(compkf => {
-                compkf = compkf as Doc;
-                if (time < NumCast(compkf.time) && !found) {
-                    runInAction(() => {
-                        regiondata.keyframes!.splice(doclist.indexOf(compkf as Doc), 0, TK);
-                        regiondata.keyframes!.pop();
-                        found = true;
-                    });
-                    return;
-                }
-            });
-            return TK;
-        });
-    };
 
     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;
@@ -202,7 +170,6 @@ interface IProps {
 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;
 
@@ -215,18 +182,15 @@ export class Keyframe extends React.Component<IProps> {
     @computed private get pixelFadeOut() { return KeyframeFunc.convertPixelTime(this.regiondata.fadeOut, "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement); }
    
     componentWillMount() {
-        runInAction(async () => {
-            if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();
-            let fadeIn = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, this.props.node, KeyframeFunc.KeyframeType.fade))! as any as Doc;
-            let fadeOut = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, this.props.node, KeyframeFunc.KeyframeType.fade))! as any as Doc;
-            let start = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position, this.props.node, KeyframeFunc.KeyframeType.end))! as any as Doc;
-            let finish = (await KeyframeFunc.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration, this.props.node, KeyframeFunc.KeyframeType.end))! as any as Doc;
-            (fadeIn.key! as Doc).opacity = 1;
-            (fadeOut.key! as Doc).opacity = 1;
-            (start.key! as Doc).opacity = 0.1;
-            (finish.key! as Doc).opacity = 0.1;
-            this.forceUpdate();
-        });
+        if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();        
+        let start = this.makeKeyData(this.regiondata, this.regiondata.position,  KeyframeFunc.KeyframeType.end);
+        let fadeIn = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade);
+        let fadeOut = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade);
+        let finish = this.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration,KeyframeFunc.KeyframeType.end);
+        (fadeIn.key as Doc).opacity = 1;
+        (fadeOut.key as Doc).opacity = 1;
+        (start.key as Doc).opacity = 0.1;
+        (finish.key as Doc).opacity = 0.1;
     }
 
     
@@ -253,7 +217,32 @@ export class Keyframe extends React.Component<IProps> {
             });
         }
     }
-
+    private makeKeyData = (regiondata:RegionData, time: number, type: KeyframeFunc.KeyframeType = KeyframeFunc.KeyframeType.default) => { //Kfpos is mouse offsetX, representing time 
+        let doclist =  DocListCast(regiondata.keyframes)!;
+        let existingkf: (Doc | undefined) = undefined;
+        doclist.forEach(TK => {
+            if (TK.time === time) existingkf = TK;
+        });
+        if (existingkf) return existingkf;
+        //else creates a new doc. 
+        let TK: Doc = new Doc();
+        TK.time = time;
+        TK.key = Doc.MakeCopy(this.props.node, true);
+        TK.type = type;
+        //assuming there are already keyframes (for keeping keyframes in order, sorted by time)
+        console.log("making..."); 
+        if (doclist.length === 0) regiondata.keyframes!.push(TK); 
+        doclist.forEach(kf => {
+            let index = doclist.indexOf(kf); 
+            let kfTime = NumCast(kf.time);
+                console.log(kfTime); 
+            if ((kfTime < time && index === doclist.length - 1) || (kfTime < time && time < NumCast(doclist[index + 1].time))){
+               regiondata.keyframes!.splice(index + 1, 0, TK);
+                return; 
+            }
+        });
+        return TK; 
+    }
 
     @action
     onBarPointerMove = (e: PointerEvent) => {
@@ -353,7 +342,7 @@ export class Keyframe extends React.Component<IProps> {
         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 = this.regiondata.position;
-            await KeyframeFunc.makeKeyData(this.regiondata, Math.round(position + offset), this.props.node);
+            this.makeKeyData(this.regiondata, Math.round(position + offset));
             this.regiondata.hasData = true; 
             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
         
@@ -552,12 +541,12 @@ export class Keyframe extends React.Component<IProps> {
         DocListCast(this.regiondata.keyframes).forEach(kf => {
             let index = this.keyframes.indexOf(kf);
             if (index !== this.keyframes.length - 1) {
-                let left = this.keyframes[this.keyframes.indexOf(kf) + 1];
+                let right = this.keyframes[index + 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);
+                let rightPos = KeyframeFunc.convertPixelTime(NumCast(right.time), "mili", "pixel", this.props.tickSpacing, this.props.tickIncrement);
                 keyframeDividers.push(
-                    <div ref={bodyRef} className="body-container" style={{ left: `${kfPos - this.pixelPosition}px`, width: `${leftPos - kfPos}px` }}
+                    <div ref={bodyRef} className="body-container" style={{ left: `${kfPos - this.pixelPosition}px`, width: `${rightPos - kfPos}px` }}
                         onPointerOver={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOver(e, bodyRef); }}
                         onPointerOut={(e) => { e.preventDefault(); e.stopPropagation(); this.onContainerOut(e, bodyRef); }}
                         onContextMenu={(e) => {
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 8b943f209..604827213 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -449,9 +449,6 @@ export class Timeline extends React.Component<FieldViewProps> {
         // let overviewString: string = "Overview:";
         // let lengthString: string = "Length: ";
 
-        console.log("visible: " + this._visibleLength)
-        console.log("total: " + this._totalLength)
-
         return (
             <div key="timeline_toolbox" className="timeline-toolbox" style={{ height: `${size}px` }}>
                 <div className="playbackControls">
@@ -572,7 +569,6 @@ export class Timeline extends React.Component<FieldViewProps> {
         runInAction(() => {
             this._panelWidth = this.props.PanelWidth();
             this.changeLenths();
-            console.log("changing!!")
         });
 
         // change visible and total width
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index caa97bb70..553ba890d 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -127,10 +127,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     render() {
 
-        console.log("helo")
         // calculates where everything should fall based on its size
         let percentVisible = this.props.visibleLength / this.props.totalLength;
-        console.log(this.props.visibleLength)
         let visibleBarWidth = percentVisible * this.overviewBarWidth;
 
         let percentScrubberStart = this.props.currentBarX / this.props.totalLength;
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index e5e7a364c..17466bd1a 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -10,6 +10,7 @@ import { Keyframe, KeyframeFunc, RegionData } from "./Keyframe";
 import { Transform } from "../../util/Transform";
 import { Copy } from "../../../new_fields/FieldSymbols";
 import { ObjectField } from "../../../new_fields/ObjectField";
+import { fromCallback } from "bluebird";
 
 interface IProps {
     node: Doc;
@@ -40,10 +41,12 @@ export class Track extends React.Component<IProps> {
         "y",
         "width",
         "height",
-        "data"
+        "data", 
+        "opacity"
     ];
+
     @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>; }
-    // @computed private get time() {}
+    @computed private get time() {return NumCast(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));}
 
     ////////// life cycle functions///////////////
     componentWillMount() {
@@ -59,7 +62,7 @@ export class Track extends React.Component<IProps> {
         runInAction(async () => {
             this._timelineVisibleReaction = this.timelineVisibleReaction();
             this._currentBarXReaction = this.currentBarXReaction();
-            if (this.regions.length === 0) this.createRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
+            if (this.regions.length === 0) this.createRegion(this.time);
             this.props.node.hidden = false;
             this.props.node.opacity = 1;
            // this.autoCreateKeyframe(); 
@@ -90,17 +93,17 @@ export class Track extends React.Component<IProps> {
         if (!kf) return;
         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!, 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 
+            let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.time, kf); // lef keyframe, if it exists
+            let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.time, kf); //right keyframe, if it exists 
             if (leftkf!.type === KeyframeFunc.KeyframeType.fade) { //replicating this keyframe to fades
-                let edge: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), leftkf!);
+                let edge: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.time, 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!, KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement), rightkf!);
+                let edge: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.time, 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;
@@ -124,14 +127,12 @@ export class Track extends React.Component<IProps> {
             return this.whitelist.map(key => node[key]);
         }, (changed, reaction) => {
             console.log(changed); 
-            //convert scrubber pos(pixel) to time
-            let time = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
             //check for region 
-            this.findRegion(time).then((region) => {
+            this.findRegion(this.time).then((region) => {
                 if (region !== undefined){ //if region at scrub time exist
                     let r = region as any as RegionData; //for some region is returning undefined... which is not the case
-                    if (DocListCast(r.keyframes).find(kf => kf.time === time) === undefined ){ //basically when there is no additional keyframe at that timespot 
-                        KeyframeFunc.makeKeyData(r, time, this.props.node, KeyframeFunc.KeyframeType.default); 
+                    if (DocListCast(r.keyframes).find(kf => kf.time === this.time) === undefined ){ //basically when there is no additional keyframe at that timespot 
+                        KeyframeFunc.makeKeyData(r, this.time, this.props.node, KeyframeFunc.KeyframeType.default); 
                     } 
                 }
                 // reaction.dispose(); 
@@ -158,10 +159,10 @@ export class Track extends React.Component<IProps> {
     @action
     currentBarXReaction = () => {
         return reaction(() => this.props.currentBarX, async () => {
-            let regiondata: (Doc | undefined) = await this.findRegion(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
+            let regiondata: (Doc | undefined) = await this.findRegion(this.time);
             if (regiondata) {
                 this.props.node.hidden = false;
-                await this.timeChange(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement));
+                await this.timeChange();
             } else {
                 this.props.node.hidden = true;
                 this.props.node.opacity = 0;
@@ -198,14 +199,14 @@ export class Track extends React.Component<IProps> {
      * when scrubber position changes. Need to edit the logic
      */
     @action
-    timeChange = async (time: number) => {
+    timeChange = async () => {
         if (this._isOnKeyframe && this._onKeyframe && this._onRegionData) {
             await this.saveKeyframe(this._onKeyframe, this._onRegionData);
         }
-        let regiondata = await this.findRegion(Math.round(time)); //finds a region that the scrubber is on
+        let regiondata = await this.findRegion(Math.round(this.time)); //finds a region that the scrubber is on
         if (regiondata) {
-            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 leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata, this.time); // lef keyframe, if it exists
+            let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, this.time); //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);
@@ -213,7 +214,7 @@ export class Track extends React.Component<IProps> {
                 this._onKeyframe = currentkf;
                 this._onRegionData = regiondata;
             } else if (leftkf && rightkf) {
-                await this.interpolate(leftkf, rightkf, regiondata);
+                await this.interpolate(leftkf, rightkf);
             }
         }
     }
@@ -225,17 +226,12 @@ export class Track extends React.Component<IProps> {
     @action
     private applyKeys = async (kf: Doc) => {
         let kfNode = await Cast(kf.key, Doc) as Doc;
-        let docFromApply = kfNode;
         this.whitelist.forEach(key => {
             if (!kfNode[key]) {
                 this.props.node[key] = undefined;
             } else {
                 let stored = kfNode[key];
-                if (stored instanceof ObjectField) {
-                    this.props.node[key] = stored[Copy]();
-                } else {
-                    this.props.node[key] = stored;
-                }
+                this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; 
             }
         });
     }
@@ -245,77 +241,35 @@ export class Track extends React.Component<IProps> {
      *  calculating current keyframe, if the scrubber is right on the keyframe
      */
     @action
-    calcCurrent = async (region: Doc) => {
+    calcCurrent = (region: Doc) => {
         let currentkf: (Doc | undefined) = undefined;
-        let keyframes = await DocListCastAsync(region.keyframes!);
-        keyframes!.forEach((kf) => {
-            if (NumCast(kf.time) === Math.round(KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement))) currentkf = kf;
+        let keyframes = DocListCast(region.keyframes!);
+        keyframes.forEach((kf) => {
+            if (NumCast(kf.time) === Math.round(this.time)) currentkf = kf;
         });
         return currentkf;
     }
 
 
     /**
-     * interpolation. definetely needs to be changed. (currently involves custom linear splicing interpolations). 
-     * Too complex right now. Also need to apply quadratic spline later on (for smoothness, instead applying "gains")
+     * basic linear interpolation function 
      */
     @action
-    interpolate = async (left: Doc, right: Doc, regiondata: Doc) => {
-        let leftNode = left.key as Doc;
-        let rightNode = right.key as Doc;
-        // const dif_time = NumCast(right.time) - NumCast(left.time);
-        // 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>)!;
-        // let realIndex = (interY.length - 1) * timeratio;
-        // let xIndex = Math.floor(realIndex);
-        // let yValue = interY[xIndex];
-        // let secondYOffset: number = yValue;
-        // let minY = interY[0];  // for now
-        // let maxY = interY[interY.length - 1]; //for now 
-        // if (interY.length !== 1) {
-        //     secondYOffset = interY[xIndex] + ((realIndex - xIndex) / 1) * (interY[xIndex + 1] - interY[xIndex]) - minY;
-        // }
-        // let finalRatio = secondYOffset / (maxY - minY);
-        // let pathX: List<number> = await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).pathX as List<number>;
-        // let pathY: List<number> = await ((regiondata.functions as List<Doc>)[indexLeft] as Doc).pathY as List<number>;
-        // let proposedX = 0;
-        // let proposedY = 0;
-        // if (pathX.length !== 0) {
-        //     let realPathCorrespondingIndex = finalRatio * (pathX.length - 1);
-        //     let pathCorrespondingIndex = Math.floor(realPathCorrespondingIndex);
-        //     if (pathCorrespondingIndex >= pathX.length - 1) {
-        //         proposedX = pathX[pathX.length - 1];
-        //         proposedY = pathY[pathY.length - 1];
-        //     } else if (pathCorrespondingIndex < 0) {
-        //         proposedX = pathX[0];
-        //         proposedY = pathY[0];
-        //     } else {
-        //         proposedX = pathX[pathCorrespondingIndex] + ((realPathCorrespondingIndex - pathCorrespondingIndex) / 1) * (pathX[pathCorrespondingIndex + 1] - pathX[pathCorrespondingIndex]);
-        //         proposedY = pathY[pathCorrespondingIndex] + ((realPathCorrespondingIndex - pathCorrespondingIndex) / 1) * (pathY[pathCorrespondingIndex + 1] - pathY[pathCorrespondingIndex]);
-        //     }
-
-        // }
+    interpolate = async (left: Doc, right: Doc) => {
+        let leftNode = await(left.key) as Doc;
+        let rightNode = await(right.key) as Doc;
         this.whitelist.forEach(key => {
+            console.log(key); 
+            console.log(leftNode[key]); 
+            console.log(rightNode[key]); 
             if (leftNode[key] && rightNode[key] && typeof (leftNode[key]) === "number" && typeof (rightNode[key]) === "number") { //if it is number, interpolate
-                // if ((key === "x" || key === "y") && pathX.length !== 0) {
-                //     if (key === "x") this.props.node[key] = proposedX;
-                //     if (key === "y") this.props.node[key] = proposedY;
-                // } else {
-                //     const diff = NumCast(rightNode[key]) - NumCast(leftNode[key]);
-                //     const adjusted = diff * finalRatio;
-                //     this.props.node[key] = NumCast(leftNode[key]) + adjusted;
-                // }
                 let dif = NumCast(rightNode[key]) - NumCast(leftNode[key]); 
-                
-            } else {
+                let deltaLeft = this.time - NumCast(left.time);
+                let ratio = deltaLeft / (NumCast(right.time) - NumCast(left.time)); 
+                this.props.node[key] = NumCast(leftNode[key]) + (dif * ratio); 
+            } else { // case data 
                 let stored = leftNode[key];
-                if (stored instanceof ObjectField) {
-                    this.props.node[key] = stored[Copy]();
-                } else {
-                    this.props.node[key] = stored;
-                }
+                this.props.node[key] = stored instanceof ObjectField ? stored[Copy]() : stored; 
             }
         });
     }
-- 
cgit v1.2.3-70-g09d2


From 9e4d644c5977c781b4822ba065cec6e92977de10 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Wed, 5 Feb 2020 10:16:42 -0500
Subject: about to pull

---
 src/client/views/animationtimeline/Timeline.scss   | 28 ++++++++++++++++++++--
 src/client/views/animationtimeline/Timeline.tsx    | 21 +++++++++++++---
 .../views/animationtimeline/TimelineOverview.scss  |  9 ++++++-
 .../views/animationtimeline/TimelineOverview.tsx   | 19 +++++++--------
 4 files changed, 61 insertions(+), 16 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index dbdade03f..ce8c845df 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -43,6 +43,8 @@ $timelineDark: #77a1aa;
         .time-box {
             margin-left: 5px;
             display: flex;
+            justify-content: center;
+            align-items: center;
         }
 
         .mode-box {
@@ -61,6 +63,12 @@ $timelineDark: #77a1aa;
         }
     }
 
+    .overview-tool {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
     .animation-text {
         // font-size: 16px;
         height: auto;
@@ -179,13 +187,14 @@ $timelineDark: #77a1aa;
 
         .trackbox {
             top: 30px;
-            // TODO: where is this 30px coming from?
             height: calc(100% - 30px);
             // height: 100%;
+            // height: 100%;
             width: 100%;
             border-top: 2px solid black;
             border-bottom: 2px solid black;
             overflow: hidden;
+            // overflow-y: scroll;
             background-color: white;
             position: absolute;
             // box-shadow: -10px 0px 10px 10px red;
@@ -193,10 +202,25 @@ $timelineDark: #77a1aa;
 
     }
 
+    .currentTime {
+        // background: red;
+        font-size: 12px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        top: 40px;
+        position: relative;
+        width: 100px;
+        margin-left: 20px;
+    }
+
     .title-container {
-        margin-top: 80px;
+        // margin-top: 80px;
+        margin-top: 40px;
         margin-left: 20px;
         height: calc(100% - 100px - 30px);
+        // height: 100%;
         width: 100px;
         background-color: white;
         overflow: hidden;
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index f0ca1c0ab..ae2dfafc9 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -312,6 +312,7 @@ export class Timeline extends React.Component<FieldViewProps> {
         e.preventDefault();
         e.stopPropagation();
         let offset = e.clientY - this._timelineContainer.current!.getBoundingClientRect().bottom;
+        // let offset = 0;
         if (this._containerHeight + offset <= this.MIN_CONTAINER_HEIGHT) {
             this._containerHeight = this.MIN_CONTAINER_HEIGHT;
         } else if (this._containerHeight + offset >= this.MAX_CONTAINER_HEIGHT) {
@@ -326,7 +327,10 @@ export class Timeline extends React.Component<FieldViewProps> {
      */
     @action
     toReadTime = (time: number): string => {
-        const inSeconds = time / 1000;
+        time = time / 1000;
+        var inSeconds = Math.round((time * 100)) / 100;
+        // var inSeconds = parseFloat(time.toFixed(2));
+        // const inSeconds = (Math.floor(time) / 1000);
         let min: (string | number) = Math.floor(inSeconds / 60);
         let sec: (string | number) = inSeconds % 60;
 
@@ -451,7 +455,8 @@ export class Timeline extends React.Component<FieldViewProps> {
                     </div>
                     <div className="time-box overview-tool" style={{ display: this._timelineVisible ? "flex" : "none" }}>
                         <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden" }}>{lengthString}</div>
-                        <input className="time-input" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden" }} placeholder={String(Math.floor(this._time) / 1000) + " s"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} />
+                        <input className="time-input" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: !this.props.Document.isATOn ? "flex" : "none" }} placeholder={String(Math.floor(this._time) / 1000) + " s"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} />
+                        <div style={{ width: "100%", backgroundColor: "red", display: !this.props.Document.isATOn ? "flex" : "none" }}>Hello there</div>
                     </div>
                 </div>
             </div>
@@ -541,13 +546,22 @@ export class Timeline extends React.Component<FieldViewProps> {
         }
     }
 
+    // @computed
+    getCurrentTime = () => {
+        let current = KeyframeFunc.convertPixelTime(this._currentBarX, "mili", "time", this._tickSpacing, this._tickIncrement);
+        // console.log(this._currentBarX)
+        return this.toReadTime(current); ``
+        // return (Math.floor(current) / 1000)
+        // return current / 1000.0;
+    }
+
 
     /**
      * if you have any question here, just shoot me an email or text. 
      * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region)
      */
     render() {
-        // console.log(this.props.PanelWidth());
+        console.log(this.props.Document.isATOn);
         runInAction(() => {
             this._panelWidth = this.props.PanelWidth();
             this.changeLenths();
@@ -568,6 +582,7 @@ export class Timeline extends React.Component<FieldViewProps> {
                                     {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} timelineVisible={this._timelineVisible} check={this._check} />)}
                                 </div>
                             </div>
+                            <div className="currentTime">Current: {this.getCurrentTime()}</div>
                             <div key="timeline_title" className="title-container" ref={this._titleContainer}>
                                 {DocListCast(this.children).map(doc => <div style={{ height: `${(this._titleHeight)}px` }} className="datapane" onPointerOver={() => { Doc.BrushDoc(doc); }} onPointerOut={() => { Doc.UnBrushDoc(doc); }}><p>{doc.title}</p></div>)}
                             </div>
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index a0b9d462b..283163ea7 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -8,6 +8,13 @@ $timelineDark: #77a1aa;
     margin-right: 10px;
 }
 
+.timeline-flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
 .timeline-overview-container {
     // padding: 0px;
     margin-right: 5px;
@@ -93,7 +100,7 @@ $timelineDark: #77a1aa;
     height: 4px;
     width: 0px;
     z-index: 1000;
-    background-color: $timelineColor;
+    background-color: $timelineDark;
     border-radius: 20px;
     margin-top: -4px;
     cursor: pointer;
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 9a881264f..65fd8ff62 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -56,8 +56,11 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     @action
     setOverviewWidth() {
         let width = $("#timelineOverview").width();
+        // console.log($("timelineOverview"))
         if (width) this.overviewBarWidth = width;
         else this.overviewBarWidth = 0;
+
+        // console.log(this.overviewBarWidth)
     }
 
     @action
@@ -124,20 +127,14 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         this.visibleTime = vis;
         this.currentX = x;
         this.visibleStart = start;
+        // console.log("getting times")
+        // console.log(x)
+        // console.log(start)
     }
 
     render() {
-
+        this.setOverviewWidth();
         this.getTimes();
-        // calculates where everything should fall based on its size
-        // let percentVisible = this.props.visibleLength / this.props.totalLength;
-        // let visibleBarWidth = percentVisible * this.overviewBarWidth;
-
-        // let percentScrubberStart = this.props.currentBarX / this.props.totalLength;
-        // let scrubberStart = percentScrubberStart * this.overviewBarWidth;
-
-        // let percentBarStart = this.props.visibleStart / this.props.totalLength;
-        // let barStart = percentBarStart * this.overviewBarWidth;
 
         let percentVisible = this.visibleTime / this.props.time;
         let visibleBarWidth = percentVisible * this.overviewBarWidth;
@@ -163,9 +160,11 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
                 <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }}></div>
             ];
         return (
+            <div className = "timeline-flex">
             <div className="timelineOverview-bounding">
                 {timeline}
             </div>
+            </div>
         );
     }
 
-- 
cgit v1.2.3-70-g09d2


From e310c0fdcef6ac71ee492470d4ac689cbb094167 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Sat, 8 Feb 2020 12:54:07 -0500
Subject: small changes

---
 src/client/views/animationtimeline/Timeline.tsx          | 15 +++++++--------
 src/client/views/animationtimeline/TimelineOverview.scss |  2 +-
 src/client/views/animationtimeline/TimelineOverview.tsx  |  8 ++++++--
 3 files changed, 14 insertions(+), 11 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index f74d4c71e..5d5e78652 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -453,7 +453,7 @@ export class Timeline extends React.Component<FieldViewProps> {
                     </div>
                     <div className="time-box overview-tool" style={{ display: this._timelineVisible ? "flex" : "none" }}>
                         <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: this.props.Document.isATOn ? "flex" : "none" }}>{lengthString}</div>
-                        <input className="time-input" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: this.props.Document.isATOn ? "flex" : "none" }} placeholder={String(Math.floor(this._time) / 1000) + " s"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} />
+                        <input className="time-input" disabled style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: this.props.Document.isATOn ? "flex" : "none" }} placeholder={String(Math.floor(this._time) / 1000) + " s"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} />
                         <div style={{ width: "100%", display: !this.props.Document.isATOn ? "flex" : "none" }}>Current: {this.getCurrentTime()}</div>
                     </div>
                 </div>
@@ -466,12 +466,12 @@ export class Timeline extends React.Component<FieldViewProps> {
      */
     @action
     private onTimeInput = (e: React.KeyboardEvent) => {
-        if (e.keyCode === 13) {
-            let timeInput = this._timeInputRef.current!;
-            this._time = parseInt(timeInput.value, 10);
-            this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement);
-            this.props.Document.AnimationLength = this._time;
-        }
+        // if (e.keyCode === 13) {
+        //     let timeInput = this._timeInputRef.current!;
+        //     this._time = parseInt(timeInput.value, 10);
+        //     this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement);
+        //     this.props.Document.AnimationLength = this._time;
+        // }
     }
 
 
@@ -535,7 +535,6 @@ export class Timeline extends React.Component<FieldViewProps> {
      * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region)
      */
     render() {
-        console.log(this.props.Document.isATOn);
         runInAction(() => {
             this._panelWidth = this.props.PanelWidth();
             this.changeLenths();
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index 283163ea7..b54399307 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -72,7 +72,7 @@ $timelineDark: #77a1aa;
     position: relative;
     padding: 0px;
     margin: 0px;
-    width: 100%;
+    // width: 100%;
     height: 4px;
     background-color: $timelineColor;
     border-radius: 20px;
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 7ff78955e..5d6378068 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -58,7 +58,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         let width = $("#timelineOverview").width();
         // console.log($("timelineOverview"))
         if (width) this.overviewBarWidth = width;
-        else this.overviewBarWidth = 0;
+        // else this.overviewBarWidth = 0;
 
         // console.log(this.overviewBarWidth)
     }
@@ -95,10 +95,12 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     onScrubberDown = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
+        if (!this.props.isAuthoring) {
         document.removeEventListener("pointermove", this.onScrubberMove);
         document.removeEventListener("pointerup", this.onScrubberUp);
         document.addEventListener("pointermove", this.onScrubberMove);
         document.addEventListener("pointerup", this.onScrubberUp);
+        }
     }
 
     @action
@@ -107,8 +109,10 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         e.stopPropagation();
         let scrubberRef = this._scrubberRef.current!;
         let left = scrubberRef.getBoundingClientRect().left;
+        // left = e.screenX;
         let offsetX = Math.round(e.clientX - left);
         this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX);
+        // this.props.changeCurrentBarX(e.screenX)
     }
 
     @action
@@ -154,7 +158,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
                 </div>
             </div>
         ] : [
-                <div className="timeline-play-bar">
+                <div className="timeline-play-bar" style={{ width: this.overviewBarWidth }}>
                     <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }} onPointerDown={this.onScrubberDown}></div>
                 </div>,
                 <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }}></div>
-- 
cgit v1.2.3-70-g09d2


From 92068acedc3d6f5bed25dc1a0dacbe19d0338829 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Sun, 9 Feb 2020 14:06:54 -0500
Subject: reformatted

---
 package-lock.json                                  |  8 ++++-
 package.json                                       |  2 +-
 src/client/views/animationtimeline/Timeline.tsx    |  2 +-
 .../views/animationtimeline/TimelineOverview.scss  |  2 +-
 .../views/animationtimeline/TimelineOverview.tsx   | 35 +++++++++++-----------
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 33 ++++++++++----------
 6 files changed, 46 insertions(+), 36 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/package-lock.json b/package-lock.json
index 379cd3337..1f87e1493 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14244,7 +14244,8 @@
                 "fsevents": {
                     "version": "2.1.2",
                     "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
-                    "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA=="
+                    "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
+                    "optional": true
                 },
                 "get-caller-file": {
                     "version": "2.0.5",
@@ -16134,6 +16135,11 @@
                 "setimmediate": "^1.0.4"
             }
         },
+        "tiny-timer": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/tiny-timer/-/tiny-timer-1.4.0.tgz",
+            "integrity": "sha512-NZCayn+Y2OaDaBtVQmx8Lx/SggG9qGGINYoPNmXpqvj8ue7E24H9ZgI+02I9BZSMWCW8keOXsw2R3hSzk7aALQ=="
+        },
         "tinycolor2": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
diff --git a/package.json b/package.json
index b6beb5a3a..155026d2c 100644
--- a/package.json
+++ b/package.json
@@ -237,4 +237,4 @@
         "xoauth2": "^1.2.0",
         "youtube": "^0.1.0"
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 5d5e78652..2ac7e6c92 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -343,7 +343,7 @@ export class Timeline extends React.Component<FieldViewProps> {
      * context menu function. 
      * opens the timeline or closes the timeline. 
      */
-    timelineContextMenu = (e: MouseEvent): void => {
+    timelineContextMenu = (e: React.MouseEvent): void => {
         ContextMenu.Instance.addItem({
             description: (this._timelineVisible ? "Close" : "Open") + " Animation Timeline", event: action(() => {
                 this._timelineVisible = !this._timelineVisible;
diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index b54399307..283163ea7 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -72,7 +72,7 @@ $timelineDark: #77a1aa;
     position: relative;
     padding: 0px;
     margin: 0px;
-    // width: 100%;
+    width: 100%;
     height: 4px;
     background-color: $timelineColor;
     border-radius: 20px;
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 5d6378068..6358982c4 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -55,7 +55,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     @action
     setOverviewWidth() {
-        let width = $("#timelineOverview").width();
+        const width = $("#timelineOverview").width();
         // console.log($("timelineOverview"))
         if (width) this.overviewBarWidth = width;
         // else this.overviewBarWidth = 0;
@@ -77,7 +77,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     onPanX = (e: PointerEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        let movX = (this.props.visibleStart / this.props.totalLength) * (this.DEFAULT_WIDTH) + e.movementX;
+        const movX = (this.props.visibleStart / this.props.totalLength) * (this.DEFAULT_WIDTH) + e.movementX;
         // let movX = (this.props.visibleStart / this.props.totalLength) * (this.overviewWidth) + e.movementX;
         this.props.movePanX((movX / (this.DEFAULT_WIDTH)) * this.props.totalLength);
         // this.props.movePanX((movX / (this.overviewWidth) * this.props.totalLength);
@@ -95,22 +95,22 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     onScrubberDown = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        if (!this.props.isAuthoring) {
+        // if (!this.props.isAuthoring) {
         document.removeEventListener("pointermove", this.onScrubberMove);
         document.removeEventListener("pointerup", this.onScrubberUp);
         document.addEventListener("pointermove", this.onScrubberMove);
         document.addEventListener("pointerup", this.onScrubberUp);
-        }
+        // }
     }
 
     @action
     onScrubberMove = (e: PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        let scrubberRef = this._scrubberRef.current!;
-        let left = scrubberRef.getBoundingClientRect().left;
+        const scrubberRef = this._scrubberRef.current!;
+        const left = scrubberRef.getBoundingClientRect().left;
         // left = e.screenX;
-        let offsetX = Math.round(e.clientX - left);
+        const offsetX = Math.round(e.clientX - left);
         this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX);
         // this.props.changeCurrentBarX(e.screenX)
     }
@@ -125,9 +125,9 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     @action
     getTimes() {
-        let vis = KeyframeFunc.convertPixelTime(this.props.visibleLength, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
-        let x = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
-        let start = KeyframeFunc.convertPixelTime(this.props.visibleStart, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+        const vis = KeyframeFunc.convertPixelTime(this.props.visibleLength, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+        const x = KeyframeFunc.convertPixelTime(this.props.currentBarX, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
+        const start = KeyframeFunc.convertPixelTime(this.props.visibleStart, "mili", "time", this.props.tickSpacing, this.props.tickIncrement);
         this.visibleTime = vis;
         this.currentX = x;
         this.visibleStart = start;
@@ -137,19 +137,20 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     }
 
     render() {
+        console.log("RERENDERED!"); 
         this.setOverviewWidth();
         this.getTimes();
 
-        let percentVisible = this.visibleTime / this.props.time;
-        let visibleBarWidth = percentVisible * this.overviewBarWidth;
+        const percentVisible = this.visibleTime / this.props.time;
+        const visibleBarWidth = percentVisible * this.overviewBarWidth;
 
-        let percentScrubberStart = this.currentX / this.props.time;
-        let scrubberStart = percentScrubberStart * this.overviewBarWidth;
+        const percentScrubberStart = this.currentX / this.props.time;
+        const scrubberStart = percentScrubberStart * this.overviewBarWidth;
 
-        let percentBarStart = this.visibleStart / this.props.time;
-        let barStart = percentBarStart * this.overviewBarWidth;
+        const percentBarStart = this.visibleStart / this.props.time;
+        const barStart = percentBarStart * this.overviewBarWidth;
 
-        let timeline = this.props.isAuthoring ? [
+        const timeline = this.props.isAuthoring ? [
 
             <div key="timeline-overview-container" className="timeline-overview-container" id="timelineOverview">
                 <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index c61dcd21f..56b3b3bc0 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -966,7 +966,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
 
     onContextMenu = (e: React.MouseEvent) => {
         const layoutItems: ContextMenuProps[] = [];
-
         layoutItems.push({ description: "reset view", event: () => { this.props.Document._panX = this.props.Document._panY = 0; this.props.Document.scale = 1; }, icon: "compress-arrows-alt" });
         layoutItems.push({ description: `${this.Document._LODdisable ? "Enable LOD" : "Disable LOD"}`, event: () => this.Document._LODdisable = !this.Document._LODdisable, icon: "table" });
         layoutItems.push({ description: `${this.fitToContent ? "Unset" : "Set"} Fit To Container`, event: () => this.Document._fitToBox = !this.fitToContent, icon: !this.fitToContent ? "expand-arrows-alt" : "compress-arrows-alt" });
@@ -1019,6 +1018,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             icon: "eye"
         });
         ContextMenu.Instance.addItem({ description: "Freeform Options ...", subitems: layoutItems, icon: "eye" });
+        this._timelineRef.current!.timelineContextMenu(e); 
     }
 
 
@@ -1070,21 +1070,24 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         // if isAnnotationOverlay is set, then children will be stored in the extension document for the fieldKey.
         // otherwise, they are stored in fieldKey.  All annotations to this document are stored in the extension document
         // let lodarea = this.Document[WidthSym]() * this.Document[HeightSym]() / this.props.ScreenToLocalTransform().Scale / this.props.ScreenToLocalTransform().Scale;
-        return <div className={"collectionfreeformview-container"}
-            ref={this.createDashEventsTarget}
-            onWheel={this.onPointerWheel}//pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined,
-            onPointerDown={this.onPointerDown} onPointerMove={this.onCursorMove} onDrop={this.onDrop.bind(this)} onContextMenu={this.onContextMenu}
-            style={{
-                pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined,
-                transform: this.contentScaling ? `scale(${this.contentScaling})` : "",
-                transformOrigin: this.contentScaling ? "left top" : "",
-                width: this.contentScaling ? `${100 / this.contentScaling}%` : "",
-                height: this.contentScaling ? `${100 / this.contentScaling}%` : this.isAnnotationOverlay ? (this.props.Document.scrollHeight ? this.Document.scrollHeight : "100%") : this.props.PanelHeight()
-            }}>
-            {!this.Document._LODdisable && !this.props.active() && !this.props.isAnnotationOverlay && !this.props.annotationsKey && this.props.renderDepth > 0 ? // && this.props.CollectionView && lodarea < NumCast(this.Document.LODarea, 100000) ?
-                this.placeholder : this.marqueeView}
+        return <div>
+            <div className={"collectionfreeformview-container"}
+                ref={this.createDashEventsTarget}
+                onWheel={this.onPointerWheel}//pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined,
+                onPointerDown={this.onPointerDown} onPointerMove={this.onCursorMove} onDrop={this.onDrop.bind(this)} onContextMenu={this.onContextMenu}
+                style={{
+                    pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined,
+                    transform: this.contentScaling ? `scale(${this.contentScaling})` : "",
+                    transformOrigin: this.contentScaling ? "left top" : "",
+                    width: this.contentScaling ? `${100 / this.contentScaling}%` : "",
+                    height: this.contentScaling ? `${100 / this.contentScaling}%` : this.isAnnotationOverlay ? (this.props.Document.scrollHeight ? this.Document.scrollHeight : "100%") : this.props.PanelHeight()
+                }}>            
+                {/* <Timeline ref={this._timelineRef} {...this.props} /> */}
+                {!this.Document._LODdisable && !this.props.active() && !this.props.isAnnotationOverlay && !this.props.annotationsKey && this.props.renderDepth > 0 ? // && this.props.CollectionView && lodarea < NumCast(this.Document.LODarea, 100000) ?
+                    this.placeholder : this.marqueeView}
+                <CollectionFreeFormOverlayView elements={this.elementFunc} />
+            </div>            
             <Timeline ref={this._timelineRef} {...this.props} />
-            <CollectionFreeFormOverlayView elements={this.elementFunc} />
         </div>;
     }
 }
-- 
cgit v1.2.3-70-g09d2


From 4eb94980caad8fb98863e140189a9f77b67cf354 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Sun, 9 Feb 2020 14:46:05 -0500
Subject: fixed scrubber

---
 src/client/views/animationtimeline/Keyframe.tsx         | 2 +-
 src/client/views/animationtimeline/TimelineOverview.tsx | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index a2add3ae8..fd4a3f281 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -337,7 +337,7 @@ export class Keyframe extends React.Component<IProps> {
     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 });
+                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);
             });
         }),
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 6358982c4..4d1d1cf88 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -109,10 +109,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         e.stopPropagation();
         const scrubberRef = this._scrubberRef.current!;
         const left = scrubberRef.getBoundingClientRect().left;
-        // left = e.screenX;
         const offsetX = Math.round(e.clientX - left);
-        this.props.changeCurrentBarX((offsetX / (this.DEFAULT_WIDTH) * this.props.totalLength) + this.props.currentBarX);
-        // this.props.changeCurrentBarX(e.screenX)
+        this.props.changeCurrentBarX((((offsetX) / this.overviewBarWidth) * this.props.totalLength) + this.props.currentBarX);
     }
 
     @action
@@ -154,7 +152,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
             <div key="timeline-overview-container" className="timeline-overview-container" id="timelineOverview">
                 <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
-                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}>
+                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{left: `${(this.props.currentBarX / this.props.totalLength) * this.overviewBarWidth}px`}} onPointerDown={this.onScrubberDown}>
                     <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
                 </div>
             </div>
-- 
cgit v1.2.3-70-g09d2


From 7d2e05ca34d28d49d9272668091bfce7e6b47f22 Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Sun, 9 Feb 2020 14:51:26 -0500
Subject: fixed

---
 src/client/views/animationtimeline/TimelineOverview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 4d1d1cf88..66f6a9482 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -158,9 +158,9 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
             </div>
         ] : [
                 <div className="timeline-play-bar" style={{ width: this.overviewBarWidth }}>
-                    <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }} onPointerDown={this.onScrubberDown}></div>
+                    <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${(this.props.currentBarX / this.props.totalLength) * this.overviewBarWidth}px` }} onPointerDown={this.onScrubberDown}></div>
                 </div>,
-                <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * 294}px` }}></div>
+                <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * this.overviewBarWidth}px` }}></div>
             ];
         return (
             <div className="timeline-flex">
-- 
cgit v1.2.3-70-g09d2


From 79f70eebe0a29f8f3d759eff82dd3446ac3d5ed1 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Sun, 9 Feb 2020 16:14:04 -0500
Subject: done with ui bugs

---
 src/client/views/animationtimeline/Timeline.scss   |  3 ++
 src/client/views/animationtimeline/Timeline.tsx    | 11 +++---
 .../views/animationtimeline/TimelineOverview.tsx   | 45 +++++++++++-----------
 3 files changed, 30 insertions(+), 29 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index ce8c845df..a99d017f4 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -42,14 +42,17 @@ $timelineDark: #77a1aa;
 
         .time-box {
             margin-left: 5px;
+            min-width: 140px;
             display: flex;
             justify-content: center;
             align-items: center;
+            // grid-column-start: line2;
         }
 
         .mode-box {
             display: flex;
             margin-left: 5px;
+            // grid-column-start: line3;
         }
 
         .overview-box {
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index e0f70dd43..3c4c5c93f 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -458,7 +458,6 @@ export class Timeline extends React.Component<FieldViewProps> {
                     </div>
                     <div className="time-box overview-tool" style={{ display: this._timelineVisible ? "flex" : "none" }}>
                         {this.timeIndicator(lengthString)}
-                        {/* {rightInfo} */}
                     </div>
                 </div>
             </div>
@@ -470,13 +469,16 @@ export class Timeline extends React.Component<FieldViewProps> {
             return (
                 <>
                     <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: this.props.Document.isATOn ? "flex" : "none" }}>{lengthString}</div>
-                    <input className="time-input" disabled style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: this.props.Document.isATOn ? "flex" : "none" }} placeholder={String(Math.floor(this._time) / 1000) + " s"} ref={this._timeInputRef} onKeyDown={this.onTimeInput} />
+                    <div className="totalTime">1:40.07</div>
                 </>
             );
         }
         else {
             return (
-                <div style={{ width: "100%", display: !this.props.Document.isATOn ? "flex" : "none" }}>Current: {this.getCurrentTime()}</div>
+                <div style={{ flexDirection: "column" }}>
+                    <div className="animation-text" style={{ width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Current: ${this.getCurrentTime()}`}</div>
+                    <div className="animation-text" style={{ width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Total: 1:40.07`}</div>
+                </div>
             );
         }
     }
@@ -543,10 +545,7 @@ export class Timeline extends React.Component<FieldViewProps> {
     // @computed
     getCurrentTime = () => {
         const current = KeyframeFunc.convertPixelTime(this._currentBarX, "mili", "time", this._tickSpacing, this._tickIncrement);
-        // console.log(this._currentBarX)
         return this.toReadTime(current);
-        // return (Math.floor(current) / 1000)
-        // return current / 1000.0;
     }
 
 
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 66f6a9482..94bbe7074 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -27,6 +27,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     @observable private _visibleRef = React.createRef<HTMLDivElement>();
     @observable private _scrubberRef = React.createRef<HTMLDivElement>();
     @observable private overviewBarWidth: number = 0;
+    @observable private playbarWidth: number = 0;
+    @observable private activeOverviewWidth: number = 0;
     @observable private _authoringReaction?: IReactionDisposer;
     @observable private visibleTime: number = 0;
     @observable private currentX: number = 0;
@@ -55,12 +57,17 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     @action
     setOverviewWidth() {
-        const width = $("#timelineOverview").width();
-        // console.log($("timelineOverview"))
-        if (width) this.overviewBarWidth = width;
-        // else this.overviewBarWidth = 0;
-
-        // console.log(this.overviewBarWidth)
+        const width1 = $("#timelineOverview").width();
+        const width2 = $("#timelinePlay").width();
+        if (width1 && width1 !== 0) this.overviewBarWidth = width1;
+        if (width2 && width2 !== 0) this.playbarWidth = width2;
+
+        if (this.props.isAuthoring) {
+            this.activeOverviewWidth = this.overviewBarWidth;
+        }
+        else {
+            this.activeOverviewWidth = this.playbarWidth;
+        }
     }
 
     @action
@@ -78,9 +85,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         e.stopPropagation();
         e.preventDefault();
         const movX = (this.props.visibleStart / this.props.totalLength) * (this.DEFAULT_WIDTH) + e.movementX;
-        // let movX = (this.props.visibleStart / this.props.totalLength) * (this.overviewWidth) + e.movementX;
         this.props.movePanX((movX / (this.DEFAULT_WIDTH)) * this.props.totalLength);
-        // this.props.movePanX((movX / (this.overviewWidth) * this.props.totalLength);
     }
 
     @action
@@ -95,12 +100,10 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     onScrubberDown = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        // if (!this.props.isAuthoring) {
         document.removeEventListener("pointermove", this.onScrubberMove);
         document.removeEventListener("pointerup", this.onScrubberUp);
         document.addEventListener("pointermove", this.onScrubberMove);
         document.addEventListener("pointerup", this.onScrubberUp);
-        // }
     }
 
     @action
@@ -110,7 +113,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         const scrubberRef = this._scrubberRef.current!;
         const left = scrubberRef.getBoundingClientRect().left;
         const offsetX = Math.round(e.clientX - left);
-        this.props.changeCurrentBarX((((offsetX) / this.overviewBarWidth) * this.props.totalLength) + this.props.currentBarX);
+        this.props.changeCurrentBarX((((offsetX) / this.activeOverviewWidth) * this.props.totalLength) + this.props.currentBarX);
     }
 
     @action
@@ -129,38 +132,34 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         this.visibleTime = vis;
         this.currentX = x;
         this.visibleStart = start;
-        // console.log("getting times")
-        // console.log(x)
-        // console.log(start)
     }
 
     render() {
-        console.log("RERENDERED!"); 
         this.setOverviewWidth();
         this.getTimes();
 
         const percentVisible = this.visibleTime / this.props.time;
-        const visibleBarWidth = percentVisible * this.overviewBarWidth;
+        const visibleBarWidth = percentVisible * this.activeOverviewWidth;
 
         const percentScrubberStart = this.currentX / this.props.time;
-        const scrubberStart = percentScrubberStart * this.overviewBarWidth;
+        const scrubberStart = this.props.currentBarX / this.props.totalLength * this.activeOverviewWidth;
 
         const percentBarStart = this.visibleStart / this.props.time;
-        const barStart = percentBarStart * this.overviewBarWidth;
+        const barStart = percentBarStart * this.activeOverviewWidth;
 
         const timeline = this.props.isAuthoring ? [
 
-            <div key="timeline-overview-container" className="timeline-overview-container" id="timelineOverview">
+            <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview">
                 <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
-                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{left: `${(this.props.currentBarX / this.props.totalLength) * this.overviewBarWidth}px`}} onPointerDown={this.onScrubberDown}>
+                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}>
                     <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
                 </div>
             </div>
         ] : [
-                <div className="timeline-play-bar" style={{ width: this.overviewBarWidth }}>
-                    <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${(this.props.currentBarX / this.props.totalLength) * this.overviewBarWidth}px` }} onPointerDown={this.onScrubberDown}></div>
+                <div key="timeline-play-container" className="timeline-play-bar overviewBar" id="timelinePlay">
+                    <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}></div>
                 </div>,
-                <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * this.overviewBarWidth}px` }}></div>
+                <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * this.playbarWidth}px` }}></div>
             ];
         return (
             <div className="timeline-flex">
-- 
cgit v1.2.3-70-g09d2


From cb140cb5387836de1e2287ed9519a132f0f9d28f Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Sun, 9 Feb 2020 18:10:26 -0500
Subject: kinda works

---
 src/client/views/animationtimeline/Timeline.tsx    | 42 +++++++++++++++++-----
 .../views/animationtimeline/TimelineOverview.tsx   |  8 +++--
 src/client/views/animationtimeline/Track.tsx       | 15 +++++---
 3 files changed, 50 insertions(+), 15 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index fc1a0ec3b..c52669879 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -14,6 +14,7 @@ import { TimelineOverview } from "./TimelineOverview";
 import { FieldViewProps } from "../nodes/FieldView";
 import { KeyframeFunc } from "./Keyframe";
 import { Utils } from "../../../Utils";
+import { createPromiseCapability } from "../../../../deploy/assets/pdf.worker";
 
 
 /**
@@ -470,7 +471,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             return (
                 <>
                     <div key="time-text" className="animation-text" style={{ visibility: this.props.Document.isATOn ? "visible" : "hidden", display: this.props.Document.isATOn ? "flex" : "none" }}>{lengthString}</div>
-                    <div className="totalTime">1:40.07</div>
+                    <div className="totalTime">{this.toReadTime(this._time)}</div>
                 </>
             );
         }
@@ -478,7 +479,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             return (
                 <div style={{ flexDirection: "column" }}>
                     <div className="animation-text" style={{ width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Current: ${this.getCurrentTime()}`}</div>
-                    <div className="animation-text" style={{ width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Total: 1:40.07`}</div>
+                    <div className="animation-text" style={{ width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Total: ${this.toReadTime(this._time)}`}</div>
                 </div>
             );
         }
@@ -524,7 +525,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             timelineContainer.style.top = `${-this._containerHeight}px`;
             this.props.Document.isATOn = false;
             this._isAuthoring = false;
-            this.tracks();
+            this.toPlay();
         } else {
             //turning on authoring mode...
             roundToggle.style.transform = "translate(20px, 0px)";
@@ -534,6 +535,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             timelineContainer.style.top = "0px";
             this.props.Document.isATOn = true;
             this._isAuthoring = true;
+            this.toAuthoring(); 
         }
     }
 
@@ -555,18 +557,40 @@ export class Timeline extends React.Component<FieldViewProps> {
     @observable private mapOfTracks: (Track | null)[] = [];
 
     @action
-    tracks = () => {
-        console.log(this.mapOfTracks.length);
+    findLongestTime = () => {
+        let longestTime:number = 0; 
         this.mapOfTracks.forEach(track => {
-            console.log(track); 
             if (track) {
-                const region = track.getLastRegion();
-                console.log(region.time); 
+                const lastTime = track.getLastRegionTime();
+                if (this.children.length !== 0 ){
+                    if (longestTime <= lastTime){
+                        longestTime = lastTime; 
+                    }
+                }
             } else {
-
+                //TODO: remove undefineds and duplicates
             }
         });
+        return longestTime; 
+    }
+
+    @action 
+    toAuthoring = () => {
+        let longestTime = this.findLongestTime(); 
+        if (longestTime === 0) longestTime = 1;
+        const adjustedTime = Math.ceil(longestTime / 100000) * 100000; 
+        console.log(adjustedTime); 
+        this._totalLength = KeyframeFunc.convertPixelTime(adjustedTime, "mili", "pixel", this._tickSpacing, this._tickIncrement); 
+        this._time = adjustedTime; 
+    }
+
+    @action 
+    toPlay = () => {
+        const longestTime = this.findLongestTime(); 
+        this._time = longestTime; 
+        this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement);
     }
+
     /**
      * if you have any question here, just shoot me an email or text. 
      * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region)
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index 94bbe7074..a587e1138 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -142,11 +142,15 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         const visibleBarWidth = percentVisible * this.activeOverviewWidth;
 
         const percentScrubberStart = this.currentX / this.props.time;
-        const scrubberStart = this.props.currentBarX / this.props.totalLength * this.activeOverviewWidth;
+        let scrubberStart = this.props.currentBarX / this.props.totalLength * this.activeOverviewWidth;
+        if (scrubberStart > this.activeOverviewWidth) scrubberStart = this.activeOverviewWidth; 
 
         const percentBarStart = this.visibleStart / this.props.time;
         const barStart = percentBarStart * this.activeOverviewWidth;
 
+        let playWidth = (this.props.currentBarX / this.props.totalLength) * this.activeOverviewWidth; 
+        if (playWidth > this.activeOverviewWidth) playWidth = this.activeOverviewWidth; 
+
         const timeline = this.props.isAuthoring ? [
 
             <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview">
@@ -159,7 +163,7 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
                 <div key="timeline-play-container" className="timeline-play-bar overviewBar" id="timelinePlay">
                     <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}></div>
                 </div>,
-                <div className="timeline-play-tail" style={{ width: `${(this.props.currentBarX / this.props.totalLength) * this.playbarWidth}px` }}></div>
+                <div className="timeline-play-tail" style={{ width: `${playWidth}px` }}></div>
             ];
         return (
             <div className="timeline-flex">
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 9f63b3562..69e65fbcf 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -81,10 +81,17 @@ export class Track extends React.Component<IProps> {
     ////////////////////////////////
 
 
-    getLastRegion = () => {
-        console.log(this.regions.length); 
-        console.log((this.regions[this.regions.length - 1] as Doc).time); 
-        return this.regions[this.regions.length - 1] as Doc; 
+    getLastRegionTime =  () => {
+        let lastTime:number = 0; 
+        let lastRegion:(Doc | undefined); 
+        DocListCast(this.regions).forEach(region => {
+            const time = NumCast(region.time); 
+            if (lastTime <= time) {
+                lastTime = time; 
+                lastRegion = region; 
+            }
+        }); 
+        return lastRegion ? lastTime + NumCast(lastRegion.duration) : 0;  
     }
 
     /**
-- 
cgit v1.2.3-70-g09d2


From 77ddee9b0d5697522894badc9df1d54a0a7f08c9 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Mon, 10 Feb 2020 20:38:37 -0500
Subject: fixed width

---
 src/client/views/animationtimeline/Timeline.tsx    | 32 +++++++++++-----------
 .../views/animationtimeline/TimelineOverview.tsx   | 16 ++++++-----
 2 files changed, 25 insertions(+), 23 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index d27990bd6..b1777bfa0 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -538,7 +538,7 @@ export class Timeline extends React.Component<FieldViewProps> {
             timelineContainer.style.top = "0px";
             this.props.Document.isATOn = true;
             this._isAuthoring = true;
-            this.toAuthoring(); 
+            this.toAuthoring();
         }
     }
 
@@ -561,37 +561,37 @@ export class Timeline extends React.Component<FieldViewProps> {
 
     @action
     findLongestTime = () => {
-        let longestTime:number = 0; 
+        let longestTime: number = 0;
         this.mapOfTracks.forEach(track => {
             if (track) {
                 const lastTime = track.getLastRegionTime();
-                if (this.children.length !== 0 ){
-                    if (longestTime <= lastTime){
-                        longestTime = lastTime; 
+                if (this.children.length !== 0) {
+                    if (longestTime <= lastTime) {
+                        longestTime = lastTime;
                     }
                 }
             } else {
                 //TODO: remove undefineds and duplicates
             }
         });
-        console.log(longestTime); 
-        return longestTime; 
+        // console.log(longestTime); 
+        return longestTime;
     }
 
-    @action 
+    @action
     toAuthoring = () => {
-        let longestTime = this.findLongestTime(); 
+        let longestTime = this.findLongestTime();
         if (longestTime === 0) longestTime = 1;
-        const adjustedTime = Math.ceil(longestTime / 100000) * 100000; 
-        console.log(adjustedTime); 
-        this._totalLength = KeyframeFunc.convertPixelTime(adjustedTime, "mili", "pixel", this._tickSpacing, this._tickIncrement); 
-        this._time = adjustedTime; 
+        const adjustedTime = Math.ceil(longestTime / 100000) * 100000;
+        // console.log(adjustedTime); 
+        this._totalLength = KeyframeFunc.convertPixelTime(adjustedTime, "mili", "pixel", this._tickSpacing, this._tickIncrement);
+        this._time = adjustedTime;
     }
 
-    @action 
+    @action
     toPlay = () => {
-        const longestTime = this.findLongestTime(); 
-        this._time = longestTime; 
+        const longestTime = this.findLongestTime();
+        this._time = longestTime;
         this._totalLength = KeyframeFunc.convertPixelTime(this._time, "mili", "pixel", this._tickSpacing, this._tickIncrement);
     }
 
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index a587e1138..e3a276737 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -26,6 +26,8 @@ interface TimelineOverviewProps {
 export class TimelineOverview extends React.Component<TimelineOverviewProps>{
     @observable private _visibleRef = React.createRef<HTMLDivElement>();
     @observable private _scrubberRef = React.createRef<HTMLDivElement>();
+    @observable private authoringContainer = React.createRef<HTMLDivElement>();
+    @observable private playbackContainer = React.createRef<HTMLDivElement>();
     @observable private overviewBarWidth: number = 0;
     @observable private playbarWidth: number = 0;
     @observable private activeOverviewWidth: number = 0;
@@ -57,8 +59,8 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
     @action
     setOverviewWidth() {
-        const width1 = $("#timelineOverview").width();
-        const width2 = $("#timelinePlay").width();
+        const width1 = this.authoringContainer.current?.clientWidth;
+        const width2 = this.playbackContainer.current?.clientWidth;
         if (width1 && width1 !== 0) this.overviewBarWidth = width1;
         if (width2 && width2 !== 0) this.playbarWidth = width2;
 
@@ -143,24 +145,24 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
 
         const percentScrubberStart = this.currentX / this.props.time;
         let scrubberStart = this.props.currentBarX / this.props.totalLength * this.activeOverviewWidth;
-        if (scrubberStart > this.activeOverviewWidth) scrubberStart = this.activeOverviewWidth; 
+        if (scrubberStart > this.activeOverviewWidth) scrubberStart = this.activeOverviewWidth;
 
         const percentBarStart = this.visibleStart / this.props.time;
         const barStart = percentBarStart * this.activeOverviewWidth;
 
-        let playWidth = (this.props.currentBarX / this.props.totalLength) * this.activeOverviewWidth; 
-        if (playWidth > this.activeOverviewWidth) playWidth = this.activeOverviewWidth; 
+        let playWidth = (this.props.currentBarX / this.props.totalLength) * this.activeOverviewWidth;
+        if (playWidth > this.activeOverviewWidth) playWidth = this.activeOverviewWidth;
 
         const timeline = this.props.isAuthoring ? [
 
-            <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview">
+            <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview" ref={this.authoringContainer}>
                 <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
                 <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}>
                     <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
                 </div>
             </div>
         ] : [
-                <div key="timeline-play-container" className="timeline-play-bar overviewBar" id="timelinePlay">
+                <div key="timeline-play-container" className="timeline-play-bar overviewBar" id="timelinePlay" ref={this.playbackContainer}>
                     <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}></div>
                 </div>,
                 <div className="timeline-play-tail" style={{ width: `${playWidth}px` }}></div>
-- 
cgit v1.2.3-70-g09d2


From 0fb0341287cfed4c5b846f6bc7126623599b34f5 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 28 Apr 2020 20:16:45 -0400
Subject: small timeline fixes

---
 src/client/views/animationtimeline/Keyframe.tsx    | 103 ++++++++++-----------
 src/client/views/animationtimeline/Timeline.tsx    |  16 +---
 .../views/animationtimeline/TimelineOverview.tsx   |   8 +-
 src/client/views/animationtimeline/Track.tsx       |  60 ++++++------
 4 files changed, 92 insertions(+), 95 deletions(-)

(limited to 'src/client/views/animationtimeline/TimelineOverview.tsx')

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index bb557289e..76c3e63be 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -3,7 +3,7 @@ import "./Keyframe.scss";
 import "./Timeline.scss";
 import "../globalCssVariables.scss";
 import { observer } from "mobx-react";
-import { observable, reaction, action, IReactionDisposer, observe, computed, runInAction } from "mobx";
+import { observable, reaction, action, IReactionDisposer, observe, computed, runInAction, trace } from "mobx";
 import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
 import { Cast, NumCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
@@ -13,6 +13,7 @@ import { TimelineMenu } from "./TimelineMenu";
 import { Docs } from "../../documents/Documents";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
+import { emptyPath } from "../../../Utils";
 
 
 
@@ -32,10 +33,10 @@ export namespace KeyframeFunc {
         right = "right"
     }
 
-    export const findAdjacentRegion = (dir: KeyframeFunc.Direction, currentRegion: Doc, regions: List<Doc>): (RegionData | undefined) => {
+    export const findAdjacentRegion = (dir: KeyframeFunc.Direction, currentRegion: Doc, regions: Doc[]): (RegionData | undefined) => {
         let leftMost: (RegionData | undefined) = undefined;
         let rightMost: (RegionData | undefined) = undefined;
-        DocListCast(regions).forEach(region => {
+        regions.forEach(region => {
             const neighbor = RegionData(region);
             if (currentRegion.position! > neighbor.position) {
                 if (!leftMost || neighbor.position > leftMost.position) {
@@ -135,7 +136,7 @@ interface IProps {
     time: number;
     changeCurrentBarX: (x: number) => void;
     transform: Transform;
-    makeKeyData: (region:RegionData, pos: number, kftype:KeyframeFunc.KeyframeType) => Doc; 
+    makeKeyData: (region: RegionData, pos: number, kftype: KeyframeFunc.KeyframeType) => Doc;
 }
 
 
@@ -169,21 +170,24 @@ export class Keyframe extends React.Component<IProps> {
     @observable private _mouseToggled = false;
     @observable private _doubleClickEnabled = false;
 
-    @computed private get regiondata() { return RegionData(this.regions[this.regions.indexOf(this.props.RegionData)] as Doc); }
-    @computed private get regions() { return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>; }
+    @computed private get regiondata() { return RegionData(this.props.RegionData); }
+    @computed private get regions() { return DocListCast(this.props.node.regions); }
     @computed private get keyframes() { return DocListCast(this.regiondata.keyframes); }
     @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); }
-   
+
+    constructor(props: any) {
+        super(props);
+    }
     componentDidMount() {
         setTimeout(() => {      //giving it a temporary 1sec delay... 
-            if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();   
-            const start = this.props.makeKeyData(this.regiondata, this.regiondata.position,  KeyframeFunc.KeyframeType.end);
+            if (!this.regiondata.keyframes) this.regiondata.keyframes = new List<Doc>();
+            const start = this.props.makeKeyData(this.regiondata, this.regiondata.position, KeyframeFunc.KeyframeType.end);
             const fadeIn = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade);
             const fadeOut = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration - this.regiondata.fadeOut, KeyframeFunc.KeyframeType.fade);
-            const finish = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration,KeyframeFunc.KeyframeType.end);
+            const finish = this.props.makeKeyData(this.regiondata, this.regiondata.position + this.regiondata.duration, KeyframeFunc.KeyframeType.end);
             (fadeIn.key as Doc).opacity = 1;
             (fadeOut.key as Doc).opacity = 1;
             (start.key as Doc).opacity = 0.1;
@@ -192,9 +196,6 @@ export class Keyframe extends React.Component<IProps> {
         }, 1000);
     }
 
-
-
-
     @action
     onBarPointerDown = (e: React.PointerEvent) => {
         e.preventDefault();
@@ -316,7 +317,7 @@ export class Keyframe extends React.Component<IProps> {
         if (offset > this.regiondata.fadeIn && offset < this.regiondata.duration - this.regiondata.fadeOut) { //make sure keyframe is not created inbetween fades and ends
             const position = this.regiondata.position;
             this.props.makeKeyData(this.regiondata, Math.round(position + offset), KeyframeFunc.KeyframeType.default);
-            this.regiondata.hasData = true; 
+            this.regiondata.hasData = true;
             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
 
         }
@@ -338,7 +339,7 @@ export class Keyframe extends React.Component<IProps> {
         TimelineMenu.Instance.addItem("button", "Show Data", () => {
             runInAction(() => {
                 const kvp = Docs.Create.KVPDocument(Cast(kf.key, Doc) as Doc, { _width: 300, _height: 300 });
-                CollectionDockingView.AddRightSplit(kvp, (kf.key as Doc).data as Doc);
+                CollectionDockingView.AddRightSplit(kvp, emptyPath);
             });
         }),
             TimelineMenu.Instance.addItem("button", "Delete", () => {
@@ -403,7 +404,7 @@ export class Keyframe extends React.Component<IProps> {
                 runInAction(() => {
                     const prevPosition = this.regiondata.position;
                     let cannotMove: boolean = false;
-                    DocListCast(this.regions).forEach(region => {
+                    this.regions.forEach(region => {
                         if (NumCast(region.position) !== this.regiondata.position) {
                             if ((val < 0) || (val > NumCast(region.position) && val < NumCast(region.position) + NumCast(region.duration) || (this.regiondata.duration + val > NumCast(region.position) && this.regiondata.duration + val < NumCast(region.position) + NumCast(region.duration)))) {
                                 cannotMove = true;
@@ -419,7 +420,7 @@ export class Keyframe extends React.Component<IProps> {
             TimelineMenu.Instance.addItem("input", `duration: ${this.regiondata.duration}ms`, (val) => {
                 runInAction(() => {
                     let cannotMove: boolean = false;
-                    DocListCast(this.regions).forEach(region => {
+                    this.regions.forEach(region => {
                         if (NumCast(region.position) !== this.regiondata.position) {
                             val += this.regiondata.position;
                             if ((val < 0) || (val > NumCast(region.position) && val < NumCast(region.position) + NumCast(region.duration))) {
@@ -479,34 +480,31 @@ export class Keyframe extends React.Component<IProps> {
      * drawing keyframe. Handles both keyframe with a circle (one that you create by double clicking) and one without circle (fades)
      * this probably needs biggest change, since everyone expected all keyframes to have a circle (and draggable)
      */
-    @action
     drawKeyframes = () => {
         const keyframeDivs: JSX.Element[] = [];
-        DocListCast(this.regiondata.keyframes).forEach(kf => {
+        return DocListCast(this.regiondata.keyframes).map(kf => {
             if (kf.type as KeyframeFunc.KeyframeType !== KeyframeFunc.KeyframeType.end) {
-                keyframeDivs.push(
-                    <><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 keyframe-indicator" onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); this.moveKeyframe(e, kf); }} onContextMenu={(e: React.MouseEvent) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            this.makeKeyframeMenu(kf, e.nativeEvent);
-                        }} onDoubleClick={(e) => { e.preventDefault(); e.stopPropagation(); }}></div>
-
-                    </div>
-                        <div className="keyframe-information"></div>
-                    </>
-
-                );
-            } else {
-                keyframeDivs.push(
+                return <>
                     <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 keyframe-indicator"
+                            onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); this.moveKeyframe(e, kf); }}
+                            onContextMenu={(e: React.MouseEvent) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                this.makeKeyframeMenu(kf, e.nativeEvent);
+                            }}
+                            onDoubleClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
+                        </div>
                     </div>
-                );
+                    <div className="keyframe-information" />
+                </>;
+            } else {
+                return <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>
             }
         });
-        return keyframeDivs;
     }
 
     /**
@@ -546,22 +544,23 @@ export class Keyframe extends React.Component<IProps> {
      */
     //154, 206, 223
     render() {
+        trace();
+        console.log(this.props.RegionData.position);
+        console.log(this.regiondata.position);
+        console.log(this.pixelPosition);
         return (
-            <div>
-                <div className="bar" ref={this._bar} style={{
-                    transform: `translate(${this.pixelPosition}px)`,
-                    width: `${this.pixelDuration}px`,
-                    background: `linear-gradient(90deg, rgba(154, 206, 223, 0) 0%, rgba(154, 206, 223, 1) ${this.pixelFadeIn / this.pixelDuration * 100}%, rgba(154, 206, 223, 1) ${(this.pixelDuration - this.pixelFadeOut) / this.pixelDuration * 100}%, rgba(154, 206, 223, 0) 100% )`
-                }}
-                    onPointerDown={this.onBarPointerDown
-                    }>
-                    <div className="leftResize keyframe-indicator" onPointerDown={this.onResizeLeft} ></div>
-                    {/* <div className="keyframe-information"></div> */}
-                    <div className="rightResize keyframe-indicator" onPointerDown={this.onResizeRight}></div>
-                    {/* <div className="keyframe-information"></div> */}
-                    {this.drawKeyframes()}
-                    {this.drawKeyframeDividers()}
-                </div>
+            <div className="bar" ref={this._bar} style={{
+                transform: `translate(${this.pixelPosition}px)`,
+                width: `${this.pixelDuration}px`,
+                background: `linear-gradient(90deg, rgba(154, 206, 223, 0) 0%, rgba(154, 206, 223, 1) ${this.pixelFadeIn / this.pixelDuration * 100}%, rgba(154, 206, 223, 1) ${(this.pixelDuration - this.pixelFadeOut) / this.pixelDuration * 100}%, rgba(154, 206, 223, 0) 100% )`
+            }}
+                onPointerDown={this.onBarPointerDown}>
+                <div className="leftResize keyframe-indicator" onPointerDown={this.onResizeLeft} ></div>
+                {/* <div className="keyframe-information"></div> */}
+                <div className="rightResize keyframe-indicator" onPointerDown={this.onResizeRight}></div>
+                {/* <div className="keyframe-information"></div> */}
+                {this.drawKeyframes()}
+                {this.drawKeyframeDividers()}
             </div>
         );
     }
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index e9caa2b2a..7d245ab6f 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -3,7 +3,7 @@ import "./Timeline.scss";
 import { listSpec } from "../../../new_fields/Schema";
 import { observer } from "mobx-react";
 import { Track } from "./Track";
-import { observable, action, computed, runInAction, IReactionDisposer, reaction } from "mobx";
+import { observable, action, computed, runInAction, IReactionDisposer, reaction, trace } from "mobx";
 import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { Doc, DocListCast } from "../../../new_fields/Doc";
@@ -14,8 +14,6 @@ import { TimelineOverview } from "./TimelineOverview";
 import { FieldViewProps } from "../nodes/FieldView";
 import { KeyframeFunc } from "./Keyframe";
 import { Utils } from "../../../Utils";
-import { createPromiseCapability } from "../../../../deploy/assets/pdf.worker";
-
 
 /**
  * Timeline class controls most of timeline functions besides individual keyframe and track mechanism. Main functions are 
@@ -80,7 +78,6 @@ export class Timeline extends React.Component<FieldViewProps> {
 
     // so a reaction can be made
     @observable public _isAuthoring = this.props.Document.isATOn;
-    @observable private _panelWidth = 0;
 
     /**
      * collection get method. Basically defines what defines collection's children. These will be tracked in the timeline. Do not edit. 
@@ -90,7 +87,7 @@ export class Timeline extends React.Component<FieldViewProps> {
         const extendedDocument = ["image", "video", "pdf"].includes(StrCast(this.props.Document.type));
         if (extendedDocument) {
             if (this.props.Document.data_ext) {
-                return Cast((Cast(this.props.Document.data_ext, Doc) as Doc).annotations, listSpec(Doc)) as List<Doc>;
+                return Cast((Cast(this.props.Document[Doc.LayoutFieldKey(this.props.Document) + "-annotations"], Doc) as Doc).annotations, listSpec(Doc)) as List<Doc>;
             } else {
                 return new List<Doc>();
             }
@@ -586,17 +583,14 @@ export class Timeline extends React.Component<FieldViewProps> {
      * basically the only thing you need to edit besides render methods in track (individual track lines) and keyframe (green region)
      */
     render() {
-        runInAction(() => {
-            this._panelWidth = this.props.PanelWidth();
+        setTimeout(() => {
             this.changeLengths();
             // this.toPlay();
-
-
             // this._time = longestTime;
-        });
+        }, 0);
 
         const longestTime = this.findLongestTime();
-
+        trace();
         // change visible and total width
         return (
             <div>
diff --git a/src/client/views/animationtimeline/TimelineOverview.tsx b/src/client/views/animationtimeline/TimelineOverview.tsx
index e3a276737..31e248823 100644
--- a/src/client/views/animationtimeline/TimelineOverview.tsx
+++ b/src/client/views/animationtimeline/TimelineOverview.tsx
@@ -156,16 +156,16 @@ export class TimelineOverview extends React.Component<TimelineOverviewProps>{
         const timeline = this.props.isAuthoring ? [
 
             <div key="timeline-overview-container" className="timeline-overview-container overviewBar" id="timelineOverview" ref={this.authoringContainer}>
-                <div ref={this._visibleRef} key="timeline-overview-visible" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
-                <div ref={this._scrubberRef} key="timeline-overview-scrubber-container" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}>
+                <div ref={this._visibleRef} key="1" className="timeline-overview-visible" style={{ left: `${barStart}px`, width: `${visibleBarWidth}px` }} onPointerDown={this.onPointerDown}></div>,
+                <div ref={this._scrubberRef} key="2" className="timeline-overview-scrubber-container" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}>
                     <div key="timeline-overview-scrubber-head" className="timeline-overview-scrubber-head"></div>
                 </div>
             </div>
         ] : [
-                <div key="timeline-play-container" className="timeline-play-bar overviewBar" id="timelinePlay" ref={this.playbackContainer}>
+                <div key="1" className="timeline-play-bar overviewBar" id="timelinePlay" ref={this.playbackContainer}>
                     <div ref={this._scrubberRef} className="timeline-play-head" style={{ left: `${scrubberStart}px` }} onPointerDown={this.onScrubberDown}></div>
                 </div>,
-                <div className="timeline-play-tail" style={{ width: `${playWidth}px` }}></div>
+                <div key="2" className="timeline-play-tail" style={{ width: `${playWidth}px` }}></div>
             ];
         return (
             <div className="timeline-flex">
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 705cc33a2..0e3c209dc 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -29,7 +29,7 @@ export class Track extends React.Component<IProps> {
     @observable private _currentBarXReaction: any;
     @observable private _timelineVisibleReaction: any;
     @observable private _autoKfReaction: any;
-    @observable private _newKeyframe: boolean = false; 
+    @observable private _newKeyframe: boolean = false;
     private readonly MAX_TITLE_HEIGHT = 75;
     private _trackHeight = 0;
     private primitiveWhitelist = [
@@ -37,7 +37,7 @@ export class Track extends React.Component<IProps> {
         "y",
         "width",
         "height",
-        "opacity", 
+        "opacity",
     ];
     private objectWhitelist = [
         "data"
@@ -81,17 +81,17 @@ export class Track extends React.Component<IProps> {
     ////////////////////////////////
 
 
-    getLastRegionTime =  () => {
-        let lastTime:number = 0; 
-        let lastRegion:(Doc | undefined); 
+    getLastRegionTime = () => {
+        let lastTime: number = 0;
+        let lastRegion: (Doc | undefined);
         DocListCast(this.regions).forEach(region => {
-            const time = NumCast(region.position); 
+            const time = NumCast(region.position);
             if (lastTime <= time) {
-                lastTime = time; 
-                lastRegion = region; 
+                lastTime = time;
+                lastRegion = region;
             }
-        }); 
-        return lastRegion ? lastTime + NumCast(lastRegion.duration) : 0;  
+        });
+        return lastRegion ? lastTime + NumCast(lastRegion.duration) : 0;
     }
 
     /**
@@ -106,16 +106,16 @@ export class Track extends React.Component<IProps> {
         let kf = keyframes[kfIndex] as Doc; //index in the keyframe
         if (this._newKeyframe) {
             console.log("new keyframe registering");
-            let kfList = DocListCast(this.saveStateRegion!.keyframes); 
+            let kfList = DocListCast(this.saveStateRegion!.keyframes);
             kfList.forEach(kf => {
-                kf.key = this.makeCopy(); 
-                if (kfList.indexOf(kf) === 0  ||  kfList.indexOf(kf) === 3){
-                    (kf.key as Doc).opacity = 0.1; 
-                } else{
-                    (kf.key as Doc).opacity = 1; 
+                kf.key = this.makeCopy();
+                if (kfList.indexOf(kf) === 0 || kfList.indexOf(kf) === 3) {
+                    (kf.key as Doc).opacity = 0.1;
+                } else {
+                    (kf.key as Doc).opacity = 1;
                 }
             });
-            this._newKeyframe = false; 
+            this._newKeyframe = false;
         }
         if (!kf) return;
         if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades
@@ -225,7 +225,7 @@ export class Track extends React.Component<IProps> {
                     }
                 });
             } else {
-                console.log("reverting state"); 
+                console.log("reverting state");
                 //this.revertState(); 
             }
         });
@@ -241,7 +241,7 @@ export class Track extends React.Component<IProps> {
     timeChange = async () => {
         if (this.saveStateKf !== undefined) {
             await this.saveKeyframe();
-        } else if (this._newKeyframe){
+        } else if (this._newKeyframe) {
             await this.saveKeyframe();
         }
         let regiondata = await this.findRegion(Math.round(this.time)); //finds a region that the scrubber is on
@@ -250,7 +250,7 @@ export class Track extends React.Component<IProps> {
             let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata, this.time); //right keyframe, if it exists        
             let currentkf: (Doc | undefined) = await this.calcCurrent(regiondata); //if the scrubber is on top of the keyframe
             if (currentkf) {
-                console.log("is current"); 
+                console.log("is current");
                 await this.applyKeys(currentkf);
                 this.saveStateKf = currentkf;
                 this.saveStateRegion = regiondata;
@@ -348,7 +348,7 @@ export class Track extends React.Component<IProps> {
     createRegion = async (time: number) => {
         if (await this.findRegion(time) === undefined) {  //check if there is a region where double clicking (prevents phantom regions)
             let regiondata = KeyframeFunc.defaultKeyframe(); //create keyframe data
-           
+
             regiondata.position = time; //set position
             let rightRegion = KeyframeFunc.findAdjacentRegion(KeyframeFunc.Direction.right, regiondata, this.regions);
 
@@ -356,9 +356,9 @@ 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))) {
-                this.regions.push(regiondata); 
-                this._newKeyframe = true; 
-                this.saveStateRegion = regiondata; 
+                this.regions.push(regiondata);
+                this._newKeyframe = true;
+                this.saveStateRegion = regiondata;
                 return regiondata;
             }
         }
@@ -395,7 +395,7 @@ export class Track extends React.Component<IProps> {
         let doc = new Doc();
         this.primitiveWhitelist.forEach(key => {
             let originalVal = this.props.node[key];
-            if (key === "data"){
+            if (key === "data") {
                 console.log(originalVal);
             }
             doc[key] = originalVal instanceof ObjectField ? originalVal[Copy]() : this.props.node[key];
@@ -407,12 +407,16 @@ export class Track extends React.Component<IProps> {
      * UI sstuff here. Not really much to change
      */
     render() {
+        trace();
         return (
             <div className="track-container">
                 <div className="track">
-                    <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick} onPointerOver={() => { Doc.BrushDoc(this.props.node); }} onPointerOut={() => { Doc.UnBrushDoc(this.props.node); }} style={{ height: `${this._trackHeight}px` }}>
-                        {DocListCast(this.regions).map((region) => {
-                            return <Keyframe {...this.props} RegionData={region} makeKeyData={this.makeKeyData} />;
+                    <div className="inner" ref={this._inner} style={{ height: `${this._trackHeight}px` }}
+                        onDoubleClick={this.onInnerDoubleClick}
+                        onPointerOver={() => Doc.BrushDoc(this.props.node)}
+                        onPointerOut={() => Doc.UnBrushDoc(this.props.node)} >
+                        {DocListCast(this.regions).map((region, i) => {
+                            return <Keyframe key={`${i}`} {...this.props} RegionData={region} makeKeyData={this.makeKeyData} />;
                         })}
                     </div>
                 </div>
-- 
cgit v1.2.3-70-g09d2

