diff options
Diffstat (limited to 'src/client/views/nodes/EquationBox.tsx')
| -rw-r--r-- | src/client/views/nodes/EquationBox.tsx | 65 |
1 files changed, 26 insertions, 39 deletions
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx index f98b622e8..576b5bbe0 100644 --- a/src/client/views/nodes/EquationBox.tsx +++ b/src/client/views/nodes/EquationBox.tsx @@ -1,7 +1,6 @@ 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'; @@ -39,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) { @@ -63,15 +53,15 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() { @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: 20, + _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, @@ -100,49 +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')) { - 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); - 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 = mathWidth; - this.layoutDoc._height = mathHeight; - } - } + 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; 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={{ - minWidth: `${100 / scale}%`, transform: `scale(${scale})`, + minWidth: `${100 / scale}%`, height: `${100 / scale}%`, - pointerEvents: !this._props.isSelected() ? 'none' : undefined, + 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), - }} - 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" /> + }}> + <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> ); } |