47 files changed, 279 insertions, 312 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index cc1d8f6c6..f735ddc73 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -1,5 +1,7 @@
 import v4 = require('uuid/v4');
 import v5 = require("uuid/v5");
+import { Socket } from 'socket.io';
+import { Message } from './server/Message';
 
 export class Utils {
 
@@ -19,4 +21,20 @@ export class Utils {
 
         return { scale, translateX, translateY };
     }
+
+    public static Emit<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T) {
+        socket.emit(message.Message, args);
+    }
+
+    public static EmitCallback<T>(socket: Socket | SocketIOClient.Socket, message: Message<T>, args: T, fn: (args: any) => any) {
+        socket.emit(message.Message, args, fn);
+    }
+
+    public static AddServerHandler<T>(socket: Socket, message: Message<T>, handler: (args: T) => any) {
+        socket.on(message.Message, handler);
+    }
+
+    public static AddServerHandlerCallback<T>(socket: Socket, message: Message<T>, handler: (args: [T, (res: any) => any]) => any) {
+        socket.on(message.Message, (arg: T, fn: (res: any) => any) => handler([arg, fn]));
+    }
 }
\ No newline at end of file
diff --git a/src/Server.ts b/src/client/Server.ts
index 645420771..db6bf992c 100644
--- a/src/Server.ts
+++ b/src/client/Server.ts
@@ -1,11 +1,16 @@
-import { Field, FieldWaiting, FIELD_ID, FIELD_WAITING, FieldValue } from "./fields/Field"
-import { Key, KeyStore } from "./fields/Key"
+import { Field, FieldWaiting, FIELD_ID, FIELD_WAITING, FieldValue } from "../fields/Field"
+import { Key, KeyStore } from "../fields/Key"
 import { ObservableMap, action } from "mobx";
-import { Document } from "./fields/Document"
+import { Document } from "../fields/Document"
 import { SocketStub } from "./SocketStub";
+import * as OpenSocket from 'socket.io-client';
+import { Utils } from "./../Utils";
+import { MessageStore } from "./../server/Message";
 
 export class Server {
     private static ClientFieldsCached: ObservableMap<FIELD_ID, Field | FIELD_WAITING> = new ObservableMap();
+    static Socket: SocketIOClient.Socket = OpenSocket("http://localhost:1234")
+    static GUID: string = Utils.GenerateGuid()
 
     // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached).
     // Call this is from within a reaction and test whether the return value is FieldWaiting.
@@ -15,8 +20,7 @@ export class Server {
             this.ClientFieldsCached.set(fieldid, FieldWaiting);
             //simulating a server call with a registered callback action
             SocketStub.SEND_FIELD_REQUEST(fieldid,
-                action((field: Field) => callback(Server.cacheField(field))),
-                hackTimeout);
+                action((field: Field) => callback(Server.cacheField(field))));
         } else if (this.ClientFieldsCached.get(fieldid) != FieldWaiting) {
             callback(this.ClientFieldsCached.get(fieldid) as Field);
         }
@@ -48,6 +52,10 @@ export class Server {
         SocketStub.SEND_SET_FIELD(field, value);
     }
 
+    static connected(message: string) {
+        Server.Socket.emit(MessageStore.Bar.Message, Server.GUID);
+    }
+
     @action
     private static cacheField(clientField: Field) {
         var cached = this.ClientFieldsCached.get(clientField.Id);
@@ -59,3 +67,5 @@ export class Server {
         return this.ClientFieldsCached.get(clientField.Id) as Field;
     }
 }
+
+Server.Socket.on(MessageStore.Foo.Message, Server.connected);
\ No newline at end of file
diff --git a/src/SocketStub.ts b/src/client/SocketStub.ts
index f9d48c067..3b1401632 100644
--- a/src/SocketStub.ts
+++ b/src/client/SocketStub.ts
@@ -1,7 +1,10 @@
-import { Field, FIELD_ID } from "./fields/Field"
-import { Key, KeyStore } from "./fields/Key"
+import { Field, FIELD_ID } from "../fields/Field"
+import { Key, KeyStore } from "../fields/Key"
 import { ObservableMap, action } from "mobx";
-import { Document } from "./fields/Document"
+import { Document } from "../fields/Document"
+import { MessageStore, SetFieldArgs, GetFieldArgs } from "../server/Message";
+import { Utils } from "../Utils";
+import { Server } from "./Server";
 
 export class SocketStub {
 
@@ -17,25 +20,14 @@ export class SocketStub {
         // server stores stripped down document (w/ only field id proxies) in the field store
         this.FieldStore.set(document.Id, new Document(document.Id));
         document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key, (f as Field).Id));
-    }
-
-    public static SEND_FIELD_REQUEST(fieldid: FIELD_ID, callback: (field: Field) => void, timeout: number) {
-
-        if (timeout < 0)// this is a hack to make things easier to setup until we have a server... won't be neededa fter that.
-            callback(this.FieldStore.get(fieldid) as Field);
-        else { // actual logic here... 
-
-            // Send a request for fieldid to the server
-            // ...SOCKET(RETRIEVE_FIELD, fieldid)
-
-            // server responds (simulated with a timeout) and the callback is invoked
-            setTimeout(() =>
-
-                // when the field data comes back, call the callback() function 
-                callback(this.FieldStore.get(fieldid) as Field),
 
+        // Server.Socket.emit(MessageStore.AddDocument.Message, document)
+    }
 
-                timeout);
+    public static SEND_FIELD_REQUEST(fieldid: FIELD_ID, callback: (field: Field) => void) {
+        if (fieldid) {
+            let args: GetFieldArgs = new GetFieldArgs(fieldid)
+            Utils.EmitCallback(Server.Socket, MessageStore.GetField, args, (field: Field) => callback(field))
         }
     }
 
@@ -72,7 +64,7 @@ export class SocketStub {
         // ...SOCKET(SET_FIELD, field id, serialized field value)
 
         // Server updates the value of the field in its fieldstore
-        if (this.FieldStore.get(field.Id))
-            this.FieldStore.get(field.Id)!.TrySetValue(value);
+        let msg: SetFieldArgs = new SetFieldArgs(field.Id as string, value)
+        Utils.Emit(Server.Socket, MessageStore.SetField, msg)
     }
 }
diff --git a/src/documents/Documents.ts b/src/client/documents/Documents.ts
index ce9a1529d..6925234fe 100644
--- a/src/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1,16 +1,16 @@
-import { Document } from "../fields/Document";
+import { Document } from "../../fields/Document";
 import { Server } from "../Server";
-import { KeyStore } from "../fields/Key";
-import { TextField } from "../fields/TextField";
-import { NumberField } from "../fields/NumberField";
-import { ListField } from "../fields/ListField";
+import { KeyStore } from "../../fields/Key";
+import { TextField } from "../../fields/TextField";
+import { NumberField } from "../../fields/NumberField";
+import { ListField } from "../../fields/ListField";
 import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
 import { CollectionSchemaView } from "../views/collections/CollectionSchemaView";
-import { ImageField } from "../fields/ImageField";
+import { ImageField } from "../../fields/ImageField";
 import { ImageBox } from "../views/nodes/ImageBox";
 import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
-import { FIELD_ID } from "../fields/Field";
+import { FIELD_ID } from "../../fields/Field";
 
 interface DocumentOptions {
     x?: number;
diff --git a/src/util/DragManager.ts b/src/client/util/DragManager.ts
index 63d6a88f8..f4dcce7c8 100644
--- a/src/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,9 +1,3 @@
-import { Opt } from "../fields/Field";
-import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
-import { DocumentDecorations } from "../DocumentDecorations";
-import { SelectionManager } from "./SelectionManager";
-import { CollectionDockingView } from "../views/collections/CollectionDockingView";
-import { Document } from "../fields/Document";
 
 export namespace DragManager {
     export function Root() {
diff --git a/src/util/Scripting.ts b/src/client/util/Scripting.ts
index 0e83ab4f0..6bc5fa412 100644
--- a/src/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -1,12 +1,12 @@
 // import * as ts from "typescript"
 let ts = (window as any).ts;
-import { Opt, Field } from "../fields/Field";
-import { Document as DocumentImport } from "../fields/Document";
-import { NumberField as NumberFieldImport, NumberField } from "../fields/NumberField";
-import { ImageField as ImageFieldImport } from "../fields/ImageField";
-import { TextField as TextFieldImport, TextField } from "../fields/TextField";
-import { RichTextField as RichTextFieldImport } from "../fields/RichTextField";
-import { KeyStore as KeyStoreImport } from "../fields/Key";
+import { Opt, Field } from "../../fields/Field";
+import { Document as DocumentImport } from "../../fields/Document";
+import { NumberField as NumberFieldImport, NumberField } from "../../fields/NumberField";
+import { ImageField as ImageFieldImport } from "../../fields/ImageField";
+import { TextField as TextFieldImport, TextField } from "../../fields/TextField";
+import { RichTextField as RichTextFieldImport } from "../../fields/RichTextField";
+import { KeyStore as KeyStoreImport } from "../../fields/Key";
 
 export interface ExecutableScript {
     (): any;
diff --git a/src/util/ScrollBox.tsx b/src/client/util/ScrollBox.tsx
index b6b088170..b6b088170 100644
--- a/src/util/ScrollBox.tsx
+++ b/src/client/util/ScrollBox.tsx
diff --git a/src/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 0759ae110..0759ae110 100644
--- a/src/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
diff --git a/src/util/TypedEvent.ts b/src/client/util/TypedEvent.ts
index 0714a7f5c..0714a7f5c 100644
--- a/src/util/TypedEvent.ts
+++ b/src/client/util/TypedEvent.ts
diff --git a/src/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 234f82eb9..234f82eb9 100644
--- a/src/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
diff --git a/src/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 4f26a75d2..4f26a75d2 100644
--- a/src/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
diff --git a/src/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 8f00f8b3d..8f00f8b3d 100644
--- a/src/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
diff --git a/src/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index e8b93a18b..e8b93a18b 100644
--- a/src/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
diff --git a/src/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 1cf875ea5..8a94bff36 100644
--- a/src/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,9 +1,9 @@
 import { observable, computed } from "mobx";
 import React = require("react");
-import { SelectionManager } from "./util/SelectionManager";
+import { SelectionManager } from "../util/SelectionManager";
 import { observer } from "mobx-react";
 import './DocumentDecorations.scss'
-import { CollectionFreeFormView } from "./views/collections/CollectionFreeFormView";
+import { CollectionFreeFormView } from "./collections/CollectionFreeFormView";
 
 @observer
 export class DocumentDecorations extends React.Component {
diff --git a/src/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 357c97af2..2e784d3f9 100644
--- a/src/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -25,7 +25,8 @@ export class EditableView extends React.Component<EditableProps> {
 
     render() {
         if (this.editing) {
-            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}></input>
+            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
+                style={{ width: "100%" }}></input>
         } else {
             return (
                 <div>
diff --git a/src/Main.scss b/src/client/views/Main.scss
index e73f62904..e73f62904 100644
--- a/src/Main.scss
+++ b/src/client/views/Main.scss
diff --git a/src/Main.tsx b/src/client/views/Main.tsx
index eee8554f3..da3576066 100644
--- a/src/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -3,17 +3,17 @@ import "normalize.css";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { DocumentDecorations } from './DocumentDecorations';
-import { Documents } from './documents/Documents';
-import { Document } from './fields/Document';
-import { KeyStore, KeyStore as KS } from './fields/Key';
-import { ListField } from './fields/ListField';
-import { NumberField } from './fields/NumberField';
-import { TextField } from './fields/TextField';
+import { Documents } from '../documents/Documents';
+import { Document } from '../../fields/Document';
+import { KeyStore, KeyStore as KS } from '../../fields/Key';
+import { ListField } from '../../fields/ListField';
+import { NumberField } from '../../fields/NumberField';
+import { TextField } from '../../fields/TextField';
 import "./Main.scss";
-import { ContextMenu } from './views/ContextMenu';
-import { DocumentView } from './views/nodes/DocumentView';
+import { ContextMenu } from './ContextMenu';
+import { DocumentView } from './nodes/DocumentView';
+import { ImageField } from '../../fields/ImageField';
 import { CompileScript } from './util/Scripting';
-import { ImageField } from './fields/ImageField';
 import { database } from './database';
 
 
@@ -48,7 +48,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     doc2.Set(KS.X, new NumberField(150));
     doc2.Set(KS.Y, new NumberField(20));
     let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x: 450, y: 500, title: "cat 1"
+        x: 450, y: 100, title: "cat 1"
     });
     doc3.Set(KeyStore.Data, new ImageField);
     const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
diff --git a/src/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index db924b57f..7c0b512a7 100644
--- a/src/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -126,7 +126,7 @@
     }
     .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
     .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
-        background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
     }
     .flexlayout__tab_button_overflow {
         float: left;
@@ -138,7 +138,7 @@
         font-size: 10px;
         color: lightgray;
         font-family: Arial, sans-serif;
-        background: transparent url("../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
     }
     .flexlayout__tabset_header {
         position: absolute;
@@ -186,14 +186,14 @@
         height: 20px;
         border: none;
         outline-width: 0;
-        background: transparent url("../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
     }
     .flexlayout__tab_toolbar_button-max {
         width: 20px;
         height: 20px;
         border: none;
         outline-width: 0;
-        background: transparent url("../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
     }
     .flexlayout__popup_menu {}
     .flexlayout__popup_menu_item {
@@ -295,7 +295,7 @@
     }
     .flexlayout__border_button:hover .flexlayout__border_button_trailing,
     .flexlayout__border_button--selected .flexlayout__border_button_trailing {
-        background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
+        background: transparent url("../../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
     }
     .flexlayout__border_toolbar_left {
         position: absolute;
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index adef03357..9aee9c10f 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,13 +1,12 @@
 import { observer } from "mobx-react";
-import { KeyStore } from "../../fields/Key";
+import { KeyStore } from "../../../fields/Key";
 import React = require("react");
 import FlexLayout from "flexlayout-react";
 import { action, observable, computed } from "mobx";
-import { Document } from "../../fields/Document";
+import { Document } from "../../../fields/Document";
 import { DocumentView } from "../nodes/DocumentView";
-import { ListField } from "../../fields/ListField";
-import { NumberField } from "../../fields/NumberField";
-import { SSL_OP_SINGLE_DH_USE } from "constants";
+import { ListField } from "../../../fields/ListField";
+import { NumberField } from "../../../fields/NumberField";
 import "./CollectionDockingView.scss"
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
diff --git a/src/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index e9d134e7b..e9d134e7b 100644
--- a/src/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 612f9acbe..9cf29d000 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -1,19 +1,18 @@
 import { observer } from "mobx-react";
-import { Key, KeyStore } from "../../fields/Key";
 import React = require("react");
 import { action, observable, computed } from "mobx";
-import { Document } from "../../fields/Document";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-import { ListField } from "../../fields/ListField";
-import { NumberField } from "../../fields/NumberField";
-import { SSL_OP_SINGLE_DH_USE } from "constants";
-import { Documents } from "../../documents/Documents";
 import { DragManager } from "../../util/DragManager";
 import "./CollectionFreeFormView.scss";
-import { Utils } from "../../Utils";
+import { Utils } from "../../../Utils";
 import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
 import { SelectionManager } from "../../util/SelectionManager";
-import { FieldWaiting } from "../../fields/Field";
+import { Key, KeyStore } from "../../../fields/Key";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { NumberField } from "../../../fields/NumberField";
+import { Documents } from "../../documents/Documents";
+import { FieldWaiting } from "../../../fields/Field";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
diff --git a/src/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 707b44db6..707b44db6 100644
--- a/src/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 6f591a1bc..2d5bd6c99 100644
--- a/src/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,8 +1,6 @@
 import React = require("react")
 import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table";
 import { observer } from "mobx-react";
-import { KeyStore as KS, Key } from "../../fields/Key";
-import { Document } from "../../fields/Document";
 import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import "react-table/react-table.css"
 import { observable, action, computed } from "mobx";
@@ -13,7 +11,9 @@ import { CollectionViewBase } from "./CollectionViewBase";
 import { DocumentView } from "../nodes/DocumentView";
 import { EditableView } from "../EditableView";
 import { CompileScript, ToField } from "../../util/Scripting";
-import { Field } from "../../fields/Field";
+import { KeyStore as KS, Key } from "../../../fields/Key";
+import { Document } from "../../../fields/Document";
+import { Field } from "../../../fields/Field";
 
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
diff --git a/src/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 35d938d43..09e8ec729 100644
--- a/src/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -1,9 +1,9 @@
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
-import { Document } from "../../fields/Document";
-import { Opt } from "../../fields/Field";
-import { Key, KeyStore } from "../../fields/Key";
-import { ListField } from "../../fields/ListField";
+import { Document } from "../../../fields/Document";
+import { Opt } from "../../../fields/Field";
+import { Key, KeyStore } from "../../../fields/Key";
+import { ListField } from "../../../fields/ListField";
 import { SelectionManager } from "../../util/SelectionManager";
 import { ContextMenu } from "../ContextMenu";
 import React = require("react");
diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index e0bb459e9..1d53cedc4 100644
--- a/src/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,7 +1,7 @@
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
-import { Key, KeyStore } from "../../fields/Key";
-import { NumberField } from "../../fields/NumberField";
+import { Key, KeyStore } from "../../../fields/Key";
+import { NumberField } from "../../../fields/NumberField";
 import { DragManager } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
diff --git a/src/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 39be54a4d..730ce62f2 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,12 +1,12 @@
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
-import { Document } from "../../fields/Document";
-import { Opt, FieldWaiting } from "../../fields/Field";
-import { Key, KeyStore } from "../../fields/Key";
-import { ListField } from "../../fields/ListField";
-import { NumberField } from "../../fields/NumberField";
-import { TextField } from "../../fields/TextField";
-import { Utils } from "../../Utils";
+import { Document } from "../../../fields/Document";
+import { Opt, FieldWaiting } from "../../../fields/Field";
+import { Key, KeyStore } from "../../../fields/Key";
+import { ListField } from "../../../fields/ListField";
+import { NumberField } from "../../../fields/NumberField";
+import { TextField } from "../../../fields/TextField";
+import { Utils } from "../../../Utils";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
diff --git a/src/views/nodes/FieldTextBox.scss b/src/client/views/nodes/FieldTextBox.scss
index b6ce2fabc..b6ce2fabc 100644
--- a/src/views/nodes/FieldTextBox.scss
+++ b/src/client/views/nodes/FieldTextBox.scss
diff --git a/src/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 3a7652284..12371eb2e 100644
--- a/src/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -1,15 +1,15 @@
 import React = require("react")
-import { Document } from "../../fields/Document";
 import { observer } from "mobx-react";
 import { computed } from "mobx";
-import { Field, Opt, FieldWaiting, FieldValue } from "../../fields/Field";
-import { TextField } from "../../fields/TextField";
-import { NumberField } from "../../fields/NumberField";
-import { RichTextField } from "../../fields/RichTextField";
+import { Field, Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
+import { Document } from "../../../fields/Document";
+import { TextField } from "../../../fields/TextField";
+import { NumberField } from "../../../fields/NumberField";
+import { RichTextField } from "../../../fields/RichTextField";
+import { ImageField } from "../../../fields/ImageField";
+import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
-import { ImageField } from "../../fields/ImageField";
 import { ImageBox } from "./ImageBox";
-import { Key } from "../../fields/Key";
 import { DocumentView } from "./DocumentView";
 
 //
diff --git a/src/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 492367fce..492367fce 100644
--- a/src/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
diff --git a/src/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 6d0e117cc..8bc4c902c 100644
--- a/src/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -6,11 +6,11 @@ import { keymap } from "prosemirror-keymap";
 import { schema } from "prosemirror-schema-basic";
 import { EditorState, Transaction } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Opt, FieldWaiting, FieldValue } from "../../fields/Field";
+import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
 import { SelectionManager } from "../../util/SelectionManager";
 import "./FormattedTextBox.scss";
 import React = require("react")
-import { RichTextField } from "../../fields/RichTextField";
+import { RichTextField } from "../../../fields/RichTextField";
 import { FieldViewProps, FieldView } from "./FieldView";
 import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
 
diff --git a/src/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 136fda1d0..136fda1d0 100644
--- a/src/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
diff --git a/src/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 123c76d19..ab20f140c 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -4,10 +4,10 @@ import 'react-image-lightbox/style.css'; // This only needs to be imported once
 import { SelectionManager } from "../../util/SelectionManager";
 import "./ImageBox.scss";
 import React = require("react")
-import { ImageField } from '../../fields/ImageField';
+import { ImageField } from '../../../fields/ImageField';
 import { FieldViewProps, FieldView } from './FieldView';
 import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
-import { FieldWaiting } from '../../fields/Field';
+import { FieldWaiting } from '../../../fields/Field';
 import { observer } from "mobx-react"
 import { observable, action } from 'mobx';
 
diff --git a/src/views/nodes/NodeView.scss b/src/client/views/nodes/NodeView.scss
index dac1c0a8e..dac1c0a8e 100644
--- a/src/views/nodes/NodeView.scss
+++ b/src/client/views/nodes/NodeView.scss
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 546c89e04..6f9752a8e 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -5,7 +5,7 @@ import { ObservableMap, computed, action, observable } from "mobx";
 import { TextField } from "./TextField";
 import { ListField } from "./ListField";
 import { findDOMNode } from "react-dom";
-import { Server } from "../Server";
+import { Server } from "../client/Server";
 
 export class Document extends Field {
     public fields: ObservableMap<Key, Opt<Field>> = new ObservableMap();
diff --git a/src/server/Client.ts b/src/server/Client.ts
new file mode 100644
index 000000000..6b8841658
--- /dev/null
+++ b/src/server/Client.ts
@@ -0,0 +1,15 @@
+import { computed } from "mobx";
+
+export class Client {
+    constructor(guid: string) {
+        this.guid = guid
+    }
+
+    private guid: string;
+
+    @computed
+    public get GUID(): string {
+        return this.guid
+    }
+
+}
\ No newline at end of file
diff --git a/src/server/Message.ts b/src/server/Message.ts
new file mode 100644
index 000000000..15329249d
--- /dev/null
+++ b/src/server/Message.ts
@@ -0,0 +1,56 @@
+import { Utils } from "../Utils";
+import { FIELD_ID, Field } from "../fields/Field";
+
+export class Message<T> {
+    private name: string;
+    private guid: string;
+    readonly ArgsCtor: new (...args: any) => T;
+
+    get Name(): string {
+        return this.name;
+    }
+
+    get Message(): string {
+        return this.guid
+    }
+
+    constructor(name: string, ctor: new (...args: any) => T) {
+        this.name = name;
+        this.guid = Utils.GenerateDeterministicGuid(name)
+        this.ArgsCtor = ctor;
+    }
+
+    GetValue() {
+        return this.Name;
+    }
+}
+
+class TestMessageArgs {
+    hello: string = "";
+}
+
+export class SetFieldArgs {
+    field: string;
+    value: any;
+
+    constructor(f: string, v: any) {
+        this.field = f
+        this.value = v
+    }
+}
+
+export class GetFieldArgs {
+    field: string;
+
+    constructor(f: string) {
+        this.field = f
+    }
+}
+
+export namespace MessageStore {
+    export const Foo = new Message("Foo", String);
+    export const Bar = new Message("Bar", String);
+    export const AddDocument = new Message("Add Document", TestMessageArgs);
+    export const SetField = new Message("Set Field", SetFieldArgs)
+    export const GetField = new Message("Get Field", GetFieldArgs)
+}
\ No newline at end of file
diff --git a/src/server/index.js b/src/server/index.js
new file mode 100644
index 000000000..15e763f9d
--- /dev/null
+++ b/src/server/index.js
@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+var express = require("express");
+var app = express();
+var port = 8080; // default port to listen
+// define a route handler for the default home page
+app.get("/", function (req, res) {
+    res.send("Hello world!");
+});
+// start the Express server
+app.listen(port, function () {
+    console.log("server started at http://localhost:" + port);
+});
diff --git a/src/server/index.ts b/src/server/index.ts
new file mode 100644
index 000000000..0f2409fbb
--- /dev/null
+++ b/src/server/index.ts
@@ -0,0 +1,76 @@
+import * as express from 'express'
+const app = express()
+import * as webpack from 'webpack'
+import * as wdm from 'webpack-dev-middleware';
+import * as whm from 'webpack-hot-middleware';
+import * as path from 'path'
+import { MessageStore, Message, SetFieldArgs, GetFieldArgs } from "./Message";
+import { Client } from './Client';
+import { Socket } from 'socket.io';
+import { Utils } from '../Utils';
+import { ObservableMap } from 'mobx';
+import { FIELD_ID, Field } from '../fields/Field';
+const config = require('../../webpack.config')
+const compiler = webpack(config)
+const port = 1050; // default port to listen
+const serverPort = 1234;
+
+let FieldStore: ObservableMap<FIELD_ID, Field> = new ObservableMap();
+
+// define a route handler for the default home page
+app.get("/", (req, res) => {
+    res.sendFile(path.join(__dirname, '../../deploy/index.html'));
+});
+
+app.get("/hello", (req, res) => {
+    res.send("<p>Hello</p>");
+})
+
+app.use(wdm(compiler, {
+    publicPath: config.output.publicPath
+}))
+
+app.use(whm(compiler))
+
+// start the Express server
+app.listen(port, () => {
+    console.log(`server started at http://localhost:${port}`);
+})
+
+const server = require("socket.io")();
+interface Map {
+    [key: string]: Client;
+}
+let clients: Map = {}
+
+server.on("connection", function (socket: Socket) {
+    console.log("a user has connected")
+
+    Utils.Emit(socket, MessageStore.Foo, "handshooken")
+
+    Utils.AddServerHandler(socket, MessageStore.Bar, barReceived)
+    Utils.AddServerHandler(socket, MessageStore.SetField, setField)
+    Utils.AddServerHandlerCallback(socket, MessageStore.GetField, getField)
+})
+
+function barReceived(guid: String) {
+    clients[guid.toString()] = new Client(guid.toString());
+}
+
+function addDocument(document: Document) {
+
+}
+
+function setField(newValue: SetFieldArgs) {
+    if (FieldStore.get(newValue.field)) {
+        FieldStore.get(newValue.field)!.TrySetValue(newValue.value);
+    }
+}
+
+function getField([fieldRequest, callback]: [GetFieldArgs, (field: Field) => void]) {
+    let fieldid: string = fieldRequest.field
+    callback(FieldStore.get(fieldid) as Field)
+}
+
+server.listen(serverPort);
+console.log(`listening on port ${serverPort}`);
\ No newline at end of file
diff --git a/src/stores/NodeCollectionStore.ts b/src/stores/NodeCollectionStore.ts
deleted file mode 100644
index 7fac83d51..000000000
--- a/src/stores/NodeCollectionStore.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { computed, observable, action } from "mobx";
-import { NodeStore } from "./NodeStore";
-import { Document } from "../fields/Document";
-
-export class NodeCollectionStore extends NodeStore {
-
-    @observable
-    public Scale: number = 1;
-
-    @observable
-    public Nodes: NodeStore[] = new Array<NodeStore>();
-
-    @observable
-    public Docs: Document[] = [];
-
-    @computed
-    public get Transform(): string {
-        const halfWidth = window.innerWidth / 2, halfHeight = window.innerHeight / 2;
-        return `translate(${this.X + halfWidth}px, ${this.Y + halfHeight}px) scale(${this.Scale}) translate(${-halfWidth}px, ${-halfHeight}px)`;
-    }
-
-    @action
-    public AddNodes(stores: NodeStore[]): void {
-        stores.forEach(store => this.Nodes.push(store));
-    }
-}
\ No newline at end of file
diff --git a/src/stores/NodeStore.ts b/src/stores/NodeStore.ts
deleted file mode 100644
index 6a734cf44..000000000
--- a/src/stores/NodeStore.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { computed, observable } from "mobx";
-import { Utils } from "../Utils";
-
-export class NodeStore {
-
-    public Id: string = Utils.GenerateGuid();
-
-    @observable
-    public X: number = 0;
-
-    @observable
-    public Y: number = 0;
-
-    @observable
-    public Width: number = 0;
-
-    @observable
-    public Height: number = 0;
-
-    @computed
-    public get Transform(): string {
-        return "translate(" + this.X + "px, " + this.Y + "px)";
-    }
-}
\ No newline at end of file
diff --git a/src/stores/RootStore.ts b/src/stores/RootStore.ts
deleted file mode 100644
index 847fb6807..000000000
--- a/src/stores/RootStore.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { action, observable } from "mobx";
-
-// This globally accessible store might come in handy, although you may decide that you don't need it.
-export class RootStore {
-
-    private constructor() {
-        // initialization code
-    }
-
-    private static _instance: RootStore;
-
-    public static get Instance(): RootStore {
-        return this._instance || (this._instance = new this());
-    }
-}
\ No newline at end of file
diff --git a/src/stores/StaticTextNodeStore.ts b/src/stores/StaticTextNodeStore.ts
deleted file mode 100644
index 7c342a7a2..000000000
--- a/src/stores/StaticTextNodeStore.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { observable } from "mobx";
-import { NodeStore } from "./NodeStore";
-
-export class StaticTextNodeStore extends NodeStore {
-
-    constructor(initializer: Partial<StaticTextNodeStore>) {
-        super();
-        Object.assign(this, initializer);
-    }
-
-    @observable
-    public Title: string = "";
-
-    @observable
-    public Text: string = "";
-}
\ No newline at end of file
diff --git a/src/stores/VideoNodeStore.ts b/src/stores/VideoNodeStore.ts
deleted file mode 100644
index e5187ab07..000000000
--- a/src/stores/VideoNodeStore.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { observable } from "mobx";
-import { NodeStore } from "./NodeStore";
-
-export class VideoNodeStore extends NodeStore {
-
-    constructor(initializer: Partial<VideoNodeStore>) {
-        super();
-        Object.assign(this, initializer);
-    }
-
-    @observable
-    public Title: string = "";
-
-    @observable
-    public Url: string = "";
-
-}
\ No newline at end of file
diff --git a/src/views/nodes/TextNodeView.tsx b/src/views/nodes/TextNodeView.tsx
deleted file mode 100644
index ab762df12..000000000
--- a/src/views/nodes/TextNodeView.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {observer} from "mobx-react";
-import {StaticTextNodeStore} from "../../stores/StaticTextNodeStore";
-import "./NodeView.scss";
-import {TopBar} from "./TopBar";
-import React = require("react");
-
-interface IProps {
-    store: StaticTextNodeStore;
-}
-
-@observer
-export class TextNodeView extends React.Component<IProps> {
-
-    render() {
-        let store = this.props.store;
-        return (
-            <div className="node text-node" style={{transform: store.Transform}}>
-                <TopBar store={store} />
-                <div className="scroll-box">
-                    <div className="content">
-                        <h3 className="title">{store.Title}</h3>
-                        <p className="paragraph">{store.Text}</p>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/TopBar.tsx b/src/views/nodes/TopBar.tsx
deleted file mode 100644
index bb126e8b5..000000000
--- a/src/views/nodes/TopBar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { observer } from "mobx-react";
-import { NodeStore } from "../../stores/NodeStore";
-import "./NodeView.scss";
-import React = require("react");
-
-interface IProps {
-    store: NodeStore;
-}
-
-@observer
-export class TopBar extends React.Component<IProps> {
-
-    private _isPointerDown = false;
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        this._isPointerDown = true;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.addEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointerup", this.onPointerUp);
-    }
-
-    onPointerUp = (e: PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        this._isPointerDown = false;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-    }
-
-    onPointerMove = (e: PointerEvent): void => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (!this._isPointerDown) {
-            return;
-        }
-        this.props.store.X += e.movementX;
-        this.props.store.Y += e.movementY;
-    }
-
-    render() {
-        return <div className="top" onPointerDown={this.onPointerDown}></div>
-    }
-}
diff --git a/src/views/nodes/VideoNodeView.scss b/src/views/nodes/VideoNodeView.scss
deleted file mode 100644
index f412c3519..000000000
--- a/src/views/nodes/VideoNodeView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.node {
-    video {
-        width: 100%;
-    }
-}
\ No newline at end of file
diff --git a/src/views/nodes/VideoNodeView.tsx b/src/views/nodes/VideoNodeView.tsx
deleted file mode 100644
index 0a7b3d174..000000000
--- a/src/views/nodes/VideoNodeView.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { observer } from "mobx-react";
-import { VideoNodeStore } from "../../stores/VideoNodeStore";
-import "./NodeView.scss";
-import { TopBar } from "./TopBar";
-import "./VideoNodeView.scss";
-import React = require("react");
-
-interface IProps {
-    store: VideoNodeStore;
-}
-
-@observer
-export class VideoNodeView extends React.Component<IProps> {
-
-    render() {
-        let store = this.props.store;
-        return (
-            <div className="node text-node" style={{ transform: store.Transform }}>
-                <TopBar store={store} />
-                <div className="scroll-box">
-                    <div className="content">
-                        <h3 className="title">{store.Title}</h3>
-                        <video src={store.Url} controls />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file