From 89204d74d2a5014b4e241973b1bdb8461ed4f78c Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 15 Jan 2019 22:31:57 -0500
Subject: More stuff set up

---
 src/views/freeformcanvas/FreeFormCanvas.tsx | 19 ++++++-----
 src/views/freeformcanvas/NodeContainer.tsx  |  3 +-
 src/views/nodes/DocumentView.tsx            | 50 ++++++++++++++++++++---------
 3 files changed, 47 insertions(+), 25 deletions(-)

(limited to 'src/views')

diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx
index a80e11ef5..3552ffa54 100644
--- a/src/views/freeformcanvas/FreeFormCanvas.tsx
+++ b/src/views/freeformcanvas/FreeFormCanvas.tsx
@@ -3,8 +3,10 @@ import { NodeCollectionStore } from "../../stores/NodeCollectionStore";
 import "./FreeFormCanvas.scss";
 import { NodeContainer } from "./NodeContainer";
 import React = require("react");
-import { KeyStore } from "../../controllers/KeyController";
-import { NumberController } from "../../controllers/NumberController";
+import { KeyStore } from "../../fields/Key";
+import { NumberField } from "../../fields/NumberField";
+import { TextField } from "../../fields/TextField";
+import { action } from "mobx";
 
 interface IProps {
     store: NodeCollectionStore
@@ -15,6 +17,7 @@ export class FreeFormCanvas extends React.Component<IProps> {
 
     private _isPointerDown: boolean = false;
 
+    @action
     onPointerDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
         e.preventDefault();
@@ -25,6 +28,7 @@ export class FreeFormCanvas extends React.Component<IProps> {
         document.addEventListener("pointerup", this.onPointerUp);
     }
 
+    @action
     onPointerUp = (e: PointerEvent): void => {
         e.stopPropagation();
         e.preventDefault();
@@ -33,14 +37,12 @@ export class FreeFormCanvas extends React.Component<IProps> {
         document.removeEventListener("pointerup", this.onPointerUp);
 
         let doc = this.props.store.Docs[0];
-        let xField = doc.GetFieldT(KeyStore.X, NumberController);
-        let x = xField ? xField.Data : 0;
-        let yField = doc.GetFieldT(KeyStore.Y, NumberController);
-        let y = yField ? yField.Data : 0;
-        this.props.store.Docs[0].SetFieldValue(KeyStore.X, x + 10, NumberController);
-        this.props.store.Docs[0].SetFieldValue(KeyStore.Y, y + 10, NumberController);
+        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();
@@ -51,6 +53,7 @@ export class FreeFormCanvas extends React.Component<IProps> {
         this.props.store.Y += e.movementY;
     }
 
+    @action
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
         e.preventDefault();
diff --git a/src/views/freeformcanvas/NodeContainer.tsx b/src/views/freeformcanvas/NodeContainer.tsx
index c59ab194e..6c3cb2af2 100644
--- a/src/views/freeformcanvas/NodeContainer.tsx
+++ b/src/views/freeformcanvas/NodeContainer.tsx
@@ -7,6 +7,7 @@ import { VideoNodeView } from "../nodes/VideoNodeView";
 import "./FreeFormCanvas.scss";
 import React = require("react");
 import { DocumentView } from "../nodes/DocumentView";
+import { DocumentViewModel } from "../../viewmodels/DocumentViewModel";
 
 interface IProps {
     store: NodeCollectionStore
@@ -19,7 +20,7 @@ export class NodeContainer extends React.Component<IProps> {
         return (
             <div className="node-container">
                 {this.props.store.Docs.map(doc => {
-                    return (<DocumentView key={doc.Id} doc={doc} />);
+                    return (<DocumentView key={doc.Id} dvm={new DocumentViewModel(doc)} />);
                 })}
             </div>
         );
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index d3f025388..059d6c69e 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -1,27 +1,27 @@
 import { observer } from "mobx-react";
-import { DocumentController } from "../../controllers/DocumentController";
 import React = require("react");
 import { computed } from "mobx";
-import { KeyStore } from "../../controllers/KeyController";
-import { NumberController } from "../../controllers/NumberController";
-import { TextController } from "../../controllers/TextController";
+import { KeyStore, Key } from "../../fields/Key";
+import { NumberField } from "../../fields/NumberField";
+import { TextField } from "../../fields/TextField";
+import { DocumentViewModel } from "../../viewmodels/DocumentViewModel";
+import { ListField } from "../../fields/ListField";
+const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface IProps {
-    doc:DocumentController;
+    dvm:DocumentViewModel;
 }
 
 @observer
 export class DocumentView extends React.Component<IProps> {
     @computed
     get x(): number {
-        let field = this.props.doc.GetFieldT(KeyStore.X, NumberController);
-        return field ? field.Data : 0;
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.X, NumberField, Number(0));
     }
 
     @computed
     get y(): number {
-        let field = this.props.doc.GetFieldT(KeyStore.Y, NumberController);
-        return field ? field.Data : 0;
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.Y, NumberField, Number(0));
     }
 
     @computed
@@ -31,31 +31,49 @@ export class DocumentView extends React.Component<IProps> {
 
     @computed
     get width(): number {
-        let field = this.props.doc.GetFieldT(KeyStore.Width, NumberController);
-        return field ? field.Data : 0;
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.Width, NumberField, Number(0));
     }
 
     @computed
     get height(): number {
-        let field = this.props.doc.GetFieldT(KeyStore.Height, NumberController);
-        return field ? field.Data : 0;
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.Height, NumberField, Number(0));
     }
 
     //Temp
     @computed
     get data(): string {
-        let field = this.props.doc.GetFieldT(KeyStore.Data, TextController);
-        return field ? field.Data : "";
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.Data, TextField, String(""));
+    }
+
+    @computed
+    get layout(): string {
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.View, TextField, String("<p>Error loading layout data</p>"));
+    }
+
+    @computed
+    get layoutFields(): Key[] {
+        return this.props.dvm.Doc.GetFieldValue(KeyStore.ViewProps, ListField, new Array<Key>());
     }
 
     render() {
+            let doc = this.props.dvm.Doc;
+        let bindings:any = {};
+        for (const key of this.layoutFields) {
+            let field = doc.GetField(key);
+            if(field) {
+                bindings[key.Name] = field.GetValue();
+            }
+        }
         return (
             <div className="node" style={{
                 transform: this.transform,
                 width: this.width,
                 height: this.height
             }}>
-                <p>{this.data}</p>
+                <JsxParser 
+                    bindings={bindings}
+                    jsx={this.layout}
+                />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2