aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/LabelBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/LabelBox.tsx')
-rw-r--r--src/client/views/nodes/LabelBox.tsx58
1 files changed, 26 insertions, 32 deletions
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 088cd15be..d33d12603 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -19,12 +19,9 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
public static LayoutString(fieldKey: string) {
return FieldView.LayoutString(LabelBox, fieldKey);
}
- public static LayoutStringWithTitle(fieldStr: string, label?: string) {
- return !label ? LabelBox.LayoutString(fieldStr) : `<LabelBox fieldKey={'${fieldStr}'} label={'${label}'} {...props} />`; // e.g., "<ImageBox {...props} fieldKey={"data} />"
- }
private dropDisposer?: DragManager.DragDropDisposer;
private _timeout: NodeJS.Timeout | undefined;
- _divRef: HTMLDivElement|null = null;
+ _divRef: HTMLDivElement | null = null;
constructor(props: FieldViewProps) {
super(props);
@@ -53,8 +50,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
this._timeout && clearTimeout(this._timeout);
}
- specificContextMenu = (): void => {
- };
+ specificContextMenu = (): void => {};
drop = (/* e: Event, de: DragManager.DropEvent */) => {
return false;
@@ -73,15 +69,16 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
return anchor;
};
- fitTextToBox = (r: HTMLElement | null | undefined): {
- minFontSize: number,
- maxFontSize: number,
- multiLine: boolean,
- alignHoriz: boolean,
- alignVert: boolean,
- detectMultiLine: boolean,
- } =>
- {
+ fitTextToBox = (
+ r: HTMLElement | null | undefined
+ ): {
+ minFontSize: number;
+ maxFontSize: number;
+ multiLine: boolean;
+ alignHoriz: boolean;
+ alignVert: boolean;
+ detectMultiLine: boolean;
+ } => {
this._timeout && clearTimeout(this._timeout);
const textfitParams = {
minFontSize: NumCast(this.layoutDoc._label_minFontSize, 1),
@@ -105,14 +102,9 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
render() {
trace();
const boxParams = this.fitTextToBox(undefined); // this causes mobx to trigger re-render when data changes
- const label = this.Title.startsWith("#") ? null : this.Title;
+ const label = this.Title.startsWith('#') ? null : this.Title;
return (
- <div
- key={label?.length}
- className="labelBox-outerDiv"
- ref={this.createDropTarget}
- onContextMenu={this.specificContextMenu}
- style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) as string }}>
+ <div key={label?.length} className="labelBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu} style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) as string }}>
<div
className="labelBox-mainButton"
style={{
@@ -130,31 +122,33 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
height: this._props.PanelHeight(),
whiteSpace: 'multiLine' in boxParams && boxParams.multiLine ? 'pre-wrap' : 'pre',
}}>
- <div style={{
- width: this._props.PanelWidth()- 2*NumCast(this.layoutDoc._xPadding),
- height: this._props.PanelHeight()-2*NumCast(this.layoutDoc._yPadding),
- outline: 'unset !important'
- }}
+ <div
+ style={{
+ width: this._props.PanelWidth() - 2 * NumCast(this.layoutDoc._xPadding),
+ height: this._props.PanelHeight() - 2 * NumCast(this.layoutDoc._yPadding),
+ outline: 'unset !important',
+ }}
onKeyDown={action(e => {
e.stopPropagation();
})}
onKeyUp={action(e => {
e.stopPropagation();
if (e.key === 'Enter') {
- this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? "";
+ this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? '';
setTimeout(() => this._props.select(false));
}
})}
onBlur={() => {
- this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? "";
+ this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? '';
}}
- contentEditable={this._props.onClickScript?.() ? false: true}
- ref={r => {this._divRef = r;
+ contentEditable={this._props.onClickScript?.() ? false : true}
+ ref={r => {
+ this._divRef = r;
this.fitTextToBox(r);
if (this._props.isSelected() && this._divRef) {
const range = document.createRange();
range.setStart(this._divRef, this._divRef.childNodes.length);
- range.setEnd(this._divRef, this._divRef.childNodes.length)
+ range.setEnd(this._divRef, this._divRef.childNodes.length);
const sel = window.getSelection();
sel?.removeAllRanges();
sel?.addRange(range);