some changes

4 files changed, 9 insertions, 139 deletions

diff --git a/src/client/views/animationtimeline/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 3c0d17796..dbc26e3d4 100644
--- a/src/client/views/animationtimeline/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -11,7 +11,6 @@ import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new
 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";
 import { Docs } from "../../documents/Documents";
 import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
@@ -509,22 +508,6 @@ export class Keyframe extends React.Component<IProps> {
             document.removeEventListener("pointerup", this.onReactionListen); 
         }
     }
-
-
-
-    /**
-     * 
-     * 
-     * TEMPORARY
-     * let items = [
-                                        TimelineMenu.Instance.addItem("button", "Show Data", () => {console.log(toJS(this.props.node));}), 
-                                        TimelineMenu.Instance.addItem("button", "Delete", () => {}), 
-                                        TimelineMenu.Instance.addItem("input", "Move", (val) => {console.log(val);})  
-                                    ]; 
-                                    TimelineMenu.Instance.addMenu("Keyframe", items); 
-                                    TimelineMenu.Instance.openMenu(e.clientX, e.clientY);
-     * 
-     */
     render() {
         return (
             <div>
@@ -537,13 +520,14 @@ export class Keyframe extends React.Component<IProps> {
                         return this.createKeyframeJSX(kf as Doc, (kf! as Doc).type as KeyframeFunc.KeyframeType);
                     })}
                     {this.keyframes.map( kf => {
-                       if(this.keyframes.indexOf(kf) !== this.keyframes.length - 1) {
+                       if(this.keyframes.indexOf(kf ) !== this.keyframes.length - 1) {
                             let left = this.keyframes[this.keyframes.indexOf(kf) + 1]; 
                             let bodyRef = React.createRef<HTMLDivElement>(); 
                             return (
                                 <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); }}
+                                onPointerDown={(e) => { this.props.changeCurrentBarX(NumCast(kf.time) + (e.clientX - bodyRef.current!.getBoundingClientRect().left) * this.props.transform.Scale);}}
                                 onContextMenu={(e) => {
                                     let items = [
                                         TimelineMenu.Instance.addItem("button", "Add Ease", () => {this.onContainerDown(kf, "interpolate");}),
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 7a6d9fa52..052e6e925 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -350,7 +350,6 @@ export class Timeline extends CollectionSubView(Document) {
             <div style={{ left: "0px", top: "0px", position: "absolute", width: "100%", transform: "translate(0px, 0px)" }} ref={this._timelineWrapper}>
                 <button className="minimize" onClick={this.minimize}>Minimize</button>
                 <div className="timeline-container" style={{ height: `${this._containerHeight}px`, left: "0px", top: "30px" }} ref={this._timelineContainer} onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}>
-                    <TimelineFlyout flyoutInfo={this.flyoutInfo} tickSpacing={this._tickSpacing}/>
                     <div className="toolbox">
                         <div onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div>
                         <div onClick={this.onPlay}> <FontAwesomeIcon icon={this._playButton} size="2x" /> </div>
@@ -383,12 +382,6 @@ export class Timeline extends CollectionSubView(Document) {
 }
 
 
-interface TimelineFlyoutProps {
-    flyoutInfo: FlyoutProps;
-    tickSpacing: number;
-
-}
-
 interface TimelineOverviewProps {
     currentBarX: number;
 }
@@ -412,116 +405,9 @@ class TimelineOverview extends React.Component<TimelineOverviewProps>{
     }
 }
 
-class TimelineFlyout extends React.Component<TimelineFlyoutProps>{
-
-    @observable private _timeInput = React.createRef<HTMLInputElement>();
-    @observable private _durationInput = React.createRef<HTMLInputElement>();
-    @observable private _fadeInInput = React.createRef<HTMLInputElement>();
-    @observable private _fadeOutInput = React.createRef<HTMLInputElement>();
-    @observable private  _data: FlyoutProps = { x: 0, y: 0, display: "none", regiondata: new Doc(), regions: new List<Doc>() };
-
-    private block = false;
-
-    componentDidMount() {
-        
-        document.addEventListener("pointerdown", this.closeFlyout);
-    }
-
-
-    componentWillUnmount() {
-        document.removeEventListener("pointerdown", this.closeFlyout);
-    }
-
-   
-    @action
-    changeTime = (e: React.KeyboardEvent) => {
-        let time = this._timeInput.current!;
-        if (e.keyCode === 13) {
-            if (!Number.isNaN(Number(time.value))) {
-                this.props.flyoutInfo.regiondata!.position = Number(time.value) / 1000 * this.props.tickSpacing;
-                time.placeholder = time.value + "ms";
-                time.value = "";
-            }
-        }
-    }
-    @action
-    onFlyoutDown = (e: React.PointerEvent) => {
-        this._data.display = "block";
-        this.block = true;
-    }
-
-    @action
-    closeFlyout = (e: PointerEvent) => {
-        if (this.block) {
-            this.block = false;
-            return;
-        }
-        this._data.display = "none";
-    }
-
-    @action
-    changeDuration = (e: React.KeyboardEvent) => {
-        let duration = this._durationInput.current!;
-        if (e.keyCode === 13) {
-            if (!Number.isNaN(Number(duration.value))) {
-                this.props.flyoutInfo.regiondata!.duration = Number(duration.value) / 1000 * this.props.tickSpacing;
-                duration.placeholder = duration.value + "ms";
-                duration.value = "";
-            }
-        }
-    }
-
-    @action
-    changeFadeIn = (e: React.KeyboardEvent) => {
-        let fadeIn = this._fadeInInput.current!;
-        if (e.keyCode === 13) {
-            if (!Number.isNaN(Number(fadeIn.value))) {
-                this.props.flyoutInfo.regiondata!.fadeIn = Number(fadeIn.value);
-                fadeIn.placeholder = fadeIn.value + "ms";
-                fadeIn.value = "";
-            }
-        }
-    }
-
-    @action
-    changeFadeOut = (e: React.KeyboardEvent) => {
-        let fadeOut = this._fadeOutInput.current!;
-        if (e.keyCode === 13) {
-            if (!Number.isNaN(Number(fadeOut.value))) {
-                this.props.flyoutInfo.regiondata!.fadeOut = Number(fadeOut.value);
-                fadeOut.placeholder = fadeOut.value + "ms";
-                fadeOut.value = "";
-            }
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="flyout-container" style={{ left: `${this._data.x}px`, top: `${this._data.y}px`, display: `${this._data.display!}` }} onPointerDown={this.onFlyoutDown}>
-                    <FontAwesomeIcon className="flyout" icon="comment-alt" color="grey" />
-                    <div className="text-container">
-                        <p>Time:</p>
-                        <p>Duration:</p>
-                        <p>Fade-in</p>
-                        <p>Fade-out</p>
-                    </div>
-                    <div className="input-container">
-                        <input ref={this._timeInput} type="text" placeholder={`${Math.round(NumCast(this.props.flyoutInfo.regiondata!.position) / this.props.tickSpacing * 1000)}ms`} onKeyDown={this.changeTime} />
-                        <input ref={this._durationInput} type="text" placeholder={`${Math.round(NumCast(this.props.flyoutInfo.regiondata!.duration) / this.props.tickSpacing * 1000)}ms`} onKeyDown={this.changeDuration} />
-                        <input ref={this._fadeInInput} type="text" placeholder={`${Math.round(NumCast(this.props.flyoutInfo.regiondata!.fadeIn))}ms`} onKeyDown={this.changeFadeIn} />
-                        <input ref={this._fadeOutInput} type="text" placeholder={`${Math.round(NumCast(this.props.flyoutInfo.regiondata!.fadeOut))}ms`} onKeyDown={this.changeFadeOut} />
-                    </div>
-                    <button onClick={action((e: React.MouseEvent) => { this.props.flyoutInfo.regions!.splice(this.props.flyoutInfo.regions!.indexOf(this.props.flyoutInfo.regiondata!), 1); this.props.flyoutInfo.display = "none"; })}>delete</button>
-                </div>
-            </div>
-        );
-    }
-}
 
 class TimelineZoom extends React.Component {
     componentDidMount() {
-
     }
     render() {
         return (
diff --git a/src/client/views/animationtimeline/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index 363ab4074..64e94f0f1 100644
--- a/src/client/views/animationtimeline/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -61,8 +61,7 @@ export class Track extends React.Component<IProps> {
         let keyframes:List<Doc> = (Cast(regiondata.keyframes, listSpec(Doc)) as List<Doc>); 
         let kfIndex:number = keyframes.indexOf(ref); 
         let kf = keyframes[kfIndex] as Doc; 
-        if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for fades
-            console.log("full keychange triggered"); 
+        if (kf.type === KeyframeFunc.KeyframeType.default) { // only save for non-fades
             kf.key = Doc.MakeCopy(this.props.node, true);
             let leftkf: (Doc | undefined) = await KeyframeFunc.calcMinLeft(regiondata!, this.props.currentBarX, kf); // lef keyframe, if it exists
             let rightkf: (Doc | undefined) = await KeyframeFunc.calcMinRight(regiondata!, this.props.currentBarX, kf); //right keyframe, if it exists
@@ -104,7 +103,6 @@ export class Track extends React.Component<IProps> {
     @action
     timeChange = async (time: number) => {
         if (this._isOnKeyframe && this._onKeyframe && this._onRegionData) { 
-            console.log("saving"); 
             await this.saveKeyframe(this._onKeyframe, this._onRegionData); 
         }
         let regiondata = await this.findRegion(Math.round(time)); //finds a region that the scrubber is on
@@ -169,9 +167,9 @@ export class Track extends React.Component<IProps> {
         return currentkf;
     }
 
+    
     @action
     interpolate = async (left: Doc, right: Doc, regiondata:Doc) => {
-        console.log("interpolating");
         let leftNode = left.key as Doc;
         let rightNode = right.key as Doc;
         const dif_time = NumCast(right.time) - NumCast(left.time);
@@ -226,8 +224,7 @@ export class Track extends React.Component<IProps> {
                         if (nodeData !== currentNodeData) {
                             this.props.node[key] = new RichTextField(nodeData); 
                         }
-                    }
-                    
+                    }    
                 } else if (key === "creationDate") {
 
                 } else {
diff --git a/src/client/views/graph/Graph.tsx b/src/client/views/graph/Graph.tsx
index 326f33358..d925cc32c 100644
--- a/src/client/views/graph/Graph.tsx
+++ b/src/client/views/graph/Graph.tsx
@@ -20,8 +20,11 @@ export class Graph extends CollectionSubView(Document) {
 
 
     render() {
+        let collection = <CollectionFreeFormView {...this.props}/>; 
+ 
         return (
-            <CollectionFreeFormView {...this.props}/>
+            <div>
+            </div>
             
         ); 
     }