added functionalities

3 files changed, 33 insertions, 78 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index d1975d847..3c0d17796 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -13,6 +13,9 @@ import { Transform } from "../../util/Transform";
 import { InkField, StrokeData } from "../../../new_fields/InkField";
 import { number } from "prop-types";
 import { TimelineMenu } from "./TimelineMenu";
+import { Docs } from "../../documents/Documents";
+import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
 
 export namespace KeyframeFunc {
     export enum KeyframeType {
@@ -310,7 +313,6 @@ export class Keyframe extends React.Component<IProps> {
             let dif = this.regiondata.position - (leftRegion.position + leftRegion.duration);
             this.regiondata.position = leftRegion.position + leftRegion.duration;
             this.regiondata.duration += dif;
-
         } else {
             this.regiondata.duration -= offset;
             this.regiondata.position += offset;
@@ -386,6 +388,15 @@ 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();
+                        let items = [
+                            TimelineMenu.Instance.addItem("button", "Show Data", () => {
+                            runInAction(() => {let kvp = Docs.Create.KVPDocument(Cast(kf.key, Doc) as Doc, { width: 300, height: 300 }); 
+                            CollectionDockingView.Instance.AddRightSplit(kvp, (kf.key as Doc).data as Doc); });
+                           }), 
+                            TimelineMenu.Instance.addItem("button", "Delete", () => {}), 
+                            TimelineMenu.Instance.addItem("input", "Move", (val) => {kf.time = parseInt(val, 10);})  
+                        ]; 
+                        TimelineMenu.Instance.addMenu("Keyframe", items); 
                         TimelineMenu.Instance.openMenu(e.clientX, e.clientY); 
                     }}></div>
                 </div>);
@@ -527,7 +538,6 @@ export class Keyframe extends React.Component<IProps> {
                     })}
                     {this.keyframes.map( kf => {
                        if(this.keyframes.indexOf(kf) !== this.keyframes.length - 1) {
-                           
                             let left = this.keyframes[this.keyframes.indexOf(kf) + 1]; 
                             let bodyRef = React.createRef<HTMLDivElement>(); 
                             return (
diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx
index 8b47448f2..4223ee099 100644
--- a/src/client/views/animationtimeline/TimelineMenu.tsx
+++ b/src/client/views/animationtimeline/TimelineMenu.tsx
@@ -2,38 +2,10 @@ import * as React from "react";
 import {observable, action, runInAction} from "mobx"; 
 import {observer} from "mobx-react"; 
 import "./TimelineMenu.scss"; 
-import { jSXAttribute } from "babel-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChartLine, faRoad, faClipboard, faPen, faTrash, faTable } from "@fortawesome/free-solid-svg-icons";
-import { AddComparisonResult } from "../../northstar/model/idea/idea";
 
 
-/**
- * TimelineMenu: 
- * 
- * 
- * Timeline: 
- *  - 
- * 
- * 
- * Keyframe: 
- *  - Delete keyframe
- *  - Move keyframe
- *  - Edit keyframe (shows schema)
- * 
- * 
- * Region: 
- *  - Add Keyframe 
- *  - Copy Interpolation 
- *  - Copy path
- *  - Add Interpolation 
- *  - Add Path 
- *  - Change fades
- *  - position region 
- *  - duration region 
- *  - 
- */
-
 @observer
 export class TimelineMenu extends React.Component {
     public static Instance:TimelineMenu; 
@@ -41,12 +13,13 @@ export class TimelineMenu extends React.Component {
     @observable private _opacity = 0;
     @observable private _x = 0; 
     @observable private _y = 0; 
-    @observable private _type: "timeline" | "keyframe" | "region" | "" = ""; 
     @observable private _currentMenu:JSX.Element[] = []; 
+
     constructor (props:Readonly<{}>){
         super(props); 
         TimelineMenu.Instance = this; 
     }
+
     @action
     pointerDown = (e: React.PointerEvent) => {
         e.preventDefault();
@@ -54,15 +27,15 @@ export class TimelineMenu extends React.Component {
         document.removeEventListener("pointerup", this.pointerUp); 
         document.addEventListener("pointerup", this.pointerUp); 
         document.removeEventListener("pointermove", this.pointerMove); 
-        document.addEventListener("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); 
@@ -81,15 +54,6 @@ export class TimelineMenu extends React.Component {
         this._opacity = 0; 
     }
 
-    @action
-    addEase = (e: React.MouseEvent) => {
-        
-    }
-    @action
-    addPath = (e:React.MouseEvent) => {
-
-    }
-
     addItem = (type: "input" | "button", title: string, event: (e:any) => void) => {
         if (type === "input"){
             let ref = React.createRef<HTMLInputElement>(); 
@@ -112,37 +76,6 @@ export class TimelineMenu extends React.Component {
     }
 
     render() {
-        // let menu: (JSX.Element[] | undefined);
-        // switch(this._type){
-        //     case "keyframe": 
-        //         menu = [ 
-        //             <div className="timeline-menu-header"><p className="timeline-menu-header-desc">Keyframe</p></div>, 
-        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faTable} size="lg"/><p className="timeline-menu-desc">Show Data</p> </div>, 
-        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faTrash} size="lg"/><p className="timeline-menu-desc"> Delete</p></div>,
-        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="Move Keyframe"/></div> 
-                   
-        //         ]; 
-        //         break; 
-        //     case "region" :
-        //         menu = [
-        //             <div className="timeline-menu-header"><p className="timeline-menu-header-desc">Region</p></div>, 
-        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faChartLine}size="lg"/><p className="timeline-menu-desc" onClick={this.addEase}>Add Ease</p></div>,
-        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faPen} size="lg"/><p className="timeline-menu-desc"onClick={this.addPath}>Add Path</p></div>,
-        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="fadeIn"/> </div>,
-        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="fadeOut"/></div>,
-        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="position"/></div>,
-        //             <div className="timeline-menu-item"><FontAwesomeIcon icon={faClipboard} size="lg"/><input className="timeline-menu-input"placeholder="duration"/></div>,
-        //         ]; 
-        //         break; 
-        //     case "timeline":
-        //         menu = [
-
-        //         ]; 
-        //         break; 
-        //     default: 
-        //         break; 
-            
-        // }
         return (
             <div className="timeline-menu-container" style={{opacity: this._opacity, left: this._x, top: this._y}} >
                 {this._currentMenu}
diff --git a/src/client/views/graph/Graph.tsx b/src/client/views/graph/Graph.tsx
index 864bb8f46..326f33358 100644
--- a/src/client/views/graph/Graph.tsx
+++ b/src/client/views/graph/Graph.tsx
@@ -1,17 +1,29 @@
 import * as React from "react";
+import {observable} from "mobx"; 
+import { observer } from "mobx-react";
+import { Document, listSpec } from "../../../new_fields/Schema";
 import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
+import { CollectionSubView, CollectionViewProps, SubCollectionViewProps } from "../collections/CollectionSubView";
 
-export class Graph extends React.Component {
 
 
-    
 
-    
+export class Graph extends CollectionSubView(Document) {
+    static Instance:Graph; 
+
+    private constructor(props:SubCollectionViewProps) {
+        super(props); 
+        Graph.Instance = this; 
+    }
+
+
 
 
     render() {
         return (
-        )
+            <CollectionFreeFormView {...this.props}/>
+            
+        ); 
     }
 
 }
\ No newline at end of file