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

phetsims · Jun 8, 2023 · 1777c64 · 1777c64
1 parent da9414a
commit 1777c64
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/js/focusanddirectrix/view/FocusAndDirectrixEquationNode.ts b/js/focusanddirectrix/view/FocusAndDirectrixEquationNode.ts
@@ -7,14 +7,14 @@
  * @author Chris Malley (PixelZoom, Inc.)
  */
 
-import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
 import MathSymbols from '../../../../scenery-phet/js/MathSymbols.js';
 import { Line, Node, NodeOptions, RichText, VBox } from '../../../../scenery/js/imports.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import GQConstants from '../../common/GQConstants.js';
 import GQSymbols from '../../common/GQSymbols.js';
 import graphingQuadratics from '../../graphingQuadratics.js';
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
+import Multilink from '../../../../axon/js/Multilink.js';
 
 const FONT = GQConstants.INTERACTIVE_EQUATION_FONT;
 const FRACTION_FONT = GQConstants.INTERACTIVE_EQUATION_FRACTION_FONT;
@@ -54,11 +54,14 @@ export default class FocusAndDirectrixEquationNode extends Node {
     } );
 
     // horizontal line between numerator and denominator
-    const fractionLineLength = 1.25 * Math.max( numeratorNode.width, denominatorNode.width );
-    const fractionLine = new Line( 0, 0, fractionLineLength, 0, {
+    const fractionLine = new Line( 0, 0, 1, 0, {
       stroke: COLOR,
       lineWidth: 1
     } );
+    denominatorNode.boundsProperty.link( () => {
+      const length = 1.25 * Math.max( numeratorNode.width, denominatorNode.width );
+      fractionLine.setLine( 0, 0, length, 0 );
+    } );
 
     // 1/4p
     const fractionNode = new VBox( {
@@ -72,25 +75,23 @@ export default class FocusAndDirectrixEquationNode extends Node {
       GQSymbols.xMarkupStringProperty,
       GQSymbols.hMarkupStringProperty,
       GQSymbols.kMarkupStringProperty
-    ], ( x, h, k ) =>
-      StringUtils.fillIn( '({{x}} {{minus}} {{h}})<sup>2</sup> {{plus}} {{k}}', {
-        x: x,
-        h: h,
-        k: k,
-        plus: MathSymbols.PLUS,
-        minus: MathSymbols.MINUS
-      } ) );
+    ], ( x, h, k ) => `(${x} ${MathSymbols.MINUS} ${h})<sup>2</sup> ${MathSymbols.PLUS} ${k}` );
     const rightNode = new RichText( rightStringProperty, {
       font: FONT,
       fill: COLOR
     } );
 
     options.children = [ yEqualsNode, fractionNode, rightNode ];
 
-    const xSpacing = 5;
-    fractionNode.left = yEqualsNode.right + xSpacing;
-    fractionNode.centerY = yEqualsNode.centerY;
-    rightNode.left = fractionNode.right + xSpacing;
+    // If any of the components that include dynamic text change their size, redo the layout.
+    Multilink.multilink(
+      [ fractionNode.boundsProperty, yEqualsNode.boundsProperty, rightNode.boundsProperty ],
+      () => {
+        const xSpacing = 5;
+        fractionNode.left = yEqualsNode.right + xSpacing;
+        fractionNode.centerY = yEqualsNode.centerY;
+        rightNode.left = fractionNode.right + xSpacing;
+      } );
 
     super( options );
   }

diff --git a/js/focusanddirectrix/view/FocusAndDirectrixInteractiveEquationNode.ts b/js/focusanddirectrix/view/FocusAndDirectrixInteractiveEquationNode.ts
@@ -142,6 +142,7 @@ export default class FocusAndDirectrixInteractiveEquationNode extends Node {
         pNumberDisplay.boundsProperty, hNumberDisplay.boundsProperty, kNumberDisplay.boundsProperty
       ],
       () => {
+
         // equation layout
         equalToText.left = yText.right + GQConstants.EQUATION_OPERATOR_SPACING;
         fractionNode.left = equalToText.right + GQConstants.EQUATION_OPERATOR_SPACING;