From 23387df535e9ab87a08196aab19de6f937ae9bba Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Thu, 28 Feb 2019 00:20:14 -0500
Subject: finished kvp

---
 src/client/views/nodes/KeyValuePair.tsx | 68 +++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/client/views/nodes/KeyValuePair.tsx

(limited to 'src/client/views/nodes/KeyValuePair.tsx')

diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
new file mode 100644
index 000000000..bc407f137
--- /dev/null
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -0,0 +1,68 @@
+import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import "./KeyValuePane.scss";
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { FieldWaiting, Opt, Field } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { observable, action, IReactionDisposer, reaction, ObservableMap } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
+import { RichTextField } from "../../../fields/RichTextField";
+import { element } from 'prop-types';
+import { props } from 'bluebird';
+import { EditorView } from 'prosemirror-view';
+import { Transaction, EditorState } from 'prosemirror-state';
+import { schema } from 'prosemirror-schema-basic';
+import { keymap } from 'prosemirror-keymap';
+import { undo, redo } from 'prosemirror-history';
+import { baseKeymap } from 'prosemirror-commands';
+import { KVPField } from '../../../fields/KVPField';
+import { Document } from '../../../fields/Document';
+import { Key } from '../../../fields/Key';
+import { JSXElement } from 'babel-types';
+import { Server } from "../../Server"
+
+// Represents one row in a key value plane
+
+export interface KeyValuePairProps {
+    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><td>{this.key.Name}</td><td><FieldView {...props} /></td></tr>
+        )
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 74617fa46353d82c7618af76e6878003fba68980 Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Thu, 28 Feb 2019 00:21:15 -0500
Subject: deleted some unused imports

---
 src/client/views/nodes/KeyValuePair.tsx | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

(limited to 'src/client/views/nodes/KeyValuePair.tsx')

diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index bc407f137..b8a0cca48 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,25 +1,12 @@
-import Lightbox from 'react-image-lightbox';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import "./KeyValuePane.scss";
 import React = require("react")
 import { FieldViewProps, FieldView } from './FieldView';
-import { FieldWaiting, Opt, Field } from '../../../fields/Field';
+import { Opt, Field } from '../../../fields/Field';
 import { observer } from "mobx-react"
-import { observable, action, IReactionDisposer, reaction, ObservableMap } from 'mobx';
-import { KeyStore } from '../../../fields/KeyStore';
-import { RichTextField } from "../../../fields/RichTextField";
-import { element } from 'prop-types';
-import { props } from 'bluebird';
-import { EditorView } from 'prosemirror-view';
-import { Transaction, EditorState } from 'prosemirror-state';
-import { schema } from 'prosemirror-schema-basic';
-import { keymap } from 'prosemirror-keymap';
-import { undo, redo } from 'prosemirror-history';
-import { baseKeymap } from 'prosemirror-commands';
-import { KVPField } from '../../../fields/KVPField';
+import { observable, action } from 'mobx';
 import { Document } from '../../../fields/Document';
 import { Key } from '../../../fields/Key';
-import { JSXElement } from 'babel-types';
 import { Server } from "../../Server"
 
 // Represents one row in a key value plane
-- 
cgit v1.2.3-70-g09d2


From 4a42946b5c8ec86e66a89fec2e66971a242e3dbb Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 28 Feb 2019 09:19:53 -0500
Subject: added css

---
 .vscode/launch.json                                |  4 -
 src/client/documents/Documents.ts                  |  4 +-
 .../views/collections/CollectionFreeFormView.tsx   |  5 +-
 src/client/views/nodes/DocumentView.tsx            |  4 +-
 src/client/views/nodes/FieldView.tsx               |  2 -
 src/client/views/nodes/KeyValueBox.scss            | 24 ++++++
 src/client/views/nodes/KeyValueBox.tsx             | 89 ++++++++++++++++++++
 src/client/views/nodes/KeyValuePair.tsx            |  6 +-
 src/client/views/nodes/KeyValuePane.scss           |  0
 src/client/views/nodes/KeyValuePane.tsx            | 96 ----------------------
 tsconfig.json                                      |  6 +-
 11 files changed, 124 insertions(+), 116 deletions(-)
 create mode 100644 src/client/views/nodes/KeyValueBox.scss
 create mode 100644 src/client/views/nodes/KeyValueBox.tsx
 delete mode 100644 src/client/views/nodes/KeyValuePane.scss
 delete mode 100644 src/client/views/nodes/KeyValuePane.tsx

(limited to 'src/client/views/nodes/KeyValuePair.tsx')

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/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 41f1c9b3f..1d24ff7d2 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -13,7 +13,7 @@ import { CollectionView, CollectionViewType } from "../views/collections/Collect
 import { HtmlField } from "../../fields/HtmlField";
 import { Key } from "../../fields/Key"
 import { Field } from "../../fields/Field";
-import { KeyValuePane } from "../views/nodes/KeyValuePane"
+import { KeyValueBox } from "../views/nodes/KeyValueBox"
 import { KVPField } from "../../fields/KVPField";
 
 export interface DocumentOptions {
@@ -105,7 +105,7 @@ export namespace Documents {
 
     function GetKVPPrototype(): Document {
         return kvpProto ? kvpProto :
-            kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValuePane.LayoutString(),
+            kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValueBox.LayoutString(),
                 { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] })
     }
 
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 137bcf706..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";
@@ -230,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}
@@ -241,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/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 23cfa6df3..a02fde133 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -16,7 +16,7 @@ import { ContextMenu } from "../ContextMenu";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import { Documents } from "../../documents/Documents"
-import { KeyValuePane } from "../nodes/KeyValuePane"
+import { KeyValueBox } from "./KeyValueBox"
 import { WebBox } from "../nodes/WebBox";
 import "./DocumentView.scss";
 import React = require("react");
@@ -205,7 +205,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @computed get mainContent() {
         return <JsxParser
-            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValuePane }}
+            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
             bindings={this._documentBindings}
             jsx={this.layout}
             showWarnings={true}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 056f834d1..f372258f8 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -12,8 +12,6 @@ import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
 import { WebBox } from "./WebBox";
-import { KVPField } from "../../../fields/KVPField";
-import { KeyValuePane } from "./KeyValuePane";
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
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
index b8a0cca48..ecdd47a1e 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,5 +1,5 @@
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import "./KeyValuePane.scss";
+import "./KeyValueBox.scss";
 import React = require("react")
 import { FieldViewProps, FieldView } from './FieldView';
 import { Opt, Field } from '../../../fields/Field';
@@ -12,6 +12,7 @@ import { Server } from "../../Server"
 // Represents one row in a key value plane
 
 export interface KeyValuePairProps {
+    rowStyle: string;
     fieldId: string;
     doc: Document;
 }
@@ -33,7 +34,6 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
     }
 
 
-
     render() {
         if (!this.key) {
             return <tr><td>error</td><td></td></tr>
@@ -49,7 +49,7 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             selectOnLoad: false,
         }
         return (
-            <tr><td>{this.key.Name}</td><td><FieldView {...props} /></td></tr>
+            <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/client/views/nodes/KeyValuePane.scss b/src/client/views/nodes/KeyValuePane.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/client/views/nodes/KeyValuePane.tsx b/src/client/views/nodes/KeyValuePane.tsx
deleted file mode 100644
index 90f5b653c..000000000
--- a/src/client/views/nodes/KeyValuePane.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-
-import Lightbox from 'react-image-lightbox';
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import "./KeyValuePane.scss";
-import React = require("react")
-import { FieldViewProps, FieldView } from './FieldView';
-import { FieldWaiting, Opt, Field } from '../../../fields/Field';
-import { observer } from "mobx-react"
-import { observable, action, IReactionDisposer, reaction, ObservableMap } from 'mobx';
-import { KeyStore } from '../../../fields/KeyStore';
-import { RichTextField } from "../../../fields/RichTextField";
-import { element } from 'prop-types';
-import { props } from 'bluebird';
-import { EditorView } from 'prosemirror-view';
-import { Transaction, EditorState } from 'prosemirror-state';
-import { schema } from 'prosemirror-schema-basic';
-import { keymap } from 'prosemirror-keymap';
-import { undo, redo } from 'prosemirror-history';
-import { baseKeymap } from 'prosemirror-commands';
-import { KVPField } from '../../../fields/KVPField';
-import { Document } from '../../../fields/Document';
-import { Key } from '../../../fields/Key';
-import { JSXElement } from 'babel-types';
-import { KeyValuePair } from "./KeyValuePair"
-
-@observer
-export class KeyValuePane extends React.Component<FieldViewProps> {
-
-    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValuePane, 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[] = [];
-        for (let key in ids) {
-            rows.push(<KeyValuePair doc={realDoc} fieldId={key} />)
-        }
-        return rows;
-    }
-
-
-    render() {
-
-        return (<table>
-            <tbody>
-                <tr>
-                    <th>Key</th>
-                    <th>Fields</th>
-                </tr>
-                {this.createTable()}
-            </tbody>
-        </table>)
-    }
-}
\ 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
-- 
cgit v1.2.3-70-g09d2

