From 7a1b11bd9d71d4b414059b6cbc0ad518011f7cdd Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 26 Aug 2021 15:10:09 -0400
Subject: another tree view fix for lightbox view and having tree view items
 not go off screen width-wise

---
 src/client/views/collections/CollectionTreeView.scss | 8 ++++++++
 src/client/views/collections/CollectionTreeView.tsx  | 5 ++---
 src/client/views/collections/TreeView.tsx            | 4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index ec461ab94..d370d21ab 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -1,5 +1,8 @@
 @import "../global/globalCssVariables";
 
+.collectionTreeView-container {
+    transform-origin: top left;
+}
 .collectionTreeView-dropTarget {
     border-width: $COLLECTION_BORDER_WIDTH;
     border-color: transparent;
@@ -35,6 +38,11 @@
         width: max-content;
     }
 
+    .no-indent-outline {
+        padding-left: 0;
+        width: 100%;
+    }
+
     .editableView-container {
         font-weight: bold;
     }
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index e94268204..89d42439e 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -298,8 +298,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
 
         return !(this.doc instanceof Doc) || !this.treeChildren ? (null) :
             <div className="collectionTreeView-container"
-                style={{ transform: `scale(${this.contentScaling})`, transformOrigin: "top left" }}
-
+                style={this.outlineMode ? { transform: `scale(${this.contentScaling})`, width: `calc(${100 / this.contentScaling}%)` } : {}}
                 onContextMenu={this.onContextMenu}>
                 <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() }}
@@ -308,7 +307,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
                     ref={this.createTreeDropTarget}>
                     {this.titleBar}
                     {this.renderClearButton}
-                    <ul className="no-indent">
+                    <ul className={`no-indent${this.outlineMode ? "-outline" : ""}`} >
                         {this.treeViewElements}
                     </ul>
                 </div >
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index e487106d6..86fd21677 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -296,7 +296,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         const aspect = Doc.NativeAspect(layoutDoc);
         if (layoutDoc._fitWidth) return Math.min(this.props.panelWidth() - treeBulletWidth(), layoutDoc[WidthSym]());
         if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.panelWidth() - treeBulletWidth()));
-        return Math.min(this.props.panelWidth() - treeBulletWidth(), Doc.NativeWidth(layoutDoc) ? layoutDoc[WidthSym]() : this.layoutDoc[WidthSym]());
+        return Math.min((this.props.panelWidth() - treeBulletWidth()) / (this.props.treeView.props.scaling?.() || 1), Doc.NativeWidth(layoutDoc) ? layoutDoc[WidthSym]() : this.layoutDoc[WidthSym]());
     }
     docHeight = () => {
         const layoutDoc = this.layoutDoc;
@@ -365,7 +365,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         return rows;
     }
 
-    rtfWidth = () => Math.min(this.layoutDoc?.[WidthSym](), this.props.panelWidth() - treeBulletWidth());
+    rtfWidth = () => Math.min(this.layoutDoc?.[WidthSym](), (this.props.panelWidth() - treeBulletWidth())) / (this.props.treeView.props.scaling?.() || 1);
     rtfHeight = () => this.rtfWidth() <= this.layoutDoc?.[WidthSym]() ? Math.min(this.layoutDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT;
     rtfOutlineHeight = () => Math.max(this.layoutDoc?.[HeightSym](), treeBulletWidth());
     expandPanelHeight = () => {
-- 
cgit v1.2.3-70-g09d2