timeline contextmenu

4 files changed, 92 insertions, 3 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 669b8f018..589fcc409 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -39,6 +39,7 @@ import { FilterBox } from './search/FilterBox';
 import { CollectionTreeView } from './collections/CollectionTreeView';
 import { ClientUtils } from '../util/ClientUtils';
 import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField';
+import { TimelineMenu } from './animationtimeline/TimelineMenu';
 
 @observer
 export class MainView extends React.Component {
@@ -148,6 +149,9 @@ export class MainView extends React.Component {
             const targets = document.elementsFromPoint(e.x, e.y);
             if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) {
                 ContextMenu.Instance.closeMenu();
+            } 
+            if (targets && targets.length && targets[0].className.toString().indexOf("timeline-menu-container") === -1){
+                TimelineMenu.Instance.closeMenu(); 
             }
         }), true);
     }
@@ -461,6 +465,7 @@ export class MainView extends React.Component {
                 {this.nodesMenu()}
                 {this.miscButtons}
                 <PDFMenu />
+                <TimelineMenu/>
                 <MainOverlayTextBox />
                 <OverlayView />
             </div >
diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 995a5b402..9dae3896f 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -12,6 +12,7 @@ import { FlyoutProps } from "./Timeline";
 import { Transform } from "../../util/Transform";
 import { InkField, StrokeData } from "../../../new_fields/InkField";
 import { number } from "prop-types";
+import { TimelineMenu } from "./TimelineMenu";
 
 export namespace KeyframeFunc {
     export enum KeyframeType {
@@ -389,6 +390,7 @@ export class Keyframe extends React.Component<IProps> {
                     <div className="keyframeCircle" onPointerDown={(e) => { this.moveKeyframe(e, kf as Doc); }} onContextMenu={(e: React.MouseEvent) => {
                         e.preventDefault();
                         e.stopPropagation();
+                        TimelineMenu.Instance.openMenu("keyframe", e.clientX, e.clientY); 
                     }}></div>
                 </div>);
         }
@@ -538,7 +540,7 @@ export class Keyframe extends React.Component<IProps> {
                                 <div ref={bodyRef}className="body-container" style={{left: `${NumCast(kf.time) - this.regiondata.position}px`, width:`${NumCast(left!.time) - NumCast(kf.time)}px`}}
                                 onPointerOver={(e) => { this.onContainerOver(e, bodyRef); }}
                                 onPointerOut={(e) => { this.onContainerOut(e, bodyRef); }}
-                                onContextMenu={(e) => { this.onContainerDown(e, kf); }}>
+                                onContextMenu={(e) => {TimelineMenu.Instance.openMenu("region", e.clientX, e.clientY);}}>
                                 </div>
                             ); 
                        }  
diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss
index e69de29bb..458c1eda1 100644
--- a/src/client/views/animationtimeline/TimelineMenu.scss
+++ b/src/client/views/animationtimeline/TimelineMenu.scss
@@ -0,0 +1,7 @@
+.timeline-menu-container{
+    position: absolute;
+    z-index: 10000;
+    width: 500px; 
+    height: 500px; 
+    background-color: black;
+}
\ No newline at end of file
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>
         );
     }