updated from master

1 files changed, 58 insertions, 42 deletions

diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index fefe25764..576b5bbe0 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -1,7 +1,6 @@
-import { action, makeObservable, reaction } from 'mobx';
+import { action, computed, makeObservable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { DivHeight, DivWidth } from '../../../ClientUtils';
 import { Doc } from '../../../fields/Doc';
 import { NumCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
@@ -10,10 +9,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 { FormattedTextBox } from './formattedText/FormattedTextBox';
 
 @observer
 export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -37,15 +38,6 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
             Doc.SetSelectOnLoad(undefined);
         }
         reaction(
-            () => StrCast(this.dataDoc.text),
-            text => {
-                if (text && text !== this._ref.current!.mathField.latex()) {
-                    this._ref.current!.mathField.latex(text);
-                }
-            }
-            // { fireImmediately: true }
-        );
-        reaction(
             () => this._props.isSelected(),
             selected => {
                 if (this._ref.current) {
@@ -56,18 +48,23 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
             { fireImmediately: true }
         );
     }
+    @computed get fontSize()       { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize) as string; } // prettier-ignore
+    @computed get fontColor()      { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontColor) as string; } // prettier-ignore
 
     @action
     keyPressed = (e: KeyboardEvent) => {
-        const _height = DivHeight(this._ref.current!.element?.current);
-        const _width = DivWidth(this._ref.current!.element?.current);
         if (e.key === 'Enter') {
-            const nextEq = Docs.Create.EquationDocument(e.shiftKey ? StrCast(this.dataDoc.text) : 'x', {
+            const nextEq = Docs.Create.EquationDocument(e.shiftKey ? StrCast(this.dataDoc.text) : '', {
                 title: '# math',
-                _width,
-                _height: 25,
+                _width: NumCast(this.layoutDoc._width),
+                _height: NumCast(this.layoutDoc._height),
+                nativeHeight: NumCast(this.dataDoc.nativeHeight),
+                nativeWidth: NumCast(this.dataDoc.nativeWidth),
                 x: NumCast(this.layoutDoc.x),
-                y: NumCast(this.layoutDoc.y) + _height + 10,
+                y: NumCast(this.layoutDoc.y) + NumCast(this.Document._height) + 10,
+                backgroundColor: StrCast(this.Document.backgroundColor),
+                color: StrCast(this.Document.color),
+                fontSize: this.fontSize,
             });
             Doc.SetSelectOnLoad(nextEq);
             this._props.addDocument?.(nextEq);
@@ -81,7 +78,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 _height: 300,
                 backgroundColor: 'white',
             });
-            const link = DocUtils.MakeLink(this.Document, graph, { link_relationship: 'function', link_description: 'input' });
+            const link = DocUtils.MakeLink(this.Document, graph, { layout_isSvg: true, link_relationship: 'function', link_description: 'input' });
             this._props.addDocument?.(graph);
             link && this._props.addDocument?.(link);
             e.stopPropagation();
@@ -93,39 +90,46 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.dataDoc.text = str;
     };
 
-    updateSize = () => {
-        const style = this._ref.current?.element.current && getComputedStyle(this._ref.current.element.current);
-        if (style?.width.endsWith('px') && style?.height.endsWith('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;
-            } else {
-                this.layoutDoc._width = Math.max(35, Number(style.width.replace('px', '')));
-                this.layoutDoc._height = Math.max(25, Number(style.height.replace('px', '')));
-            }
-        }
+    updateSize = (mathSpan: HTMLSpanElement) => {
+        const style = getComputedStyle(mathSpan);
+        const styleWidth = Number(style.width.replace('px', '') || 0);
+        const styleHeight = Number(style.height.replace('px', '') || 0);
+        const mathWidth = Math.max(35, NumCast(this.layoutDoc.xMargin) * 2 + styleWidth);
+        const mathHeight = Math.max(20, NumCast(this.layoutDoc.yMargin) * 2 + styleHeight);
+        const nScale = !this.dataDoc.nativeWidth ? 1
+            : (prevNwidth => {  // if equation has been scaled then editing the expression must also edit the native dimensions to keep the aspect ratio
+                    [this.dataDoc.nativeWidth, this.dataDoc.nativeHeight] = [mathWidth, mathHeight];
+                    return  NumCast(this.layoutDoc._width) / prevNwidth;
+                })(NumCast(this.dataDoc.nativeWidth)); // prettier-ignore
+
+        this.layoutDoc._width = mathWidth * nScale;
+        this.layoutDoc._height = mathHeight * nScale;
     };
     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()}
+                ref={r => r && this._ref.current?.element.current && this.updateSize(this._ref.current?.element.current)}
                 className="equationBox-cont"
+                onKeyDown={e => e.stopPropagation()}
                 onPointerDown={e => !e.ctrlKey && e.stopPropagation()}
+                onBlur={() => {
+                    FormattedTextBox.LiveTextUndo?.end();
+                }}
                 style={{
                     transform: `scale(${scale})`,
-                    width: 'fit-content', // `${100 / scale}%`,
+                    minWidth: `${100 / scale}%`,
                     height: `${100 / scale}%`,
-                    pointerEvents: !this._props.isSelected() ? 'none' : undefined,
-                    fontSize: StrCast(this.layoutDoc._text_fontSize),
-                }}
-                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" />
+                    pointerEvents: !this._props.isContentActive() ? '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),
+                }}>
+                <EquationEditor ref={this._ref} value={StrCast(this.dataDoc.text, '')} spaceBehavesLikeTab onChange={this.onChange} autoCommands="pi theta sqrt sum prod alpha beta gamma rho" autoOperatorNames="sin cos tan" />
             </div>
         );
     }
@@ -133,5 +137,17 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
 Docs.Prototypes.TemplateMap.set(DocumentType.EQUATION, {
     layout: { view: EquationBox, dataField: 'text' },
-    options: { acl: '', fontSize: '14px', _layout_reflowHorizontal: true, _layout_reflowVertical: true, _layout_nativeDimEditable: true, 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
 });