1 files changed, 76 insertions, 12 deletions

diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 56976670f..9036b9d19 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -32,7 +32,7 @@ const Position = makeInterface(PositionSchema);
 
 const TimeAndPositionSchema = createSchema({
     time: defaultSpec("number", 0),
-    position: Doc //Position
+    position: Doc
 });
 
 type TimeAndPosition = makeInterface<[typeof TimeAndPositionSchema]>;
@@ -54,11 +54,14 @@ export class Timeline extends CollectionSubView(Document) {
     @observable private _keys = ["x", "y"];
     @observable private _data: Doc[] = []; // 1D list of nodes
     @observable private _keyframes: Doc[][] = []; //2D list of infos
-
-    private tempdoc: any = null;
+    @observable private TEMPNUM = 0;
 
     @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) {
@@ -68,8 +71,6 @@ export class Timeline extends CollectionSubView(Document) {
 
         const addReaction = (node: Doc) => {
             node = (node as any).value();
-            this.tempdoc = node;
-
             return reaction(() => {
                 return this._keys.map(key => FieldValue(node[key]));
             }, async data => {
@@ -100,7 +101,6 @@ export class Timeline extends CollectionSubView(Document) {
                             }
                         }
                     }
-
                 }
             });
         };
@@ -110,6 +110,7 @@ export class Timeline extends CollectionSubView(Document) {
                 this._reactionDisposers[change.index]();
                 this._reactionDisposers[change.index] = addReaction(change.newValue);
             } else {
+
                 let removed = this._reactionDisposers.splice(change.index, change.removedCount, ...change.added.map(addReaction));
                 removed.forEach(disp => disp());
             }
@@ -117,17 +118,51 @@ export class Timeline extends CollectionSubView(Document) {
 
     }
 
+    storeKeyChange = (node: Doc) => {
+        if (this._inner.current) {
+            if (!this._barMoved) {
+                if (this._data.indexOf(node) === -1) {
+                    const kf = new List();
+                    this._data.push(node);
+                    let index = this._data.indexOf(node);
+                    let timeandpos = this.setTimeAndPos(node);
+
+                    let info: Doc[] = new Array(1000); //////////////////////////////////////////////////// do something  
+                    info[this._currentBarX] = timeandpos;
+
+                    this._keyframes[index] = info;
+
+                    //graphical yellow bar
+                    let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
+                    this._inner.current.appendChild(bar);
+                } 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);
+                        this._keyframes[index][this._currentBarX] = timeandpos;
+                        let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
+                        this._inner.current.appendChild(bar);
+                    } else { //when node is in data, and has data for this specific time
+                        let timeandpos = this.setTimeAndPos(node);
+                        this._keyframes[index][this._currentBarX] = timeandpos;
+
+                    }
+                }
+            }
+
+        }
+    }
+
     setTimeAndPos = (node: Doc) => {
         let pos: Position = Position(node);
-        let timeandpos = new Doc;
-        const newPos = new Doc;
+        let timeandpos = new Doc();
+        const newPos = new Doc();
         this._keys.forEach(key => newPos[key] = pos[key]);
         timeandpos.position = newPos;
         timeandpos.time = this._currentBarX;
         return timeandpos;
     }
 
-
     @action
     timeChange = async (time: number) => {
         const docs = this._data;
@@ -222,6 +257,9 @@ export class Timeline extends CollectionSubView(Document) {
             this._barMoved = false;
             this._inner.current.removeEventListener("pointermove", this.onInnerPointerMove);
         }
+        this._data.forEach((node) => {
+            console.log(node.y);
+        });
     }
 
     @action
@@ -239,6 +277,7 @@ export class Timeline extends CollectionSubView(Document) {
                 this._inner.current.addEventListener("pointermove", this.onInnerPointerMove);
                 this.timeChange(this._currentBarX);
             }
+
         }
     }
 
@@ -291,12 +330,37 @@ export class Timeline extends CollectionSubView(Document) {
     }
 
     @action
-    displayKeyFrames = (dv: DocumentView) => {
-        // console.log(dv);
-        dv.props.Document;
+    displayKeyFrames = async (dv: DocumentView) => {
+        console.log("hi");
+        let doc: Doc = dv.props.Document;
+        let inner: HTMLDivElement = (await this._inner.current)!;
+        this._data.forEach((node) => {
+            if (node === doc) {
+                this.clearBars();
+                const index = this._data.indexOf(node);
+                this._keyframes[index].forEach((time) => {
+                    if (time !== undefined) {
+                        let timeandpos = TimeAndPosition(time);
+                        let bar: HTMLDivElement = this.createBar(5, this._currentBarX, "yellow");
+                        inner.appendChild(bar);
+                    }
+                });
+            }
+        });
 
     }
 
+    @action
+    clearBars = async () => {
+        let inner: HTMLDivElement = (await this._inner.current)!;
+        inner.childNodes.forEach((bar) => {
+            if (bar !== this._currentBar) {
+                inner.removeChild(bar);
+            }
+        });
+    }
+
+
     render() {
         return (
             <div>