reformatted

4 files changed, 38 insertions, 34 deletions

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>;
     }
 }