From 3d99b990b95edd6481a6c12bc994cdac87e6c8dc Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Thu, 15 Aug 2019 12:48:06 -0400
Subject: uiux

---
 src/client/views/animationtimeline/Keyframe.tsx    |  8 +----
 src/client/views/animationtimeline/Timeline.tsx    | 30 +++++++++++++----
 .../views/animationtimeline/TimelineMenu.tsx       | 39 ++++++----------------
 3 files changed, 36 insertions(+), 41 deletions(-)

(limited to 'src')

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 784765318..4e58b07d8 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -242,7 +242,6 @@ export class Keyframe extends React.Component<IProps> {
     onBarPointerDown = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-       
         let clientX = e.clientX;  
         if (this._doubleClickEnabled){
             this.createKeyframe(clientX); 
@@ -254,14 +253,9 @@ export class Keyframe extends React.Component<IProps> {
             this._doubleClickEnabled = true; 
             document.addEventListener("pointermove", this.onBarPointerMove);
             document.addEventListener("pointerup", (e: PointerEvent) => {
-            document.removeEventListener("pointermove", this.onBarPointerMove);
+                document.removeEventListener("pointermove", this.onBarPointerMove);
         });
-        
         }
-        
-        
-
-        
     }
 
 
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 3d878660d..10034263c 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -135,8 +135,8 @@ export class Timeline extends CollectionSubView(Document) {
                         this.changeCurrentBarX(0); 
                     } else {
                         this.changeCurrentBarX(this._currentBarX + this._windSpeed);
-                        setTimeout(playTimeline, 15);  
-                    }
+                    }                        
+                    setTimeout(playTimeline, 15);  
                 }
             }; 
             playTimeline(); 
@@ -193,20 +193,38 @@ export class Timeline extends CollectionSubView(Document) {
 
 
 
+    @observable private _mouseToggled = false; 
+    @observable private _doubleClickEnabled = false; 
     @action
     onPanDown = (e: React.PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        document.addEventListener("pointermove", this.onPanMove);
-        document.addEventListener("pointerup", () => {
-            document.removeEventListener("pointermove", this.onPanMove);
-        });
+        let clientX = e.clientX; 
+        if (this._doubleClickEnabled){
+            this._doubleClickEnabled = false; 
+        } else {
+            setTimeout(() => {if(!this._mouseToggled && this._doubleClickEnabled) this.changeCurrentBarX(this._trackbox.current!.scrollLeft + clientX -  this._trackbox.current!.getBoundingClientRect().left); 
+                this._mouseToggled = false;
+                this._doubleClickEnabled = false;}, 200); 
+            this._doubleClickEnabled = true; 
+            document.addEventListener("pointermove", this.onPanMove);
+            document.addEventListener("pointerup", () => {
+                document.removeEventListener("pointermove", this.onPanMove);
+                if (!this._doubleClickEnabled) {
+                    this._mouseToggled = false; 
+                }
+            });
+
+        }
     }
 
     @action
     onPanMove = (e: PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
+        if (e.movementX !== 0 || e.movementY !== 0) {
+            this._mouseToggled = true; 
+        }
         let trackbox = this._trackbox.current!;
         let titleContainer = this._titleContainer.current!;
         this.movePanX(this._visibleStart - e.movementX);
diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx
index 4223ee099..3e63eec61 100644
--- a/src/client/views/animationtimeline/TimelineMenu.tsx
+++ b/src/client/views/animationtimeline/TimelineMenu.tsx
@@ -19,28 +19,6 @@ export class TimelineMenu extends React.Component {
         super(props); 
         TimelineMenu.Instance = this; 
     }
-
-    @action
-    pointerDown = (e: React.PointerEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        document.removeEventListener("pointerup", this.pointerUp); 
-        document.addEventListener("pointerup", this.pointerUp); 
-        document.removeEventListener("pointermove", this.pointerMove); 
-        document.addEventListener("pointermove", this.pointerMove);     
-    }
-
-    @action
-    pointerMove = (e: PointerEvent) => {
-        e.preventDefault(); 
-        e.stopPropagation(); 
-    }
-
-    @action
-    pointerUp = (e: PointerEvent) => {
-        document.removeEventListener("pointermove", this.pointerMove); 
-        document.removeEventListener("pointerup", this.pointerUp); 
-    }
     
     @action
     openMenu = (x?:number, y?:number) => {
@@ -52,16 +30,20 @@ export class TimelineMenu extends React.Component {
     @action
     closeMenu = () => {
         this._opacity = 0; 
+        this._currentMenu = []; 
     }
 
     addItem = (type: "input" | "button", title: string, event: (e:any) => void) => {
         if (type === "input"){
             let ref = React.createRef<HTMLInputElement>(); 
-            let text = ""; 
-            return <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input" ref = {ref} placeholder={title} onChange={(e) => {text = e.target.value;}} onKeyDown={(e:React.KeyboardEvent) => {
-                if(e.keyCode === 13){
-                    event(text); 
-                }}}/></div>; 
+            return <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input" ref = {ref} placeholder={title} onChange={(e) => {
+                let text = e.target.value;
+                document.addEventListener("keypress", (e:KeyboardEvent) => {
+                    if (e.keyCode === 13) {
+                        event(text); 
+                    }
+                });
+            }}/></div>; 
         } else if (type === "button") {
             let ref = React.createRef<HTMLDivElement>(); 
             return <div className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine}size="lg"/><p className="timeline-menu-desc" onClick={event}>{title}</p></div>; 
@@ -72,7 +54,8 @@ export class TimelineMenu extends React.Component {
     @action 
     addMenu = (title:string, items: JSX.Element[]) => {
         items.unshift(<div className="timeline-menu-header"><p className="timeline-menu-header-desc">{title}</p></div>); 
-        this._currentMenu = items;  
+        this._currentMenu = items;
+    
     }
 
     render() {
-- 
cgit v1.2.3-70-g09d2