3 files changed, 76 insertions, 6 deletions

diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx
index dada8f9e5..a80e11ef5 100644
--- a/src/views/freeformcanvas/FreeFormCanvas.tsx
+++ b/src/views/freeformcanvas/FreeFormCanvas.tsx
@@ -3,6 +3,8 @@ 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";
 
 interface IProps {
     store: NodeCollectionStore
@@ -29,6 +31,14 @@ export class FreeFormCanvas extends React.Component<IProps> {
         this._isPointerDown = false;
         document.removeEventListener("pointermove", this.onPointerMove);
         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);
     }
 
     onPointerMove = (e: PointerEvent): void => {
diff --git a/src/views/freeformcanvas/NodeContainer.tsx b/src/views/freeformcanvas/NodeContainer.tsx
index a2edb38a4..c59ab194e 100644
--- a/src/views/freeformcanvas/NodeContainer.tsx
+++ b/src/views/freeformcanvas/NodeContainer.tsx
@@ -6,6 +6,7 @@ import { TextNodeView } from "../nodes/TextNodeView";
 import { VideoNodeView } from "../nodes/VideoNodeView";
 import "./FreeFormCanvas.scss";
 import React = require("react");
+import { DocumentView } from "../nodes/DocumentView";
 
 interface IProps {
     store: NodeCollectionStore
@@ -17,12 +18,8 @@ export class NodeContainer extends React.Component<IProps> {
     render() {
         return (
             <div className="node-container">
-                {this.props.store.Nodes.map(nodeStore => {
-                    if (nodeStore instanceof StaticTextNodeStore) {
-                        return (<TextNodeView key={nodeStore.Id} store={nodeStore as StaticTextNodeStore} />)
-                    } else if (nodeStore instanceof VideoNodeStore) {
-                        return (<VideoNodeView key={nodeStore.Id} store={nodeStore as VideoNodeStore} />)
-                    }
+                {this.props.store.Docs.map(doc => {
+                    return (<DocumentView key={doc.Id} doc={doc} />);
                 })}
             </div>
         );
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
new file mode 100644
index 000000000..d3f025388
--- /dev/null
+++ b/src/views/nodes/DocumentView.tsx
@@ -0,0 +1,63 @@
+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";
+
+interface IProps {
+    doc:DocumentController;
+}
+
+@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;
+    }
+
+    @computed
+    get y(): number {
+        let field = this.props.doc.GetFieldT(KeyStore.Y, NumberController);
+        return field ? field.Data : 0;
+    }
+
+    @computed
+    get transform(): string {
+        return `translate(${this.x}px, ${this.y}px)`;
+    }
+
+    @computed
+    get width(): number {
+        let field = this.props.doc.GetFieldT(KeyStore.Width, NumberController);
+        return field ? field.Data : 0;
+    }
+
+    @computed
+    get height(): number {
+        let field = this.props.doc.GetFieldT(KeyStore.Height, NumberController);
+        return field ? field.Data : 0;
+    }
+
+    //Temp
+    @computed
+    get data(): string {
+        let field = this.props.doc.GetFieldT(KeyStore.Data, TextController);
+        return field ? field.Data : "";
+    }
+
+    render() {
+        return (
+            <div className="node" style={{
+                transform: this.transform,
+                width: this.width,
+                height: this.height
+            }}>
+                <p>{this.data}</p>
+            </div>
+        );
+    }
+
+}
\ No newline at end of file