timeline contextmenu

1 files changed, 77 insertions, 2 deletions

diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx
index 7768f51df..adbd21e62 100644
--- a/src/client/views/animationtimeline/TimelineMenu.tsx
+++ b/src/client/views/animationtimeline/TimelineMenu.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import {observable, action, runInAction} from "mobx"; 
 import {observer} from "mobx-react"; 
+import "./TimelineMenu.scss"; 
+import { jSXAttribute } from "babel-types";
 
 /**
  * TimelineMenu: 
@@ -32,7 +34,7 @@ import {observer} from "mobx-react";
 export class TimelineMenu extends React.Component {
     public static Instance:TimelineMenu; 
 
-    @observable private _opacity = 1; 
+    @observable private _opacity = 0;
     @observable private _x = 0; 
     @observable private _y = 0; 
     @observable private _type: "timeline" | "keyframe" | "region" | "" = ""; 
@@ -42,13 +44,86 @@ 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 = (type: "timeline" | "keyframe" | "region", x?:number, y?:number) => {
+        this._type = type;
+        this._opacity = 1; 
+        x ? this._x = x : this._x = 0; 
+        y ? this._y = y : this._y = 0; 
+    }
+
+    @action
+    closeMenu = () => {
+        this._opacity = 0; 
+    }
 
+    @action
+    addEase = (e: React.MouseEvent) => {
+        
+    }
+    @action
+    addPath = (e:React.MouseEvent) => {
+
+    }
 
 
 
     render() {
+        let menu: (JSX.Element[] | undefined);
+        switch(this._type){
+            case "keyframe": 
+                menu = [ 
+                    <button> Show Schema</button>,  
+                    <button> Delete Keyframe</button>,
+                    <input placeholder="Move Keyframe"/> 
+                   
+                ]; 
+                break; 
+            case "region" :
+                menu = [
+                    <button onClick={this.addEase}>Add Ease</button>,
+                    <button onClick={this.addPath}>Add Path</button>,
+                    <input placeholder="fadeIn"/>,
+                    <input placeholder="fadeOut"/>,
+                    <input placeholder="position"/>,
+                    <input placeholder="duration"/>,
+                ]; 
+                break; 
+            case "timeline":
+                menu = [
+
+                ]; 
+                break; 
+            default: 
+                break; 
+            
+        }
         return (
-            <div></div>
+            <div className="timeline-menu-container" style={{opacity: this._opacity, left: this._x, top: this._y}} >
+                {menu}
+            </div>
         );
     }