Improve dynamic text layout for the equations, see #90

phetsims · Dec 23, 2024 · 7714dd5 · 7714dd5
1 parent c778e05
commit 7714dd5
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 17 deletions.
diff --git a/js/least-squares-regression/view/EquationNode.ts b/js/least-squares-regression/view/EquationNode.ts
@@ -9,7 +9,7 @@
 import Utils from '../../../../dot/js/Utils.js';
 import optionize from '../../../../phet-core/js/optionize.js';
 import MathSymbols from '../../../../scenery-phet/js/MathSymbols.js';
-import { Node, NodeOptions, Text } from '../../../../scenery/js/imports.js';
+import { ManualConstraint, Node, NodeOptions, Text } from '../../../../scenery/js/imports.js';
 import leastSquaresRegression from '../../leastSquaresRegression.js';
 import LeastSquaresRegressionStrings from '../../LeastSquaresRegressionStrings.js';
 import LeastSquaresRegressionConstants from '../LeastSquaresRegressionConstants.js';
@@ -118,14 +118,19 @@ export default class EquationNode extends Node {
       ]
     } );
 
-    // layout of the entire equation
-    this.yText.left = 0;
-    this.equalText.left = this.yText.right + 3;
-    this.signSlopeText.left = this.equalText.right + 1;
-    this.valueSlopeText.left = this.signSlopeText.right + 3;
-    this.xText.left = this.valueSlopeText.right + 3;
-    this.signInterceptText.left = this.xText.right + 3;
-    this.valueInterceptText.left = this.signInterceptText.right + 3;
+
+    ManualConstraint.create( this, [ this.yText, this.equalText, this.signSlopeText, this.valueSlopeText, this.xText, this.signInterceptText, this.valueInterceptText ],
+      ( yTextProxy, equalTextProxy, signSlopeTextProxy, valueSlopeTextProxy, xTextProxy, signInterceptTextProxy, valueInterceptTextProxy ) => {
+
+        // layout of the entire equation
+        yTextProxy.left = 0;
+        equalTextProxy.left = yTextProxy.right + 3;
+        signSlopeTextProxy.left = equalTextProxy.right + 1;
+        valueSlopeTextProxy.left = signSlopeTextProxy.right + 3;
+        xTextProxy.left = valueSlopeTextProxy.right + 3;
+        signInterceptTextProxy.left = xTextProxy.right + 3;
+        valueInterceptTextProxy.left = signInterceptTextProxy.right + 3;
+      } );
 
     this.addChild( mutableEquationText );
 

diff --git a/js/least-squares-regression/view/MyLineControlPanel.ts b/js/least-squares-regression/view/MyLineControlPanel.ts
@@ -11,7 +11,7 @@ import Dimension2 from '../../../../dot/js/Dimension2.js';
 import Range from '../../../../dot/js/Range.js';
 import merge from '../../../../phet-core/js/merge.js';
 import MathSymbols from '../../../../scenery-phet/js/MathSymbols.js';
-import { HStrut, Node, SceneryConstants, Text, VBox } from '../../../../scenery/js/imports.js';
+import { HStrut, ManualConstraint, Node, SceneryConstants, Text, VBox } from '../../../../scenery/js/imports.js';
 import Checkbox from '../../../../sun/js/Checkbox.js';
 import Panel, { PanelOptions } from '../../../../sun/js/Panel.js';
 import VSlider from '../../../../sun/js/VSlider.js';
@@ -91,19 +91,19 @@ export default class MyLineControlPanel extends Panel {
     } );
 
     // Layout the immutable equation
-    yText.left = equationText.yText.left;
-    equalText.left = equationText.equalText.left;
-    aText.center = equationText.valueSlopeText.center;
-    xText.left = equationText.xText.left;
-    signInterceptText.left = equationText.signInterceptText.left;
-    bText.center = equationText.valueInterceptText.center;
+    yText.centerX = equationText.yText.centerX;
+    equalText.centerX = equationText.equalText.centerX;
+    aText.centerX = equationText.valueSlopeText.centerX;
+    xText.centerX = equationText.xText.centerX;
+    signInterceptText.centerX = equationText.signInterceptText.centerX;
+    bText.centerX = equationText.valueInterceptText.centerX;
 
     // create the equation panel with white background
     const equationPanel = new Panel( equationText, {
       fill: 'white',
       cornerRadius: LeastSquaresRegressionConstants.SMALL_PANEL_CORNER_RADIUS,
       stroke: LeastSquaresRegressionConstants.SMALL_PANEL_STROKE,
-      resize: false
+      resize: true
     } );
 
     // Create two sliders: The aSlider controls the angle of the line and by proxy the slope, the bSlider controls the intercept
@@ -182,6 +182,30 @@ export default class MyLineControlPanel extends Panel {
 
     super( mainBox, options );
 
+    ManualConstraint.create( this, [ yText, equalText, aText, xText, signInterceptText, bText,
+      equationText.valueInterceptText,
+      equationText.valueSlopeText,
+      equationText.yText,
+      equationText.equalText,
+      equationText.xText,
+      equationText.signInterceptText,
+      equationText
+    ], ( yTextProxy, equalTextProxy, aTextProxy, xTextProxy, signInterceptTextProxy, bTextProxy,
+         equationTextValueInterceptTextProxy,
+         equationTextValueSlopeTextProxy,
+         equationTextYTextProxy,
+         equationTextEqualTextProxy,
+         equationTextXTextProxy,
+         equationTextSignInterceptTextProxy
+    ) => {
+      yTextProxy.centerX = equationTextYTextProxy.centerX;
+      equalTextProxy.centerX = equationTextEqualTextProxy.centerX;
+      aTextProxy.centerX = equationTextValueSlopeTextProxy.centerX;
+      xTextProxy.centerX = equationTextXTextProxy.centerX;
+      signInterceptTextProxy.centerX = equationTextSignInterceptTextProxy.centerX;
+      bTextProxy.centerX = equationTextValueInterceptTextProxy.centerX;
+    } );
+
     // Trigger the opacity/non-opacity when checking the myLine checkbox
     graph.myLineVisibleProperty.link( enabled => {
       equationText.visible = enabled;