fixed resizing height to 0 to autoResize. fixed setting background color default for equations (and everything else) to textBackgroundColor from user doc. Added a math pseudo-font to trigger entering equations instead of rich text.

4 files changed, 63 insertions, 31 deletions

diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts
index 741d3a10e..c466344b3 100644
--- a/src/client/documents/DocUtils.ts
+++ b/src/client/documents/DocUtils.ts
@@ -358,6 +358,16 @@ export namespace DocUtils {
         return ctor ? ctor(path, overwriteDoc ? { ...options, title: StrCast(overwriteDoc.title, path) } : options, overwriteDoc) : undefined;
     }
 
+    /**
+     * Adds  items to the doc creator (':') context menu for creating each document type
+     * @param docTextAdder
+     * @param docAdder
+     * @param x
+     * @param y
+     * @param simpleMenu
+     * @param pivotField
+     * @param pivotValue
+     */
     export function addDocumentCreatorMenuItems(docTextAdder: (d: Doc) => void, docAdder: (d: Doc) => void, x: number, y: number, simpleMenu: boolean = false, pivotField?: string, pivotValue?: string | number | boolean): void {
         const documentList: ContextMenuProps[] = DocListCast(DocListCast(Doc.MyTools?.data)[0]?.data)
             .filter(btnDoc => !btnDoc.hidden)
@@ -371,6 +381,7 @@ export namespace DocUtils {
                         newDoc.author = ClientUtils.CurrentUserEmail();
                         newDoc.x = x;
                         newDoc.y = y;
+                        newDoc[DocData].backgroundColor = Doc.UserDoc().textBackgroundColor;
                         Doc.SetSelectOnLoad(newDoc);
                         if (pivotField) {
                             newDoc[pivotField] = pivotValue;
@@ -675,30 +686,43 @@ export namespace DocUtils {
 
     export function GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number, annotationOn?: Doc, backgroundColor?: string) {
         const defaultTextTemplate = DocCast(Doc.UserDoc().defaultTextLayout);
-        const tbox = Docs.Create.TextDocument('', {
-            annotationOn,
-            backgroundColor,
-            x,
-            y,
-            title,
-            ...(defaultTextTemplate
-                ? {} // if the new doc will inherit from a template, don't set any layout fields since that would block the inheritance
-                : {
-                      _width: width || BoolCast(Doc.UserDoc().fitBox) ? Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')) * 1.5 * 6 : 200,
-                      _height: BoolCast(Doc.UserDoc().fitBox) ? Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')) * 1.5 : 35,
-                      _layout_centered: BoolCast(Doc.UserDoc()._layout_centered),
-                      _layout_fitWidth: true,
-                      _layout_autoHeight: true,
-                      backgroundColor: StrCast(Doc.UserDoc().textBackgroundColor),
-                      text_fitBox: BoolCast(Doc.UserDoc().fitBox),
-                      text_align: StrCast(Doc.UserDoc().textAlign),
+        const tbox =
+            StrCast(Doc.UserDoc().fontFamily) === 'Math'
+                ? Docs.Create.EquationDocument('', {
+                      //
+                      annotationOn,
+                      backgroundColor: backgroundColor ?? StrCast(Doc.UserDoc().textBackgroundColor),
+                      x,
+                      y,
+                      title,
                       text_fontColor: StrCast(Doc.UserDoc().fontColor),
-                      text_fontFamily: StrCast(Doc.UserDoc().fontFamily),
-                      text_fontWeight: StrCast(Doc.UserDoc().fontWeight),
-                      text_fontStyle: StrCast(Doc.UserDoc().fontStyle),
-                      text_fontDecoration: StrCast(Doc.UserDoc().fontDecoration),
-                  }),
-        });
+                      _width: 35,
+                      _height: 35,
+                  })
+                : Docs.Create.TextDocument('', {
+                      annotationOn,
+                      backgroundColor,
+                      x,
+                      y,
+                      title,
+                      ...(defaultTextTemplate
+                          ? {} // if the new doc will inherit from a template, don't set any layout fields since that would block the inheritance
+                          : {
+                                _width: width || BoolCast(Doc.UserDoc().fitBox) ? Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')) * 1.5 * 6 : 200,
+                                _height: BoolCast(Doc.UserDoc().fitBox) ? Number(StrCast(Doc.UserDoc().fontSize).replace('px', '')) * 1.5 : 35,
+                                _layout_centered: BoolCast(Doc.UserDoc()._layout_centered),
+                                _layout_fitWidth: true,
+                                _layout_autoHeight: true,
+                                backgroundColor: StrCast(Doc.UserDoc().textBackgroundColor),
+                                text_fitBox: BoolCast(Doc.UserDoc().fitBox),
+                                text_align: StrCast(Doc.UserDoc().textAlign),
+                                text_fontColor: StrCast(Doc.UserDoc().fontColor),
+                                text_fontFamily: StrCast(Doc.UserDoc().fontFamily),
+                                text_fontWeight: StrCast(Doc.UserDoc().fontWeight),
+                                text_fontStyle: StrCast(Doc.UserDoc().fontStyle),
+                                text_fontDecoration: StrCast(Doc.UserDoc().fontDecoration),
+                            }),
+                  });
 
         if (defaultTextTemplate) {
             tbox.layout_fieldKey = 'layout_' + StrCast(defaultTextTemplate.title);
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 7b2a7ae0f..c01f57a59 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: 300, _height: 35, }},
+            {key: "Equation",   creator: opts => Docs.Create.EquationDocument("",opts),     opts: { _width: 35, _height: 35, }},
             {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 }},
@@ -731,7 +731,7 @@ pie title Minerals in my tap water
     static textTools():Button[] {
         return [
             { title: "Font",     toolTip: "Font", width: 100,     btnType: ButtonType.DropdownList,                      toolType:"font",     ignoreClick: true,   scripts: {script:  '{ return setFontAttr(this.toolType, value, _readOnly_);}'},
-              btnList: new List<string>(["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]) },
+              btnList: new List<string>(["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text", "Math"]) },
             { title: " Size",    toolTip: "Font size (%size)",    btnType: ButtonType.NumberDropdownButton,              toolType:"fontSize", ignoreClick: true,   scripts: {script:  '{ return setFontAttr(this.toolType, value, _readOnly_);}'}, numBtnMax: 200, numBtnMin: 9 },
             { title: "Color",    toolTip: "Font color (%color)",  btnType: ButtonType.ColorButton,  icon: "font",        toolType:"fontColor",ignoreClick: true,   scripts: {script:  '{ return setFontAttr(this.toolType, value, _readOnly_);}'} },
             { title: "Highlight",toolTip: "Font highlight",       btnType: ButtonType.ColorButton,  icon: "highlighter", toolType:"highlight",ignoreClick: true,   scripts: {script:  '{ return setFontAttr(this.toolType, value, _readOnly_);}'} },
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 492c2bda1..07e362672 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -506,7 +506,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     // determines how much to resize, and determines the resize reference point
     //
     getResizeVals = (thisPt: { x: number; y: number }, dragHdl: string) => {
-        const [w, h] = [this.Bounds.r - this.Bounds.x, this.Bounds.b - this.Bounds.y];
+        const [w, h] = [Math.max(1, this.Bounds.r - this.Bounds.x), Math.max(1, this.Bounds.b - this.Bounds.y)];
         const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y];
         switch (dragHdl) {
             case 'topLeft':    return { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.Bounds.r, this.Bounds.b] };
@@ -566,8 +566,8 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
             }
 
             doc._width = Math.max(NumCast(doc._width_min, 25), NumCast(doc._width) * scale.x);
-            doc._height = Math.max(NumCast(doc._height_min, 25), NumCast(doc._height) * scale.y);
-            const { deltaX, deltaY } = this.realignRefPt(doc, refCent, initWidth, initHeight);
+            doc._height = Math.max(NumCast(doc._height_min), NumCast(doc._height) * scale.y);
+            const { deltaX, deltaY } = this.realignRefPt(doc, refCent, initWidth || 1, initHeight || 1);
             doc.x = NumCast(doc.x) + deltaX;
             doc.y = NumCast(doc.y) + deltaY;
 
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index 34b46381d..572178f0c 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -1,4 +1,4 @@
-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';
@@ -14,6 +14,7 @@ import { DocumentView } from './DocumentView';
 import './EquationBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import EquationEditor from './formattedText/EquationEditor';
+import { StyleProp } from '../StyleProp';
 
 @observer
 export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -56,6 +57,8 @@ 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) => {
@@ -68,6 +71,9 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 _height: 25,
                 x: NumCast(this.layoutDoc.x),
                 y: NumCast(this.layoutDoc.y) + _height + 10,
+                backgroundColor: StrCast(this.Document.backgroundColor),
+                color: StrCast(this.Document.color),
+                fontSize: this.fontSize,
             });
             Doc.SetSelectOnLoad(nextEq);
             this._props.addDocument?.(nextEq);
@@ -118,10 +124,12 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 className="equationBox-cont"
                 onPointerDown={e => !e.ctrlKey && e.stopPropagation()}
                 style={{
+                    minWidth: `${100 / scale}%`,
                     transform: `scale(${scale})`,
                     height: `${100 / scale}%`,
                     pointerEvents: !this._props.isSelected() ? 'none' : undefined,
-                    fontSize: StrCast(this.Document._text_fontSize),
+                    fontSize: this.fontSize,
+                    color: this.fontColor,
                 }}
                 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" />
@@ -132,5 +140,5 @@ 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: '', fontSize: '14px', _nativeWidth: 35, _nativeHeight: 35, _layout_reflowHorizontal: false, _layout_reflowVertical: false, _layout_nativeDimEditable: false, layout_hideDecorationTitle: true, systemIcon: 'BsCalculatorFill' }, // systemIcon: 'BsSuperscript' + BsSubscript
 });