diff --git a/js/focusanddirectrix/view/FocusAndDirectrixEquationNode.ts b/js/focusanddirectrix/view/FocusAndDirectrixEquationNode.ts
index a8423a12..086a10f9 100644
--- a/js/focusanddirectrix/view/FocusAndDirectrixEquationNode.ts
+++ b/js/focusanddirectrix/view/FocusAndDirectrixEquationNode.ts
@@ -7,7 +7,6 @@
* @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';
@@ -15,6 +14,7 @@ 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,14 +75,7 @@ export default class FocusAndDirectrixEquationNode extends Node {
GQSymbols.xMarkupStringProperty,
GQSymbols.hMarkupStringProperty,
GQSymbols.kMarkupStringProperty
- ], ( x, h, k ) =>
- StringUtils.fillIn( '({{x}} {{minus}} {{h}})2 {{plus}} {{k}}', {
- x: x,
- h: h,
- k: k,
- plus: MathSymbols.PLUS,
- minus: MathSymbols.MINUS
- } ) );
+ ], ( x, h, k ) => `(${x} ${MathSymbols.MINUS} ${h})2 ${MathSymbols.PLUS} ${k}` );
const rightNode = new RichText( rightStringProperty, {
font: FONT,
fill: COLOR
@@ -87,10 +83,15 @@ export default class FocusAndDirectrixEquationNode extends Node {
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
index f6f605f2..b58559f9 100644
--- 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;