From 4c84114b79eaadb494258d3d8e8163280266247d Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 25 Feb 2019 21:21:14 -0500
Subject: fixed some small things

---
 src/client/views/collections/CollectionSchemaView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/views/collections/CollectionSchemaView.tsx')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 38217d7c4..79c688f6b 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -116,8 +116,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                 }
             }),
             style: {
-                background: rowInfo.index == this._selectedIndex ? "#00afec" : "white",
-                color: rowInfo.index == this._selectedIndex ? "white" : "black"
+                background: rowInfo.index == this._selectedIndex ? "lightGray" : "white",
+                //color: rowInfo.index == this._selectedIndex ? "white" : "black"
             }
         };
     }
-- 
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/collections/CollectionSchemaView.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

