From e0240412990f102523b86e324bc973cd2ed523a1 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 14 Sep 2021 22:27:17 -0400
Subject: refactored a bunch of names in MainView.  Fixed scrolling in left
 menu flyout treeview panels.

---
 src/client/views/collections/CollectionMenu.tsx    | 34 ++++++-----
 .../views/collections/CollectionTreeView.tsx       | 68 +++++++++++-----------
 src/client/views/collections/TreeView.tsx          |  2 +-
 3 files changed, 54 insertions(+), 50 deletions(-)

(limited to 'src/client/views/collections')

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 6ffa6c279..8e03b2db2 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -42,8 +42,13 @@ import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { TabDocView } from "./TabDocView";
 import { Colors } from "../global/globalEnums";
 
+interface CollectionMenuProps {
+    panelHeight: () => number;
+    panelWidth: () => number;
+}
+
 @observer
-export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
+export class CollectionMenu extends AntimodeMenu<CollectionMenuProps>{
     @observable static Instance: CollectionMenu;
 
     @observable SelectedCollection: DocumentView | undefined;
@@ -93,13 +98,10 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
         return new Transform(-translateX, -translateY, 1 / scale);
     }
 
-    panelWidth100 = () => 100;
-    panelHeight35 = () => 35;
-
     @computed get contMenuButtons() {
         trace();
         const selDoc = Doc.UserDoc().contextMenuBtns;
-        return !(selDoc instanceof Doc) ? (null) : <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: "35px" }} >
+        return !(selDoc instanceof Doc) ? (null) : <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: this.props.panelHeight() }} >
             <CollectionLinearView
                 Document={selDoc}
                 DataDoc={undefined}
@@ -122,8 +124,8 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
                 pinToPres={emptyFunction}
                 removeDocument={returnFalse}
                 ScreenToLocalTransform={this.buttonBarXf}
-                PanelWidth={this.panelWidth100}
-                PanelHeight={this.panelHeight35}
+                PanelWidth={this.props.panelWidth}
+                PanelHeight={this.props.panelHeight}
                 renderDepth={0}
                 focus={emptyFunction}
                 whenChildContentsActiveChanged={emptyFunction}
@@ -176,7 +178,7 @@ export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
     }
 }
 
-interface CollectionMenuProps {
+interface CollectionViewMenuProps {
     type: CollectionViewType;
     fieldKey: string;
     docView: DocumentView;
@@ -185,7 +187,7 @@ interface CollectionMenuProps {
 const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
 
 @observer
-export class CollectionViewBaseChrome extends React.Component<CollectionMenuProps> {
+export class CollectionViewBaseChrome extends React.Component<CollectionViewMenuProps> {
     //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\)
 
     get document() { return this.props.docView?.props.Document; }
@@ -628,14 +630,14 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
 }
 
 @observer
-export class CollectionDockingChrome extends React.Component<CollectionMenuProps> {
+export class CollectionDockingChrome extends React.Component<CollectionViewMenuProps> {
     render() {
         return (null);
     }
 }
 
 @observer
-export class CollectionFreeFormViewChrome extends React.Component<CollectionMenuProps & { isOverlay: boolean, isDoc?: boolean }> {
+export class CollectionFreeFormViewChrome extends React.Component<CollectionViewMenuProps & { isOverlay: boolean, isDoc?: boolean }> {
     public static Instance: CollectionFreeFormViewChrome;
     constructor(props: any) {
         super(props);
@@ -866,7 +868,7 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     }
 }
 @observer
-export class CollectionStackingViewChrome extends React.Component<CollectionMenuProps> {
+export class CollectionStackingViewChrome extends React.Component<CollectionViewMenuProps> {
     @observable private _currentKey: string = "";
     @observable private suggestions: string[] = [];
 
@@ -987,7 +989,7 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu
 
 
 @observer
-export class CollectionSchemaViewChrome extends React.Component<CollectionMenuProps> {
+export class CollectionSchemaViewChrome extends React.Component<CollectionViewMenuProps> {
     // private _textwrapAllRows: boolean = Cast(this.document.textwrappedSchemaRows, listSpec("string"), []).length > 0;
     get document() { return this.props.docView.props.Document; }
 
@@ -1035,7 +1037,7 @@ export class CollectionSchemaViewChrome extends React.Component<CollectionMenuPr
 }
 
 @observer
-export class CollectionTreeViewChrome extends React.Component<CollectionMenuProps> {
+export class CollectionTreeViewChrome extends React.Component<CollectionViewMenuProps> {
 
     get document() { return this.props.docView.props.Document; }
     get sortAscending() {
@@ -1072,7 +1074,7 @@ export class CollectionTreeViewChrome extends React.Component<CollectionMenuProp
 
 // Enter scroll speed for 3D Carousel 
 @observer
-export class Collection3DCarouselViewChrome extends React.Component<CollectionMenuProps> {
+export class Collection3DCarouselViewChrome extends React.Component<CollectionViewMenuProps> {
     get document() { return this.props.docView.props.Document; }
     @computed get scrollSpeed() {
         return this.document._autoScrollSpeed;
@@ -1113,7 +1115,7 @@ export class Collection3DCarouselViewChrome extends React.Component<CollectionMe
  * Chrome for grid view.
  */
 @observer
-export class CollectionGridViewChrome extends React.Component<CollectionMenuProps> {
+export class CollectionGridViewChrome extends React.Component<CollectionViewMenuProps> {
 
     private clicked: boolean = false;
     private entered: boolean = false;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 4d62a1af4..624a0bf4a 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -267,16 +267,17 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
         return hideTitle ? (null) : (this.outlineMode ? this.documentTitle : this.editableTitle)(this.treeChildren);
     }
 
+    return35 = () => 35;
     @computed get buttonMenu() {
-        const menuDoc:Doc = Cast(this.rootDoc.buttonMenuDoc, Doc, null);
+        const menuDoc: Doc = Cast(this.rootDoc.buttonMenuDoc, Doc, null);
         // To create a multibutton menu add a CollectionLinearView
-        if (menuDoc){
-            
+        if (menuDoc) {
+
             const width: number = NumCast(menuDoc._width, 30);
             const height: number = NumCast(menuDoc._height, 30);
             console.log(menuDoc.title, width, height);
             return (<div className="buttonMenu-docBtn"
-                style = {{width: width, height: height}}>
+                style={{ width: width, height: height }}>
                 <DocumentView
                     Document={menuDoc}
                     DataDoc={menuDoc}
@@ -289,8 +290,8 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
                     rootSelected={this.props.isSelected}
                     removeDocument={this.props.removeDocument}
                     ScreenToLocalTransform={Transform.Identity}
-                    PanelWidth={() => 35}
-                    PanelHeight={() => 35}
+                    PanelWidth={this.return35}
+                    PanelHeight={this.return35}
                     renderDepth={this.props.renderDepth + 1}
                     focus={emptyFunction}
                     styleProvider={this.props.styleProvider}
@@ -302,13 +303,14 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
                     docRangeFilters={this.props.docRangeFilters}
                     searchFilterDocs={this.props.searchFilterDocs}
                     ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined} 
+                    ContainingCollectionDoc={undefined}
                 />
             </div>);
         }
     }
 
-    
+    @observable _explainerHeight: number = 0;
+
     @computed get nativeWidth() { return Doc.NativeWidth(this.Document, undefined, true); }
     @computed get nativeHeight() { return Doc.NativeHeight(this.Document, undefined, true); }
 
@@ -336,30 +338,30 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
         const noviceExplainer = this.rootDoc.explainer;
 
         return !(this.doc instanceof Doc) || !this.treeChildren ? (null) :
-               <>
-                    {this.titleBar}
-                    <div className="collectionTreeView-container"
-                        style={this.outlineMode ? { transform: `scale(${this.contentScaling})`, width: `calc(${100 / this.contentScaling}%)` } : {}}
-                        onContextMenu={this.onContextMenu}>
-                        {buttonMenu || noviceExplainer ? <div className="documentButtonMenu">
-                            {buttonMenu ? this.buttonMenu : null}
-                            {Doc.UserDoc().noviceMode && noviceExplainer ? 
-                                <div className="documentExplanation">
-                                    {noviceExplainer}
-                                </div>
-                                : null
-                            }
-                        </div> : null}
-                        <div className="collectionTreeView-dropTarget"
-                            style={{ background: background(), paddingLeft: `${this.paddingX()}px`, paddingRight: `${this.paddingX()}px`, paddingBottom: `${this.paddingBot()}px`, paddingTop: `${this.paddingTop()}px`, pointerEvents: pointerEvents() }}
-                            onWheel={e => e.stopPropagation()}
-                            onDrop={this.onTreeDrop}
-                            ref={this.createTreeDropTarget}>
-                            <ul className={`no-indent${this.outlineMode ? "-outline" : ""}`} >
-                                {this.treeViewElements}
-                            </ul>
-                        </div >
-                    </div>
-               </>;
+            <>
+                {this.titleBar}
+                <div className="collectionTreeView-container"
+                    style={this.outlineMode ? { transform: `scale(${this.contentScaling})`, width: `calc(${100 / this.contentScaling}%)` } : {}}
+                    onContextMenu={this.onContextMenu}>
+                    {buttonMenu || noviceExplainer ? <div className="documentButtonMenu" ref={action((r: HTMLDivElement) => r && (this._explainerHeight = r.getBoundingClientRect().height))}>
+                        {buttonMenu ? this.buttonMenu : null}
+                        {Doc.UserDoc().noviceMode && noviceExplainer ?
+                            <div className="documentExplanation">
+                                {noviceExplainer}
+                            </div>
+                            : null
+                        }
+                    </div> : null}
+                    <div className="collectionTreeView-dropTarget"
+                        style={{ background: background(), height: `calc(100% - ${this._explainerHeight}px)`, paddingLeft: `${this.paddingX()}px`, paddingRight: `${this.paddingX()}px`, paddingBottom: `${this.paddingBot()}px`, paddingTop: `${this.paddingTop()}px`, pointerEvents: pointerEvents() }}
+                        onWheel={e => e.stopPropagation()}
+                        onDrop={this.onTreeDrop}
+                        ref={this.createTreeDropTarget}>
+                        <ul className={`no-indent${this.outlineMode ? "-outline" : ""}`} >
+                            {this.treeViewElements}
+                        </ul>
+                    </div >
+                </div>
+            </>;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index aa7b164b0..4fc25752f 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -869,7 +869,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             const childLayout = Doc.Layout(pair.layout);
             const rowHeight = () => {
                 const aspect = Doc.NativeAspect(childLayout);
-                return aspect ? Math.min(childLayout[WidthSym](), rowWidth()) / aspect : childLayout[HeightSym]();
+                return (aspect ? Math.min(childLayout[WidthSym](), rowWidth()) / aspect : childLayout[HeightSym]());
             };
             return <TreeView key={child[Id]} ref={r => treeViewRefs.set(child, r ? r : undefined)}
                 document={pair.layout}
-- 
cgit v1.2.3-70-g09d2