merge

1 files changed, 13 insertions, 4 deletions

diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index a77e4bdd1..d347c285b 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -2,7 +2,6 @@ import EquationEditor from 'equation-editor-react';
 import { action, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Width } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { NumCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
@@ -68,7 +67,7 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
         if (e.key === 'Tab') {
             const graph = Docs.Create.FunctionPlotDocument([this.rootDoc], {
-                x: NumCast(this.layoutDoc.x) + this.layoutDoc[Width](),
+                x: NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc._width),
                 y: NumCast(this.layoutDoc.y),
                 _width: 400,
                 _height: 300,
@@ -85,8 +84,18 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
     updateSize = () => {
         const style = this._ref.current && getComputedStyle(this._ref.current.element.current);
         if (style?.width.endsWith('px') && style?.height.endsWith('px')) {
-            this.layoutDoc._width = Math.max(35, Number(style.width.replace('px', '')));
-            this.layoutDoc._height = Math.max(25, 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 prevNheight = NumCast(this.layoutDoc._nativeHeight);
+                this.layoutDoc._nativeWidth = Math.max(35, Number(style.width.replace('px', '')));
+                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._height) * NumCast(this.layoutDoc._nativeHeight)) / prevNheight;
+            } else {
+                this.layoutDoc._width = Math.max(35, Number(style.width.replace('px', '')));
+                this.layoutDoc._height = Math.max(25, Number(style.height.replace('px', '')));
+            }
         }
     };
     render() {