Merge pull request #14 from browngraphicslab/kvp

Kvp

13 files changed, 258 insertions, 36 deletions

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 8aa197fa5..074f9ddf0 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -12,10 +12,6 @@
             "breakOnLoad": true,
             "url": "http://localhost:1050",
             "webRoot": "${workspaceFolder}",
-            "skipFiles": [
-                "${workspaceRoot}/node_modules/**/*.js",
-                "${workspaceRoot}/node_modules/**/*.ts",
-            ]
         },
         {
             "type": "node",
diff --git a/package-lock.json b/package-lock.json
index d03e78a2d..931f91c90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3285,11 +3285,6 @@
         }
       }
     },
-    "font-awesome": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
-      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
-    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -3381,7 +3376,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3418,7 +3414,8 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -3427,7 +3424,8 @@
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3530,7 +3528,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3540,6 +3539,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3559,11 +3559,13 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3580,6 +3582,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3652,7 +3655,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3662,6 +3666,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3737,7 +3742,8 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -3767,6 +3773,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -3784,6 +3791,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -3822,11 +3830,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },
@@ -10434,14 +10444,6 @@
         "scheduler": "^0.12.0"
       }
     },
-    "react-fontawesome": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.6.1.tgz",
-      "integrity": "sha1-7dzhfn3HMaoJ/UoYZoimF5OhbFw=",
-      "requires": {
-        "prop-types": "^15.5.6"
-      }
-    },
     "react-golden-layout": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/react-golden-layout/-/react-golden-layout-1.0.6.tgz",
diff --git a/package.json b/package.json
index 8568a7bef..ae7a7b25c 100644
--- a/package.json
+++ b/package.json
@@ -116,4 +116,4 @@
     "url-loader": "^1.1.2",
     "uuid": "^3.3.2"
   }
-}
\ No newline at end of file
+}
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index ba13cc31b..1d24ff7d2 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -13,6 +13,8 @@ import { CollectionView, CollectionViewType } from "../views/collections/Collect
 import { HtmlField } from "../../fields/HtmlField";
 import { Key } from "../../fields/Key"
 import { Field } from "../../fields/Field";
+import { KeyValueBox } from "../views/nodes/KeyValueBox"
+import { KVPField } from "../../fields/KVPField";
 
 export interface DocumentOptions {
     x?: number;
@@ -35,10 +37,12 @@ export namespace Documents {
     let imageProto: Document;
     let webProto: Document;
     let collProto: Document;
+    let kvpProto: Document;
     const textProtoId = "textProto";
     const imageProtoId = "imageProto";
     const webProtoId = "webProto";
     const collProtoId = "collectionProto";
+    const kvpProtoId = "kvpProto";
 
     export function initProtos(mainDocId: string, callback: (mainDoc?: Document) => void) {
         Server.GetFields([collProtoId, textProtoId, imageProtoId, mainDocId], (fields) => {
@@ -46,6 +50,7 @@ export namespace Documents {
             imageProto = fields[imageProtoId] as Document;
             textProto = fields[textProtoId] as Document;
             webProto = fields[webProtoId] as Document;
+            kvpProto = fields[kvpProtoId] as Document;
             callback(fields[mainDocId] as Document)
         });
     }
@@ -98,6 +103,12 @@ export namespace Documents {
                 { panx: 0, pany: 0, scale: 1, layoutKeys: [KeyStore.Data] });
     }
 
+    function GetKVPPrototype(): Document {
+        return kvpProto ? kvpProto :
+            kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValueBox.LayoutString(),
+                { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] })
+    }
+
     export function ImageDocument(url: string, options: DocumentOptions = {}) {
         let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] },
             new URL(url), ImageField);
@@ -124,6 +135,11 @@ export namespace Documents {
     export function DockDocument(config: string, options: DocumentOptions, id?: string) {
         return SetInstanceOptions(GetCollectionPrototype(), { ...options, viewType: CollectionViewType.Docking }, config, TextField, id)
     }
+    export function KVPDocument(document: Document, options: DocumentOptions = {}, id?: string) {
+        var deleg = GetKVPPrototype().MakeDelegate(id);
+        deleg.Set(KeyStore.Data, document);
+        return assignOptions(deleg, options);
+    }
 
 
 
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 63255dd90..96b6d1477 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -16,6 +16,7 @@ import { DocumentView } from "../nodes/DocumentView";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import { WebBox } from "../nodes/WebBox";
+import { KeyValueBox } from "../nodes/KeyValueBox"
 import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
@@ -194,7 +195,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
         });
     }
 
-
     @computed get backgroundLayout(): string | undefined {
         let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField);
         if (field && field !== "<Waiting>") {
@@ -231,7 +231,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get backgroundView() {
         return !this.backgroundLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
                 bindings={this.props.bindings}
                 jsx={this.backgroundLayout}
                 showWarnings={true}
@@ -242,7 +242,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get overlayView() {
         return !this.overlayLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
                 bindings={this.props.bindings}
                 jsx={this.overlayLayout}
                 showWarnings={true}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 8332249c9..f938d2237 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -49,6 +49,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
         }
     }
 
+
     @action
     removeDocument = (doc: Document): boolean => {
         //TODO This won't create the field if it doesn't already exist
@@ -60,6 +61,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
                 break;
             }
         }
+
         if (index !== -1) {
             value.splice(index, 1)
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index d5b4a723d..a02fde133 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -15,11 +15,15 @@ import { CollectionView, CollectionViewType } from "../collections/CollectionVie
 import { ContextMenu } from "../ContextMenu";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
+import { Documents } from "../../documents/Documents"
+import { KeyValueBox } from "./KeyValueBox"
 import { WebBox } from "../nodes/WebBox";
 import "./DocumentView.scss";
 import React = require("react");
+import { CollectionViewProps } from "../collections/CollectionViewBase";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
+
 export interface DocumentViewProps {
     ContainingCollectionView: Opt<CollectionView>;
 
@@ -151,12 +155,19 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             this.props.RemoveDocument(this.props.Document);
         }
     }
+
+    fieldsClicked = (e: React.MouseEvent): void => {
+        if (this.props.AddDocument) {
+            this.props.AddDocument(Documents.KVPDocument(this.props.Document));
+        }
+    }
     fullScreenClicked = (e: React.MouseEvent): void => {
         CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
         ContextMenu.Instance.clearItems();
         ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
+
     closeFullScreenClicked = (e: React.MouseEvent): void => {
         CollectionDockingView.Instance.CloseFullScreen();
         ContextMenu.Instance.clearItems();
@@ -175,6 +186,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         e.preventDefault()
 
         ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked })
         ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
         ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
         ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
@@ -193,7 +205,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @computed get mainContent() {
         return <JsxParser
-            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox }}
+            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
             bindings={this._documentBindings}
             jsx={this.layout}
             showWarnings={true}
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
new file mode 100644
index 000000000..f22989735
--- /dev/null
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -0,0 +1,24 @@
+.keyValueBox-cont {
+    overflow-y:scroll;
+    height: 100%;
+    border: black;
+    border-width: 1px;
+    border-style: solid;
+    box-sizing: border-box;
+    display: inline-block;
+}
+.keyValueBox-header {
+    background:gray;
+}
+.keyValueBox-evenRow {
+    background: white;
+    .formattedTextBox-cont {
+        background: white;
+    }
+}
+.keyValueBox-oddRow {
+    background: lightGray;
+    .formattedTextBox-cont {
+        background: lightgray;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
new file mode 100644
index 000000000..7e2426b58
--- /dev/null
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -0,0 +1,89 @@
+
+import { IReactionDisposer } from 'mobx';
+import { observer } from "mobx-react";
+import { EditorView } from 'prosemirror-view';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import { Document } from '../../../fields/Document';
+import { Opt } from '../../../fields/Field';
+import { KeyStore } from '../../../fields/KeyStore';
+import { FieldView, FieldViewProps } from './FieldView';
+import { KeyValuePair } from "./KeyValuePair";
+import "./KeyValueBox.scss";
+import React = require("react")
+
+@observer
+export class KeyValueBox extends React.Component<FieldViewProps> {
+
+    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
+    private _ref: React.RefObject<HTMLDivElement>;
+    private _editorView: Opt<EditorView>;
+    private _reactionDisposer: Opt<IReactionDisposer>;
+
+
+    constructor(props: FieldViewProps) {
+        super(props);
+
+        this._ref = React.createRef();
+    }
+
+
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        if (e.buttons === 1 && this.props.isSelected()) {
+            e.stopPropagation();
+        }
+    }
+    onPointerWheel = (e: React.WheelEvent): void => {
+        e.stopPropagation();
+    }
+
+    createTable = () => {
+        let table: Array<JSX.Element> = []
+        let ret = "waiting"
+        let doc = this.props.doc.GetT(KeyStore.Data, Document);
+        if (!doc || doc == "<Waiting>") {
+            return <tr><td>Loading...</td></tr>
+        }
+        let realDoc = doc;
+
+        let ids: { [key: string]: string } = {};
+        let protos = doc.GetAllPrototypes();
+        for (const proto of protos) {
+            proto._proxies.forEach((val, key) => {
+                if (!(key in ids)) {
+                    ids[key] = key;
+                }
+            })
+        }
+
+        let rows: JSX.Element[] = [];
+        let i = 0;
+        for (let key in ids) {
+            if (i++ % 2 == 0)
+                rows.push(<KeyValuePair doc={realDoc} rowStyle="keyValueBox-evenRow" fieldId={key} />)
+            else rows.push(<KeyValuePair doc={realDoc} rowStyle="keyValueBox-oddRow" fieldId={key} />)
+        }
+        return rows;
+    }
+
+
+    render() {
+
+        return (<div className="keyValueBox-cont">
+            <table className="keyValueBox-table">
+                <tbody>
+                    <tr className="keyValueBox-header">
+                        <th>Key</th>
+                        <th>Fields</th>
+                    </tr>
+                    {this.createTable()}
+                </tbody>
+            </table>
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
new file mode 100644
index 000000000..ecdd47a1e
--- /dev/null
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -0,0 +1,55 @@
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import "./KeyValueBox.scss";
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { Opt, Field } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { observable, action } from 'mobx';
+import { Document } from '../../../fields/Document';
+import { Key } from '../../../fields/Key';
+import { Server } from "../../Server"
+
+// Represents one row in a key value plane
+
+export interface KeyValuePairProps {
+    rowStyle: string;
+    fieldId: string;
+    doc: Document;
+}
+@observer
+export class KeyValuePair extends React.Component<KeyValuePairProps> {
+
+    @observable
+    private key: Opt<Key>
+
+    constructor(props: KeyValuePairProps) {
+        super(props);
+        Server.GetField(this.props.fieldId,
+            action((field: Opt<Field>) => {
+                if (field) {
+                    this.key = field as Key;
+                }
+            }));
+
+    }
+
+
+    render() {
+        if (!this.key) {
+            return <tr><td>error</td><td></td></tr>
+
+        }
+        let props: FieldViewProps = {
+            doc: this.props.doc,
+            fieldKey: this.key,
+            isSelected: () => false,
+            select: () => { },
+            isTopMost: false,
+            bindings: {},
+            selectOnLoad: false,
+        }
+        return (
+            <tr className={this.props.rowStyle}><td>{this.key.Name}</td><td><FieldView {...props} /></td></tr>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/fields/KVPField b/src/fields/KVPField
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/fields/KVPField
diff --git a/src/fields/KVPField.ts b/src/fields/KVPField.ts
new file mode 100644
index 000000000..a7ecc0768
--- /dev/null
+++ b/src/fields/KVPField.ts
@@ -0,0 +1,30 @@
+import { BasicField } from "./BasicField"
+import { FieldId } from "./Field";
+import { Types } from "../server/Message";
+import { Document } from "./Document"
+
+export class KVPField extends BasicField<Document> {
+    constructor(data: Document | undefined = undefined, id?: FieldId, save: boolean = true) {
+        super(data == undefined ? new Document() : data, save, id);
+    }
+
+    toString(): string {
+        return this.Data.Title;
+    }
+
+    ToScriptString(): string {
+        return `new KVPField("${this.Data}")`;
+    }
+
+    Copy() {
+        return new KVPField(this.Data);
+    }
+
+    ToJson(): { type: Types, data: Document, _id: string } {
+        return {
+            type: Types.Text,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 823fc2732..e2538bc39 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,9 +11,5 @@
       "dom",
       "es2015"
     ]
-  },
-  "exclude": [
-    "node_modules",
-    "static"
-  ]
+  }
 }
\ No newline at end of file