Merge branch 'monika_animation' of https://github.com/browngraphicslab/Dash-Web into monika_animation

5 files changed, 68 insertions, 18 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.scss b/src/client/views/animationtimeline/Keyframe.scss
index 8dcf71994..84c8de287 100644
--- a/src/client/views/animationtimeline/Keyframe.scss
+++ b/src/client/views/animationtimeline/Keyframe.scss
@@ -46,10 +46,6 @@ $timelineDark: #77a1aa;
         position: absolute;
     }
 
-    // .keyframe:hover~.keyframe-information {
-    //     display: flex;
-    // }
-
     .keyframe-information {
         display: none;
         position: relative;
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index a99d017f4..f90249771 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -34,29 +34,44 @@ $timelineDark: #77a1aa;
     }
 
     .grid-box {
-        display: grid;
-        grid-template-columns: [first] 50% [line2] 25% [line3] 25%;
+        display: flex;
+        // grid-template-columns: [first] 20% [line2] 20% [line3] 60%;
         width: calc(100% - 150px);
         // width: 100%;
         margin-left: 10px;
 
         .time-box {
-            margin-left: 5px;
+            margin-left: 10px;
             min-width: 140px;
             display: flex;
             justify-content: center;
             align-items: center;
-            // grid-column-start: line2;
+
+            .resetView-tool {
+                width: 30px;
+                height: 30px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 3px;
+                color: $timelineDark;
+            }
+
+            .resetView-tool:hover {
+                -webkit-transform: scale(1.1);
+                -ms-transform: scale(1.1);
+                transform: scale(1.1);
+                transition: .2s ease;
+            }
         }
 
         .mode-box {
             display: flex;
             margin-left: 5px;
-            // grid-column-start: line3;
         }
 
         .overview-box {
-            width: 100%;
+            width: 80%;
             display: flex;
         }
 
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index c52669879..914c19b53 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -460,6 +460,9 @@ export class Timeline extends React.Component<FieldViewProps> {
                     </div>
                     <div className="time-box overview-tool" style={{ display: this._timelineVisible ? "flex" : "none" }}>
                         {this.timeIndicator(lengthString)}
+                        <div className="resetView-tool" title="Return to Default View" onClick={() => Doc.resetView(this.props.Document)}><FontAwesomeIcon icon="compress-arrows-alt" size="lg" /></div>
+                        <div className="resetView-tool" style={{ display: this._isAuthoring ? "flex" : "none" }} title="Set Default View" onClick={() => Doc.setView(this.props.Document)}><FontAwesomeIcon icon="expand-arrows-alt" size="lg" /></div>
+
                     </div>
                 </div>
             </div>
@@ -478,8 +481,8 @@ export class Timeline extends React.Component<FieldViewProps> {
         else {
             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: ${this.toReadTime(this._time)}`}</div>
+                    <div className="animation-text" style={{ fontSize: "10px", width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Current: ${this.getCurrentTime()}`}</div>
+                    <div className="animation-text" style={{ fontSize: "10px", width: "100%", display: !this.props.Document.isATOn ? "block" : "none" }}>{`Total:${this.toReadTime(this._time)}`}</div>
                 </div>
             );
         }
@@ -541,7 +544,7 @@ export class Timeline extends React.Component<FieldViewProps> {
 
 
     @action.bound
-    changeLenths() {
+    changeLengths() {
         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
@@ -598,7 +601,7 @@ export class Timeline extends React.Component<FieldViewProps> {
     render() {
         runInAction(() => {
             this._panelWidth = this.props.PanelWidth();
-            this.changeLenths();
+            this.changeLengths();
         });
 
         // change visible and total width
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ef1ec5e78..81fca3b54 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -966,7 +966,24 @@ 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" });
+        const { Document } = this.props;
+
+        layoutItems.push({
+            description: "reset view", event: () => {
+                Doc.resetView(Document);
+            }, icon: "compress-arrows-alt"
+        });
+        layoutItems.push({
+            description: "set view origin", event: () => {
+                Doc.setView(Document);
+            }, icon: "expand-arrows-alt"
+        });
+        layoutItems.push({
+            description: "reset view to origin", event: () => {
+                Doc.resetViewToOrigin(Document);
+            }, icon: "expand-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" });
         layoutItems.push({ description: `${this.Document.useClusters ? "Uncluster" : "Use Clusters"}`, event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" });
@@ -1018,7 +1035,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             icon: "eye"
         });
         ContextMenu.Instance.addItem({ description: "Freeform Options ...", subitems: layoutItems, icon: "eye" });
-        this._timelineRef.current!.timelineContextMenu(e); 
+        this._timelineRef.current!.timelineContextMenu(e);
     }
 
 
@@ -1081,12 +1098,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                     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>            
+            </div>
             <Timeline ref={this._timelineRef} {...this.props} />
         </div>;
     }
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index f230abaf4..216005697 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -255,6 +255,25 @@ export namespace Doc {
     //         return Cast(field, ctor);
     //     });
     // }
+
+    export function resetView(doc: Doc) {
+        doc._panX = doc._customOriginX ?? 0;
+        doc._panY = doc._customOriginY ?? 0;
+        doc.scale = doc._customOriginScale ?? 1;
+    }
+
+    export function resetViewToOrigin(doc: Doc) {
+        doc._panX = 0;
+        doc._panY = 0;
+        doc.scale = 1;
+    }
+
+    export function setView(doc: Doc) {
+        doc._customOriginX = doc._panX;
+        doc._customOriginY = doc._panY;
+        doc._customOriginScale = doc.scale;
+    }
+
     export function RunCachedUpdate(doc: Doc, field: string) {
         const update = doc[CachedUpdates][field];
         if (update) {