5 files changed, 188 insertions, 0 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 17c25c9db..d81a340b0 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -18,6 +18,8 @@ import "./CollectionFreeFormView.scss";
 import { MarqueeView } from "./MarqueeView";
 import React = require("react");
 import v5 = require("uuid/v5");
+// import { BooleanField } from "../../../../fields/BooleanField";
+import { Timeline } from "../../nodes/Timeline";
 import { createSchema, makeInterface, listSpec } from "../../../../new_fields/Schema";
 import { Doc, WidthSym, HeightSym } from "../../../../new_fields/Doc";
 import { FieldValue, Cast, NumCast } from "../../../../new_fields/Types";
@@ -318,6 +320,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                     </CollectionFreeFormViewPannableContents>
                     <CollectionFreeFormOverlayView {...this.getDocumentViewProps(this.props.Document)} {...this.props} />
                 </MarqueeView>
+                <Timeline {...this.props} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/KeyFrame.tsx b/src/client/views/nodes/KeyFrame.tsx
new file mode 100644
index 000000000..0f0615c5a
--- /dev/null
+++ b/src/client/views/nodes/KeyFrame.tsx
@@ -0,0 +1,17 @@
+import { Document } from '../../../fields/Document';
+
+export class KeyFrame {
+    private _document: any;
+    constructor() {
+        this._document = new Document();
+
+
+    }
+
+    get document() {
+        console.log(this._document);
+        return this._document;
+
+    }
+
+}
+\ No newline at end of file
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index eb45ea273..14cbed04c 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -84,6 +84,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     componentWillUnmount() {
         if (this._reactionDisposer) {
             this._reactionDisposer();
+            this._reactionDisposer = undefined;
         }
     }
 
diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss
new file mode 100644
index 000000000..d16f3b4ee
--- /dev/null
+++ b/src/client/views/nodes/Timeline.scss
@@ -0,0 +1,41 @@
+.timeline-container {
+    height: 100px;
+    width: 500px;
+    background-color: rgb(160, 226, 243);
+    position: absolute;
+    left: 15%;
+    top: 1%;
+    font-size: 75%;
+
+    .timeline {
+        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;
+    }
+
+    button {
+        height: 30px;
+        width: 100px;
+        font-size: 1em;
+        position: relative;
+        margin: 5px;
+    }
+
+    input {
+        height: 30px;
+        width: 100px;
+        font-size: 1em;
+        margin: 5px;
+    }
+}
+\ No newline at end of file
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
new file mode 100644
index 000000000..14bcd738f
--- /dev/null
+++ b/src/client/views/nodes/Timeline.tsx
@@ -0,0 +1,126 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { observer } from "mobx-react";
+import { observable, reaction, action, IReactionDisposer, observe, IObservableArray } from "mobx";
+import "./Timeline.scss";
+import { KeyFrame } from "./KeyFrame";
+import { CollectionViewProps } from "../collections/CollectionBaseView";
+import { CollectionSubView, SubCollectionViewProps } from "../collections/CollectionSubView";
+import { DocumentViewProps } from "./DocumentView";
+
+import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
+import { Doc } from "../../../new_fields/Doc";
+import { Document } from "../../../new_fields/Schema";
+import { FieldValue } from "../../../new_fields/Types";
+
+@observer
+export class Timeline extends CollectionSubView(Document) {
+    @observable private _inner = React.createRef<HTMLDivElement>();
+    @observable private _isRecording: Boolean = false;
+    @observable private _currentBar: any = null;
+    @observable private _newBar: any = null;
+    private _reactionDisposers: IReactionDisposer[] = [];
+    private _keyFrames: KeyFrame[] = [];
+    private _keyBars: HTMLDivElement[] = [];
+    private _actualKeyFrame: KeyFrame[] = [];
+
+    private _currentBarX: number = 0;
+    @observable private _onBar: Boolean = false;
+
+
+    @action
+    onRecord = (e: React.MouseEvent) => {
+        this._isRecording = true;
+    }
+
+    @action
+    onStop = (e: React.MouseEvent) => {
+    }
+
+    @action
+    onInnerPointerDown = (e: React.PointerEvent) => {
+        if (this._isRecording) {
+            if (this._inner.current) {
+                let mouse = e.nativeEvent;
+                this._currentBar.style.transform = `translate(${mouse.offsetX}px)`;
+                this._currentBarX = mouse.offsetX;
+                console.log(mouse.offsetX);
+            }
+        }
+    }
+
+    createBar = (width: number, pos = 0, color = "green"): HTMLDivElement => {
+        let bar = document.createElement("div");
+        bar.style.height = "100%";
+        bar.style.width = `${width}px`;
+        bar.style.left = "mouse.offsetX";
+        bar.style.backgroundColor = color;
+        bar.style.transform = `translate(${pos}px)`;
+        bar.style.position = "absolute";
+        bar.style.zIndex = "2";
+        return bar;
+    }
+    componentDidMount() {
+        if (this._inner.current && this._currentBar === null) {
+            this._currentBar = this.createBar(5);
+            this._inner.current.appendChild(this._currentBar);
+        }
+        let doc: Document = this.props.Document;
+        let childrenList = this.children;
+        // let keyFrame = new KeyFrame(); //should not be done here...
+        // this._keyFrames.push(keyFrame)";
+        let keys = ["x", "y"];
+        const addReaction = (element: Document) => {
+            return reaction(() => {
+
+                return keys.map(key => FieldValue(element[key]));
+            }, data => {
+                if (this._inner.current) {
+                    let keyFrame: KeyFrame;
+                    if (!this._keyBars[this._currentBarX]) {
+                        let bar = this.createBar(5, this._currentBarX, "orange");
+                        this._inner.current.appendChild(bar);
+                        this._keyBars[this._currentBarX] = bar;
+                        keyFrame = new KeyFrame();
+                        this._keyFrames[this._currentBarX] = keyFrame;
+                    } else {
+                        keyFrame = this._keyFrames[this._currentBarX];
+                    }
+                    keys.forEach((key, index) => {
+                        keyFrame.document[key] = data[index];
+                    });
+                }
+            });
+        };
+        observe(childrenList as IObservableArray<Document>, change => {
+            if (change.type === "update") {
+                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());
+            }
+        }, true);
+    }
+
+    componentWillUnmount() {
+        this._reactionDisposers.forEach(disp => disp());
+        this._reactionDisposers = [];
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="timeline-container">
+                    <div className="timeline">
+                        <div className="inner" ref={this._inner} onPointerDown={this.onInnerPointerDown}>
+                        </div>
+                    </div>
+                    <button onClick={this.onRecord}>Record</button>
+                    {/* <button onClick={this.onStop}>Stop</button> */}
+                    <input placeholder="Time"></input>
+                </div>
+            </div>
+        );
+    }
+}
+\ No newline at end of file