From 27bb82ad35e94c0d7bc6fa9af9ad04122be3d571 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 9 Aug 2023 21:42:10 -0400
Subject: fixed resizing from bottomleft. turned on Tools in novice mode.  
 fixed aborting editing of tree view titles with escape or click outside.  got
 rid of scrollbar in Tools panel by fixing height of masonry panel.  updated
 browndash-components to fix problem of tooltips getting in away of click
 events on Tool items.

---
 src/client/views/DocumentDecorations.tsx           |  6 ++--
 src/client/views/EditableView.tsx                  |  3 +-
 .../collections/CollectionMasonryViewFieldRow.tsx  |  1 -
 .../views/collections/CollectionStackingView.tsx   |  2 +-
 src/client/views/collections/TreeView.tsx          |  1 +
 src/client/views/nodes/EquationBox.scss            |  9 ++---
 src/client/views/nodes/FontIconBox/FontIconBox.tsx | 40 ++++++++--------------
 7 files changed, 27 insertions(+), 35 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 956dac555..f3daf3ffa 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -617,8 +617,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                     }
                     let actualdW = Math.max(docwidth + dW * scale, 20);
                     let actualdH = Math.max(docheight + dH * scale, 20);
-                    let dX = !dWin ? 0 : scale * refCent[0] * (1 - (1 + dWin / refWidth));
-                    let dY = !dHin ? 0 : scale * refCent[1] * (1 - (1 + dHin / refHeight));
+                    let dX = !dWin ? 0 : (scale * refCent[0] * -dWin) / refWidth;
+                    let dY = !dHin ? 0 : (scale * refCent[1] * -dHin) / refHeight;
                     const preserveNativeDim = !doc._nativeHeightUnfrozen && !doc._nativeDimModifiable;
                     const fixedAspect = nwidth && nheight && (!doc._layout_fitWidth || preserveNativeDim || e.ctrlKey || doc.nativeHeightUnfrozen || doc.nativeDimModifiable);
                     if (fixedAspect) {
@@ -630,6 +630,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                             } else {
                                 if (!doc._layout_fitWidth || preserveNativeDim) {
                                     actualdH = (nheight / nwidth) * actualdW;
+                                    dYin && (dY = -dW * scale * (nheight / nwidth));
                                     doc._height = actualdH;
                                 } else if (!modifyNativeDim || dragBotRight) {
                                     doc._height = actualdH;
@@ -646,6 +647,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                             } else {
                                 if (!doc._layout_fitWidth || preserveNativeDim) {
                                     actualdW = (nwidth / nheight) * actualdH;
+                                    dXin && (dX = -dH * scale * (nwidth / nheight));
                                     doc._width = actualdW;
                                 } else if (!modifyNativeDim || dragBotRight) {
                                     doc._width = actualdW;
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 4a986cb54..d60617020 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -232,7 +232,7 @@ export class EditableView extends React.Component<EditableProps> {
                     onChange: this.props.autosuggestProps.onChange,
                 }}
             />
-        ) : 
+        ) : (
             <input
                 className="editableView-input"
                 ref={r => (this._inputref = r)}
@@ -248,6 +248,7 @@ export class EditableView extends React.Component<EditableProps> {
                 onClick={this.stopPropagation}
                 onPointerUp={this.stopPropagation}
             />
+        );
         // ) : (
         //     <textarea
         //         className="editableView-input"
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 22beb19de..06522b85e 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -7,7 +7,6 @@ import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { PastelSchemaPalette, SchemaHeaderField } from '../../../fields/SchemaHeaderField';
 import { ScriptField } from '../../../fields/ScriptField';
-import { NumCast, StrCast } from '../../../fields/Types';
 import { emptyFunction, numberRange, returnEmptyString, returnFalse, setupMoveUpEvents } from '../../../Utils';
 import { Docs } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 056204ad3..e4a0d6dad 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -598,7 +598,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                             action((entries: any) => {
                                 if (this.layoutDoc._layout_autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) {
                                     const height = this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace('px', '')), 0);
-                                    this.props.setHeight?.(this.headerMargin + height);
+                                    this.props.setHeight?.(2 * this.headerMargin + height); // bcz: added 2x for header to fix problem with scrollbars appearing in Tools panel
                                 }
                             })
                         );
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 6e0ccd4be..25a547066 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -903,6 +903,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 height={12}
                 sizeToContent={true}
                 fontSize={12}
+                isEditingCallback={action(e => (this._editTitle = e))}
                 GetValue={() => StrCast(this.doc.title)}
                 OnTab={undoBatch((shift?: boolean) => {
                     if (!shift) this.props.indentDocument?.(true);
diff --git a/src/client/views/nodes/EquationBox.scss b/src/client/views/nodes/EquationBox.scss
index 9714e1bd0..f5871db22 100644
--- a/src/client/views/nodes/EquationBox.scss
+++ b/src/client/views/nodes/EquationBox.scss
@@ -1,8 +1,9 @@
-@import "../global/globalCssVariables.scss";
+@import '../global/globalCssVariables.scss';
 
 .equationBox-cont {
-    transform-origin: top left;
+    transform-origin: center;
+    background-color: #e7e7e7;
     > span {
-        width: 100%; 
+        width: 100%;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index ad3532502..91eac675f 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -378,38 +378,26 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     }
 
     render() {
-        // determine dash button metadata
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const tooltip: string = StrCast(this.rootDoc.toolTip);
-        const onClickScript = ScriptCast(this.rootDoc.onClick);
-        // TODO:glr Add label of button type
-        let button: JSX.Element = this.defaultButton;
+        const tooltip = StrCast(this.rootDoc.toolTip);
+        const scriptFunc = () => ScriptCast(this.rootDoc.onClick)?.script.run({ this: this.layoutDoc, self: this.rootDoc, _readOnly_: false });
+        const btnProps = { tooltip, icon: this.Icon(color)!, label: this.label };
         // prettier-ignore
         switch (this.type) {
-            case ButtonType.EditableText: 
-                button = this.editableText; break;
-            case ButtonType.DropdownList:
-                button = this.dropdownListButton; break;
-            case ButtonType.ColorButton: 
-                button = this.colorButton;  break;
             case ButtonType.NumberDropdownButton: 
             case ButtonType.NumberInlineButton:
-            case ButtonType.NumberSliderButton: 
-                button = this.numberDropdown;  break;
-            case ButtonType.DropdownButton: 
-                button = this.dropdownButton;  break;
-            case ButtonType.MultiToggleButton: 
-                button = this.multiToggleButton; break; 
-            case ButtonType.ToggleButton: button = this.toggleButton; break;
+            case ButtonType.NumberSliderButton: return this.numberDropdown;
+            case ButtonType.EditableText:       return this.editableText; 
+            case ButtonType.DropdownList:       return this.dropdownListButton;
+            case ButtonType.ColorButton:        return this.colorButton; 
+            case ButtonType.DropdownButton:     return this.dropdownButton;
+            case ButtonType.MultiToggleButton:  return this.multiToggleButton;
+            case ButtonType.ToggleButton:       return this.toggleButton;
             case ButtonType.ClickButton:
-            case ButtonType.ToolButton: 
-                button = <IconButton tooltip={tooltip} color={color} icon={this.Icon(color)!} label={this.label}/>; break;
-            case ButtonType.TextButton: 
-                button = <Button tooltip={tooltip} icon={this.Icon(color)!} text={StrCast(this.rootDoc.buttonText)} label={this.label}/>; break;
-            case ButtonType.MenuButton: 
-                button = <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, _readOnly_: false })} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>; break;
+            case ButtonType.ToolButton: return <IconButton {...btnProps} size={Size.LARGE} color={color} />;
+            case ButtonType.TextButton: return <Button     {...btnProps} text={StrCast(this.rootDoc.buttonText)}/>;
+            case ButtonType.MenuButton: return <IconButton {...btnProps} color={color}  size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; 
         }
-
-        return button;
+        return this.defaultButton;
     }
 }
-- 
cgit v1.2.3-70-g09d2