From 5a9f8efbe5b380652a758062878329ff90ffa87c Mon Sep 17 00:00:00 2001
From: Sam Reid <reids@colorado.edu>
Date: Fri, 27 Dec 2024 09:43:57 -0700
Subject: [PATCH] Use opacity for EquationNode visibility so we can use resize:
 true in its containers, see
 https://github.com/phetsims/least-squares-regression/issues/90

---
 .../view/BestFitLineAccordionBox.ts              | 16 ++++++++--------
 js/least-squares-regression/view/EquationNode.ts |  8 ++++++++
 .../view/MyLineControlPanel.ts                   |  4 ++--
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/js/least-squares-regression/view/BestFitLineAccordionBox.ts b/js/least-squares-regression/view/BestFitLineAccordionBox.ts
index 4a039f9..fe35bd3 100644
--- a/js/least-squares-regression/view/BestFitLineAccordionBox.ts
+++ b/js/least-squares-regression/view/BestFitLineAccordionBox.ts
@@ -71,15 +71,15 @@ export default class BestFitLineAccordionBox extends AccordionBox {
 
     // Create the 'Best Fit Line' equation
     // initial values set the spacing, the correct values for the slope and the intercept will be updated below
-    const equationText = new EquationNode( { mode: 'bestFitLine' } );
-    equationText.visible = false;
+    const equationNode = new EquationNode( { mode: 'bestFitLine' } );
+    equationNode.setEquationVisible( false );
 
     // Create a Panel to contain the Equation Node
-    const equationPanel = new Panel( equationText, {
+    const equationPanel = new Panel( equationNode, {
       fill: 'white',
       stroke: LeastSquaresRegressionConstants.SMALL_PANEL_STROKE,
       cornerRadius: LeastSquaresRegressionConstants.SMALL_PANEL_CORNER_RADIUS,
-      resize: false
+      resize: true // here
     } );
 
     // Text options for checkboxes
@@ -110,7 +110,7 @@ export default class BestFitLineAccordionBox extends AccordionBox {
 
       // Set Equation to invisible if there is less than one point on the graph
       if ( graph.isLinearFitDefined() ) {
-        equationText.visible = enabled;
+        equationNode.visible = enabled;
       }
       equationPanel.opacity = enabled ? 1 : SceneryConstants.DISABLED_OPACITY;
       residualsCheckbox.enabled = enabled;
@@ -132,7 +132,7 @@ export default class BestFitLineAccordionBox extends AccordionBox {
 
     super( content, options );
 
-    this.equationText = equationText;
+    this.equationText = equationNode;
     this.sumOfSquaredResidualsChart = sumOfSquaredResidualsChart;
 
     // Update the Best Fit Line Equation initially
@@ -158,11 +158,11 @@ export default class BestFitLineAccordionBox extends AccordionBox {
 
       // Ensure the equation is visible if the Best Fit Line is enabled
       if ( this.graph.bestFitLineVisibleProperty.value ) {
-        this.equationText.visible = true;
+        this.equationText.setEquationVisible( true );
       }
     }
     else {
-      this.equationText.visible = false;
+      this.equationText.setEquationVisible( false );
     }
   }
 }
diff --git a/js/least-squares-regression/view/EquationNode.ts b/js/least-squares-regression/view/EquationNode.ts
index 345c8d1..ef36d30 100644
--- a/js/least-squares-regression/view/EquationNode.ts
+++ b/js/least-squares-regression/view/EquationNode.ts
@@ -137,6 +137,14 @@ export default class EquationNode extends Node {
     this.mutate( options );
   }
 
+  /**
+   * Change the visibility by changing the opacity, so that a blank equation will still take up layout space.
+   * @param equationVisible
+   */
+  public setEquationVisible( equationVisible: boolean ): void {
+    this.opacity = equationVisible ? 1 : 0;
+  }
+
   /**
    * Sets the text of the slope and its accompanying sign.
    * @param slope - The slope value to display.
diff --git a/js/least-squares-regression/view/MyLineControlPanel.ts b/js/least-squares-regression/view/MyLineControlPanel.ts
index bad18d0..6e50bc4 100644
--- a/js/least-squares-regression/view/MyLineControlPanel.ts
+++ b/js/least-squares-regression/view/MyLineControlPanel.ts
@@ -103,7 +103,7 @@ export default class MyLineControlPanel extends Panel {
       fill: 'white',
       cornerRadius: LeastSquaresRegressionConstants.SMALL_PANEL_CORNER_RADIUS,
       stroke: LeastSquaresRegressionConstants.SMALL_PANEL_STROKE,
-      resize: true
+      resize: true // here
     } );
 
     // Create two sliders: The aSlider controls the angle of the line and by proxy the slope, the bSlider controls the intercept
@@ -208,7 +208,7 @@ export default class MyLineControlPanel extends Panel {
 
     // Trigger the opacity/non-opacity when checking the myLine checkbox
     graph.myLineVisibleProperty.link( enabled => {
-      equationText.visible = enabled;
+      equationText.setEquationVisible( enabled );
       aSlider.pickable = enabled; // enable/disable slider
       bSlider.pickable = enabled;// enable/disable slider
       residualsCheckbox.enabled = enabled;