changed label boxes to fit their entire text by scaling their font

1 files changed, 20 insertions, 8 deletions

diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index db1ae0537..781553dd8 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -1,19 +1,20 @@
-import { action, computed, observable, runInAction } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast } from '../../../fields/Doc';
 import { documentSchema } from '../../../fields/documentSchemas';
 import { List } from '../../../fields/List';
 import { createSchema, listSpec, makeInterface } from '../../../fields/Schema';
-import { Cast, NumCast, StrCast } from '../../../fields/Types';
+import { Cast, StrCast } from '../../../fields/Types';
 import { DragManager } from '../../util/DragManager';
 import { undoBatch } from '../../util/UndoManager';
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
 import { ViewBoxBaseComponent } from '../DocComponent';
+import { StyleProp } from '../StyleProvider';
 import { FieldView, FieldViewProps } from './FieldView';
+import BigText from './LabelBigText';
 import './LabelBox.scss';
-import { StyleProp } from '../StyleProvider';
 
 const LabelSchema = createSchema({});
 
@@ -94,13 +95,24 @@ 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.layoutDoc._xPadding),
-                    paddingRight: NumCast(this.layoutDoc._xPadding),
-                    paddingTop: NumCast(this.layoutDoc._yPadding),
-                    paddingBottom: NumCast(this.layoutDoc._yPadding),
+                    width: this.props.PanelWidth(),
+                    height: this.props.PanelHeight(),
                     whiteSpace: this.layoutDoc._singleLine ? "pre" : "pre-wrap"
                 }} >
-                    {label.startsWith("#") ? (null) : label}
+                    <span ref={r => {
+                        if (r) {
+                            BigText(r, {
+                                rotateText: null,
+                                fontSizeFactor: 1,
+                                maximumFontSize: null,
+                                limitingDimension: "both",
+                                horizontalAlign: "center",
+                                verticalAlign: "center",
+                                textAlign: "center",
+                                whiteSpace: "nowrap"
+                            })
+                        }
+                    }}>{label.startsWith("#") ? (null) : label}</span>
                 </div>
                 <div className="labelBox-fieldKeyParams" >
                     {!missingParams?.length ? (null) : missingParams.map(m => <div key={m} className="labelBox-missingParam">{m}</div>)}