updated equationBox to support margins/padding like text. fixed initial undo of newly typed equation.

5 files changed, 44 insertions, 16 deletions

diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts
index c466344b3..d11a3e235 100644
--- a/src/client/documents/DocUtils.ts
+++ b/src/client/documents/DocUtils.ts
@@ -696,8 +696,12 @@ export namespace DocUtils {
                       y,
                       title,
                       text_fontColor: StrCast(Doc.UserDoc().fontColor),
-                      _width: 35,
-                      _height: 35,
+                      _width: 50,
+                      _height: 50,
+                      _yMargin: 10,
+                      _xMargin: 10,
+                      nativeWidth: 40,
+                      nativeHeight: 40,
                   })
                 : Docs.Create.TextDocument('', {
                       annotationOn,
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index d898fe0c5..6828a1929 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -197,8 +197,10 @@ export class DocumentOptions {
     data_nativeWidth?: NUMt = new NumInfo('native width of data field contents (e.g., the pixel width of an image)', false);
     data_nativeHeight?: NUMt = new NumInfo('native height of data field contents (e.g., the pixel height of an image)', false);
     linearBtnWidth?: NUMt = new NumInfo('unexpanded width of a linear menu button (button "width" changes when it expands)', false);
-    _nativeWidth?: NUMt = new NumInfo('native width of document contents (e.g., the pixel width of an image)', false);
-    _nativeHeight?: NUMt = new NumInfo('native height of document contents (e.g., the pixel height of an image)', false);
+    _nativeWidth?: NUMt = new NumInfo('Deprecated: use nativeWidth. native width of document contents (e.g., the pixel width of an image)', false);
+    _nativeHeight?: NUMt = new NumInfo('Deprecated: use nativeHeight. native height of document contents (e.g., the pixel height of an image)', false);
+    nativeWidth?: NUMt = new NumInfo('native width of document contents (e.g., the pixel width of an image)', false);
+    nativeHeight?: NUMt = new NumInfo('native height of document contents (e.g., the pixel height of an image)', false);
 
     acl?: STRt = new StrInfo('unused except as a display category in KeyValueBox');
     acl_Guest?: STRt = new StrInfo("permissions granted to users logged in as 'guest' (either view, or private)"); // public permissions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c01f57a59..49a4a981a 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -372,7 +372,7 @@ pie title Minerals in my tap water
             {key: "Note",       creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true }},
             {key: "Flashcard",  creator: opts => Docs.Create.FlashcardDocument("", undefined, undefined, opts),opts: { _width: 300, _height: 300}},
             {key: "Image",      creator: opts => Docs.Create.ImageDocument("", opts),       opts: { _width: 400, _height:400 }},
-            {key: "Equation",   creator: opts => Docs.Create.EquationDocument("",opts),     opts: { _width: 35, _height: 35, }},
+            {key: "Equation",   creator: opts => Docs.Create.EquationDocument("",opts),     opts: { _width: 50,  _height: 50, nativeWidth: 40, nativeHeight: 40, _xMargin: 10, _yMargin: 10}},
             {key: "Noteboard",  creator: opts => Docs.Create.NoteTakingDocument([], opts),  opts: { _width: 250, _height: 200, _layout_fitWidth: true}},
             {key: "Simulation", creator: opts => Docs.Create.SimulationDocument(opts),      opts: { _width: 300, _height: 300, }},
             {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts),    opts: { _width: 150, _height: 100, _layout_fitWidth: true }},
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 2bd8bc98a..1158d93e9 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -141,7 +141,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     }
 
     @computed get isText() {
-        return this.selectedDoc?.type === DocumentType.RTF;
+        return [DocumentType.RTF, DocumentType.EQUATION, DocumentType.LABEL].includes(this.selectedDoc?.type as DocumentType);
     }
     @computed get isInk() {
         return this.selectedDoc?.type === DocumentType.INK;
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
 });