From 33440b84d276b3488f10f14c4b51893d1d54353d Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Mon, 24 Jun 2019 16:32:56 -0400
Subject: graphical change

---
 src/client/views/nodes/Keyframe.tsx | 142 ++++++++++++++++++------------------
 1 file changed, 73 insertions(+), 69 deletions(-)

(limited to 'src/client/views/nodes/Keyframe.tsx')

diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index b3dd251f9..7f4f9ab3b 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -31,6 +31,8 @@ export class Keyframe extends React.Component<IProp> {
     @observable private _bar = React.createRef<HTMLDivElement>(); 
     @observable private _data:Doc = new Doc(); 
     @observable private _position:number = 0;   
+    @observable private _keyframes:number[] = []; 
+
 
 
     @action
@@ -41,87 +43,82 @@ export class Keyframe extends React.Component<IProp> {
         this._data.duration = 200; 
         this._data.start = this._position - (this._duration/2); 
         this._data.end = this._position + (this._duration/2); 
-        
-        
      }
 
     componentWillUnmount() {
         
     }
     
-    @action
-    onPointerEnter = (e: React.PointerEvent) => {
-        e.preventDefault();
-        e.stopPropagation(); 
-        //this._display = "block"; 
-    }
-
-    @action 
-    onPointerOut = (e: React.PointerEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        //this._display = "none"; 
-    }
+    // @action
+    // onPointerEnter = (e: React.PointerEvent) => {
+    //     e.preventDefault();
+    //     e.stopPropagation(); 
+    //     //this._display = "block"; 
+    // }
+
+    // @action 
+    // onPointerOut = (e: React.PointerEvent) => {
+    //     e.preventDefault();
+    //     e.stopPropagation();
+    //     //this._display = "none"; 
+    // }
 
     @action 
     onBarPointerDown = (e: React.PointerEvent) => {
-        console.log(e.clientX); 
-        this._position = e.clientX; 
-    }
-
-    @action 
-    onKeyDown = (e: React.KeyboardEvent) => {
         e.preventDefault(); 
         e.stopPropagation(); 
-        console.log("pressed");
-        if (e.keyCode === 13){
-            console.log("hellow"); 
-        }
+        document.addEventListener("pointermove", this.onBarPointerMove); 
+        document.addEventListener("pointerup", (e:PointerEvent) => {
+            document.removeEventListener("pointermove", this.onBarPointerMove); 
+        }); 
     }
 
     @action 
-    onPointerDown = (e:React.PointerEvent) => {
+    onBarPointerMove = (e:PointerEvent) => {
         e.preventDefault(); 
         e.stopPropagation(); 
+        if (this._position >= 0){
+            let futureX = this._position + e.movementX; 
+            if (futureX <= 0){
+                this._position = 0; 
+            } else{
+                this._position += e.movementX; 
+            }
+        }
     }
 
     @action 
     onResizeLeft = (e:React.PointerEvent)=>{
         e.preventDefault(); 
-        let bar = this._bar.current!; 
+        e.stopPropagation(); 
         document.addEventListener("pointermove", this.onDragResizeLeft); 
+        document.addEventListener("pointerup", ()=>{
+            document.removeEventListener("pointermove", this.onDragResizeLeft);
+        }); 
     }
 
     @action 
-    onDragResizeLeft = (e:PointerEvent)=>{
+    onResizeRight = (e:React.PointerEvent)=> {
         e.preventDefault(); 
-        e.stopPropagation();
-        console.log("Dragging");
-        let bar = this._bar.current!; 
-        let barX = bar.getBoundingClientRect().left; 
-        let offset = barX - e.clientX; 
-        bar.style.width = `${bar.getBoundingClientRect().width + offset}px`; 
-        bar.style.transform = `translate(${e.clientX})`; 
-        document.addEventListener("pointerup", this.onResizeFinished); 
+        e.stopPropagation(); 
+        document.addEventListener("pointermove", this.onDragResizeRight); 
+        document.addEventListener("pointerup", ()=>{
+            document.removeEventListener("pointermove", this.onDragResizeRight);
+        }); 
     }
 
     @action 
-    onResizeFinished =(e:PointerEvent) => {
+    onDragResizeLeft = (e:PointerEvent)=>{
         e.preventDefault(); 
-        e.stopPropagation(); 
-        let bar = this._bar.current!; 
-        document.removeEventListener("pointermove", this.onDragResizeLeft); 
-        document.removeEventListener("pointermove", this.onDragResizeRight); 
+        e.stopPropagation();     
+        let bar = this._bar.current!;  
+        let barX = bar.getBoundingClientRect().left; 
+        let offset = e.clientX - barX; 
+        this._duration -= offset; 
+        this._position += offset; 
     }
    
-    @action 
-    onResizeRight = (e:React.PointerEvent)=> {
-        e.preventDefault(); 
-        e.stopPropagation(); 
-        let bar = this._bar.current!; 
-        document.addEventListener("pointermove", this.onDragResizeRight); 
-    }
-
+    
     @action 
     onDragResizeRight = (e:PointerEvent) => {
         e.preventDefault();  
@@ -129,35 +126,42 @@ export class Keyframe extends React.Component<IProp> {
         let bar = this._bar.current!;  
         let barX = bar.getBoundingClientRect().right; 
         let offset = e.clientX - barX; 
-        bar.style.width = `${bar.getBoundingClientRect().width + offset}px`; 
-        document.addEventListener("pointerup", this.onResizeFinished); 
+        console.log(offset); 
+        this._duration += offset; 
     }
 
-    @action
-    onResizeOut = (e:React.PointerEvent)=>{
-        let bar = this._bar.current!; 
-        document.addEventListener("pointerup", this.onDragResizeRight); 
+    createDivider = (type?: string):JSX.Element => {
+        if (type === "left"){
+            return <div className="divider" style={{right:"0px"}}></div>; 
+        } else if (type === "right"){
+            return <div className="divider" style={{left:"0px"}}> </div>; 
+        }
+        return <div className="divider"></div>; 
     }
 
-
-    @action 
-    changeFlyoutContent = () => {
-
-    }
-    
     @action
-    onHover = (e:React.PointerEvent) => {
-
+    createKeyframe = (e: React.MouseEvent) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        let mouse = e.nativeEvent; 
+        this._keyframes.push(mouse.offsetX); 
     }
-    
+
     render() {
         return (
             <div>
-                <div className="bar" ref={this._bar} style={{ transform: `translate(${this._position - (this._duration/2)}px)`, width:`${this._duration}px`}} onPointerDown={this.onBarPointerDown}>
-                    <div className="leftResize" onPointerDown={this.onResizeLeft}  ></div>
-                    <div className="rightResize" onPointerDown={this.onResizeRight} onPointerOut={this.onResizeOut}></div>
-                    <div className="menubox" style={{display: this._display}}>       
-                    </div>
+                <div className="bar" ref={this._bar} style={{ transform: `translate(${this._position}px)`, width:`${this._duration}px`}} onPointerDown={this.onBarPointerDown} onDoubleClick={this.createKeyframe}>
+                    <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
+                    <div className="rightResize" onPointerDown={this.onResizeRight}></div>
+                    {/* <div className="menubox" style={{display: this._display}}></div> */}
+                    <div className="fadeLeft" style={{width:`${20}px`}}>{this.createDivider("left")}</div>
+                    <div className="fadeRight" style={{width:`${20}px`}}>{this.createDivider("right")}</div>    
+                    {this._keyframes.map(kf => {return <div className="keyframe" style={{left: `${kf}px`}}>
+                        {this.createDivider()}
+                        <div className="keyframeCircle"></div>
+                    </div>})}
+                    {this.createDivider("left")}
+                    {this.createDivider("right")}
                 </div>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2