From 7b08cb4fd86a7e7048e14c05ab980f5b008d18d8 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 29 Apr 2022 13:57:42 -0400
Subject: cleaned up creation of icon templates.  fixed labelBox to support
 padding and to work with multiple lines and min font sizes.

---
 src/client/views/nodes/LabelBigText.js |  7 +++---
 src/client/views/nodes/LabelBox.tsx    | 46 ++++++++++++++++++++++++----------
 2 files changed, 37 insertions(+), 16 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/nodes/LabelBigText.js b/src/client/views/nodes/LabelBigText.js
index 02c36c4bc..6a212d9ea 100644
--- a/src/client/views/nodes/LabelBigText.js
+++ b/src/client/views/nodes/LabelBigText.js
@@ -193,11 +193,12 @@ export default function BigText(element, options) {
     if (fontSize < options.minimumFontSize) {
         parentStyle.display = "flex";
         parentStyle.alignItems = "center";
-        style.whiteSpace = "pre-wrap";
         style.textAlign = "center";
         style.visibility = "";
-        style.fontSize = "18px";
-        style.lineHeight = "20px";
+        style.fontSize = options.minimumFontSize + "px";
+        style.lineHeight = "";
+        style.overflow = "hidden";
+        style.textOverflow = "ellipsis";
         style.top = "";
         style.left = "";
         style.margin = "";
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index d539ca9b8..dfff59005 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -27,14 +27,19 @@ export class LabelBox extends ViewBoxBaseComponent<(FieldViewProps & LabelBoxPro
         return `<${fieldType.name} fieldKey={'${fieldStr}'} label={'${label}'} {...props} />`;  //e.g., "<ImageBox {...props} fieldKey={"data} />"
     }
     private dropDisposer?: DragManager.DragDropDisposer;
-
+    private _timeout: any;
     componentDidMount() {
         this.props.setContentView?.(this);
     }
+    componentWillUnMount() {
+        this._timeout && clearTimeout(this._timeout);
+    }
 
     getTitle() {
-        return this.rootDoc["title-custom"] ? StrCast(this.rootDoc.title) : this.props.label ? this.props.label :
-            typeof this.rootDoc[this.fieldKey] === "string" ? StrCast(this.rootDoc[this.fieldKey]) : StrCast(this.rootDoc.title);
+        return this.rootDoc["title-custom"] ? StrCast(this.rootDoc.title) :
+            this.props.label ? this.props.label :
+                typeof this.rootDoc[this.fieldKey] === "string" ? StrCast(this.rootDoc[this.fieldKey]) :
+                    StrCast(this.rootDoc.title);
     }
 
     protected createDropTarget = (ele: HTMLDivElement) => {
@@ -73,8 +78,8 @@ export class LabelBox extends ViewBoxBaseComponent<(FieldViewProps & LabelBoxPro
     @observable _mouseOver = false;
     @computed get hoverColor() { return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : "unset"; }
 
-    fitTextToBox = (r: any) => {
-        BigText(r, {
+    fitTextToBox = (r: any): any => {
+        const params = {
             rotateText: null,
             fontSizeFactor: 1,
             minimumFontSize: NumCast(this.layoutDoc._minFontSize),
@@ -83,11 +88,25 @@ export class LabelBox extends ViewBoxBaseComponent<(FieldViewProps & LabelBoxPro
             horizontalAlign: "center",
             verticalAlign: "center",
             textAlign: "center",
-            whiteSpace: "nowrap"
-        });
+            whiteSpace: this.layoutDoc._singleLine ? "nowrap" : "pre-wrap"
+        };
+        this._timeout = undefined;
+        if (!r) return params;
+        if (!r.offsetHeight || !r.offsetWidth) return this._timeout = setTimeout(() => this.fitTextToBox(r));
+        const parent = r.parentNode;
+        const parentStyle = parent.style;
+        parentStyle.display = "";
+        parentStyle.alignItems = "";
+        r.setAttribute("style", "");
+        r.style.width = this.layoutDoc._singleLine ? "" : "100%";
+
+        r.style.textOverflow = "ellipsis";
+        r.style.overflow = "hidden";
+        BigText(r, params);
     }
     // (!missingParams || !missingParams.length ? "" : "(" + missingParams.map(m => m + ":").join(" ") + ")")
     render() {
+        this.fitTextToBox(null);// this causes mobx to trigger re-render when data changes
         const params = Cast(this.paramsDoc["onClick-paramFieldKeys"], listSpec("string"), []);
         const missingParams = params?.filter(p => !this.paramsDoc[p]);
         params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ...
@@ -104,16 +123,17 @@ export class LabelBox extends ViewBoxBaseComponent<(FieldViewProps & LabelBoxPro
                     fontFamily: StrCast(this.layoutDoc._fontFamily) || "inherit",
                     letterSpacing: StrCast(this.layoutDoc.letterSpacing),
                     textTransform: StrCast(this.layoutDoc.textTransform) as any,
+                    paddingLeft: NumCast(this.rootDoc._xPadding),
+                    paddingRight: NumCast(this.rootDoc._xPadding),
+                    paddingTop: NumCast(this.rootDoc._yPadding),
+                    paddingBottom: NumCast(this.rootDoc._yPadding),
                     width: this.props.PanelWidth(),
                     height: this.props.PanelHeight(),
                     whiteSpace: this.layoutDoc._singleLine ? "pre" : "pre-wrap"
                 }} >
-                    <span ref={r => {
-                        if (r) {
-                            if (!r.offsetWidth || !r.offsetHeight) setTimeout(() => this.fitTextToBox(r));
-                            else this.fitTextToBox(r);
-                        }
-                    }}>{label.startsWith("#") ? (null) : label}</span>
+                    <span ref={action((r: any) => this.fitTextToBox(r))}>
+                        {label.startsWith("#") ? (null) : label}
+                    </span>
                 </div>
                 <div className="labelBox-fieldKeyParams" >
                     {!missingParams?.length ? (null) : missingParams.map(m => <div key={m} className="labelBox-missingParam">{m}</div>)}
-- 
cgit v1.2.3-70-g09d2