interpolation

1 files changed, 70 insertions, 18 deletions

diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/nodes/Keyframe.tsx
index 2ed63a66e..352e5e0d7 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/nodes/Keyframe.tsx
@@ -4,9 +4,9 @@ import "./Keyframe.scss";
 import "./../globalCssVariables.scss"; 
 import { observer } from "mobx-react";
 import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS } from "mobx";
-import { Doc } from "../../../new_fields/Doc";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { auto } from "async";
-import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
+import { Cast, FieldValue, StrCast, NumCast } from "../../../new_fields/Types";
 import { StandardLonghandProperties } from "csstype";
 import { runInThisContext } from "vm";
 import { DateField } from "../../../new_fields/DateField";
@@ -15,41 +15,66 @@ import { DocumentView } from "./DocumentView";
 import { anchorPoints, Flyout } from "../TemplateMenu";
 import { LinkMenu } from "./LinkMenu";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
-import { node } from "prop-types";
+import { node, number } from "prop-types";
+import { List } from "../../../new_fields/List";
+import { createSchema, defaultSpec, makeInterface, listSpec } from "../../../new_fields/Schema";
+import { CollectionBaseView } from "../collections/CollectionBaseView";
+import { notDeepEqual } from "assert";
 
 
 
 
 interface IProp {
     node: Doc;
-    currentBarX: number; 
+    keyframedata: Doc;
 }
 
+const KeyDataSchema = createSchema({});  
+const TimeAndKeyDataSchema = createSchema({
+    time: defaultSpec("number", 0),
+    key: Doc
+});
+
+type KeyData = makeInterface<[typeof KeyDataSchema]>;
+type TimeAndKey = makeInterface<[typeof TimeAndKeyDataSchema]>;
+const KeyData = makeInterface(KeyDataSchema);
+const TimeAndKey = makeInterface(TimeAndKeyDataSchema);
+
+
+const KeyframeDataSchema = createSchema({
+    position: defaultSpec("number", 0),
+    duration: defaultSpec("number", 0),
+    kfs: listSpec(Doc)
+}); 
+
+type KeyframeData = makeInterface<[typeof KeyframeDataSchema]>;
+export const KeyframeData = makeInterface(KeyframeDataSchema); 
+
+
 @observer
 export class Keyframe extends React.Component<IProp> {
 
     @observable private _display:string = "none"; 
     @observable private _duration:number = 200; 
     @observable private _bar = React.createRef<HTMLDivElement>(); 
-    @observable private _data:Doc = new Doc(); 
-    @observable private _position:number = 0;   
     @observable private _keyframes:number[] = []; 
 
 
+    private _reactionDisposers: IReactionDisposer[] = [];
+    private _selectionManagerChanged?: IReactionDisposer;
+
+
 
     @action
     componentDidMount() {
-        this._position = this.props.node.position as number; 
-        reaction (() => this.props.currentBarX, () => {
-            console.log("reaction triggered!"); 
-            if (this.props.currentBarX  !== this._position){
-                this.props.node.hidden = true; 
-            } else {
-                this.props.node.hidden = false; 
-            }
-        }); 
         
-     }
+        // need edge case here when keyframe data already exists when loading.....................;
+        // let keyframes = Cast(this.props.node.keyframes, listSpec(Doc)) as List<Doc>;
+        // if keyframes.indexOf() 
+        
+        let keyframes = Cast(this.props.node.keyframes, listSpec(Doc)) as List<Doc>;     
+        keyframes.indexOf(this.props.keyframedata);
+    }
 
     componentWillUnmount() {
         
@@ -69,6 +94,31 @@ export class Keyframe extends React.Component<IProp> {
     //     //this._display = "none"; 
     // }
 
+    @computed
+    get keyframes() {
+        return Cast(this.props.node.keyframes, listSpec(Doc)) as List<Doc>;
+    }
+    @action 
+    makeKeyData = (kfpos: number) => { //Kfpos is mouse offsetX, representing time 
+        let hasData = false; 
+        let index = this.keyframes.indexOf(this.props.keyframedata); 
+        let kfd = KeyframeData(this.keyframes[index] as Doc); 
+        kfd.kfs!.forEach(TK => { //TK is TimeAndKey
+            TK = TK as Doc; 
+            if (TK.time === kfpos){
+                hasData = true; 
+            }
+        }); 
+        if (!hasData){
+            let TK:Doc = new Doc(); 
+            TK.time = kfpos; 
+            TK.key = this.props.node; 
+            kfd.kfs!.push(TK);
+            (this.keyframes[index] as Doc) = TK; 
+        } 
+        
+    }
+
     @action 
     onBarPointerDown = (e: React.PointerEvent) => {
         e.preventDefault(); 
@@ -149,14 +199,16 @@ export class Keyframe extends React.Component<IProp> {
     createKeyframe = (e: React.MouseEvent) => {
         e.preventDefault(); 
         e.stopPropagation(); 
-        let mouse = e.nativeEvent; 
+        let mouse = e.nativeEvent;
+        let position = NumCast(this.props.keyframedata.position);  
         this._keyframes.push(mouse.offsetX); 
+        this.makeKeyData(position); 
     }
 
     render() {
         return (
             <div>
-                <div className="bar" ref={this._bar} style={{ transform: `translate(${this._position}px)`, width:`${this._duration}px`}} onPointerDown={this.onBarPointerDown} onDoubleClick={this.createKeyframe}>
+                <div className="bar" ref={this._bar} style={{ transform: `translate(${this.props.keyframedata.position}px)`, width:`${this._duration}px`}} onPointerDown={this.onBarPointerDown} onDoubleClick={this.createKeyframe}>
                     <div className="leftResize" onPointerDown={this.onResizeLeft} ></div>
                     <div className="rightResize" onPointerDown={this.onResizeRight}></div>
                     {/* <div className="menubox" style={{display: this._display}}></div> */}