prosemirror

13 files changed, 130 insertions, 6 deletions

diff --git a/src/client/views/nodes/Keyframe.scss b/src/client/views/animationtimeline/Keyframe.scss
index b1e8b0b65..b1e8b0b65 100644
--- a/src/client/views/nodes/Keyframe.scss
+++ b/src/client/views/animationtimeline/Keyframe.scss
diff --git a/src/client/views/nodes/Keyframe.tsx b/src/client/views/animationtimeline/Keyframe.tsx
index 780928e77..995a5b402 100644
--- a/src/client/views/nodes/Keyframe.tsx
+++ b/src/client/views/animationtimeline/Keyframe.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import "./Keyframe.scss";
 import "./Timeline.scss";
-import "./../globalCssVariables.scss";
+import "../globalCssVariables.scss";
 import { observer, Observer } from "mobx-react";
 import { observable, reaction, action, IReactionDisposer, observe, IObservableArray, computed, toJS, isComputedProp, runInAction } from "mobx";
 import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
@@ -519,6 +519,7 @@ export class Keyframe extends React.Component<IProps> {
                     onContextMenu={action((e: React.MouseEvent) => {
                         e.preventDefault();
                         e.stopPropagation();
+                        console.log("has been clicked!"); 
                         let offsetLeft = this._bar.current!.getBoundingClientRect().left - this._bar.current!.parentElement!.getBoundingClientRect().left;
                         let offsetTop = this._bar.current!.getBoundingClientRect().top; //+ this._bar.current!.parentElement!.getBoundingClientRect().top; 
                         this.props.setFlyout({ x: offsetLeft * this.props.transform.Scale, y: offsetTop * this.props.transform.Scale, display: "block", regiondata: this.regiondata, regions: this.regions });
diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 47f448adb..47f448adb 100644
--- a/src/client/views/nodes/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index 923e99e63..d2714592e 100644
--- a/src/client/views/nodes/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -13,7 +13,7 @@ import { faPlayCircle, faBackward, faForward, faGripLines, faArrowUp, faArrowDow
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ContextMenu } from "../ContextMenu";
 import { DocumentManager } from "../../util/DocumentManager";
-import { VideoBox } from "./VideoBox";
+import { VideoBox } from "../nodes/VideoBox";
 import { VideoField } from "../../../new_fields/URLField";
 import { CollectionVideoView } from "../collections/CollectionVideoView";
 import { Transform } from "../../util/Transform";
diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/animationtimeline/TimelineMenu.scss
diff --git a/src/client/views/animationtimeline/TimelineMenu.tsx b/src/client/views/animationtimeline/TimelineMenu.tsx
new file mode 100644
index 000000000..e82075f6a
--- /dev/null
+++ b/src/client/views/animationtimeline/TimelineMenu.tsx
@@ -0,0 +1,47 @@
+
+import * as React from "react";
+
+
+/**
+ * TimelineMenu: 
+ * 
+ * 
+ * Timeline: 
+ *  - 
+ * 
+ * 
+ * Keyframe: 
+ *  - Delete keyframe
+ *  - Move keyframe
+ *  - Edit keyframe (shows schema)
+ * 
+ * 
+ * Region: 
+ *  - Add Keyframe 
+ *  - Copy Interpolation 
+ *  - Copy path
+ *  - Add Interpolation 
+ *  - Add Path 
+ *  - Change fades
+ *  - position region 
+ *  - duration region 
+ *  - 
+ */
+export class TimelineMenu extends React.Component {
+    public static Instance:TimelineMenu; 
+
+    constructor (props:Readonly<{}>){
+        super(props); 
+        TimelineMenu.Instance = this; 
+    }
+
+
+
+
+    render() {
+        return (
+            <div></div>
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/Track.scss b/src/client/views/animationtimeline/Track.scss
index c8d56edf6..c8d56edf6 100644
--- a/src/client/views/nodes/Track.scss
+++ b/src/client/views/animationtimeline/Track.scss
diff --git a/src/client/views/nodes/Track.tsx b/src/client/views/animationtimeline/Track.tsx
index b12dabadf..4f78f86b8 100644
--- a/src/client/views/nodes/Track.tsx
+++ b/src/client/views/animationtimeline/Track.tsx
@@ -11,6 +11,9 @@ import { FlyoutProps } from "./Timeline";
 import { Transform } from "../../util/Transform";
 import { AddComparisonParameters } from "../../northstar/model/idea/idea";
 import { CollectionSchemaBooleanCell } from "../collections/CollectionSchemaCells";
+import { DocumentManager } from "../../util/DocumentManager";
+import { DocumentView } from "../nodes/DocumentView";
+import { RichTextField } from "../../../new_fields/RichTextField";
 
 interface IProps {
     node: Doc;
@@ -60,6 +63,7 @@ export class Track extends React.Component<IProps> {
         return reaction( () => {
             return Doc.allKeys(this.props.node).map(key => FieldValue(this.props.node[key]));
         }, async () => {
+            console.log("rAN"); 
             let regiondata: (Doc | undefined) = await this.findRegion(this.props.currentBarX) ;
             if (regiondata) {
                 let keyframes = await DocListCastAsync((regiondata as Doc).keyframes!); 
@@ -129,6 +133,12 @@ export class Track extends React.Component<IProps> {
         let docFromApply = kfNode; 
         if (this.filterKeys(Doc.allKeys(this.props.node)).length > this.filterKeys(Doc.allKeys(kfNode)).length) docFromApply = this.props.node; 
         this.filterKeys(Doc.allKeys(docFromApply)).forEach(key => {
+            if (key === "type") {
+                if (this.props.node[key] === "text") {
+                    this.props.node.dataDocTest = new RichTextField(StrCast(kfNode.stateData)); 
+                    console.log("updated"); 
+                }
+            }
             if (!kfNode[key]) {
                 this.props.node[key] = undefined; 
             } else {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index a63994e6e..676a49288 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -27,7 +27,7 @@ import "./CollectionFreeFormView.scss";
 import { MarqueeView } from "./MarqueeView";
 import React = require("react");
 import v5 = require("uuid/v5");
-import { Timeline } from "../../nodes/Timeline";
+import { Timeline } from "../../animationtimeline/Timeline";
 import { ScriptField } from "../../../../new_fields/ScriptField";
 import { OverlayView, OverlayElementOptions } from "../../OverlayView";
 import { ScriptBox } from "../../ScriptBox";
diff --git a/src/client/views/graph/Graph.tsx b/src/client/views/graph/Graph.tsx
new file mode 100644
index 000000000..864bb8f46
--- /dev/null
+++ b/src/client/views/graph/Graph.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
+
+export class Graph extends React.Component {
+
+
+    
+
+    
+
+
+    render() {
+        return (
+        )
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/graph/GraphManager.ts b/src/client/views/graph/GraphManager.ts
new file mode 100644
index 000000000..9d62b1ef8
--- /dev/null
+++ b/src/client/views/graph/GraphManager.ts
@@ -0,0 +1,45 @@
+
+
+import {Graph} from "./Graph"; 
+import {observable, computed} from 'mobx'; 
+import { Dictionary } from "typescript-collections";
+import { string } from "prop-types";
+import { Doc } from "../../../new_fields/Doc";
+
+
+export class GraphManager {
+    @observable public Graphs: Graph[] = []; 
+
+    @observable public GraphData: Doc =  new Doc();  
+
+    private static _instance: GraphManager; 
+
+    @computed
+    public static get Instance():GraphManager {
+        return this._instance || (this._instance = new this()); 
+    }
+    
+    private constructor(){
+
+    }
+
+
+
+
+    public set addGraph(graph:Graph){
+        this.Graphs.push(graph); 
+    }
+
+    
+    defaultGraphs = ()  => {
+        this.GraphData.linear = ; 
+    }
+
+
+
+
+  
+
+    
+    
+}
\ No newline at end of file
diff --git a/src/client/views/graph/GraphMenu.tsx b/src/client/views/graph/GraphMenu.tsx
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/graph/GraphMenu.tsx
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index f019868aa..9b37a6491 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -1,6 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faEdit, faSmile, faTextHeight } from '@fortawesome/free-solid-svg-icons';
-import { action, IReactionDisposer, observable, reaction, runInAction, computed, trace } from "mobx";
+import { action, IReactionDisposer, observable, reaction, runInAction, computed, trace, toJS } from "mobx";
 import { observer } from "mobx-react";
 import { baseKeymap } from "prosemirror-commands";
 import { history } from "prosemirror-history";
@@ -35,6 +35,7 @@ import "./FormattedTextBox.scss";
 import React = require("react");
 import { DateField } from '../../../new_fields/DateField';
 import { Utils } from '../../../Utils';
+import { toSvgDataURL } from 'html-to-image';
 
 library.add(faEdit);
 library.add(faSmile, faTextHeight);
@@ -122,13 +123,14 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         if (this.props.isOverlay) {
             DragManager.StartDragFunctions.push(() => FormattedTextBox.InputBoxOverlay = undefined);
         }
+        toJS(console.log(this.props.Document)); 
 
         document.addEventListener("paste", this.paste);
     }
 
     @computed get extensionDoc() { return Doc.resolvedFieldDataDoc(this.dataDoc, this.props.fieldKey, "dummy"); }
 
-    @computed get dataDoc() { return BoolCast(this.props.Document.isTemplate) && this.props.DataDoc ? this.props.DataDoc : Doc.GetProto(this.props.Document); }
+    @computed get dataDoc() {return BoolCast(this.props.Document.isTemplate) && this.props.DataDoc ? this.props.DataDoc : Doc.GetProto(this.props.Document); }
 
     paste = (e: ClipboardEvent) => {
         if (e.clipboardData && this._editorView) {
@@ -163,7 +165,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             this._applyingChange = true;
             if (this.extensionDoc) this.extensionDoc.text = state.doc.textBetween(0, state.doc.content.size, "\n\n");
             if (this.extensionDoc) this.extensionDoc.lastModified = new DateField(new Date(Date.now()));
-            this.dataDoc[this.props.fieldKey] = new RichTextField(JSON.stringify(state.toJSON()));
+            this.dataDoc[this.props.fieldKey] = new RichTextField(JSON.stringify(state.toJSON()));            
+            this.props.Document.stateData = JSON.stringify(state.toJSON());            
+            this.props.Document.dataDocTest = this.dataDoc[this.props.fieldKey]; 
             this._applyingChange = false;
             let title = StrCast(this.dataDoc.title);
             if (title && title.startsWith("-") && this._editorView && !this.Document.customTitle) {