1 files changed, 32 insertions, 10 deletions
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index 572178f0c..f98b622e8 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -10,11 +10,12 @@ import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
 import { undoBatch } from '../../util/UndoManager';
 import { ViewBoxBaseComponent } from '../DocComponent';
+import { StyleProp } from '../StyleProp';
 import { DocumentView } from './DocumentView';
 import './EquationBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import EquationEditor from './formattedText/EquationEditor';
-import { StyleProp } from '../StyleProp';
+import { FormattedTextBox } from './formattedText/FormattedTextBox';
 
 @observer
 export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -68,7 +69,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
             const nextEq = Docs.Create.EquationDocument(e.shiftKey ? StrCast(this.dataDoc.text) : 'x', {
                 title: '# math',
                 _width,
-                _height: 25,
+                _height: 20,
                 x: NumCast(this.layoutDoc.x),
                 y: NumCast(this.layoutDoc.y) + _height + 10,
                 backgroundColor: StrCast(this.Document.backgroundColor),
@@ -102,27 +103,32 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
     updateSize = () => {
         const style = this._ref.current?.element.current && getComputedStyle(this._ref.current.element.current);
         if (style?.width.endsWith('px') && style?.height.endsWith('px')) {
+            const mathWidth = Math.max(35, NumCast(this.layoutDoc.xMargin) * 2 + Number(style.width.replace('px', '')));
+            const mathHeight = Math.max(20, NumCast(this.layoutDoc.yMargin) * 2 + Number(style.height.replace('px', '')));
             if (this.layoutDoc._nativeWidth) {
                 // if equation has been scaled then editing the expression must also edit the native dimensions to keep the aspect ratio
                 const prevNwidth = NumCast(this.layoutDoc._nativeWidth);
-                const newNwidth = (this.layoutDoc._nativeWidth = Math.max(35, Number(style.width.replace('px', ''))));
-                const newNheight = (this.layoutDoc._nativeHeight = Math.max(25, Number(style.height.replace('px', ''))));
-                this.layoutDoc._width = (NumCast(this.layoutDoc._width) * NumCast(this.layoutDoc._nativeWidth)) / prevNwidth;
-                this.layoutDoc._height = (NumCast(this.layoutDoc._width) * newNheight) / newNwidth;
+                this.layoutDoc._nativeWidth = mathWidth;
+                this.layoutDoc._nativeHeight = mathHeight;
+                this.layoutDoc._width = mathWidth * (NumCast(this.layoutDoc._width) / prevNwidth);
+                this.layoutDoc._height = mathHeight * (NumCast(this.layoutDoc._width) / mathWidth);
             } else {
-                this.layoutDoc._width = Math.max(35, Number(style.width.replace('px', '')));
-                this.layoutDoc._height = Math.max(25, Number(style.height.replace('px', '')));
+                this.layoutDoc._width = mathWidth;
+                this.layoutDoc._height = mathHeight;
             }
         }
     };
     render() {
         TraceMobx();
-        const scale = (this._props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1);
+        const scale = this._props.NativeDimScaling?.() || 1;
         return (
             <div
                 ref={() => this.updateSize()}
                 className="equationBox-cont"
                 onPointerDown={e => !e.ctrlKey && e.stopPropagation()}
+                onBlur={() => {
+                    FormattedTextBox.LiveTextUndo?.end();
+                }}
                 style={{
                     minWidth: `${100 / scale}%`,
                     transform: `scale(${scale})`,
@@ -130,6 +136,10 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     pointerEvents: !this._props.isSelected() ? 'none' : undefined,
                     fontSize: this.fontSize,
                     color: this.fontColor,
+                    paddingLeft: NumCast(this.layoutDoc.xMargin),
+                    paddingRight: NumCast(this.layoutDoc.xMargin),
+                    paddingTop: NumCast(this.layoutDoc.yMargin),
+                    paddingBottom: NumCast(this.layoutDoc.yMargin),
                 }}
                 onKeyDown={e => e.stopPropagation()}>
                 <EquationEditor ref={this._ref} value={StrCast(this.dataDoc.text, 'x')} spaceBehavesLikeTab onChange={this.onChange} autoCommands="pi theta sqrt sum prod alpha beta gamma rho" autoOperatorNames="sin cos tan" />
@@ -140,5 +150,17 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
 Docs.Prototypes.TemplateMap.set(DocumentType.EQUATION, {
     layout: { view: EquationBox, dataField: 'text' },
-    options: { acl: '', fontSize: '14px', _nativeWidth: 35, _nativeHeight: 35, _layout_reflowHorizontal: false, _layout_reflowVertical: false, _layout_nativeDimEditable: false, layout_hideDecorationTitle: true, systemIcon: 'BsCalculatorFill' }, // systemIcon: 'BsSuperscript' + BsSubscript
+    options: {
+        acl: '',
+        _xMargin: 10,
+        _yMargin: 10,
+        fontSize: '14px',
+        _nativeWidth: 40,
+        _nativeHeight: 40,
+        _layout_reflowHorizontal: false,
+        _layout_reflowVertical: false,
+        _layout_nativeDimEditable: false,
+        layout_hideDecorationTitle: true,
+        systemIcon: 'BsCalculatorFill',
+    }, // systemIcon: 'BsSuperscript' + BsSubscript
 });