https://github.com/phetsims/graphing-quadratics/issues/178

phetsims · Jun 7, 2023 · 3035ce5 · 3035ce5
1 parent 7b8913a
commit 3035ce5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/js/standardform/view/StandardFormInteractiveEquationNode.ts b/js/standardform/view/StandardFormInteractiveEquationNode.ts
@@ -78,7 +78,7 @@ export default class StandardFormInteractiveEquationNode extends Node {
       aPicker.boundsProperty, bPicker.boundsProperty, cPicker.boundsProperty
     ], () => {
 
-      // layout
+      // equation layout
       equalToText.left = yText.right + GQConstants.EQUATION_OPERATOR_SPACING;
       aPicker.left = equalToText.right + GQConstants.EQUATION_OPERATOR_SPACING;
       xSquaredText.left = aPicker.right + GQConstants.EQUATION_TERM_SPACING;

diff --git a/js/vertexform/view/VertexFormInteractiveEquationNode.ts b/js/vertexform/view/VertexFormInteractiveEquationNode.ts
@@ -18,6 +18,7 @@ import GQConstants from '../../common/GQConstants.js';
 import GQSymbols from '../../common/GQSymbols.js';
 import graphingQuadratics from '../../graphingQuadratics.js';
 import { combineOptions } from '../../../../phet-core/js/optionize.js';
+import Multilink from '../../../../axon/js/Multilink.js';
 
 export default class VertexFormInteractiveEquationNode extends Node {
 
@@ -81,21 +82,28 @@ export default class VertexFormInteractiveEquationNode extends Node {
 
     super( options );
 
-    // layout
-    equalToText.left = yText.right + GQConstants.EQUATION_OPERATOR_SPACING;
-    aPicker.left = equalToText.right + GQConstants.EQUATION_OPERATOR_SPACING;
-    openParenthesisText.left = aPicker.right + GQConstants.EQUATION_TERM_SPACING;
-    xText.left = openParenthesisText.right + GQConstants.EQUATION_TERM_SPACING;
-    minusText.left = xText.right + GQConstants.EQUATION_OPERATOR_SPACING;
-    hPicker.left = minusText.right + GQConstants.EQUATION_OPERATOR_SPACING;
-    parenSquaredText.left = hPicker.right + GQConstants.EQUATION_TERM_SPACING;
-    plusText.left = parenSquaredText.right + GQConstants.EQUATION_OPERATOR_SPACING;
-    kPicker.left = plusText.right + GQConstants.EQUATION_OPERATOR_SPACING;
+    // If any of the components that include dynamic text change their size, redo the layout.
+    Multilink.multilink( [
+      yText.boundsProperty, xText.boundsProperty,
+      aPicker.boundsProperty, hPicker.boundsProperty, kPicker.boundsProperty
+    ], () => {
 
-    // vertically center pickers on equals
-    aPicker.centerY = equalToText.centerY;
-    hPicker.centerY = equalToText.centerY;
-    kPicker.centerY = equalToText.centerY;
+      // equation layout
+      equalToText.left = yText.right + GQConstants.EQUATION_OPERATOR_SPACING;
+      aPicker.left = equalToText.right + GQConstants.EQUATION_OPERATOR_SPACING;
+      openParenthesisText.left = aPicker.right + GQConstants.EQUATION_TERM_SPACING;
+      xText.left = openParenthesisText.right + GQConstants.EQUATION_TERM_SPACING;
+      minusText.left = xText.right + GQConstants.EQUATION_OPERATOR_SPACING;
+      hPicker.left = minusText.right + GQConstants.EQUATION_OPERATOR_SPACING;
+      parenSquaredText.left = hPicker.right + GQConstants.EQUATION_TERM_SPACING;
+      plusText.left = parenSquaredText.right + GQConstants.EQUATION_OPERATOR_SPACING;
+      kPicker.left = plusText.right + GQConstants.EQUATION_OPERATOR_SPACING;
+
+      // vertically center pickers on equals
+      aPicker.centerY = equalToText.centerY;
+      hPicker.centerY = equalToText.centerY;
+      kPicker.centerY = equalToText.centerY;
+    } );
   }
 }