Merge pull request #43 from browngraphicslab/kvp

Kvp

4 files changed, 334 insertions, 6 deletions

diff --git a/package-lock.json b/package-lock.json
index edcf581cc..5822b04fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4498,6 +4498,21 @@
         "ansi-regex": "^2.0.0"
       }
     },
+    "has-binary": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/has-binary/-/has-binary-0.1.7.tgz",
+      "integrity": "sha1-aOYesWIQyVRaClzOBqhzkS/h5ow=",
+      "requires": {
+        "isarray": "0.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        }
+      }
+    },
     "has-binary2": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz",
@@ -5296,8 +5311,7 @@
     "json3": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
-      "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=",
-      "dev": true
+      "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE="
     },
     "json5": {
       "version": "1.0.1",
@@ -9676,6 +9690,11 @@
         "is-wsl": "^1.1.0"
       }
     },
+    "options": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
+      "integrity": "sha1-7CLTEoBrtT5zF3Pnza788cZDEo8="
+    },
     "orderedmap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-1.0.0.tgz",
@@ -9819,6 +9838,14 @@
       "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
       "dev": true
     },
+    "parsejson": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/parsejson/-/parsejson-0.0.3.tgz",
+      "integrity": "sha1-q343WfIJ7OmUN5c/fQ8fZK4OZKs=",
+      "requires": {
+        "better-assert": "~1.0.0"
+      }
+    },
     "parseqs": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
@@ -11636,6 +11663,204 @@
         }
       }
     },
+    "socketio": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/socketio/-/socketio-1.0.0.tgz",
+      "integrity": "sha1-aOoVmP0kBWFgFxLldJl2ftjrqMo=",
+      "requires": {
+        "express": "^4.13.3",
+        "socket.io": "^1.3.7"
+      },
+      "dependencies": {
+        "accepts": {
+          "version": "1.3.3",
+          "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.3.tgz",
+          "integrity": "sha1-w8p0NJOGSMPg2cHjKN1otiLChMo=",
+          "requires": {
+            "mime-types": "~2.1.11",
+            "negotiator": "0.6.1"
+          }
+        },
+        "arraybuffer.slice": {
+          "version": "0.0.6",
+          "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz",
+          "integrity": "sha1-8zshWfBTKj8xB6JywMz70a0peco="
+        },
+        "blob": {
+          "version": "0.0.4",
+          "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz",
+          "integrity": "sha1-vPEwUspURj8w+fx+lbmkdjCpSSE="
+        },
+        "component-emitter": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.1.2.tgz",
+          "integrity": "sha1-KWWU8nU9qmOZbSrwjRWpURbJrsM="
+        },
+        "debug": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
+          "integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
+          "requires": {
+            "ms": "0.7.2"
+          }
+        },
+        "engine.io": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-1.8.5.tgz",
+          "integrity": "sha512-j1DWIcktw4hRwrv6nWx++5nFH2X64x16MAG2P0Lmi5Dvdfi3I+Jhc7JKJIdAmDJa+5aZ/imHV7dWRPy2Cqjh3A==",
+          "requires": {
+            "accepts": "1.3.3",
+            "base64id": "1.0.0",
+            "cookie": "0.3.1",
+            "debug": "2.3.3",
+            "engine.io-parser": "1.3.2",
+            "ws": "~1.1.5"
+          }
+        },
+        "engine.io-client": {
+          "version": "1.8.5",
+          "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-1.8.5.tgz",
+          "integrity": "sha512-AYTgHyeVUPitsseqjoedjhYJapNVoSPShbZ+tEUX9/73jgZ/Z3sUlJf9oYgdEBBdVhupUpUqSxH0kBCXlQnmZg==",
+          "requires": {
+            "component-emitter": "1.2.1",
+            "component-inherit": "0.0.3",
+            "debug": "2.3.3",
+            "engine.io-parser": "1.3.2",
+            "has-cors": "1.1.0",
+            "indexof": "0.0.1",
+            "parsejson": "0.0.3",
+            "parseqs": "0.0.5",
+            "parseuri": "0.0.5",
+            "ws": "~1.1.5",
+            "xmlhttprequest-ssl": "1.5.3",
+            "yeast": "0.1.2"
+          },
+          "dependencies": {
+            "component-emitter": {
+              "version": "1.2.1",
+              "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+              "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+            }
+          }
+        },
+        "engine.io-parser": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-1.3.2.tgz",
+          "integrity": "sha1-k3sHnwAH0Ik+xW1GyyILjLQ1Igo=",
+          "requires": {
+            "after": "0.8.2",
+            "arraybuffer.slice": "0.0.6",
+            "base64-arraybuffer": "0.1.5",
+            "blob": "0.0.4",
+            "has-binary": "0.1.7",
+            "wtf-8": "1.0.0"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "ms": {
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U="
+        },
+        "object-assign": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.0.tgz",
+          "integrity": "sha1-ejs9DpgGPUP0wD8uiubNUahog6A="
+        },
+        "socket.io": {
+          "version": "1.7.4",
+          "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-1.7.4.tgz",
+          "integrity": "sha1-L37O3DORvy1cc+KR/iM+bjTU3QA=",
+          "requires": {
+            "debug": "2.3.3",
+            "engine.io": "~1.8.4",
+            "has-binary": "0.1.7",
+            "object-assign": "4.1.0",
+            "socket.io-adapter": "0.5.0",
+            "socket.io-client": "1.7.4",
+            "socket.io-parser": "2.3.1"
+          }
+        },
+        "socket.io-adapter": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-0.5.0.tgz",
+          "integrity": "sha1-y21LuL7IHhB4uZZ3+c7QBGBmu4s=",
+          "requires": {
+            "debug": "2.3.3",
+            "socket.io-parser": "2.3.1"
+          }
+        },
+        "socket.io-client": {
+          "version": "1.7.4",
+          "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-1.7.4.tgz",
+          "integrity": "sha1-7J+CA1btme9tNX8HVtZIcXvdQoE=",
+          "requires": {
+            "backo2": "1.0.2",
+            "component-bind": "1.0.0",
+            "component-emitter": "1.2.1",
+            "debug": "2.3.3",
+            "engine.io-client": "~1.8.4",
+            "has-binary": "0.1.7",
+            "indexof": "0.0.1",
+            "object-component": "0.0.3",
+            "parseuri": "0.0.5",
+            "socket.io-parser": "2.3.1",
+            "to-array": "0.1.4"
+          },
+          "dependencies": {
+            "component-emitter": {
+              "version": "1.2.1",
+              "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+              "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+            }
+          }
+        },
+        "socket.io-parser": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-2.3.1.tgz",
+          "integrity": "sha1-3VMgJRA85Clpcya+/WQAX8/ltKA=",
+          "requires": {
+            "component-emitter": "1.1.2",
+            "debug": "2.2.0",
+            "isarray": "0.0.1",
+            "json3": "3.3.2"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
+              "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
+              "requires": {
+                "ms": "0.7.1"
+              }
+            },
+            "ms": {
+              "version": "0.7.1",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+              "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg="
+            }
+          }
+        },
+        "ws": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.5.tgz",
+          "integrity": "sha512-o3KqipXNUdS7wpQzBHSe180lBGO60SoK0yVo3CYJgb2MkobuWuBX6dhkYP5ORCLd55y+SaflMOV5fqAB53ux4w==",
+          "requires": {
+            "options": ">=0.0.5",
+            "ultron": "1.0.x"
+          }
+        },
+        "xmlhttprequest-ssl": {
+          "version": "1.5.3",
+          "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz",
+          "integrity": "sha1-GFqIjATspGw+QHDZn3tJ3jUomS0="
+        }
+      }
+    },
     "sockjs": {
       "version": "0.3.19",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
@@ -12531,6 +12756,11 @@
         "random-bytes": "~1.0.0"
       }
     },
+    "ultron": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.2.tgz",
+      "integrity": "sha1-rOEWq1V80Zc4ak6I9GhTeMiy5Po="
+    },
     "undefsafe": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz",
@@ -13662,6 +13892,11 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "wtf-8": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wtf-8/-/wtf-8-1.0.0.tgz",
+      "integrity": "sha1-OS2LotDxw00e4tYw8V0O+2jhBIo="
+    },
     "xdg-basedir": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz",
diff --git a/package.json b/package.json
index cb0d3d1a9..af45eabbb 100644
--- a/package.json
+++ b/package.json
@@ -133,6 +133,7 @@
     "request": "^2.88.0",
     "socket.io": "^2.2.0",
     "socket.io-client": "^2.2.0",
+    "socketio": "^1.0.0",
     "url-loader": "^1.1.2",
     "uuid": "^3.3.2"
   }
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index ac8c949a9..283c1f732 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -2,17 +2,62 @@
 import { observer } from "mobx-react";
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { Document } from '../../../fields/Document';
-import { FieldWaiting } from '../../../fields/Field';
+import { FieldWaiting, Field } from '../../../fields/Field';
 import { KeyStore } from '../../../fields/KeyStore';
 import { FieldView, FieldViewProps } from './FieldView';
 import "./KeyValueBox.scss";
 import { KeyValuePair } from "./KeyValuePair";
 import React = require("react")
+import { CompileScript, ToField } from "../../util/Scripting";
+import { Key } from '../../../fields/Key';
+import { observable, action } from "mobx";
 
 @observer
 export class KeyValueBox extends React.Component<FieldViewProps> {
 
     public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
+    @observable private _keyInput: string = "";
+    @observable private _valueInput: string = "";
+
+
+    constructor(props: FieldViewProps) {
+        super(props);
+    }
+
+
+
+    shouldComponentUpdate() {
+        return false;
+    }
+
+    @action
+    onEnterKey = (e: React.KeyboardEvent): void => {
+        if (e.key == 'Enter') {
+            if (this._keyInput && this._valueInput) {
+                let doc = this.props.doc.GetT(KeyStore.Data, Document);
+                if (!doc || doc == FieldWaiting) {
+                    return
+                }
+                let realDoc = doc;
+
+                let script = CompileScript(this._valueInput, undefined, true);
+                if (!script.compiled) {
+                    return;
+                }
+                let field = script();
+                if (field instanceof Field) {
+                    realDoc.Set(new Key(this._keyInput), field);
+                } else {
+                    let dataField = ToField(field);
+                    if (dataField) {
+                        realDoc.Set(new Key(this._keyInput), dataField);
+                    }
+                }
+                this._keyInput = ""
+                this._valueInput = ""
+            }
+        }
+    }
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && this.props.isSelected()) {
@@ -33,7 +78,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         let ids: { [key: string]: string } = {};
         let protos = doc.GetAllPrototypes();
         for (const proto of protos) {
-            proto._proxies.forEach((val, key) => {
+            proto._proxies.forEach((val: any, key: string) => {
                 if (!(key in ids)) {
                     ids[key] = key;
                 }
@@ -48,9 +93,26 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         return rows;
     }
 
+    @action
+    keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._keyInput = e.currentTarget.value;
+    }
+
+    @action
+    valueChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._valueInput = e.currentTarget.value;
+    }
 
-    render() {
+    newKeyValue = () => {
+        return (
+            <tr>
+                <td><input type="text" value={this._keyInput} placeholder="Key" onChange={this.keyChanged} /></td>
+                <td><input type="text" value={this._valueInput} placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} /></td>
+            </tr>
+        )
+    }
 
+    render() {
         return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
             <table className="keyValueBox-table">
                 <tbody>
@@ -59,6 +121,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                         <th>Fields</th>
                     </tr>
                     {this.createTable()}
+                    {this.newKeyValue()}
                 </tbody>
             </table>
         </div>)
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index a97e98313..111f85a05 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -8,6 +8,8 @@ import { observable, action } from 'mobx';
 import { Document } from '../../../fields/Document';
 import { Key } from '../../../fields/Key';
 import { Server } from "../../Server"
+import { EditableView } from "../EditableView";
+import { CompileScript, ToField } from "../../util/Scripting";
 
 // Represents one row in a key value plane
 
@@ -48,10 +50,37 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             bindings: {},
             selectOnLoad: false,
         }
+        let contents = (
+            <FieldView {...props} />
+        );
         return (
             <tr className={this.props.rowStyle}>
                 <td>{this.key.Name}</td>
-                <td><FieldView {...props} /></td>
+                <td><EditableView contents={contents} height={36} GetValue={() => {
+                    let field = props.doc.Get(props.fieldKey);
+                    if (field && field instanceof Field) {
+                        return field.ToScriptString();
+                    }
+                    return field || "";
+                }}
+                    SetValue={(value: string) => {
+                        let script = CompileScript(value, undefined, true);
+                        if (!script.compiled) {
+                            return false;
+                        }
+                        let field = script();
+                        if (field instanceof Field) {
+                            props.doc.Set(props.fieldKey, field);
+                            return true;
+                        } else {
+                            let dataField = ToField(field);
+                            if (dataField) {
+                                props.doc.Set(props.fieldKey, dataField);
+                                return true;
+                            }
+                        }
+                        return false;
+                    }}></EditableView></td>
             </tr>
         )
     }