Fixed Bugs, Timeline Movement, improved interpolation, organization

4 files changed, 67 insertions, 42 deletions

diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index d992b1c44..122bcb36e 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -52,13 +52,8 @@ export namespace KeyframeFunc{
         regiondata.position = 0;
         regiondata.fadeIn = 20; 
         regiondata.fadeOut = 20; 
-        regiondata.keyframes = new List<Doc>();
         return regiondata; 
     }; 
-
-    export const compareKeyframe = (propsNode: Doc, kf: Doc) => {
-        
-    };
 }
 
 
@@ -94,6 +89,14 @@ export class Keyframe extends React.Component<IProps> {
         return Cast(this.props.node.regions, listSpec(Doc)) as List<Doc>;
     }    
 
+
+    componentWillMount(){
+        if (!this.regiondata.keyframes){
+            this.regiondata.keyframes = new List<Doc>(); 
+        }
+    }
+
+
     @action
     componentDidMount() {
         let fadeIn = this.makeKeyData(this.regiondata.position + this.regiondata.fadeIn, KeyframeFunc.KeyframeType.fade)!; 
@@ -121,12 +124,12 @@ export class Keyframe extends React.Component<IProps> {
                 this.regiondata.keyframes![fadeOutIndex] =  fadeOut;  
                 this.regiondata.keyframes![startIndex] = start; 
                 this.regiondata.keyframes![finishIndex] = finish;
-               
                 this.forceUpdate(); 
             }
         }); 
     }
 
+    
     componentWillUnmount() {
 
     }
@@ -286,7 +289,6 @@ 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(); 
-                    console.log(toJS(kf.key)); 
                 }}></div>
             </div>);
         }
@@ -308,15 +310,12 @@ export class Keyframe extends React.Component<IProps> {
                     e.stopPropagation(); 
                     let offsetLeft = this._bar.current!.getBoundingClientRect().left - this._bar.current!.parentElement!.getBoundingClientRect().left; 
                     let offsetTop = this._bar.current!.getBoundingClientRect().top; //+ this._bar.current!.parentElement!.getBoundingClientRect().top; 
-                    this.props.setFlyout({x:offsetLeft, y: offsetTop, display:"block", regiondata:this.regiondata, regions:this.regions}); 
-                })}>
+                    this.props.setFlyout({x:offsetLeft, y: offsetTop, display:"block", regiondata:this.regiondata, regions:this.regions}); })}>
                     <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
                     <div className="rightResize" onPointerDown={this.onResizeRight}></div>
                     {this.regiondata.keyframes!.map(kf => {
                         return this.createKeyframeJSX(kf as Doc, (kf! as Doc).type as KeyframeFunc.KeyframeType); 
                     })}
-                    {this.createDivider(KeyframeFunc.Direction.left)}
-                    {this.createDivider(KeyframeFunc.Direction.right)}
                 </div>
             </div>
         );
diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss
index 0a510ba6e..c1317b16c 100644
--- a/src/client/views/nodes/Timeline.scss
+++ b/src/client/views/nodes/Timeline.scss
@@ -39,6 +39,14 @@
     }
 }
 
+.placement-highlight{
+    background-color:blue; 
+    transform: translate(0px, 0px); 
+    transition: width 1000ms ease-in-out; 
+    transition: height 1000ms ease-in-out;
+    position: absolute; 
+}
+
 .timeline-container{
     width:100%;
     height:300px; 
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index a9add619c..ee33245af 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -16,6 +16,8 @@ import { DocumentContentsView } from "./DocumentContentsView";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ContextMenu } from "../ContextMenu";
 import { string } from "prop-types";
+import { checkIfStateModificationsAreAllowed } from "mobx/lib/internal";
+import { SelectorContextMenu } from "../collections/ParentDocumentSelector";
 
 
 export interface FlyoutProps {
@@ -46,6 +48,7 @@ export class Timeline extends CollectionSubView(Document) {
     @observable private _durationInput = React.createRef<HTMLInputElement>();
     @observable private _fadeInInput = React.createRef<HTMLInputElement>();
     @observable private _fadeOutInput = React.createRef<HTMLInputElement>();
+    @observable private _timelineWrapper = React.createRef<HTMLDivElement>(); 
 
 
     @observable private _currentBarX: number = 0;
@@ -62,8 +65,8 @@ export class Timeline extends CollectionSubView(Document) {
     @observable private flyoutInfo: FlyoutProps = { x: 0, y: 0, display: "none", regiondata: new Doc(), regions: new List<Doc>() };
 
     private block = false;
-    componentWillMount() { 
-        console.log(this._ticks.length );
+    componentWillMount() {
+        console.log(this._ticks.length);
         runInAction(() => {
             //check if this is a video frame 
             for (let i = 0; i < this._time;) {
@@ -72,14 +75,15 @@ export class Timeline extends CollectionSubView(Document) {
             }
         });
     }
-    componentDidMount() {  
-        runInAction(() => {let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
+    componentDidMount() {
+        runInAction(() => {
+            let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
             if (!children) {
                 return;
             }
-            let childrenList = ((children[Self] as any).__fields) as List<Doc>;
-            this._nodes = (childrenList) as List<Doc>;
-        }); 
+            let childrenList = children;
+            this._nodes = childrenList;
+        });
         this.initialize();
     }
 
@@ -95,7 +99,7 @@ export class Timeline extends CollectionSubView(Document) {
     initialize = action(() => {
         let scrubber = this._scrubberbox.current!;
         this._boxLength = scrubber.getBoundingClientRect().width;
-       
+
 
         reaction(() => this._time, time => {
             let infoContainer = this._infoContainer.current!;
@@ -217,7 +221,7 @@ export class Timeline extends CollectionSubView(Document) {
         titleContainer.scrollTop = titleContainer.scrollTop - e.movementY;
     }
 
-    
+
     @action
     onResizeDown = (e: React.PointerEvent) => {
         e.preventDefault();
@@ -245,19 +249,23 @@ export class Timeline extends CollectionSubView(Document) {
     @action
     onTimelineDown = (e: React.PointerEvent) => {
         e.preventDefault();
-        e.stopPropagation();
-        document.addEventListener("pointermove", this.onTimelineMove);
-        document.addEventListener("pointerup", () => { document.removeEventListener("pointermove", this.onTimelineMove); });
+        //e.stopPropagation();
+        if (e.nativeEvent.which === 1){
+            document.addEventListener("pointermove", this.onTimelineMove);
+            document.addEventListener("pointerup", () => { document.removeEventListener("pointermove", this.onTimelineMove);});
+        } 
     }
 
     @action
     onTimelineMove = (e: PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        let timelineContainer = this._timelineContainer.current!;
-        timelineContainer.style.transform = `translate(${timelineContainer.getBoundingClientRect().left + 1}px, ${timelineContainer.getBoundingClientRect().top + 1}px)`;
-        console.log("mouse move!");
-        timelineContainer.style.width = "500px";
+        let timelineContainer = this._timelineWrapper.current!;
+        let left = parseFloat(timelineContainer.style.left!);
+        let top = parseFloat(timelineContainer.style.top!); 
+        timelineContainer.style.left = `${left + e.movementX}px`; 
+        timelineContainer.style.top = `${top + e.movementY}px`;
+        this.setPlacementHighlight(0, 0, 1000, 1000); // do something with setting the placement highlighting
     }
 
     @action
@@ -296,15 +304,22 @@ export class Timeline extends CollectionSubView(Document) {
 
     timelineContextMenu = (e: React.MouseEvent): void => {
         let subitems: ContextMenuProps[] = [];
-        let timelineContainer = this._timelineContainer.current!;
-        subitems.push({ description: "Pin to Top", event: action(() => { timelineContainer.style.transform = "translate(0px, 0px)"; }), icon: "pinterest" });
+        let timelineContainer = this._timelineWrapper.current!;
+        subitems.push({ description: "Pin to Top", event: action(() => { 
+            timelineContainer.style.transition = "top 1000ms ease-in, left 1000ms ease-in";  //?????
+            timelineContainer.style.left = "0px"; 
+            timelineContainer.style.top = "0px"; 
+            timelineContainer.style.transition = "none"; 
+
+
+        }), icon: "pinterest" });
         subitems.push({
             description: "Pin to Bottom", event: action(() => {
+                console.log(timelineContainer.getBoundingClientRect().bottom); 
                 timelineContainer.style.transform = `translate(0px, ${e.pageY - this._containerHeight}px)`;
             }), icon: "pinterest"
         });
         ContextMenu.Instance.addItem({ description: "Timeline Funcs...", subitems: subitems });
-
     }
 
     @action
@@ -355,10 +370,14 @@ export class Timeline extends CollectionSubView(Document) {
             }
         }
     }
+    private setPlacementHighlight = (x = 0, y = 0, height:(string| number) = 0, width:(string | number) = 0):JSX.Element => {
+        return <div className="placement-highlight" style ={{height: `${height}px`, width: `${width}px`, transform:`translate(${x}px, ${y}px)`}}></div>; 
+    }
 
     render() {
         return (
-            <div>
+            <div style={{left:"0px", top: "0px", position:"absolute", width:"100%", transform:"translate(0px, 0px)"}} ref = {this._timelineWrapper}>
+            {this.setPlacementHighlight(0,0,300,400)}
                 <button className="minimize" onClick={this.minimize}>Minimize</button>
                 <div className="flyout-container" style={{ left: `${this.flyoutInfo.x}px`, top: `${this.flyoutInfo.y}px`, display: `${this.flyoutInfo.display!}` }} onPointerDown={this.onFlyoutDown}>
                     <FontAwesomeIcon className="flyout" icon="comment-alt" color="grey" />
@@ -373,11 +392,10 @@ export class Timeline extends CollectionSubView(Document) {
                         <input ref={this._durationInput} type="text" placeholder={`${Math.round(NumCast(this.flyoutInfo.regiondata!.duration) / this._tickSpacing * 1000)}ms`} onKeyDown={this.changeDuration} />
                         <input ref={this._fadeInInput} type="text" placeholder={`${Math.round(NumCast(this.flyoutInfo.regiondata!.fadeIn))}ms`} onKeyDown={this.changeFadeIn} />
                         <input ref={this._fadeOutInput} type="text" placeholder={`${Math.round(NumCast(this.flyoutInfo.regiondata!.fadeOut))}ms`} onKeyDown={this.changeFadeOut} />
-
                     </div>
                     <button onClick={action((e: React.MouseEvent) => { this.flyoutInfo.regions!.splice(this.flyoutInfo.regions!.indexOf(this.flyoutInfo.regiondata!), 1); this.flyoutInfo.display = "none"; })}>delete</button>
                 </div>
-                <div className="timeline-container" style={{ height: `${this._containerHeight}px` }} ref={this._timelineContainer} onContextMenu={this.timelineContextMenu} >
+                <div className="timeline-container" style={{ height: `${this._containerHeight}px`, left:"0px", top:"0px" }} ref={this._timelineContainer}onPointerDown={this.onTimelineDown} onContextMenu={this.timelineContextMenu}>
                     <div className="toolbox">
                         <div onClick={this.windBackward}> <FontAwesomeIcon icon={faBackward} size="2x" /> </div>
                         <div onClick={this.onPlay}> <FontAwesomeIcon icon={faPlayCircle} size="2x" /> </div>
@@ -388,7 +406,6 @@ export class Timeline extends CollectionSubView(Document) {
                         </div> */}
                     </div>
                     <div className="info-container" ref={this._infoContainer}>
-
                         <div className="scrubberbox" ref={this._scrubberbox} onClick={this.onScrubberClick}>
                             {this._ticks.map(element => {
                                 return <div className="tick" style={{ transform: `translate(${element / 1000 * this._tickSpacing}px)`, position: "absolute", pointerEvents: "none" }}> <p>{this.toTime(element)}</p></div>;
@@ -398,15 +415,15 @@ export class Timeline extends CollectionSubView(Document) {
                             <div className="scrubberhead"></div>
                         </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} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} />;
+                            {DocListCast(this._nodes).map(doc => {
+                                return <Track node={doc} currentBarX={this._currentBarX} changeCurrentBarX={this.changeCurrentBarX} setFlyout={this.getFlyout} />;
                             })}
                         </div>
                     </div>
                     <div className="title-container" ref={this._titleContainer}>
-                        {this._nodes.map(doc => {
+                        {DocListCast(this._nodes).map(doc => {
                             return <div className="datapane">
-                                <p>{((doc as any).value() as Doc).title}</p>
+                                <p>{doc.title}</p>
                             </div>;
                         })}
                     </div>
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index c1c722d62..b00001e54 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -12,6 +12,7 @@ import { AddComparisonParameters } from "../../northstar/model/idea/idea";
 import { RichTextField } from "../../../new_fields/RichTextField";
 import { node } from "prop-types";
 import { NorthstarSettings } from "../../northstar/manager/Gateway";
+import { getForkTsCheckerWebpackPluginHooks } from "fork-ts-checker-webpack-plugin/lib/hooks";
 
 interface IProps {
     node: Doc;
@@ -35,14 +36,15 @@ export class Track extends React.Component<IProps> {
     }
 
     componentWillMount() {
-        this.props.node.regions = new List<Doc>();
+        if (!this.props.node.regions){
+            this.props.node.regions = new List<Doc>();
+        }
         this.props.node.opacity = 1; 
     }
 
     @action
     componentDidMount() {
         this.props.node.hidden = true;
-        this.props.node.opacity = 1;
 
         this._reactionDisposers.push(reaction(() => this.props.currentBarX, () => {
             let regiondata: (Doc | undefined) = this.findRegion(this.props.currentBarX);
@@ -102,7 +104,6 @@ export class Track extends React.Component<IProps> {
             this.filterKeys(Doc.allKeys(currentkf.key as Doc)).forEach(k => {
                 this.props.node[k] = (currentkf!.key as Doc)[k];  
             }); 
-            console.log("current"); 
         } else if (leftkf && rightkf) {
             this.interpolate(leftkf, rightkf);
         } else if (leftkf) {                
@@ -238,7 +239,7 @@ export class Track extends React.Component<IProps> {
             <div className="track-container">
                 <div className="track">
                     <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}>
-                        {this.regions.map((region) => {
+                        {DocListCast(this.regions).map((region) => {
                             return <Keyframe node={this.props.node} RegionData={region as Doc} changeCurrentBarX={this.props.changeCurrentBarX} setFlyout={this.props.setFlyout}/>;
                         })}
                     </div>