diff options
Diffstat (limited to 'src/client/views/nodes/EquationBox.tsx')
| -rw-r--r-- | src/client/views/nodes/EquationBox.tsx | 110 |
1 files changed, 63 insertions, 47 deletions
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx index fefe25764..dcc6e27ed 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>() { @@ -29,23 +30,14 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { componentDidMount() { this._props.setContentViewBox?.(this); - if (Doc.SelectOnLoad === this.Document && (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.()))) { + if (DocumentView.SelectOnLoad === this.Document && (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.()))) { this._props.select(false); - this._ref.current!.mathField.focus(); - this.dataDoc.text === 'x' && this._ref.current!.mathField.select(); - Doc.SetSelectOnLoad(undefined); + this._ref.current?.mathField.focus(); + this.dataDoc.text === 'x' && this._ref.current?.mathField.select(); + DocumentView.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,20 +48,25 @@ 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); + DocumentView.SetSelectOnLoad(nextEq); this._props.addDocument?.(nextEq); e.stopPropagation(); } @@ -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 }); |