merging

1 files changed, 25 insertions, 8 deletions

diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
index 164a2db2c..3296aecff 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/nodes/Timeline.tsx
@@ -20,9 +20,13 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
     @observable private _currentBar: any = null;
     @observable private _newBar: any = null;
     private _reactionDisposers: IReactionDisposer[] = [];
-    private _keyFrames: HTMLDivElement[] = [];
+    private _keyFrames: KeyFrame[] = [];
+    private _keyBars: HTMLDivElement[] = [];
     private _actualKeyFrame: KeyFrame[] = [];
+
     private _currentBarX: number = 0;
+    @observable private _onBar: Boolean = false;
+
 
     @action
     onRecord = (e: React.MouseEvent) => {
@@ -30,12 +34,17 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
     }
 
     @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);
             }
         }
     }
@@ -48,9 +57,9 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
         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);
@@ -63,16 +72,24 @@ export class Timeline extends React.Component<SubCollectionViewProps> {
         let keys = [KeyStore.X, KeyStore.Y];
         const addReaction = (element: Document) => {
             return reaction(() => {
+
                 return keys.map(key => element.GetNumber(key, 0));
             }, data => {
-                let keyFrame = new KeyFrame();
                 if (this._inner.current) {
-                    this._inner.current.appendChild(this.createBar(5, this._currentBarX, "orange"));
+                    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.SetNumber(key, data[index]); //Tyler working on better Doc.ts functions...(this is currently not comprehensive...)
+                    });
                 }
-                keys.forEach((key, index) => {
-                    console.log("moved!"); //store key frames -> need to create a way to do this (data structure??)
-                    keyFrame.document().SetNumber(key, data[index]); //Tyler working on better Doc.ts functions...(this is currently not comprehensive...)
-                });
             });
         };
         observe(childrenList as IObservableArray<Document>, change => {