diff options
Diffstat (limited to 'src/client/views/nodes/LabelBox.tsx')
| -rw-r--r-- | src/client/views/nodes/LabelBox.tsx | 39 |
1 files changed, 22 insertions, 17 deletions
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index b08ed84b7..e1ecc2018 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -9,7 +9,7 @@ import { TraceMobx } from '../../../fields/util'; import { DocumentType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; -import { undoable } from '../../util/UndoManager'; +import { undoable, UndoManager } from '../../util/UndoManager'; import { ViewBoxBaseComponent } from '../DocComponent'; import { PinDocView, PinProps } from '../PinFuncs'; import { StyleProp } from '../StyleProp'; @@ -27,7 +27,8 @@ 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 } = {}; + private _liveTextUndo: UndoManager.Batch | undefined; // captured undo batch when typing a new text note into a collection constructor(props: FieldViewProps) { super(props); @@ -43,7 +44,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 +52,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 +172,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 +194,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 +216,13 @@ 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); + this._liveTextUndo?.end(); + } }} dangerouslySetInnerHTML={{ __html: `<span class="textFitted textFitAlignVert" style="display: inline-block; text-align: center; font-size: 100px; height: 0px;">${this.Title?.startsWith('#') ? '' : (this.Title ?? '')}</span>`, @@ -233,6 +236,8 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() { if (DocumentView.SelectOnLoad === this.Document) { DocumentView.SetSelectOnLoad(undefined); + this._liveTextUndo = FormattedTextBox.LiveTextUndo; + FormattedTextBox.LiveTextUndo = undefined; this._divRef.focus(); } this.fitTextToBox(this._divRef); |