From e7e7f21510103394239f96bb3e398e5509a7533e Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Mon, 1 Jul 2019 17:08:22 -0400
Subject: flyout

---
 src/client/views/nodes/Keyframe.tsx  | 101 +++++++++++++----------------------
 src/client/views/nodes/Timeline.scss |  36 +++++++++----
 src/client/views/nodes/Timeline.tsx  |  57 ++++++++++++--------
 src/client/views/nodes/Track.tsx     |  10 ++--
 4 files changed, 102 insertions(+), 102 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index ed1f3b03a..263df0fd5 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -8,15 +8,19 @@ import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { Cast, FieldValue, StrCast, NumCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema";
+import { any } from "bluebird";
+import { FlyoutProps } from "./Timeline";
+import { exportDefaultSpecifier } from "babel-types";
 
 enum Direction {
     left = "left",
     right = "right"
 }
+
 interface IProp {
     node: Doc;
     RegionData: Doc;
-    // routine: (innerFunc: () => void, args: any) => void; 
+    setFlyout:(props:FlyoutProps) => any; 
 }
 
 
@@ -36,20 +40,6 @@ const RegionDataSchema = createSchema({
 type RegionData = makeInterface<[typeof RegionDataSchema]>;
 export const RegionData = makeInterface(RegionDataSchema);
 
-interface FlyoutInfo {
-    position: number;
-    fadeIn: number;
-    fadeOut: number;
-}
-
-
-const FlyoutObj = {
-    position: 0,
-    fadeIn: 0,
-    fadeOut: 1
-};
-
-export var FlyoutInfoContext = React.createContext<FlyoutInfo>(FlyoutObj);
 
 @observer
 export class Keyframe extends React.Component<IProp> {
@@ -65,32 +55,12 @@ export class Keyframe extends React.Component<IProp> {
     componentDidMount() {
 
         // need edge case here when keyframe data already exists when loading.....................;
-        this.fadein = 100; 
-
-        FlyoutInfoContext = React.createContext<FlyoutInfo>({position: this.position,
-            fadeIn: this.fadein,
-            fadeOut: this.fadeout}); 
     }
 
     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"; 
-    // }
-
-
     @computed
     private get regiondata() {
         let index = this.regions.indexOf(this.props.RegionData);
@@ -121,16 +91,31 @@ export class Keyframe extends React.Component<IProp> {
 
     }
 
-
-
     @action
     onBarPointerDown = (e: React.PointerEvent) => {
+        let mouse = e.nativeEvent; 
+        
         e.preventDefault();
         e.stopPropagation();
-        document.addEventListener("pointermove", this.onBarPointerMove);
-        document.addEventListener("pointerup", (e: PointerEvent) => {
-            document.removeEventListener("pointermove", this.onBarPointerMove);
-        });
+        if (mouse.which === 1){
+            document.addEventListener("pointermove", this.onBarPointerMove);
+            document.addEventListener("pointerup", (e: PointerEvent) => {
+                document.removeEventListener("pointermove", this.onBarPointerMove);
+            });
+        } else if(mouse.which === 3) {
+            e.preventDefault();
+            e.stopPropagation();        
+            let bar = this._bar.current!; 
+            this.props.setFlyout({x:this.regiondata.position + 130, y: bar.getBoundingClientRect().bottom,display:"block", time: this.regiondata.position, duration:this.regiondata.duration}); 
+            let removeFlyout = (e:PointerEvent) => {
+                 if (e.which === 1){
+                    console.log("wut"); 
+                    this.props.setFlyout({display:"none"});                 
+                    document.removeEventListener("pointerdown", removeFlyout); 
+                }
+            }; 
+            document.addEventListener("pointerdown", removeFlyout); 
+        }
     }
 
     @action
@@ -138,7 +123,10 @@ export class Keyframe extends React.Component<IProp> {
         e.preventDefault();
         e.stopPropagation();
         let left = this.findAdjacentRegion(Direction.left);
-        let right = this.findAdjacentRegion(Direction.right);
+        let right = this.findAdjacentRegion(Direction.right);        
+        let bar = this._bar.current!; 
+        let barX = bar.getBoundingClientRect().left;
+        let offset = e.clientX - barX;
         let futureX = this.regiondata.position + e.movementX;
         if (futureX <= 0) {
             this.regiondata.position = 0;
@@ -149,7 +137,6 @@ export class Keyframe extends React.Component<IProp> {
         } else {
             this.regiondata.position = futureX;
         }
-
     }
 
     @action
@@ -182,6 +169,7 @@ export class Keyframe extends React.Component<IProp> {
         document.addEventListener("pointermove", this.onDragResizeLeft);
         document.addEventListener("pointerup", () => {
             document.removeEventListener("pointermove", this.onDragResizeLeft);
+           
         });
     }
 
@@ -192,6 +180,7 @@ export class Keyframe extends React.Component<IProp> {
         document.addEventListener("pointermove", this.onDragResizeRight);
         document.addEventListener("pointerup", () => {
             document.removeEventListener("pointermove", this.onDragResizeRight);
+           
         });
     }
 
@@ -207,10 +196,7 @@ export class Keyframe extends React.Component<IProp> {
         this.regiondata.keyframes!.forEach(kf => {
             kf = kf as Doc;
             kf.time = NumCast(kf.time) + offset;
-        });
-        this._keyframes.forEach(num => {
-            num -= offset;
-        });
+        }); 
     }
 
 
@@ -244,28 +230,14 @@ export class Keyframe extends React.Component<IProp> {
         this.makeKeyData(position + mouse.offsetX);
     }
 
-    @action
-    onMenuHover = (e: React.PointerEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (this._display === "none") {
-            this._display = "grid";
-        } else {
-            this._display = "none";
-        }
-    }
-
 
 
     render() {
         return (
             <div>
-                <FlyoutInfoContext.Provider value={{
-                    position: this.position,
-                    fadeOut: this.fadeout,
-                    fadeIn: this.fadein
-                }}>
-                    <div className="bar" ref={this._bar} style={{ transform: `translate(${this.regiondata.position}px)`, width: `${this.regiondata.duration}px` }} onPointerDown={this.onBarPointerDown} onDoubleClick={this.createKeyframe}>
+                    <div className="bar" ref={this._bar} style={{ transform: `translate(${this.regiondata.position}px)`, width: `${this.regiondata.duration}px` }} 
+                    onPointerDown={this.onBarPointerDown} 
+                    onDoubleClick={this.createKeyframe}>
                         <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
                         <div className="rightResize" onPointerDown={this.onResizeRight}></div>
                         <div className="fadeLeft" style={{ width: `${20}px` }}>{this.createDivider("left")}</div>
@@ -279,7 +251,6 @@ export class Keyframe extends React.Component<IProp> {
                         {this.createDivider("left")}
                         {this.createDivider("right")}
                     </div>
-                </FlyoutInfoContext.Provider>
             </div>
         );
     }
diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss
index d59ed1323..44b6cf03e 100644
--- a/src/client/views/nodes/Timeline.scss
+++ b/src/client/views/nodes/Timeline.scss
@@ -1,16 +1,32 @@
 @import "./../globalCssVariables.scss"; 
 
-.flyout{
-    position: absolute;
-    z-index: 9999;
-    background-color: black;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    min-width: 150px;
-    color: black;
-    top: 100px;
+.flyout-container{
+    background-color: transparent; 
+    position:absolute;         
+    z-index:9999; 
+    height: 150px; 
+    width: 150px; 
 
-    padding: 10px;
-    border-radius: 3px;
+    .flyout{
+        background-color: transparent; 
+        transform: rotate(180deg); 
+        left:0px; 
+        top:0px; 
+        width: 100%; 
+        height: 100%; 
+    }
+    div{ 
+        color: white; 
+        position:absolute; 
+        top:30px; 
+        left:0px;  
+    }
+    input{
+        position:absolute; 
+        width: 40px; 
+        right:0px; 
+    }
+   
 }
 
 .timeline-container{
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 02c2a530d..8050830fa 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -12,11 +12,18 @@ import { List } from "../../../new_fields/List";
 import { Self } from "../../../new_fields/FieldSymbols";
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircle, faPlayCircle, faBackward, faForward, faGripLines } from "@fortawesome/free-solid-svg-icons";
+import { faCircle, faPlayCircle, faBackward, faForward, faGripLines} from "@fortawesome/free-solid-svg-icons";
 import { DocumentContentsView } from "./DocumentContentsView";
-import { FlyoutInfoContext } from "./Keyframe";
 
 
+export interface FlyoutProps{
+    x?: number; 
+    y?: number; 
+    display?:string; 
+    time?:number; 
+    duration?:number; 
+}
+
 
 @observer
 export class Timeline extends CollectionSubView(Document) {
@@ -24,6 +31,7 @@ export class Timeline extends CollectionSubView(Document) {
     private readonly MIN_CONTAINER_HEIGHT: number = 205;
     private readonly MAX_CONTAINER_HEIGHT: number = 800;
 
+    @observable private _tickSpacing = 50; 
 
     @observable private _scrubberbox = React.createRef<HTMLDivElement>();
     @observable private _trackbox = React.createRef<HTMLDivElement>();
@@ -39,6 +47,7 @@ export class Timeline extends CollectionSubView(Document) {
     @observable private _infoContainer = React.createRef<HTMLDivElement>();
     @observable private _ticks: number[] = [];
 
+    @observable private flyoutInfo:FlyoutProps = {x:0, y:0,display:"none"}; 
 
 
     @action
@@ -207,25 +216,35 @@ export class Timeline extends CollectionSubView(Document) {
         this._containerHeight = 0;
     }
 
-    renderFlyout = ():JSX.Element => {        
-        // console.log("rendered"); 
 
-        // let data = React.useContext(FlyoutInfoContext);
-        return (
-            <div style ={{height:"100px", width:"100px", backgroundColor:"yellow", position:"absolute"}}>
-                <p>
-                    {/* {data.fadeIn} */}
-                </p>
-            </div>
-        );
+    @action
+    getFlyout = (props: FlyoutProps) => {    
+        for(const[k, v] of Object.entries(props)){
+            (this.flyoutInfo as any)[k] = v; 
+        }
+        
     }
 
-  
+
+    @action
+    onFlyoutDown = (e: React.PointerEvent) => {
+        console.log("clicked!"); 
+        this.flyoutInfo.display = "block"; 
+    }
 
 
     render() {
         return (
             <div className="timeline-container" style={{ height: `${this._containerHeight}px` }}>
+                <div className="flyout-container" style={{transform: `translate(${this.flyoutInfo.x}px, ${this.flyoutInfo.y}px)`, display:this.flyoutInfo.display}} onPointerDown={this.onFlyoutDown}>
+                    <FontAwesomeIcon className="flyout" icon="comment-alt" color="grey"/>
+                    <div>
+                        <p>Time:</p><input type="text" placeholder={`${Math.round(this.flyoutInfo.time! / this._tickSpacing * 1000)}ms`}/> 
+                        <p>Duration:</p><input type="text" placeholder={`${Math.round(this.flyoutInfo.duration! / this._tickSpacing * 1000)}ms`}/> 
+                        <p>Fade-in</p>
+                        <p>Fade-out</p>
+                    </div>
+                </div>
                 <div className="toolbox">
                     <div onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div>
                     <div onClick={this.onPlay}> <FontAwesomeIcon icon={faPlayCircle} size="2x" /> </div>
@@ -239,7 +258,7 @@ export class Timeline extends CollectionSubView(Document) {
                   
                     <div className="scrubberbox" ref={this._scrubberbox} onClick={this.onScrubberClick}>
                         {this._ticks.map(element => {
-                            return <div className="tick" style={{ transform: `translate(${element / 20}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toTime(element)}</p></div>;
+                            return <div className="tick" style={{ transform: `translate(${element/1000 * this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toTime(element)}</p></div>;
                         })}
                     </div>
                     <div className="scrubber" onPointerDown={this.onScrubberDown} style={{ transform: `translate(${this._currentBarX}px)` }}>
@@ -247,7 +266,7 @@ export class Timeline extends CollectionSubView(Document) {
                     </div>
                     <div className="trackbox" ref={this._trackbox} onPointerDown={this.onPanDown}>
                         {this._nodes.map(doc => {
-                            return <Track node={(doc as any).value() as Doc} currentBarX={this._currentBarX} />;
+                            return <Track node={(doc as any).value() as Doc} currentBarX={this._currentBarX} setFlyout={this.getFlyout} />;
                         })}
                     </div>
                 </div>
@@ -261,14 +280,6 @@ export class Timeline extends CollectionSubView(Document) {
                 <div onPointerDown={this.onResizeDown}>
                     <FontAwesomeIcon className="resize" icon={faGripLines} />
                 </div>  
-                <FlyoutInfoContext.Consumer>
-                    {value => (
-                    <div style ={{height:"100px", width:"100px", backgroundColor:"yellow", position:"absolute"}}>
-                        <p>
-                            {value.fadeIn}
-                        </p>
-                    </div>)}
-                </FlyoutInfoContext.Consumer>
             </div>
         );
     }
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index 957128040..94c0b5563 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -7,15 +7,17 @@ import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "..
 import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { Keyframe, RegionData } from "./Keyframe";
+import { FlyoutProps } from "./Timeline";
 
-interface IProp {
+interface IProps {
     node: Doc;
     currentBarX: number;
-    // setPosition: (position: number) => any;
+    setFlyout: (props:FlyoutProps) => any; 
 }
 
+
 @observer
-export class Track extends React.Component<IProp> {
+export class Track extends React.Component<IProps> {
     @observable private _inner = React.createRef<HTMLDivElement>();
 
     private _reactionDisposers: IReactionDisposer[] = [];
@@ -196,7 +198,7 @@ export class Track extends React.Component<IProp> {
                 <div className="track">
                     <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}>
                         {this.regions.map((region) => {
-                            return <Keyframe node={this.props.node} RegionData={region as Doc}/>;
+                            return <Keyframe node={this.props.node} RegionData={region as Doc} setFlyout={this.props.setFlyout}/>;
                         })}
                     </div>
                 </div>
-- 
cgit v1.2.3-70-g09d2