From 031a607100700f818f96b7fbf478f1b75292be9b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 5 Apr 2025 00:01:53 -0400
Subject: fixed sizing of  text box annotations sidebar button.  cleaned up
 TagsView to not overlap button bar below doc decorations or bottom resize
 handle

---
 .../views/nodes/formattedText/FormattedTextBox.tsx | 65 ++++++++++++++--------
 1 file changed, 42 insertions(+), 23 deletions(-)

(limited to 'src/client/views/nodes/formattedText')

diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index f7e6d8e1e..d90be007f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -154,11 +154,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
     // eslint-disable-next-line no-return-assign
     @computed get config()                     { return FormattedTextBox.MakeConfig(this._rules = new RichTextRules(this.Document, this), this); } // prettier-ignore
-    @computed get recordingDictation()        { return this.dataDoc?.mediaState === mediaState.Recording; } // prettier-ignore
-    @computed get SidebarShown()               {  return !!(this._showSidebar || this.layoutDoc._layout_showSidebar);  } // prettier-ignore
+    @computed get recordingDictation()         { return this.dataDoc?.mediaState === mediaState.Recording; } // prettier-ignore
+    @computed get SidebarShown()               { return !!(this._showSidebar || this.layoutDoc._layout_showSidebar);  } // prettier-ignore
     @computed get allSidebarDocs()             { return DocListCast(this.dataDoc[this.sidebarKey]); } // prettier-ignore
     @computed get noSidebar()                  { return this.DocumentView?.()._props.hideDecorationTitle || this._props.noSidebar || this.Document._layout_noSidebar; } // prettier-ignore
-    @computed get layout_sidebarWidthPercent() { return this._showSidebar ? '20%' : StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); } // prettier-ignore
+    @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._layout_sidebarWidthPercent, this._showSidebar ? '20%' :'0%'); } // prettier-ignore
     @computed get sidebarColor()               { return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.fieldKey + '_backgroundColor'], '#e4e4e4')); } // prettier-ignore
     @computed get layout_autoHeight()          { return (this._props.forceAutoHeight || this.layoutDoc._layout_autoHeight) && !this._props.ignoreAutoHeight; } // prettier-ignore
     @computed get textHeight()                 { return NumCast(this.dataDoc[this.fieldKey + '_height']); } // prettier-ignore
@@ -743,15 +743,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     @action
     toggleSidebar = (preview: boolean = false) => {
         const defaultSidebar = 250;
-        const prevWidth = 1 - this.sidebarWidth() / DivWidth(this._ref.current!);
+        const dw = DivWidth(this._ref.current);
+        const prevWidth = 1 - this.sidebarWidth() / dw / this.nativeScaling();
         if (preview) this._showSidebar = true;
         else {
-            this.layoutDoc[this.sidebarKey + '_freeform_scale_max'] = 1;
-            this.layoutDoc._layout_showSidebar =
-                (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(defaultSidebar / (NumCast(this.layoutDoc._width) + defaultSidebar)) * 100}%` : '0%') !== '0%';
+            this.layoutDoc._layout_sidebarWidthPercent =
+                this.sidebarWidthPercent === '0%' //
+                    ? `${(defaultSidebar / (NumCast(this.layoutDoc._width) + defaultSidebar)) * 100}%` //
+                    : '0%';
+            this.layoutDoc._layout_showSidebar = this.sidebarWidthPercent !== '0%';
         }
 
-        this.layoutDoc._width = !preview && this.SidebarShown ? NumCast(this.layoutDoc._width) + defaultSidebar : Math.max(20, NumCast(this.layoutDoc._width) * prevWidth);
+        this.layoutDoc._width =
+            !preview && this.SidebarShown //
+                ? NumCast(this.layoutDoc._width) + defaultSidebar
+                : Math.max(20, NumCast(this.layoutDoc._width) * prevWidth);
     };
     sidebarDown = (e: React.PointerEvent) => {
         const batch = UndoManager.StartBatch('toggle sidebar');
@@ -769,7 +775,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     };
     sidebarMove = (e: PointerEvent, down: number[], delta: number[]) => {
         const localDelta = this.DocumentView?.().screenToViewTransform().transformDirection(delta[0], delta[1]) ?? delta;
-        const sidebarWidth = (NumCast(this.layoutDoc._width) * Number(this.layout_sidebarWidthPercent.replace('%', ''))) / 100;
+        const sidebarWidth = (NumCast(this.layoutDoc._width) * Number(this.sidebarWidthPercent.replace('%', ''))) / 100;
         const width = NumCast(this.layoutDoc._width) + localDelta[0];
         this.layoutDoc._layout_sidebarWidthPercent = Math.max(0, (sidebarWidth + localDelta[0]) / width) * 100 + '%';
         this.layoutDoc.width = width;
@@ -1223,7 +1229,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     }
 
     @computed get contentScaling() {
-        return Doc.NativeAspect(this.Document, this.dataDoc, false) ? this._props.NativeDimScaling?.() || 1 : 1;
+        return Doc.NativeAspect(this.Document, this.dataDoc, false) ? this.nativeScaling() : 1;
     }
     componentDidMount() {
         !this._props.dontSelectOnLoad && this._props.setContentViewBox?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
@@ -1891,7 +1897,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         }
     };
     fitContentsToBox = () => BoolCast(this.Document._freeform_fitContentsToBox);
-    sidebarContentScaling = () => (this._props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1);
+    nativeScaling = () => this._props.NativeDimScaling?.() || 1;
     sidebarAddDocument = (doc: Doc | Doc[], sidebarKey: string = this.sidebarKey) => {
         if (!this.layoutDoc._layout_showSidebar) this.toggleSidebar();
         return this.addDocument(doc, sidebarKey);
@@ -1901,12 +1907,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     setSidebarHeight = (height: number) => {
         this.dataDoc[this.sidebarKey + '_height'] = height;
     };
-    sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth();
+    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth();
     sidebarScreenToLocal = () =>
         this._props
             .ScreenToLocalTransform()
-            .translate(-(this._props.PanelWidth() - this.sidebarWidth()) / (this._props.NativeDimScaling?.() || 1), 0)
-            .scale(1 / NumCast(this.layoutDoc._freeform_scale, 1) / (this._props.NativeDimScaling?.() || 1));
+            .translate(-(this._props.PanelWidth() - this.sidebarWidth()) / this.nativeScaling(), 0)
+            .scale(1 / this.nativeScaling());
 
     @computed get audioHandle() {
         return !this.recordingDictation ? null : (
@@ -1927,6 +1933,20 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             </div>
         );
     }
+    private _sideBtnWidth = 35;
+    /**
+     * How much the content of the view is being scaled based on its nesting and its fit-to-width settings
+     */
+    @computed get viewScaling() { return this.ScreenToLocalBoxXf().Scale ; } // prettier-ignore
+    /**
+     * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size.
+     */
+    @computed get maxWidgetSize() { return Math.min(this._sideBtnWidth, 0.2 * this._props.PanelWidth())*this.viewScaling; } // prettier-ignore
+    /**
+     * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content
+     */
+    @computed get uiBtnScaling() { return this.maxWidgetSize / this._sideBtnWidth; } // prettier-ignore
+
     @computed get sidebarHandle() {
         TraceMobx();
         const annotated = DocListCast(this.dataDoc[this.sidebarKey]).filter(d => d?.author).length;
@@ -1941,7 +1961,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                     backgroundColor,
                     color,
                     opacity: annotated ? 1 : undefined,
-                    transform: `scale(${this._props.DocumentView?.().UIBtnScaling ?? 1})`,
+                    transform: `scale(${this.uiBtnScaling})`,
                 }}>
                 <FontAwesomeIcon icon="comment-alt" />
             </div>
@@ -1986,7 +2006,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                         isAnnotationOverlay={false}
                         select={emptyFunction}
                         isAnyChildContentActive={returnFalse}
-                        NativeDimScaling={this.sidebarContentScaling}
+                        NativeDimScaling={this.nativeScaling}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                         removeDocument={this.sidebarRemDocument}
                         moveDocument={this.sidebarMoveDocument}
@@ -2003,7 +2023,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             );
         };
         return (
-            <div className={'formattedTextBox-sidebar' + (Doc.ActiveTool !== InkTool.None ? '-inking' : '')} style={{ width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
+            <div className={'formattedTextBox-sidebar' + (Doc.ActiveTool !== InkTool.None ? '-inking' : '')} style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                 {renderComponent(StrCast(this.layoutDoc[this.sidebarKey + '_type_collection']))}
             </div>
         );
@@ -2061,7 +2081,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
         // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
         if (this._props.isContentActive()) {
-            const scale = this._props.NativeDimScaling?.() || 1;
+            const scale = this.nativeScaling();
             const styleFromLayout = styleFromLayoutString(this.Document, this._props, scale); // this converts any expressions in the format string to style props.  e.g., <FormattedTextBox height='{this._header_height}px' >
             const height = Number(styleFromLayout.height?.replace('px', ''));
             // prevent default if selected || child is active  but this doc isn't scrollable
@@ -2078,8 +2098,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
     render() {
         TraceMobx();
-        const scale = this._props.NativeDimScaling?.() || 1;
-        const rounded = StrCast(this.layoutDoc.layout_borderRounding) === '100%' ? '-rounded' : '';
+        const scale = this.nativeScaling();
+        const rounded = StrCast(this.layoutDoc._layout_borderRounding) === '100%' ? '-rounded' : '';
         setTimeout(() => !this._props.isContentActive() && FormattedTextBoxComment.textBox === this && FormattedTextBoxComment.Hide);
 
         const scrSize = (which: number, view = this._props.docViewPath().slice(-which)[0]) => 
@@ -2107,7 +2127,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                               height: `${100 / scale}%`,
                           }),
                     transition: 'inherit',
-                    paddingBottom: this.tagsHeight,
                     // overflowY: this.layoutDoc._layout_autoHeight ? "hidden" : undefined,
                     color: this.fontColor,
                     fontSize: this.fontSize,
@@ -2140,7 +2159,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                             this._scrollRef = r;
                         }}
                         style={{
-                            width: this.noSidebar ? '100%' : `calc(100% - ${this.layout_sidebarWidthPercent})`,
+                            width: this.noSidebar ? '100%' : `calc(100% - ${this.sidebarWidthPercent})`,
                             overflow: this.layoutDoc._createDocOnCR || this.layoutDoc._layout_hideScroll ? 'hidden' : this.layout_autoHeight ? 'visible' : undefined,
                         }}
                         onScroll={this.onScroll}
@@ -2160,7 +2179,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                             }}
                         />
                     </div>
-                    {this.noSidebar || !this.SidebarShown || this.layout_sidebarWidthPercent === '0%' ? null : this.sidebarCollection}
+                    {this.noSidebar || !this.SidebarShown || this.sidebarWidthPercent === '0%' ? null : this.sidebarCollection}
                     {this.noSidebar || this.Document._layout_noSidebar || this.Document._createDocOnCR || this.layoutDoc._chromeHidden || this.Document.quiz ? null : this.sidebarHandle}
                     {this.audioHandle}
                     {this.layoutDoc._layout_enableAltContentUI && !this.layoutDoc._chromeHidden ? this.overlayAlternateIcon : null}
-- 
cgit v1.2.3-70-g09d2