Merge branch 'master' into agent-web-working

1 files changed, 19 insertions, 16 deletions

diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index b08ed84b7..4cbe01b82 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -27,7 +27,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     private dropDisposer?: DragManager.DragDropDisposer;
     private _timeout: NodeJS.Timeout | undefined;
     private _divRef: HTMLDivElement | null = null;
-    private _reaction: IReactionDisposer | undefined;
+    private _disposers: { [key: string]: IReactionDisposer } = {};
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -43,7 +43,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
-        this._reaction = reaction(
+        this._disposers.active = reaction(
             () => this.Title,
             () => document.activeElement !== this._divRef && this._forceRerender++
         );
@@ -51,7 +51,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     componentWillUnMount() {
         this._timeout && clearTimeout(this._timeout);
         this.setText(this._divRef?.innerText ?? '');
-        this._reaction?.();
+        Object.values(this._disposers).forEach(disposer => disposer());
     }
 
     @observable _forceRerender = 0;
@@ -171,20 +171,21 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     render() {
         TraceMobx();
         const boxParams = this.fitTextToBox(undefined); // this causes mobx to trigger re-render when data changes
+        const [xmargin, ymargin] = [NumCast(this.layoutDoc._xMargin), NumCast(this.layoutDoc._uMargin)];
         return (
             <div className="labelBox-outerDiv" ref={this.createDropTarget} style={{ boxShadow: this.boxShadow }}>
                 <div
                     className="labelBox-mainButton"
                     style={{
                         backgroundColor: this.backgroundColor,
-                        color: StrCast(this.layoutDoc._text_fontColor, StrCast(this.layoutDoc._color)),
-                        fontFamily: StrCast(this.layoutDoc._text_fontFamily, StrCast(Doc.UserDoc().fontFamily)) || 'inherit',
+                        color: StrCast(this.layoutDoc[`${this.fieldKey}_fontColor`], StrCast(this.layoutDoc._color)),
+                        fontFamily: StrCast(this.layoutDoc[`${this.fieldKey}_fontFamily`], StrCast(Doc.UserDoc().fontFamily)) || 'inherit',
                         letterSpacing: StrCast(this.layoutDoc.letterSpacing),
-                        textTransform: StrCast(this.layoutDoc[this.fieldKey + '_transform']) as Property.TextTransform,
-                        paddingLeft: NumCast(this.layoutDoc._xPadding),
-                        paddingRight: NumCast(this.layoutDoc._xPadding),
-                        paddingTop: NumCast(this.layoutDoc._yPadding),
-                        paddingBottom: NumCast(this.layoutDoc._yPadding),
+                        textTransform: StrCast(this.layoutDoc[`${this.fieldKey}_transform`]) as Property.TextTransform,
+                        paddingLeft: xmargin,
+                        paddingRight: xmargin,
+                        paddingTop: ymargin,
+                        paddingBottom: ymargin,
                         width: this._props.PanelWidth(),
                         height: this._props.PanelHeight(),
                         whiteSpace: boxParams.multiLine ? 'pre-wrap' : 'pre',
@@ -192,8 +193,8 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     <div
                         key={this._forceRerender}
                         style={{
-                            width: this._props.PanelWidth() - 2 * NumCast(this.layoutDoc._xPadding),
-                            height: this._props.PanelHeight() - 2 * NumCast(this.layoutDoc._yPadding),
+                            width: this._props.PanelWidth() - 2 * xmargin,
+                            height: this._props.PanelHeight() - 2 * ymargin,
                             outline: 'unset !important',
                         }}
                         onKeyDown={e => {
@@ -214,12 +215,14 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             this._divRef?.removeEventListener('focusout', this.keepFocus);
                             this._divRef?.addEventListener('focusout', this.keepFocus);
                         }}
-                        onBlur={() => {
+                        onBlur={e => {
                             this._divRef?.removeEventListener('focusout', this.keepFocus);
                             this.setText(this._divRef?.innerText ?? '');
-                            RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, undefined);
-                            FormattedTextBox.LiveTextUndo?.end();
-                            FormattedTextBox.LiveTextUndo = undefined;
+                            if (!FormattedTextBox.tryKeepingFocus(e.relatedTarget, () => this._divRef?.focus())) {
+                                RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, undefined);
+                                FormattedTextBox.LiveTextUndo?.end();
+                                FormattedTextBox.LiveTextUndo = undefined;
+                            }
                         }}
                         dangerouslySetInnerHTML={{
                             __html: `<span class="textFitted textFitAlignVert" style="display: inline-block; text-align: center; font-size: 100px; height: 0px;">${this.Title?.startsWith('#') ? '' : (this.Title ?? '')}</span>`,