From 2665d93e729a75e44383e34d686ec666076c17ea Mon Sep 17 00:00:00 2001
From: loudonclear <loudon_cohen@brown.edu>
Date: Tue, 11 Jun 2019 13:30:28 -0400
Subject: changes

---
 src/client/views/nodes/Timeline.tsx | 103 +++++++++++++++++++++++++-----------
 1 file changed, 72 insertions(+), 31 deletions(-)

(limited to 'src/client/views/nodes/Timeline.tsx')

diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 6d041b03a..fd3707a50 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -9,8 +9,8 @@ import { DocumentViewProps, DocumentView } from "./DocumentView";
 import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
 import { Doc, DocListCastAsync } from "../../../new_fields/Doc";
 import { Document, listSpec, createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema";
-import { FieldValue, Cast, NumCast } from "../../../new_fields/Types";
-import { emptyStatement } from "babel-types";
+import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
+import { emptyStatement, thisExpression } from "babel-types";
 import { DocumentManager } from "../../util/DocumentManager";
 import { SelectionManager } from "../../util/SelectionManager";
 import { List } from "../../../new_fields/List";
@@ -47,20 +47,22 @@ export class Timeline extends CollectionSubView(Document) {
 
     @observable private _isRecording: Boolean = false;
     private _reactionDisposers: IReactionDisposer[] = [];
+    private _selectionManagerChanged?: IReactionDisposer;
 
     @observable private _currentBarX: number = 0;
     @observable private _keys = ["x", "y"];
     @observable private _data: Doc[] = []; // 1D list of nodes
     @observable private _keyframes: Doc[][] = []; //2D list of infos
-    @observable private _keyChanged = false;
-    @observable private _bars: HTMLDivElement[] = Array(1000); //////////////////////////////////////////////////////////////////////////change
+    @observable private _bars: { x: number, doc: Doc }[] = [];
+    @observable private _barMoved: boolean = false;
 
+    
     @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) {
@@ -75,7 +77,6 @@ export class Timeline extends CollectionSubView(Document) {
             }, async data => {
                 if (this._inner.current) {
                     if (!this._barMoved) {
-                        let bar; 
                         if (this._data.indexOf(node) === -1) {
                             this._data.push(node);
                             let index = this._data.indexOf(node);
@@ -84,15 +85,15 @@ export class Timeline extends CollectionSubView(Document) {
                             let info: Doc[] = new Array(1000); //kinda weird  
                             info[this._currentBarX] = timeandpos;
                             this._keyframes[index] = info;
-
-                            //graphical yellow bar
-                            bar = this.createBar(5, this._currentBarX, "yellow");
+                            this._bars = [];
+                            
+                            this._bars.push({ x: this._currentBarX, doc: node });
                         } else {
                             let index = this._data.indexOf(node);
                             if (this._keyframes[index][this._currentBarX] !== undefined) { //when node is in data, but doesn't have data for this specific time. 
                                 let timeandpos = this.setTimeAndPos(node);
-                                bar = this.createBar(5, this._currentBarX, "yellow");
                                 this._keyframes[index][this._currentBarX] = timeandpos;
+                                this._bars.push({ x: this._currentBarX, doc: node });
                             } else { //when node is in data, and has data for this specific time
                                 let timeandpos = this.setTimeAndPos(node);
                                 this._keyframes[index][this._currentBarX] = timeandpos;
@@ -103,6 +104,8 @@ export class Timeline extends CollectionSubView(Document) {
             });
         };
 
+
+
         observe(childrenList as IObservableArray<Doc>, change => {
             if (change.type === "update") {
                 this._reactionDisposers[change.index]();
@@ -116,6 +119,7 @@ export class Timeline extends CollectionSubView(Document) {
 
     }
 
+    @action
     setTimeAndPos = (node: Doc) => {
         let pos: Position = Position(node);
         let timeandpos = new Doc();
@@ -162,6 +166,7 @@ export class Timeline extends CollectionSubView(Document) {
         });
     }
 
+    @action
     calcMinLeft = (kfList: Doc[], time: number): number => { //returns the time of the closet keyframe to the left
         let counter: number = Infinity;
         let leftMin: number = Infinity;
@@ -177,6 +182,10 @@ export class Timeline extends CollectionSubView(Document) {
         return leftMin;
     }
 
+    /**
+     * calculates the 
+     */
+    @action
     calcMinRight = (kfList: Doc[], time: number): number => { //returns the time of the closest keyframe to the right 
         let counter: number = Infinity;
         let rightMin: number = Infinity;
@@ -196,7 +205,9 @@ export class Timeline extends CollectionSubView(Document) {
     /**
      * Linearly interpolates a document from time1 to time2 
      * @param Doc that needs to be modified
-     * @param  
+     * @param  kf1 timeandposition of the first yellow bar
+     * @param kf2 timeandposition of the second yellow bar
+     * @param time time that you want to interpolate
      */
     @action
     interpolate = async (doc: Doc, kf1: TimeAndPosition, kf2: TimeAndPosition, time: number) => {
@@ -213,18 +224,22 @@ export class Timeline extends CollectionSubView(Document) {
         });
     }
 
-    private _barMoved: boolean = false;
+    /**
+     * when user lifts the pointer. Removes pointer move event and no longer tracks green bar moving
+     * @param e react pointer event
+     */
     @action
     onInnerPointerUp = (e: React.PointerEvent) => {
         if (this._inner.current) {
             this._barMoved = false;
             this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
         }
-        this._data.forEach((node) => {
-            console.log(node.y);
-        });
     }
 
+    /**
+     * called when user clicks on a certain part of the inner. This will move the green bar to that position. 
+     * @param e react pointer event
+     */
     @action
     onInnerPointerDown = (e: React.PointerEvent) => {
         e.preventDefault();
@@ -235,7 +250,7 @@ export class Timeline extends CollectionSubView(Document) {
                 let mouse = e.nativeEvent;
                 let offsetX = Math.round(mouse.offsetX);
                 this._currentBarX = offsetX;
-                this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove); //reset
+                this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
                 this._inner.current.addEventListener("pointermove", this.onInnerPointerMove);
                 this.timeChange(this._currentBarX);
             }
@@ -243,54 +258,71 @@ export class Timeline extends CollectionSubView(Document) {
         }
     }
 
+    /**
+     * Called when you drag the green bar across the inner div. 
+     * @param e pointer event
+     */
     @action
     onInnerPointerMove = (e: PointerEvent) => {
         e.preventDefault();
         e.stopPropagation();
         this._barMoved = true;
-        let offsetX = Math.round(e.offsetX);
+        let offsetX = Math.round(e.offsetX); //currentbarX is rounded so it is indexable
         this._currentBarX = offsetX;
         this.timeChange(this._currentBarX);
     }
 
-    createBar = (width: number, pos: number = 0, color: string = "green"):JSX.Element => {
+    /**
+     * creates JSX bar element. 
+     * @param width required: the thickness of the bar
+     * @param pos optional: the position of the bar
+     * @param color option: default is green, but you can choose other colors
+     */
+    @action
+    createBar = (width: number, pos: number = 0, color: string = "green"): JSX.Element => {
         return (
             <div style={{
                 height: "100%",
                 width: `${width}px`,
-                backgroundColor: color, 
-                transform: `translate(${pos}px)`, 
+                backgroundColor: color,
+                transform: `translate(${pos}px)`,
                 position: "absolute",
                 pointerEvents: "none"
             }}></div>
         );
     }
 
+    /**
+     * 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
+     */
+    @action
     onTimeEntered = (e: React.KeyboardEvent) => {
         if (this._timeInput.current) {
             if (e.keyCode === 13) {
                 let input = parseInt(this._timeInput.current.value) || 0;
                 this._currentBarX = input;
+                this.timeChange(input);
             }
         }
     }
 
-    componentDidMount() {
-        
-        let doc: Doc = this.props.Document;
-        let test = this.props.Document[this.props.fieldKey];
-
-    }
-
+    /**
+     * removes reaction when the component is removed from the timeline
+     */
     componentWillUnmount() {
         this._reactionDisposers.forEach(disp => disp());
         this._reactionDisposers = [];
     }
 
+
+    /**
+     * Displays yellow bars per node when selected
+     */
     @action
-    displayKeyFrames = (dv: DocumentView) => {
-        let doc: Doc = dv.props.Document;
+    displayKeyFrames = (doc: Doc) => {
         let views: (JSX.Element | null)[] = [];
+        //this._bar = undefined; 
         this._data.forEach((node, i) => {
             if (node === doc) {
                 views = this._keyframes[i].map(tp => {
@@ -307,18 +339,27 @@ export class Timeline extends CollectionSubView(Document) {
         return views;
     }
 
+    // @action 
+    // currentKeyFrames = (doc?:Doc) => {
+    //     this.displayKeyFrames(doc!); 
+    // }
+
     render() {
         return (
             <div>
                 <div className="timeline-container">
                     <div className="timeline">
                         <div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown} onPointerUp={this.onInnerPointerUp}>
-                            {SelectionManager.SelectedDocuments().map((dv) => this.displayKeyFrames(dv))}
+                            {SelectionManager.SelectedDocuments().map(dv => this.displayKeyFrames(dv.props.Document))}
+                            {this._bars.map((data) => {
+                                return this.createBar(5, data.x, "yellow"); 
+                            })}
                             {this.createBar(5, this._currentBarX)}
+
                         </div>
                     </div>
                     <button onClick={this.onRecord}>Record</button>
-                    <input placeholder="Time" ref={this._timeInput} onKeyDown={this.onTimeEntered}></input>
+                    <input placeholder={this._currentBarX.toString()} ref={this._timeInput} onKeyDown={this.onTimeEntered} ></input>
                 </div>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2

