Added editable text and image notes

4 files changed, 62 insertions, 18 deletions

diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx
index 3552ffa54..344eb2bd8 100644
--- a/src/views/freeformcanvas/FreeFormCanvas.tsx
+++ b/src/views/freeformcanvas/FreeFormCanvas.tsx
@@ -20,7 +20,6 @@ export class FreeFormCanvas extends React.Component<IProps> {
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
-        e.preventDefault();
         this._isPointerDown = true;
         document.removeEventListener("pointermove", this.onPointerMove);
         document.addEventListener("pointermove", this.onPointerMove);
@@ -31,21 +30,19 @@ export class FreeFormCanvas extends React.Component<IProps> {
     @action
     onPointerUp = (e: PointerEvent): void => {
         e.stopPropagation();
-        e.preventDefault();
         this._isPointerDown = false;
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
 
-        let doc = this.props.store.Docs[0];
-        let dataField = doc.GetFieldT(KeyStore.Data, TextField);
-        let data = dataField ? dataField.Data : "";
-        this.props.store.Docs[0].SetFieldValue(KeyStore.Data, data + " hello", TextField);
+        // let doc = this.props.store.Docs[0];
+        // let dataField = doc.GetFieldT(KeyStore.Data, TextField);
+        // let data = dataField ? dataField.Data : "";
+        // this.props.store.Docs[0].SetFieldValue(KeyStore.Data, data + " hello", TextField);
     }
 
     @action
     onPointerMove = (e: PointerEvent): void => {
         e.stopPropagation();
-        e.preventDefault();
         if (!this._isPointerDown) {
             return;
         }
@@ -56,7 +53,6 @@ export class FreeFormCanvas extends React.Component<IProps> {
     @action
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
-        e.preventDefault();
 
         let scaleAmount = 1 - (e.deltaY / 1000);
         this.props.store.Scale *= scaleAmount;
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 059d6c69e..f31069aa3 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -6,10 +6,12 @@ import { NumberField } from "../../fields/NumberField";
 import { TextField } from "../../fields/TextField";
 import { DocumentViewModel } from "../../viewmodels/DocumentViewModel";
 import { ListField } from "../../fields/ListField";
+import { FieldTextBox } from "../nodes/FieldTextBox"
+import "./NodeView.scss"
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface IProps {
-    dvm:DocumentViewModel;
+    dvm: DocumentViewModel;
 }
 
 @observer
@@ -47,20 +49,30 @@ export class DocumentView extends React.Component<IProps> {
 
     @computed
     get layout(): string {
-        return this.props.dvm.Doc.GetFieldValue(KeyStore.View, TextField, String("<p>Error loading layout data</p>"));
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
+    }
+
+    @computed
+    get layoutKeys(): Key[] {
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutKeys, ListField, new Array<Key>());
     }
 
     @computed
     get layoutFields(): Key[] {
-        return this.props.dvm.Doc.GetFieldValue(KeyStore.ViewProps, ListField, new Array<Key>());
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
     }
 
     render() {
-            let doc = this.props.dvm.Doc;
-        let bindings:any = {};
+        let doc = this.props.dvm.Doc;
+        let bindings: any = {
+            doc: doc
+        };
+        for (const key of this.layoutKeys) {
+            bindings[key.Name + "Key"] = key;
+        }
         for (const key of this.layoutFields) {
             let field = doc.GetField(key);
-            if(field) {
+            if (field) {
                 bindings[key.Name] = field.GetValue();
             }
         }
@@ -70,7 +82,8 @@ export class DocumentView extends React.Component<IProps> {
                 width: this.width,
                 height: this.height
             }}>
-                <JsxParser 
+                <JsxParser
+                    components={{ FieldTextBox }}
                     bindings={bindings}
                     jsx={this.layout}
                 />
diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx
new file mode 100644
index 000000000..4615940bd
--- /dev/null
+++ b/src/views/nodes/FieldTextBox.tsx
@@ -0,0 +1,37 @@
+import { Key } from "../../fields/Key";
+import { Document } from "../../fields/Document";
+import { observer } from "mobx-react";
+import { TextField } from "../../fields/TextField";
+import React = require("react")
+import { action, observable } from "mobx";
+
+interface IProps {
+    fieldKey:Key;
+    doc:Document;
+    test:string;
+}
+
+@observer
+export class FieldTextBox extends React.Component<IProps, IProps> {
+    readonly doc:Document;
+    readonly fieldKey:Key;
+
+    constructor(props:IProps) {
+        super(props);
+        this.doc = props.doc;
+        this.fieldKey = props.fieldKey;
+        this.onChange = this.onChange.bind(this);
+    }
+
+    @action
+    onChange(e: React.ChangeEvent<HTMLInputElement>) {
+        const {fieldKey, doc} = this.props;
+        doc.SetFieldValue(fieldKey, e.target.value, TextField);
+    }
+
+    render() {
+        const {fieldKey, doc} = this.props;
+        const value = doc.GetFieldValue(fieldKey, TextField, String(""));
+        return (<input value={value} onChange={this.onChange} />)
+    }
+}
\ No newline at end of file
diff --git a/src/views/nodes/NodeView.scss b/src/views/nodes/NodeView.scss
index 2dfdee6fa..e8964399b 100644
--- a/src/views/nodes/NodeView.scss
+++ b/src/views/nodes/NodeView.scss
@@ -1,9 +1,7 @@
 .node {
     position: absolute;
-    background: #cdcdcd;
+    // background: #cdcdcd;
 
-    width: 300px;
-    height: 300px;
     overflow: hidden;