addable track

4 files changed, 149 insertions, 143 deletions

diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss
index 102515b6a..a7b0323ff 100644
--- a/src/client/views/nodes/Timeline.scss
+++ b/src/client/views/nodes/Timeline.scss
@@ -8,6 +8,19 @@
     .toolbox{
         padding-top:10px; 
     }
+    .scrubberbox{
+        z-index:10; 
+        background-color: black; 
+        height: 20px;
+        margin-left:calc(10% + 100px);
+        width: calc(80% - 100px); 
+        .scrubber{
+            z-index:10; 
+            height:300px; 
+            width: 5px; 
+            background-color:green; 
+        }
+    }
     .trackbox{
         height:60%;
         width:80%;
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index f18d8f2a0..91e308f89 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -3,21 +3,103 @@ import * as ReactDOM from "react-dom";
 import "./Timeline.scss"; 
 import { CollectionSubView } from "../collections/CollectionSubView";
 import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema";
-import { observer } from "mobx-react";
+import { observer} from "mobx-react";
 import { Track } from "./Track";
-
+import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, Reaction } from "mobx";
+import { Cast } from "../../../new_fields/Types";
+import { SelectionManager } from "../../util/SelectionManager";
+import { List } from "../../../new_fields/List";
+import { Self } from "../../../new_fields/FieldSymbols";
+import { Doc } from "../../../new_fields/Doc";
 
 @observer
 export class Timeline extends CollectionSubView(Document){
 
+    @observable private _scrubberbox = React.createRef<HTMLDivElement>()
+    @observable private _currentBarX:number = 0; 
+    @observable private _windSpeed:number = 1; 
+    @observable private _isPlaying:boolean = false; 
+    @observable private _boxLength:number = 0; 
+    @observable private _nodes:List<Doc> = new List<Doc>(); 
+    
+
+    private _reactionDisposers: IReactionDisposer[] = [];
+
+
+    @action
+    componentDidMount(){
+        let scrubber = this._scrubberbox.current!; 
+        this._boxLength = scrubber.getBoundingClientRect().width; 
+        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;
+    }
+
+    componentWillUnmount(){
+
+
+    }
+
+    @action
+    onPlay = async (e: React.MouseEvent) => {
+        if (this._isPlaying) {
+            this._isPlaying = false;
+        } else {
+            this._isPlaying = true;
+            this.changeCurrentX();
+        }
+    }
+
+    @action
+    changeCurrentX = () => {
+        if (this._currentBarX >= this._boxLength && this._isPlaying) {
+            this._currentBarX = 0;
+        }
+        if (this._currentBarX <= this._boxLength && this._isPlaying) {
+            this._currentBarX = this._currentBarX + this._windSpeed;
+            setTimeout(this.changeCurrentX, 15);
+        }
+    }
+
+    @action
+    windForward = (e: React.MouseEvent) => {
+        if (this._windSpeed < 64) { //max speed is 32
+            this._windSpeed = this._windSpeed * 2;
+        }
+    }
+
+    @action
+    windBackward = (e: React.MouseEvent) => {
+        if (this._windSpeed > 1 / 16) { // min speed is 1/8
+            this._windSpeed = this._windSpeed / 2;
+        }
+    }
+
+    @action 
+    onScrubberDown = (e:React.PointerEvent) => {
+        let scrubberbox = this._scrubberbox.current!;
+        let left = scrubberbox.getBoundingClientRect().left;
+        let offsetX = Math.round(e.clientX - left);
+        this._currentBarX = offsetX; 
+    }
+
+
     render(){
         return (
             <div className="timeline-container">
                 <div className="toolbox">
-                    <button> Play </button>
+                <button onClick={this.windBackward}> {"<"}  </button>
+                    <button onClick={this.onPlay}> Play </button>
+                    <button onClick={this.windForward}> {">"} </button>
+                </div>  
+                <div className="scrubberbox" onPointerDown={this.onScrubberDown} ref ={this._scrubberbox}>
+                    <div className="scrubber" style={{transform:`translate(${this._currentBarX}px)`}}></div>
                 </div>
                 <div className="trackbox">
-                    <Track {...this.props}/>
+                    {this._nodes.map(doc => {return <Track {...this.props}/>})}
                 </div> 
             </div>
         ); 
diff --git a/src/client/views/nodes/Track.scss b/src/client/views/nodes/Track.scss
index 9c6ab08f0..e922aa1df 100644
--- a/src/client/views/nodes/Track.scss
+++ b/src/client/views/nodes/Track.scss
@@ -1,42 +1,26 @@
-.track-container {
-    height: 100px;
-    width: 500px;
-    background-color: rgb(160, 226, 243);
-    position: absolute;
-    left: 15%;
-    top: 1%;
-    font-size: 75%;
+@import "./../globalCssVariables.scss"; 
 
-    .track {
-        height: 60px;
-        width: 500px;
-        bottom: 0px;
-        background-color: grey;
-        position: absolute;
-    }
-
-    .inner {
-        height: 44px;
-        width: 484px;
-        background-color: black;
-        //opacity: 0.5; 
-        position: absolute;
-        margin: 8px;
-        z-index: 10; 
+.track-container{
+   
+    .datapane{
+        top:0px; 
+        width: 100px; 
+        height: 100px; 
+        background-color: $light-color-secondary; 
+        position:relative; 
+        float:left; 
+        border-style:solid; 
     }
 
-    button {
-        height: 30px;
-        width: 50px;
-        font-size: 1em;
-        position: relative;
-        margin: 5px;
-    }
-
-    input {
-        height: 30px;
-        width: 100px;
-        font-size: 1em;
-        margin: 5px;
+    .track {
+        .inner {  
+            top:0px; 
+            float:right; 
+            height: 100px;
+            width: calc(100% - 100px); 
+            background-color: $light-color;     
+            border-style:solid;        
+            position:relative; 
+        }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/nodes/Track.tsx
index 3f840db78..4ea98c35e 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/nodes/Track.tsx
@@ -43,6 +43,7 @@ type TimeAndPosition = makeInterface<[typeof TimeAndPositionSchema]>;
 const TimeAndPosition = makeInterface(TimeAndPositionSchema);
 
 
+
 @observer
 export class Track extends CollectionSubView(Document) {
     @observable private _inner = React.createRef<HTMLDivElement>();
@@ -50,7 +51,6 @@ export class Track extends CollectionSubView(Document) {
     @observable private _playButton = React.createRef<HTMLButtonElement>();
 
     @observable private _isRecording: Boolean = false;
-    @observable private _windSpeed: number = 1;
     private _reactionDisposers: IReactionDisposer[] = [];
     private _selectionManagerChanged?: IReactionDisposer;
 
@@ -75,11 +75,7 @@ export class Track extends CollectionSubView(Document) {
      */
     @action
     onRecord = (e: React.MouseEvent) => {
-        if (this._isRecording === true) {
-            this._isRecording = false;
-            return;
-        }
-        this._isRecording = true;
+       
         let children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
         if (!children) {
             return;
@@ -277,54 +273,8 @@ export class Track extends CollectionSubView(Document) {
         });
     }
 
-    
-
-    @observable private _isPlaying = false;
-
-    @action
-    onPlay = async (e: React.MouseEvent) => {
-        let playButton: HTMLButtonElement = (await this._playButton.current)!;
-        if (this._isPlaying) {
-            playButton.innerHTML = "Play";
-            this._isPlaying = false;
-            this._barMoved = false;
-        } else {
-            playButton.innerHTML = "Stop";
-            this._barMoved = true;
-            this._isPlaying = true;
-            this.changeCurrentX();
-        }
-
-    }
-
-
-    @action
-    changeCurrentX = () => {
-        if (this._currentBarX >= this._length && this._isPlaying === true) {
-            this._currentBarX = 0;
-        }
-        if (this._currentBarX <= this._length && this._isPlaying === true) { ///////////////////////////////////////////////////////////////////////////// needs to be width 
-            this._currentBarX = this._currentBarX + this._windSpeed;
-            setTimeout(this.changeCurrentX, 15);
-            this.timeChange(this._currentBarX);
-        }
-    }
 
 
-    @action
-    windForward = (e: React.MouseEvent) => {
-        if (this._windSpeed < 64) { //max speed is 32
-            this._windSpeed = this._windSpeed * 2;
-        }
-    }
-
-    @action
-    windBackward = (e: React.MouseEvent) => {
-        if (this._windSpeed > 1 / 16) { // min speed is 1/8
-            this._windSpeed = this._windSpeed / 2;
-        }
-    }
-
     /**
      * called when you input a certain time on the input bar and press enter. The green bar will move to that location. 
      * @param e keyboard event
@@ -340,26 +290,8 @@ export class Track extends CollectionSubView(Document) {
         }
     }
 
-
-    @action 
-    timer = (sec:number) => {
-        if(sec <= 0){
-            return; 
-        }  
-        setTimeout(() => {
-            this.timer(sec - 1);
-            this._timer = sec; 
-            //dconsole.log(this._timer); 
-        }, 1000);     
-    }
-
     @observable private _timer:number = 0; 
     async componentDidMount() {
-        this.timer(100); 
-        console.log(toJS(this.props.Document.proto) || null);
-        if (this._inner.current){
-            console.log(this._inner.current.getBoundingClientRect().width); 
-        }
         if (!this._keyframes) {
             this.props.Document.keyframes = new List<List<Doc>>();
         }
@@ -401,9 +333,9 @@ export class Track extends CollectionSubView(Document) {
         e.preventDefault(); 
         e.stopPropagation();
         if (this._inner.current) {
-            if (!this._isPlaying) {
-                this._barMoved = false;
-            }
+            // if (!this._isPlaying) {
+            //     this._barMoved = false;
+            // }
             this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
         }
     }
@@ -417,19 +349,17 @@ export class Track extends CollectionSubView(Document) {
         e.preventDefault();
         e.stopPropagation();
         console.log("on timeline"); 
-        if (this._isRecording) {
-            if (this._inner.current) {
-                this._barMoved = true;
-                // let mouse = e.nativeEvent;
-                // let offsetX = Math.round(mouse.offsetX);
-                let left = this._inner.current.getBoundingClientRect().left;
-                let offsetX = Math.round(e.clientX - left);
-                console.log(offsetX);
-                this._currentBarX = offsetX;
-                this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
-                this._inner.current.addEventListener("pointermove", this.onInnerPointerMove);
-                this.timeChange(this._currentBarX);
-            }
+        if (this._inner.current) {
+            this._barMoved = true;
+            // let mouse = e.nativeEvent;
+            // let offsetX = Math.round(mouse.offsetX);
+            let left = this._inner.current.getBoundingClientRect().left;
+            let offsetX = Math.round(e.clientX - left);
+            //this._currentBarX = offsetX;
+            this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
+            this._inner.current.addEventListener("pointermove", this.onInnerPointerMove);
+            this.timeChange(this._currentBarX);
+        
 
         }
     }
@@ -457,24 +387,21 @@ export class Track extends CollectionSubView(Document) {
 
     render() {
         return (
-            <div>
-                <div className="track-container">
-                    <div className="track">
-                        <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp}>
-                            {SelectionManager.SelectedDocuments().map(dv => this.displayKeyFrames(dv.props.Document))}
-                            {this._bars.map((data) => {
-                                return <Keyframe position={data.x} node={data.doc}></Keyframe>;
-                            })}
-                            <Keyframe position={this._currentBarX} node={this.props.Document}></Keyframe>
-                        </div>
+            <div className="track-container">
+                <div className="datapane">
+                    <h1>Certain node</h1>
+                </div>
+                <div className="track">
+                    <div className="inner" ref={this._inner} onDoubleClick={this.onInnerDoubleClick}>
+                        {SelectionManager.SelectedDocuments().map(dv => this.displayKeyFrames(dv.props.Document))}
+                        {this._bars.map((data) => {
+                            return <Keyframe position={data.x} node={data.doc}></Keyframe>;
+                        })}
                     </div>
-                    <button onClick={this.onRecord}>Record</button>
-                    <input placeholder={this._currentBarX.toString()} ref={this._timeInput} onKeyDown={this.onTimeEntered} ></input>
-                    <button onClick={this.windBackward}> {"<"}</button>
-                    <button onClick={this.onPlay} ref={this._playButton}> Play </button>
-                    <button onClick={this.windForward}>{">"}</button>
-                    <button onClick={() => { console.log(this._data + " data, "); console.log(this._keyframes.length + " keyframes"); }}>data</button>
                 </div>
+                {/* <button onClick={this.onRecord}>Record</button>
+                <input placeholder={this._currentBarX.toString()} ref={this._timeInput} onKeyDown={this.onTimeEntered} ></input>
+                <button onClick={this.onPlay} ref={this._playButton}> Play </button>*/}
             </div>
         );
     }