From 1d667d19f5402dc9f9069e0a57008dac96f6de2a Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Tue, 12 Feb 2019 18:55:11 -0500
Subject: set up web box classes

---
 src/client/views/nodes/FieldView.tsx | 5 +++++
 1 file changed, 5 insertions(+)

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

diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 12371eb2e..df6a409ec 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -7,9 +7,11 @@ import { TextField } from "../../../fields/TextField";
 import { NumberField } from "../../../fields/NumberField";
 import { RichTextField } from "../../../fields/RichTextField";
 import { ImageField } from "../../../fields/ImageField";
+import { WebField } from "../../../fields/WebField";
 import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
+import { WebBox } from "./WebBox";
 import { DocumentView } from "./DocumentView";
 
 //
@@ -45,6 +47,9 @@ export class FieldView extends React.Component<FieldViewProps> {
         else if (field instanceof ImageField) {
             return <ImageBox {...this.props} />
         }
+        else if (field instanceof WebField) {
+            return <WebBox {...this.props} />
+        }
         else if (field instanceof NumberField) {
             return <p>{field.Data}</p>
         } else if (field != FieldWaiting) {
-- 
cgit v1.2.3-70-g09d2


From efe5d9515c88f6e0963ae1c04545b7bbbd8beb55 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Mon, 25 Feb 2019 17:51:40 -0500
Subject: fixed some of bugs caused by pulling from master

---
 src/client/documents/Documents.ts    | 27 ---------------------------
 src/client/views/nodes/FieldView.tsx |  5 -----
 src/client/views/nodes/WebBox.tsx    |  8 ++++----
 src/fields/WebField.ts               | 15 ++++++++++++---
 src/server/Message.ts                |  2 +-
 5 files changed, 17 insertions(+), 40 deletions(-)

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

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 398c6f1a2..5c73c6b87 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -7,17 +7,12 @@ import { ListField } from "../../fields/ListField";
 import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
 import { ImageField } from "../../fields/ImageField";
 import { ImageBox } from "../views/nodes/ImageBox";
-<<<<<<< HEAD
 import { WebField } from "../../fields/WebField";
 import { WebBox } from "../views/nodes/WebBox";
 import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
 import { FieldId } from "../../fields/Field";
-=======
 import { CollectionView, CollectionViewType } from "../views/collections/CollectionView";
 import { FieldView } from "../views/nodes/FieldView";
-import { HtmlField } from "../../fields/HtmlField";
-import { WebView } from "../views/nodes/WebView";
->>>>>>> bb418216efa9cc2e191b970e4cbe5080f4fd2b87
 
 export interface DocumentOptions {
     x?: number;
@@ -88,28 +83,6 @@ export namespace Documents {
         return doc;
     }
 
-    let htmlProto: Document;
-    const htmlProtoId = "htmlProto";
-    function GetHtmlPrototype(): Document {
-        if (!htmlProto) {
-            htmlProto = new Document(htmlProtoId);
-            htmlProto.Set(KeyStore.X, new NumberField(0));
-            htmlProto.Set(KeyStore.Y, new NumberField(0));
-            htmlProto.Set(KeyStore.Width, new NumberField(300));
-            htmlProto.Set(KeyStore.Height, new NumberField(150));
-            htmlProto.Set(KeyStore.Layout, new TextField(WebView.LayoutString()));
-            htmlProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
-        }
-        return htmlProto;
-    }
-
-    export function HtmlDocument(html: string, options: DocumentOptions = {}): Document {
-        let doc = GetHtmlPrototype().MakeDelegate();
-        setupOptions(doc, options);
-        doc.Set(KeyStore.Data, new HtmlField(html));
-        return doc;
-    }
-
     let imageProto: Document;
     const imageProtoId = "imageProto";
     function GetImagePrototype(): Document {
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 368ad049d..978cfe196 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -11,13 +11,10 @@ import { WebField } from "../../../fields/WebField";
 import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
-<<<<<<< HEAD
 import { WebBox } from "./WebBox";
 import { DocumentView } from "./DocumentView";
-=======
 import { HtmlField } from "../../../fields/HtmlField";
 import { WebView } from "./WebView";
->>>>>>> bb418216efa9cc2e191b970e4cbe5080f4fd2b87
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
@@ -61,8 +58,6 @@ export class FieldView extends React.Component<FieldViewProps> {
         }
         else if (field instanceof NumberField) {
             return <p>{field.Data}</p>
-        } else if (field instanceof HtmlField) {
-            return <WebView {...this.props} />
         } else if (field != FieldWaiting) {
             return <p>{field.GetValue}</p>
         } else
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index b9d0853b9..4f774bae2 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -9,12 +9,12 @@ import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView
 import { FieldWaiting } from '../../../fields/Field';
 import { observer } from "mobx-react"
 import { observable, action, spy } from 'mobx';
-import { KeyStore } from '../../../fields/Key';
+import { KeyStore } from '../../../fields/KeyStore';
 
 @observer
 export class WebBox extends React.Component<FieldViewProps> {
 
-    public static LayoutString() { return FieldView.LayoutString("WebBox"); }
+    public static LayoutString() { return FieldView.LayoutString(WebBox); }
     private _ref: React.RefObject<HTMLDivElement>;
     private _downX: number = 0;
     private _downY: number = 0;
@@ -38,8 +38,7 @@ export class WebBox extends React.Component<FieldViewProps> {
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (Date.now() - this._lastTap < 300) {
-            if (e.buttons === 1 && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView &&
-                SelectionManager.IsSelected(this.props.DocumentViewForField)) {
+            if (e.buttons === 1 && this.props.isSelected()) {
                 e.stopPropagation();
                 this._downX = e.clientX;
                 this._downY = e.clientY;
@@ -50,6 +49,7 @@ export class WebBox extends React.Component<FieldViewProps> {
             this._lastTap = Date.now();
         }
     }
+
     @action
     onPointerUp = (e: PointerEvent): void => {
         document.removeEventListener("pointerup", this.onPointerUp);
diff --git a/src/fields/WebField.ts b/src/fields/WebField.ts
index cd3519128..8f945d686 100644
--- a/src/fields/WebField.ts
+++ b/src/fields/WebField.ts
@@ -1,9 +1,10 @@
 import { BasicField } from "./BasicField";
-import { Field } from "./Field";
+import { Field, FieldId } from "./Field";
+import { Types } from "../server/Message";
 
 export class WebField extends BasicField<URL> {
-    constructor(data: URL | undefined = undefined) {
-        super(data == undefined ? new URL("https://crossorigin.me/" + "https://cs.brown.edu/") : data);
+    constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) {
+        super(data == undefined ? new URL("https://crossorigin.me/" + "https://cs.brown.edu/") : data, save, id);
     }
 
     toString(): string {
@@ -18,4 +19,12 @@ export class WebField extends BasicField<URL> {
         return new WebField(this.Data);
     }
 
+    ToJson(): { type: Types, data: URL, _id: string } {
+        return {
+            type: Types.Web,
+            data: this.Data,
+            _id: this.Id
+        }
+    }
+
 }
\ No newline at end of file
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 80fc9a80d..148e6e723 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -45,7 +45,7 @@ export class GetFieldArgs {
 }
 
 export enum Types {
-    Number, List, Key, Image, Document, Text, RichText, DocumentReference, Html
+    Number, List, Key, Image, Web, Document, Text, RichText, DocumentReference, Html
 }
 
 export class DocumentTransfer implements Transferable {
-- 
cgit v1.2.3-70-g09d2


From 3ff149e05a76fa0a0ace32a1b0c9876c4850aa2a Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 26 Feb 2019 12:32:52 -0500
Subject: extended CollectionTreeView to support drag and drop.  updated
 CollectionSchemaView's drag drop

---
 src/client/util/DragManager.ts                     |  33 ++++++
 .../views/collections/CollectionSchemaView.scss    |  27 +++++
 .../views/collections/CollectionSchemaView.tsx     | 111 ++++++++-------------
 .../views/collections/CollectionTreeView.scss      |   6 ++
 .../views/collections/CollectionTreeView.tsx       |  78 ++++++---------
 src/client/views/nodes/DocumentView.tsx            |  30 +++---
 src/client/views/nodes/FieldView.tsx               |  11 +-
 7 files changed, 160 insertions(+), 136 deletions(-)

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

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index aab23f91c..8adadee0f 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,4 +1,37 @@
 import { DocumentDecorations } from "../views/DocumentDecorations";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { Document } from "../../fields/Document"
+import { action } from "mobx";
+
+export function setupDrag(_reference: React.RefObject<HTMLDivElement>, _dragDocument: Document) {
+    let onRowMove = action((e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        document.removeEventListener("pointermove", onRowMove);
+        document.removeEventListener('pointerup', onRowUp);
+        DragManager.StartDrag(_reference.current!, { document: _dragDocument });
+    });
+    let onRowUp = action((e: PointerEvent): void => {
+        document.removeEventListener("pointermove", onRowMove);
+        document.removeEventListener('pointerup', onRowUp);
+    });
+    let onItemDown = (e: React.PointerEvent) => {
+        // if (this.props.isSelected() || this.props.isTopMost) {
+        if (e.button == 0) {
+            e.stopPropagation();
+            e.preventDefault();
+            if (e.shiftKey) {
+                CollectionDockingView.Instance.StartOtherDrag(_reference.current!, _dragDocument);
+            } else {
+                document.addEventListener("pointermove", onRowMove);
+                document.addEventListener('pointerup', onRowUp);
+            }
+        }
+        //}
+    }
+    return onItemDown;
+}
 
 export namespace DragManager {
     export function Root() {
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index f86094a98..995d60f74 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,4 +1,5 @@
 
+
 .collectionSchemaView-container {
     border-style: solid;
     box-sizing: border-box;
@@ -14,6 +15,32 @@
         border-radius: 2px;
         background-color: rgba(0,0,0,.5);
     }
+    .collectionSchemaView-previewRegion {
+        position: relative; 
+        background: black; 
+        float: left; 
+        height: 100%;
+    }
+    .collectionSchemaView-previewHandle {
+        position: absolute;
+        height: 37px;
+        width: 20px; 
+        z-index: 20; 
+        right: 0; 
+        top: 0; 
+        background: Black ;
+    }
+    .collectionSchemaView-dividerDragger{
+        position: relative; 
+        background: black; 
+        float: left; 
+        height: 100%;
+    }
+    .collectionSchemaView-tableContainer {
+        position: relative;
+        float: left;
+        height: 100%; 
+    }
 
     .ReactTable {
         position: absolute;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 79c688f6b..106a5c4f5 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -15,11 +15,11 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import "./CollectionSchemaView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
-import { DragManager } from "../../util/DragManager";
-import { CollectionDockingView } from "./CollectionDockingView";
+import { setupDrag } from "../../util/DragManager";
 
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
 
+
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
     private _mainCont = React.createRef<HTMLDivElement>();
@@ -32,9 +32,6 @@ export class CollectionSchemaView extends CollectionViewBase {
     @observable _selectedIndex = 0;
     @observable _splitPercentage: number = 50;
 
-
-
-
     renderCell = (rowProps: CellInfo) => {
         let props: FieldViewProps = {
             doc: rowProps.value[0],
@@ -48,31 +45,9 @@ export class CollectionSchemaView extends CollectionViewBase {
             <FieldView {...props} />
         )
         let reference = React.createRef<HTMLDivElement>();
-        let onRowMove = action((e: PointerEvent): void => {
-            e.stopPropagation();
-            e.preventDefault();
-
-            document.removeEventListener("pointermove", onRowMove);
-            document.removeEventListener('pointerup', onRowUp);
-            DragManager.StartDrag(reference.current!, { document: props.doc });
-        });
-        let onRowUp = action((e: PointerEvent): void => {
-            document.removeEventListener("pointermove", onRowMove);
-            document.removeEventListener('pointerup', onRowUp);
-        });
-        let onRowDown = (e: React.PointerEvent) => {
-            if (this.props.isSelected() || this.props.isTopMost) {
-                if (e.shiftKey) {
-                    CollectionDockingView.Instance.StartOtherDrag(reference.current!, props.doc);
-                    e.stopPropagation();
-                } else {
-                    document.addEventListener("pointermove", onRowMove);
-                    document.addEventListener('pointerup', onRowUp);
-                }
-            }
-        }
+        let onItemDown = setupDrag(reference, props.doc);
         return (
-            <div onPointerDown={onRowDown} ref={reference}>
+            <div onPointerDown={onItemDown} ref={reference}>
                 <EditableView contents={contents}
                     height={36} GetValue={() => {
                         let field = props.doc.Get(props.fieldKey);
@@ -80,7 +55,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                             return field.ToScriptString();
                         }
                         return field || "";
-                    }} SetValue={(value: string) => {
+                    }}
+                    SetValue={(value: string) => {
                         let script = CompileScript(value);
                         if (!script.compiled) {
                             return false;
@@ -97,7 +73,9 @@ export class CollectionSchemaView extends CollectionViewBase {
                             }
                         }
                         return false;
-                    }}></EditableView></div>
+                    }}>
+                </EditableView>
+            </div>
         )
     }
 
@@ -216,44 +194,43 @@ export class CollectionSchemaView extends CollectionViewBase {
                 }
             </Measure>
         )
-        let handle = !this.props.active() ? (null) : (
-            <div style={{ position: "absolute", height: "37px", width: "20px", zIndex: 20, right: 0, top: 0, background: "Black" }} onPointerDown={this.onExpanderDown} />);
+        let previewHandle = !this.props.active() ? (null) : (
+            <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
         return (
-            <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
-                <Measure onResize={action((r: any) => {
-                    this._dividerX = r.entry.width;
-                    this._panelHeight = r.entry.height;
-                })}>
-                    {({ measureRef }) =>
-                        <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ position: "relative", float: "left", width: `${this._splitPercentage}%`, height: "100%" }}>
-                            <ReactTable
-                                data={children}
-                                pageSize={children.length}
-                                page={0}
-                                showPagination={false}
-                                columns={columns.map(col => ({
-                                    Header: col.Name,
-                                    accessor: (doc: Document) => [doc, col],
-                                    id: col.Id
-                                }))}
-                                column={{
-                                    ...ReactTableDefaults.column,
-                                    Cell: this.renderCell,
-
-                                }}
-                                getTrProps={this.getTrProps}
-                            />
-                        </div>
-                    }
-                </Measure>
-                <div className="collectionSchemaView-dividerDragger" style={{ position: "relative", background: "black", float: "left", width: `${this.DIVIDER_WIDTH}px`, height: "100%" }} onPointerDown={this.onDividerDown} />
-                <div className="collectionSchemaView-previewRegion"
-                    onDrop={(e: React.DragEvent) => this.onDrop(e, {})}
-                    ref={this.createDropTarget}
-                    style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}>
-                    {content}
+            <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
+                <div className="collectionSchemaView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}>
+                    <Measure onResize={action((r: any) => {
+                        this._dividerX = r.entry.width;
+                        this._panelHeight = r.entry.height;
+                    })}>
+                        {({ measureRef }) =>
+                            <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ width: `${this._splitPercentage}%` }}>
+                                <ReactTable
+                                    data={children}
+                                    pageSize={children.length}
+                                    page={0}
+                                    showPagination={false}
+                                    columns={columns.map(col => ({
+                                        Header: col.Name,
+                                        accessor: (doc: Document) => [doc, col],
+                                        id: col.Id
+                                    }))}
+                                    column={{
+                                        ...ReactTableDefaults.column,
+                                        Cell: this.renderCell,
+
+                                    }}
+                                    getTrProps={this.getTrProps}
+                                />
+                            </div>
+                        }
+                    </Measure>
+                    <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
+                    <div className="collectionSchemaView-previewRegion" style={{ width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)` }}>
+                        {content}
+                    </div>
+                    {previewHandle}
                 </div>
-                {handle}
             </div >
         )
     }
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 675fc6c53..c488e2894 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -25,4 +25,10 @@ li:before {
 .uncollapsed:before {
     content: '\25bc';
     margin-right: 0.5em;
+}
+
+.collectionTreeView-dropTarget {
+    border-style: solid;
+    box-sizing: border-box;
+    height:100%;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 52e853bf7..64f4c0970 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -7,6 +7,9 @@ import React = require("react")
 import { TextField } from "../../../fields/TextField";
 import { observable, action } from "mobx";
 import "./CollectionTreeView.scss";
+import { setupDrag } from "../../util/DragManager";
+import { FieldWaiting } from "../../../fields/Field";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 
 export interface TreeViewProps {
     document: Document;
@@ -23,60 +26,39 @@ class TreeView extends React.Component<TreeViewProps> {
 
     /**
      * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element.
-     * @param document The document to render.
+     * @param childDocument The document to render.
      */
-    renderChild(document: Document) {
-        var children = document.GetT<ListField<Document>>(KeyStore.Data, ListField);
-        let title = document.GetT<TextField>(KeyStore.Title, TextField);
+    renderChild(childDocument: Document) {
+        let reference = React.createRef<HTMLDivElement>();
 
-        // if the title hasn't loaded, immediately return the div
-        if (!title || title === "<Waiting>") {
-            return <div key={document.Id}></div>;
-        }
-
-        // otherwise, check if it's a collection.
-        else if (children && children !== "<Waiting>") {
-            // if it's not collapsed, then render the full TreeView.
-            if (!this.collapsed) {
-                return (
-                    <li className="uncollapsed" key={document.Id} onClick={action(() => this.collapsed = true)} >
-                        {title.Data}
-                        <ul key={document.Id}>
-                            <TreeView
-                                document={document}
-                            />
-                        </ul>
-                    </li>
-                );
-            } else {
-                return <li className="collapsed" key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
-            }
-        }
+        var children = childDocument.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
+        let onItemDown = setupDrag(reference, childDocument);
 
-        // finally, if it's a normal document, then render it as such.
-        else {
-            return <li key={document.Id}>{title.Data}</li>;
+        if (title && title != FieldWaiting) {
+            let subView = !children || this.collapsed || children === FieldWaiting ? (null) :
+                <ul>
+                    <TreeView document={childDocument} />
+                </ul>;
+            return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
+                <li className={!children ? "leaf" : this.collapsed ? "collapsed" : "uncollapsed"}
+                    onClick={action(() => this.collapsed = !this.collapsed)} >
+                    {title.Data}
+                    {subView}
+                </li>
+            </div>
         }
+        return (null);
     }
 
     render() {
         var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
-
-        if (children && children !== "<Waiting>") {
-            return (<div>
-                {children.Data.map(value => this.renderChild(value))}
-            </div>)
-            // let results: JSX.Element[] = [];
-
-            // // append a list item for each child in the collection
-            // children.Data.forEach((value) => {
-            //     results.push(this.renderChild(value));
-            // })
-
-            // return results;
-        } else {
-            return <div></div>;
-        }
+        return !children || children === FieldWaiting ? (null) :
+            (children.Data.map(value =>
+                <div key={value.Id}>
+                    {this.renderChild(value)}
+                </div>)
+            )
     }
 }
 
@@ -87,11 +69,11 @@ export class CollectionTreeView extends CollectionViewBase {
     render() {
         let titleStr = "";
         let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
-        if (title && title !== "<Waiting>") {
+        if (title && title !== FieldWaiting) {
             titleStr = title.Data;
         }
         return (
-            <div>
+            <div className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
                 <h3>{titleStr}</h3>
                 <ul className="no-indent">
                     <TreeView
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 87f2e205b..c579b7142 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -174,26 +174,22 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             return;
         }
 
-        if (this.topMost) {
-            ContextMenu.Instance.clearItems()
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-        }
-        else {
+        ContextMenu.Instance.clearItems()
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        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) })
+        ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
+        //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        if (!this.topMost) {
             // DocumentViews should stop propagation of this event
             e.stopPropagation();
-
-            ContextMenu.Instance.clearItems();
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
-            ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
-            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) })
-            ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
-            ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-            SelectionManager.SelectDoc(this, e.ctrlKey);
         }
+
+        ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        SelectionManager.SelectDoc(this, e.ctrlKey);
     }
 
     @computed get mainContent() {
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 1a9d325db..b71309bf5 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -52,11 +52,14 @@ export class FieldView extends React.Component<FieldViewProps> {
         }
         else if (field instanceof NumberField) {
             return <p>{field.Data}</p>
-        } else if (field instanceof HtmlField) {
+        }
+        else if (field instanceof HtmlField) {
             return <WebView {...this.props} />
-        } else if (field != FieldWaiting) {
-            return <p>{field.GetValue}</p>
-        } else
+        }
+        else if (field != FieldWaiting) {
+            return <p>{JSON.stringify(field.GetValue())}</p>
+        }
+        else
             return <p> {"Waiting for server..."} </p>
     }
 
-- 
cgit v1.2.3-70-g09d2


From 183cff4ed4c4a5f20abcb7b56a9921c1f0a33089 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 26 Feb 2019 19:27:34 -0500
Subject: removed WebView

---
 .../views/collections/CollectionFreeFormView.tsx     |  5 ++---
 src/client/views/nodes/DocumentView.tsx              |  3 +--
 src/client/views/nodes/FieldView.tsx                 |  5 -----
 src/client/views/nodes/WebView.tsx                   | 20 --------------------
 4 files changed, 3 insertions(+), 30 deletions(-)
 delete mode 100644 src/client/views/nodes/WebView.tsx

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

diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index c454d62b3..2edd5d953 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -13,7 +13,6 @@ import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionView } from "../collections/CollectionView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentView } from "../nodes/DocumentView";
-import { WebView } from "../nodes/WebView";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import { WebBox } from "../nodes/WebBox";
@@ -200,7 +199,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get backgroundView() {
         return !this.backgroundLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView, WebBox }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox }}
                 bindings={this.props.bindings}
                 jsx={this.backgroundLayout}
                 showWarnings={true}
@@ -211,7 +210,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get overlayView() {
         return !this.overlayLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView, WebBox }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox }}
                 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 3517dd0c6..2355313c4 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -12,7 +12,6 @@ import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionView, CollectionViewType } from "../collections/CollectionView";
-import { WebView } from "./WebView";
 import { ContextMenu } from "../ContextMenu";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
@@ -196,7 +195,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     @computed get mainContent() {
         var val = this.props.Document.Id;
         return <JsxParser
-            components={{ FormattedTextBox, ImageBox, WebBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView }}
+            components={{ FormattedTextBox, ImageBox, WebBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView }}
             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 4e8abd682..f34574234 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 { HtmlField } from "../../../fields/HtmlField";
-import { WebView } from "./WebView";
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
@@ -58,9 +56,6 @@ export class FieldView extends React.Component<FieldViewProps> {
         else if (field instanceof NumberField) {
             return <p>{field.Data}</p>
         }
-        else if (field instanceof WebField) {
-            return <WebView {...this.props} />
-        }
         else if (field != FieldWaiting) {
             return <p>{JSON.stringify(field.GetValue())}</p>
         }
diff --git a/src/client/views/nodes/WebView.tsx b/src/client/views/nodes/WebView.tsx
deleted file mode 100644
index 5cc85eb28..000000000
--- a/src/client/views/nodes/WebView.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { FieldViewProps, FieldView } from "./FieldView";
-import { computed } from "mobx";
-import { observer } from "mobx-react";
-import { KeyStore } from "../../../fields/KeyStore";
-import React = require('react')
-import { HtmlField } from "../../../fields/HtmlField";
-
-@observer
-export class WebView extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(WebView, fieldStr) }
-
-    @computed
-    get html(): string {
-        return this.props.doc.GetData(KeyStore.Data, HtmlField, "" as string);
-    }
-
-    render() {
-        return <span dangerouslySetInnerHTML={{ __html: this.html }}></span>
-    }
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 14d6495e4d4b9d38a37187a50ebeb84057abbc20 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 26 Feb 2019 23:59:38 -0500
Subject: from last

---
 src/client/views/Main.tsx            | 2 +-
 src/client/views/nodes/FieldView.tsx | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

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

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index af4db521c..578aecd1e 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -85,7 +85,7 @@ Documents.initProtos(() => {
             width: 200, height: 200, title: "an image of a cat"
         }));
         let addWebNode = action(() => Documents.WebDocument("https://cs.brown.edu/courses/cs166/", {
-            width: 200, height: 200, title: "an image of a cat"
+            width: 200, height: 200, title: "a sample web page"
         }));
 
         let addClick = (creator: any) => action(() => {
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index f34574234..a883fa672 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -12,6 +12,7 @@ import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
 import { WebBox } from "./WebBox";
+import { HtmlField } from "../../../fields/HtmlField";
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
@@ -53,6 +54,10 @@ export class FieldView extends React.Component<FieldViewProps> {
         else if (field instanceof WebField) {
             return <WebBox {...this.props} />
         }
+        // bcz: this belongs here, but it doesn't render well so taking it out for now
+        // else if (field instanceof HtmlField) {
+        //     return <WebBox {...this.props} />
+        // }
         else if (field instanceof NumberField) {
             return <p>{field.Data}</p>
         }
-- 
cgit v1.2.3-70-g09d2


From 60f2458ca0faaa8bc5f5d333034cea5fdd513bf6 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Sat, 2 Mar 2019 17:30:01 -0500
Subject: cleaning pt2

---
 src/client/views/ContextMenuItem.tsx                   | 1 -
 src/client/views/DocumentDecorations.tsx               | 2 +-
 src/client/views/collections/CollectionDockingView.tsx | 5 +----
 src/client/views/collections/CollectionSchemaView.tsx  | 4 ++--
 src/client/views/collections/CollectionView.tsx        | 2 +-
 src/client/views/collections/CollectionViewBase.tsx    | 6 +++---
 src/client/views/nodes/DocumentView.tsx                | 6 +-----
 src/client/views/nodes/FieldView.tsx                   | 2 +-
 8 files changed, 10 insertions(+), 18 deletions(-)

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

diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 8f00f8b3d..91fc96c19 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,5 +1,4 @@
 import React = require("react");
-import { ContextMenu } from "./ContextMenu";
 
 export interface ContextMenuProps {
     description: string;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 975a125f7..9fd73a33b 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,4 +1,4 @@
-import { observable, computed, action } from "mobx";
+import { observable, computed } from "mobx";
 import React = require("react");
 import { SelectionManager } from "../util/SelectionManager";
 import { observer } from "mobx-react";
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 6b7c2a191..c51fba908 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,13 +1,11 @@
 import * as GoldenLayout from "golden-layout";
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, computed, observable, reaction } from "mobx";
+import { action, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/KeyStore";
-import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
 import Measure from "react-measure";
 import { FieldId, Opt, Field } from "../../../fields/Field";
 import { Utils } from "../../../Utils";
@@ -17,7 +15,6 @@ import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import React = require("react");
-import { changeDependenciesStateTo0 } from "mobx/lib/internal";
 import { SubCollectionViewProps } from "./CollectionViewBase";
 
 @observer
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index bf06dd5e9..8c4a1bf2e 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,11 +1,11 @@
 import React = require("react")
-import { action, observable, trace } from "mobx";
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
 import "react-table/react-table.css";
 import { Document } from "../../../fields/Document";
-import { Field, FieldWaiting } from "../../../fields/Field";
+import { Field } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { CompileScript, ToField } from "../../util/Scripting";
 import { Transform } from "../../util/Transform";
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 948f97889..eb502f611 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable } from "mobx";
+import { action } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 51dd50d39..73d7acefb 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -1,12 +1,12 @@
-import { action, computed } from "mobx";
+import { action } from "mobx";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
 import React = require("react");
 import { KeyStore } from "../../../fields/KeyStore";
-import { Opt, FieldWaiting } from "../../../fields/Field";
+import { FieldWaiting } from "../../../fields/Field";
 import { undoBatch } from "../../util/UndoManager";
 import { DragManager } from "../../util/DragManager";
-import { DocumentView, JsxArgs } from "../nodes/DocumentView";
+import { DocumentView } from "../nodes/DocumentView";
 import { Documents, DocumentOptions } from "../../documents/Documents";
 import { Key } from "../../../fields/Key";
 import { Transform } from "../../util/Transform";
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6ee313522..2fc00f15d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,6 +1,5 @@
-import { action, computed, runInAction } from "mobx";
+import { action, computed } from "mobx";
 import { observer } from "mobx-react";
-import { observable } from "mobx";
 import { Document } from "../../../fields/Document";
 import { Field, FieldWaiting, Opt } from "../../../fields/Field";
 import { Key } from "../../../fields/Key";
@@ -21,9 +20,6 @@ import { KeyValueBox } from "./KeyValueBox"
 import { WebBox } from "../nodes/WebBox";
 import "./DocumentView.scss";
 import React = require("react");
-import { TextField } from "../../../fields/TextField";
-import { Utils } from "../../../Utils";
-import { CollectionViewProps } from "../collections/CollectionViewBase";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index f372258f8..9e63006d1 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -1,7 +1,7 @@
 import React = require("react")
 import { observer } from "mobx-react";
 import { computed } from "mobx";
-import { Field, Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
+import { Field, FieldWaiting, FieldValue } from "../../../fields/Field";
 import { Document } from "../../../fields/Document";
 import { TextField } from "../../../fields/TextField";
 import { NumberField } from "../../../fields/NumberField";
-- 
cgit v1.2.3-70-g09d2

