fix dynamic positioning of radio buttons and accordion boxes, #304

js/common/view/CalculusGrapherScreenView.ts

@@ -118,7 +118,8 @@ export default class CalculusGrapherScreenView extends ScreenView {
       // dynamically so that GraphSetsAnimation doesn't cause tiny shifts in y.
       graphSetRadioButtonGroup.centerY = this.graphsNode.centerY;
       this.graphsNode.boundsProperty.link( () => {
-        graphSetRadioButtonGroup.centerX = this.layoutBounds.left + ( this.graphsNode.left - this.layoutBounds.left ) / 2;
+        const eyeToggleButtonLeft = this.graphsNode.x + this.graphsNode.getEyeToggleButtonXOffset();
+        graphSetRadioButtonGroup.centerX = this.layoutBounds.left + ( eyeToggleButtonLeft - this.layoutBounds.left ) / 2;
       } );
     }
 

js/common/view/GraphNode.ts

@@ -2,7 +2,7 @@
 
 /**
  * GraphNode is the view representation of a Graph, which includes a curve, a chart (grid and axes) and zoom buttons.
- * The origin (0,0) is the upper-left corner of the ChartRectangle, this.this.chartRectangle.leftTop.
+ * The origin (0,0) is the upper-left corner of the ChartRectangle, this.chartRectangle.leftTop.
  *
  * Primary responsibilities are:
  * - Create an associated CurveNode
@@ -130,6 +130,8 @@ export default class GraphNode extends Node {
   // Optional Property for zooming the y-axis
   private readonly yZoomLevelProperty?: NumberProperty;
 
+  private readonly eyeToggleButton: Node;
+
   public constructor( graphType: GraphType,
                       curve: Curve,
                       gridVisibleProperty: TReadOnlyProperty<boolean>,
@@ -255,7 +257,7 @@ export default class GraphNode extends Node {
     } );
 
     // Create toggle button that controls the visibility of this.curveLayer.
-    const eyeToggleButton = new EyeToggleButton( this.curveLayerVisibleProperty, {
+    this.eyeToggleButton = new EyeToggleButton( this.curveLayerVisibleProperty, {
       scale: 0.5,
       baseColor: new DerivedProperty( [ this.curveLayerVisibleProperty ],
         visible => visible ? 'white' : PhetColorScheme.BUTTON_YELLOW ),
@@ -288,8 +290,8 @@ export default class GraphNode extends Node {
       const rightNode = ticksParentVisible ? ticksParent : this.chartRectangle;
 
       // EyeToggleButton at bottom-left of chart rectangle
-      eyeToggleButton.right = rightNode.left - BUTTON_SPACING;
-      eyeToggleButton.bottom = this.chartRectangle.bottom;
+      this.eyeToggleButton.right = rightNode.left - BUTTON_SPACING;
+      this.eyeToggleButton.bottom = this.chartRectangle.bottom;
 
       // yZoomButtonGroup at left-center of chart rectangle
       if ( yZoomButtonGroup ) {
@@ -305,7 +307,7 @@ export default class GraphNode extends Node {
       ticksParent,
       labelNode,
       this.curveLayer,
-      eyeToggleButton
+      this.eyeToggleButton
     ];
     yZoomButtonGroup && children.push( yZoomButtonGroup );
     this.children = children;
@@ -361,6 +363,13 @@ export default class GraphNode extends Node {
     this.curveLayer.addChild( plottedPoint );
     return plottedPoint;
   }
+
+  /**
+   * Gets the offset of the EyeToggleButton from the left edge of the ChartRectangle. This is used for dynamic layout.
+   */
+  public getEyeToggleButtonXOffset(): number {
+    return this.eyeToggleButton.x - this.x;
+  }
 }
 
 /**

js/common/view/GraphsNode.ts

@@ -204,6 +204,14 @@ export default class GraphsNode extends Node {
            ( ( numberOfGraphNodes - 1 ) * GRAPH_NODE_Y_SPACING );
   }
 
+  /**
+   * Gets the offset of the EyeToggleButton from the left edge of the ChartRectangle. This is used for dynamic layout.
+   * It is the same for all GraphNodes, so use the first one.
+   */
+  public getEyeToggleButtonXOffset(): number {
+    return this.graphNodes[ 0 ].getEyeToggleButtonXOffset();
+  }
+
   /**
    * Adds the tangent feature to this collection of graphs.
    */

js/common/view/ReferenceLineNode.ts

@@ -58,7 +58,7 @@ export default class ReferenceLineNode extends ScrubberNode {
         useRichText: true,
         textOptions: {
           font: CalculusGrapherConstants.CONTROL_FONT,
-          maxWidth: 80 // see https://github.com/phetsims/calculus-grapher/issues/304
+          maxWidth: 60 // see https://github.com/phetsims/calculus-grapher/issues/304
         },
         visibleProperty: CalculusGrapherPreferences.valuesVisibleProperty,
         bottom: this.line.top - 5,

js/derivative/view/DerivativeScreenView.ts

@@ -46,9 +46,10 @@ export default class DerivativeScreenView extends CalculusGrapherScreenView {
     this.screenViewRootNode.addChild( slopeOfTangentAccordionBox );
 
     // Center slopeOfTangentAccordionBox in the negative space to the left of graphNode, top-aligned with graphNode.y.
+    slopeOfTangentAccordionBox.top = this.graphsNode.y + this.graphsNode.originalGraphNode.y;
     this.graphsNode.boundsProperty.link( () => {
-      slopeOfTangentAccordionBox.centerX = this.layoutBounds.left + ( this.graphsNode.left - this.layoutBounds.left ) / 2;
-      slopeOfTangentAccordionBox.top = this.graphsNode.y + this.graphsNode.originalGraphNode.y;
+      const eyeToggleButtonLeft = this.graphsNode.x + this.graphsNode.getEyeToggleButtonXOffset();
+      slopeOfTangentAccordionBox.centerX = this.layoutBounds.left + ( eyeToggleButtonLeft - this.layoutBounds.left ) / 2;
     } );
 
     // Add 'Tangent' checkbox to the top of the checkbox group.

js/integral/view/IntegralScreenView.ts

@@ -47,9 +47,10 @@ export default class IntegralScreenView extends CalculusGrapherScreenView {
     this.screenViewRootNode.addChild( netSignedAreaAccordionBox );
 
     // Center netSignedAreaAccordionBox in the negative space to the left of graphNode, top-aligned with graphNode.y.
+    netSignedAreaAccordionBox.top = this.graphsNode.y + this.graphsNode.originalGraphNode.y;
     this.graphsNode.boundsProperty.link( () => {
-      netSignedAreaAccordionBox.centerX = this.layoutBounds.left + ( this.graphsNode.left - this.layoutBounds.left ) / 2;
-      netSignedAreaAccordionBox.top = this.graphsNode.y + this.graphsNode.originalGraphNode.y;
+      const eyeToggleButtonLeft = this.graphsNode.x + this.graphsNode.getEyeToggleButtonXOffset();
+      netSignedAreaAccordionBox.centerX = this.layoutBounds.left + ( eyeToggleButtonLeft - this.layoutBounds.left ) / 2;
     } );
 
     // Add 'Area Under Curve' checkbox to the top of the checkbox group.