treeview title fixes - made it aformatted text box so clicking on it will select the document. fixed margins. fixed dragging over tree view to not highlight drop bullets in outline mode unless its a bullet point being moved.

3 files changed, 17 insertions, 23 deletions

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index f5704d2bf..ae3fa3170 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -335,8 +335,10 @@ export namespace DragManager {
     }
     export let docsBeingDragged: Doc[] = [];
     export let CanEmbed = false;
+    export let DocDragData: DocumentDragData | undefined;
     export function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) {
         if (dragData.dropAction === "none") return;
+        DocDragData = dragData instanceof DocumentDragData ? dragData : undefined;
         const batch = UndoManager.StartBatch("dragging");
         eles = eles.filter(e => e);
         CanEmbed = dragData.canEmbed || false;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 6fb18d4c2..ea077ea40 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -7,7 +7,7 @@ import { Document, listSpec } from '../../../fields/Schema';
 import { ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, OmitKeys, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils';
+import { emptyFunction, OmitKeys, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnOne } from '../../../Utils';
 import { DocUtils } from '../../documents/Documents';
 import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 import { DocumentManager } from '../../util/DocumentManager';
@@ -47,7 +47,8 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _isDisposing = false; // notes that instance is in process of being disposed
     private refList: Set<any> = new Set(); // list of tree view items to monitor for height changes
-    private observer: any; // observer for mnonitoring tree view items.
+    private observer: any; // observer for monitoring tree view items.
+    private static expandViewLabelSize = 20;
 
     @computed get doc() { return this.props.Document; }
     @computed get dataDoc() { return this.props.DataDoc || this.doc; }
@@ -187,36 +188,26 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
 
 
     get documentTitle() {
-        return <DocumentView
-            Document={this.doc}
-            DataDoc={undefined}
-            LayoutTemplateString={FormattedTextBox.LayoutString("text")}
+        return <FormattedTextBox
+            {...this.props}
+            fieldKey={"text"}
             renderDepth={this.props.renderDepth + 1}
             isContentActive={this.isContentActive}
             isDocumentActive={this.isContentActive}
             rootSelected={returnTrue}
             forceAutoHeight={true} // needed to make the title resize even if the rest of the tree view is not autoHeight
-            docViewPath={this.props.docViewPath}
-            styleProvider={this.props.styleProvider}
-            layerProvider={this.props.layerProvider}
             PanelWidth={this.documentTitleWidth}
             PanelHeight={this.documentTitleHeight}
-            NativeWidth={this.documentTitleWidth}
-            NativeHeight={this.documentTitleHeight}
-            focus={this.props.focus}
-            treeViewDoc={this.props.Document}
-            ScreenToLocalTransform={this.titleTransform}
+            scaling={returnOne}
             docFilters={returnEmptyFilter}
             docRangeFilters={returnEmptyFilter}
             searchFilterDocs={returnEmptyDoclist}
             ContainingCollectionDoc={this.doc}
             ContainingCollectionView={this.props.CollectionView}
-            addDocument={this.props.addDocument}
+            addDocument={returnFalse}
             moveDocument={returnFalse}
             removeDocument={returnFalse}
             whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-            addDocTab={this.props.addDocTab}
-            pinToPres={this.props.pinToPres}
             bringToFront={returnFalse}
         />;
     }
@@ -265,7 +256,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
     @computed get titleBar() {
         return this.dataDoc === null ? (null) :
             <div className="collectionTreeView-titleBar" key={this.doc[Id]}
-                style={!this.outlineMode ? { paddingLeft: this.marginX(), paddingRight: this.marginX(), paddingTop: this.marginTop() } : {}}
+                style={!this.outlineMode ? { paddingLeft: this.marginX(), paddingTop: this.marginTop() } : {}}
                 ref={r => this._titleRef = r}
                 onKeyDown={e => {
                     if (this.outlineMode) {
@@ -333,10 +324,9 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
     marginBot = () => NumCast(this.doc._yMargin);
     documentTitleWidth = () => Math.min(this.layoutDoc?.[WidthSym](), this.panelWidth());
     documentTitleHeight = () => (this.layoutDoc?.[HeightSym]() || 0) - NumCast(this.layoutDoc.autoHeightMargins);
-    titleTransform = () => this.props.ScreenToLocalTransform().translate(-NumCast(this.doc._xPadding, 10), -NumCast(this.doc._yPadding, 20));
     truncateTitleWidth = () => this.treeViewtruncateTitleWidth;
     onChildClick = () => this.props.onChildClick?.() || ScriptCast(this.doc.onChildClick);
-    panelWidth = () => (this.props.PanelWidth() - 2 * this.marginX()) * (this.props.scaling?.() || 1);
+    panelWidth = () => Math.max(0, this.props.PanelWidth() - this.marginX() - CollectionTreeView.expandViewLabelSize) * (this.props.scaling?.() || 1);
 
     addAnnotationDocument = (doc: Doc | Doc[]) => this.props.CollectionView?.addDocument(doc, `${this.props.fieldKey}-annotations`) || false;
     remAnnotationDocument = (doc: Doc | Doc[]) => this.props.CollectionView?.removeDocument(doc, `${this.props.fieldKey}-annotations`) || false;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index a266c301f..d8f984601 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -221,9 +221,11 @@ export class TreeView extends React.Component<TreeViewProps> {
         const before = pt[1] < rect.top + rect.height / 2;
         const inside = pt[0] > Math.min(rect.left + 75, rect.left + rect.width * .75) || (!before && this.treeViewOpen && this.childDocList.length);
         this._header.current!.className = "treeView-header";
-        if (inside) this._header.current!.className += " treeView-header-inside";
-        else if (before) this._header.current!.className += " treeView-header-above";
-        else if (!before) this._header.current!.className += " treeView-header-below";
+        if (!this.props.treeView.outlineMode || DragManager.DocDragData?.treeViewDoc === this.props.treeView.rootDoc) {
+            if (inside) this._header.current!.className += " treeView-header-inside";
+            else if (before) this._header.current!.className += " treeView-header-above";
+            else if (!before) this._header.current!.className += " treeView-header-below";
+        }
         e.stopPropagation();
     }