Added editable text and image notes

3 files changed, 58 insertions, 10 deletions

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;