From b639d1fdfc8dfe9b1ea300665b4b4d74929f8af7 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 20 Mar 2019 20:21:12 -0400
Subject: added drag from tree view

---
 .../views/collections/CollectionTreeView.tsx       | 23 +++++++++++-----------
 1 file changed, 11 insertions(+), 12 deletions(-)

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

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index f9da759fd..19dd44c97 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -10,7 +10,7 @@ import "./CollectionTreeView.scss";
 import { EditableView } from "../EditableView";
 import { setupDrag } from "../../util/DragManager";
 import { FieldWaiting } from "../../../fields/Field";
-import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+import { COLLECTION_BORDER_WIDTH, CollectionView } from "./CollectionView";
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -70,16 +70,12 @@ class TreeView extends React.Component<TreeViewProps> {
      * Renders the EditableView title element for placement into the tree.
      */
     renderTitle() {
+        let reference = React.createRef<HTMLDivElement>();
+        let onItemDown = setupDrag(reference, () => this.props.document, (containingCollection: CollectionView) => this.props.deleteDoc(this.props.document));
         let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
-
-        // if the title hasn't loaded, immediately return the div
-        if (!title || title === "<Waiting>") {
-            return <div key={this.props.document.Id}></div>;
-        }
-
-        return <div className="docContainer"> <EditableView
+        let editableView = (titleString: string) => (<EditableView
             display={"inline"}
-            contents={title.Data}
+            contents={titleString}
             height={36} GetValue={() => {
                 let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
                 if (title && title !== "<Waiting>")
@@ -88,9 +84,12 @@ class TreeView extends React.Component<TreeViewProps> {
             }} SetValue={(value: string) => {
                 this.props.document.SetData(KeyStore.Title, value, TextField);
                 return true;
-            }} />
-            <div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div>
-        </div >
+            }} />);
+        return (
+            <div key={this.props.document.Id} className="docContainer" ref={reference} onPointerDown={onItemDown}>
+                {(!title || title === "<Waiting>") ? (null) : editableView(title.Data)}
+                <div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div>
+            </div >)
     }
 
     render() {
-- 
cgit v1.2.3-70-g09d2


From d882d4013dc2df03a55c3f4afc954b7d9a38b4e4 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 20 Mar 2019 22:08:32 -0400
Subject: tree view cleanup

---
 src/client/Server.ts                               |   2 +-
 src/client/views/EditableView.tsx                  |   4 +-
 src/client/views/InkingCanvas.tsx                  |   2 +-
 .../views/collections/CollectionFreeFormView.tsx   |   4 +-
 .../views/collections/CollectionTreeView.scss      |   5 +-
 .../views/collections/CollectionTreeView.tsx       | 143 ++++++++-------------
 src/client/views/collections/CollectionView.tsx    |   4 +-
 src/client/views/nodes/DocumentView.tsx            |   4 +-
 8 files changed, 66 insertions(+), 102 deletions(-)

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

diff --git a/src/client/Server.ts b/src/client/Server.ts
index bbdc27397..7d882c76d 100644
--- a/src/client/Server.ts
+++ b/src/client/Server.ts
@@ -39,7 +39,7 @@ export class Server {
             reaction(() => {
                 return this.ClientFieldsCached.get(fieldid);
             }, (field, reaction) => {
-                if (field !== "<Waiting>") {
+                if (field !== FieldWaiting) {
                     reaction.dispose()
                     callback(field)
                 }
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 98a6ed1ba..579d6e6ad 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -1,6 +1,6 @@
 import React = require('react')
 import { observer } from 'mobx-react';
-import { observable, action } from 'mobx';
+import { observable, action, trace } from 'mobx';
 import "./EditableView.scss"
 
 export interface EditableProps {
@@ -52,7 +52,7 @@ export class EditableView extends React.Component<EditableProps> {
         } else {
             return (
                 <div className="editableView-container-editing" style={{ display: this.props.display, height: "auto", maxHeight: `${this.props.height}` }}
-                    onClick={action(() => this.editing = true)}>
+                    onClick={action(() => this.editing = true)} >
                     {this.props.contents}
                 </div>
             )
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
index 8d0121035..36a8834a0 100644
--- a/src/client/views/InkingCanvas.tsx
+++ b/src/client/views/InkingCanvas.tsx
@@ -137,7 +137,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
 
         // get data from server
         // let inkField = this.props.Document.GetT(KeyStore.Ink, InkField);
-        // if (!inkField || inkField == "<Waiting>") {
+        // if (!inkField || inkField == FieldWaiting) {
         //     return (<div className="inking-canvas" style={canvasStyle}
         //         onMouseDown={this.handleMouseDown} onMouseMove={this.handleMouseMove} >
         //         <svg>
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 8bf4a7539..da9f7b392 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -219,13 +219,13 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @computed get backgroundLayout(): string | undefined {
         let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField);
-        if (field && field !== "<Waiting>") {
+        if (field && field !== FieldWaiting) {
             return field.Data;
         }
     }
     @computed get overlayLayout(): string | undefined {
         let field = this.props.Document.GetT(KeyStore.OverlayLayout, TextField);
-        if (field && field !== "<Waiting>") {
+        if (field && field !== FieldWaiting) {
             return field.Data;
         }
     }
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index fa0f1c761..5a14aa54d 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -1,6 +1,8 @@
 @import "../global_variables";
 #body {
     padding: 20px;
+    padding-left: 10px;
+    padding-right: 0px;
     background: $light-color-secondary;
     font-size: 13px;
     overflow: scroll;
@@ -49,6 +51,7 @@ li {
 .docContainer:hover {
     .delete-button {
         display: inline;
+        width: auto;
     }
 }
 
@@ -57,5 +60,5 @@ li {
     float: right;
     margin-left: 15px;
     margin-top: 3px;
-    display: none;
+    display: inline;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 19dd44c97..6edd90215 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -1,20 +1,19 @@
+import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
+import { faCaretDown, faCaretRight, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
-import { CollectionViewBase } from "./CollectionViewBase";
 import { Document } from "../../../fields/Document";
+import { FieldWaiting } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
-import React = require("react")
-import { TextField } from "../../../fields/TextField";
-import { observable, action } from "mobx";
-import "./CollectionTreeView.scss";
-import { EditableView } from "../EditableView";
 import { setupDrag } from "../../util/DragManager";
-import { FieldWaiting } from "../../../fields/Field";
-import { COLLECTION_BORDER_WIDTH, CollectionView } from "./CollectionView";
+import { EditableView } from "../EditableView";
+import "./CollectionTreeView.scss";
+import { CollectionView, COLLECTION_BORDER_WIDTH } from "./CollectionView";
+import { CollectionViewBase } from "./CollectionViewBase";
+import React = require("react")
 
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTrashAlt, faCaretRight, faCaretDown } from '@fortawesome/free-solid-svg-icons';
 
 export interface TreeViewProps {
     document: Document;
@@ -37,13 +36,9 @@ library.add(faCaretRight);
  */
 class TreeView extends React.Component<TreeViewProps> {
 
-    @observable
-    collapsed: boolean = false;
-
-    delete = () => {
-        this.props.deleteDoc(this.props.document);
-    }
+    @observable _collapsed: boolean = true;
 
+    delete = () => this.props.deleteDoc(this.props.document);
 
     @action
     remove = (document: Document) => {
@@ -54,16 +49,13 @@ class TreeView extends React.Component<TreeViewProps> {
     }
 
     renderBullet(type: BulletType) {
-        let onClicked = action(() => this.collapsed = !this.collapsed);
-
+        let onClicked = action(() => this._collapsed = !this._collapsed);
+        let bullet: IconProp | undefined = undefined;
         switch (type) {
-            case BulletType.Collapsed:
-                return <div className="bullet" onClick={onClicked}><FontAwesomeIcon icon="caret-right" /></div>
-            case BulletType.Collapsible:
-                return <div className="bullet" onClick={onClicked}><FontAwesomeIcon icon="caret-down" /></div>
-            case BulletType.List:
-                return <div className="bullet"></div>
+            case BulletType.Collapsed: bullet = "caret-right"; break;
+            case BulletType.Collapsible: bullet = "caret-down"; break;
         }
+        return <div className="bullet" onClick={onClicked}>{bullet ? <FontAwesomeIcon icon={bullet} /> : ""} </div>
     }
 
     /**
@@ -72,74 +64,48 @@ class TreeView extends React.Component<TreeViewProps> {
     renderTitle() {
         let reference = React.createRef<HTMLDivElement>();
         let onItemDown = setupDrag(reference, () => this.props.document, (containingCollection: CollectionView) => this.props.deleteDoc(this.props.document));
-        let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
-        let editableView = (titleString: string) => (<EditableView
-            display={"inline"}
-            contents={titleString}
-            height={36} GetValue={() => {
-                let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
-                if (title && title !== "<Waiting>")
-                    return title.Data;
-                return "";
-            }} SetValue={(value: string) => {
-                this.props.document.SetData(KeyStore.Title, value, TextField);
-                return true;
-            }} />);
+        let editableView = (titleString: string) =>
+            (<EditableView
+                display={"inline"}
+                contents={titleString}
+                height={36}
+                GetValue={() => this.props.document.Title}
+                SetValue={(value: string) => {
+                    this.props.document.SetText(KeyStore.Title, value);
+                    return true;
+                }}
+            />);
         return (
             <div key={this.props.document.Id} className="docContainer" ref={reference} onPointerDown={onItemDown}>
-                {(!title || title === "<Waiting>") ? (null) : editableView(title.Data)}
+                {editableView(this.props.document.Title)}
                 <div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div>
             </div >)
     }
 
     render() {
-        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
-
-        let reference = React.createRef<HTMLDivElement>();
-        let onItemDown = setupDrag(reference, () => this.props.document);
-        let titleElement = this.renderTitle();
+        let bulletType = BulletType.List;
+        let childElements: JSX.Element | undefined = undefined;
 
-        // check if this document is a collection
-        if (children && children !== FieldWaiting) {
-            let subView;
-
-            // if uncollapsed, then add the children elements
-            if (!this.collapsed) {
-                // render all children elements
-                let childrenElement = (children.Data.map(value =>
-                    <TreeView document={value} deleteDoc={this.remove} />)
-                )
-                subView =
-                    <li className="collection-child" key={this.props.document.Id} >
-                        {this.renderBullet(BulletType.Collapsible)}
-                        {titleElement}
-                        <ul key={this.props.document.Id}>
-                            {childrenElement}
-                        </ul>
-                    </li>
-            } else {
-                subView = <li className="collection-child" key={this.props.document.Id}>
-                    {this.renderBullet(BulletType.Collapsed)}
-                    {titleElement}
-                </li>
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        if (children && children !== FieldWaiting) { // add children for a collection
+            if (!this._collapsed) {
+                bulletType = BulletType.Collapsible;
+                childElements = <ul key={this.props.document.Id}>
+                    {children.Data.map(value => <TreeView key={value.Id} document={value} deleteDoc={this.remove} />)}
+                </ul>
             }
-
-            return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
-                {subView}
-            </div>
-        }
-
-        // otherwise this is a normal leaf node
-        else {
-            return <li key={this.props.document.Id}>
-                {this.renderBullet(BulletType.List)}
-                {titleElement}
-            </li>;
+            else bulletType = BulletType.Collapsed;
         }
+        return <div className="treeViewItem-container" >
+            <li className="collection-child" key={this.props.document.Id}>
+                {this.renderBullet(bulletType)}
+                {this.renderTitle()}
+                {childElements ? childElements : (null)}
+            </li>
+        </div>
     }
 }
 
-
 @observer
 export class CollectionTreeView extends CollectionViewBase {
 
@@ -152,12 +118,6 @@ export class CollectionTreeView extends CollectionViewBase {
     }
 
     render() {
-        let titleStr = "";
-        let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
-        if (title && title !== FieldWaiting) {
-            titleStr = title.Data;
-        }
-
         var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
         let childrenElement = !children || children === FieldWaiting ? (null) :
             (children.Data.map(value =>
@@ -167,12 +127,13 @@ export class CollectionTreeView extends CollectionViewBase {
         return (
             <div id="body" className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>
                 <div className="coll-title">
-                    <EditableView contents={titleStr}
+                    <EditableView
+                        contents={this.props.Document.Title}
                         display={"inline"}
-                        height={72} GetValue={() => {
-                            return this.props.Document.Title;
-                        }} SetValue={(value: string) => {
-                            this.props.Document.SetData(KeyStore.Title, value, TextField);
+                        height={72}
+                        GetValue={() => this.props.Document.Title}
+                        SetValue={(value: string) => {
+                            this.props.Document.SetText(KeyStore.Title, value);
                             return true;
                         }} />
                 </div>
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index d4afc69cf..7e1d31018 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -12,7 +12,7 @@ import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
 import { CollectionTreeView } from "./CollectionTreeView";
-import { Field, FieldId } from "../../../fields/Field";
+import { Field, FieldId, FieldWaiting } from "../../../fields/Field";
 import { Main } from "../Main";
 
 export enum CollectionViewType {
@@ -86,7 +86,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
     get collectionViewType(): CollectionViewType {
         let Document = this.props.Document;
         let viewField = Document.GetT(KeyStore.ViewType, NumberField);
-        if (viewField === "<Waiting>") {
+        if (viewField === FieldWaiting) {
             return CollectionViewType.Invalid;
         } else if (viewField) {
             return viewField.Data;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 9e34b2b60..fec451b09 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,7 +1,7 @@
 import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
-import { Field, Opt } from "../../../fields/Field";
+import { Field, Opt, FieldWaiting } from "../../../fields/Field";
 import { Key } from "../../../fields/Key";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
@@ -315,7 +315,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             return (null);
         }
         let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField);
-        if (!lkeys || lkeys === "<Waiting>") {
+        if (!lkeys || lkeys === FieldWaiting) {
             return <p>Error loading layout keys</p>;
         }
         var scaling = this.props.ContentScaling();
-- 
cgit v1.2.3-70-g09d2


From 79846f5e85c04435082106724d49b03eea31657f Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 21 Mar 2019 00:57:02 -0400
Subject: minor fix to schema dragger and treeview

---
 src/client/views/collections/CollectionSchemaView.tsx | 2 +-
 src/client/views/collections/CollectionTreeView.tsx   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

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

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index c2645ea73..d3ade7ebb 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -189,7 +189,7 @@ export class CollectionSchemaView extends CollectionViewBase {
     @action
     onDividerMove = (e: PointerEvent): void => {
         let nativeWidth = this._mainCont.current!.getBoundingClientRect();
-        this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100));
+        this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, Math.max(0, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100)));
     }
     @action
     onDividerUp = (e: PointerEvent): void => {
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 6edd90215..ec1bf5d0e 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -1,7 +1,7 @@
 import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
 import { faCaretDown, faCaretRight, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable } from "mobx";
+import { action, observable, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { FieldWaiting } from "../../../fields/Field";
@@ -90,14 +90,14 @@ class TreeView extends React.Component<TreeViewProps> {
         if (children && children !== FieldWaiting) { // add children for a collection
             if (!this._collapsed) {
                 bulletType = BulletType.Collapsible;
-                childElements = <ul key={this.props.document.Id}>
+                childElements = <ul>
                     {children.Data.map(value => <TreeView key={value.Id} document={value} deleteDoc={this.remove} />)}
                 </ul>
             }
             else bulletType = BulletType.Collapsed;
         }
         return <div className="treeViewItem-container" >
-            <li className="collection-child" key={this.props.document.Id}>
+            <li className="collection-child">
                 {this.renderBullet(bulletType)}
                 {this.renderTitle()}
                 {childElements ? childElements : (null)}
-- 
cgit v1.2.3-70-g09d2

