Use Dialog, see #81

js/least-squares-regression/view/LeastSquaresRegressionScreenView.ts

@@ -18,7 +18,7 @@ import EraserButton from '../../../../scenery-phet/js/buttons/EraserButton.js';
 import InfoButton from '../../../../scenery-phet/js/buttons/InfoButton.js';
 import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js';
 import GridCheckbox from '../../../../scenery-phet/js/GridCheckbox.js';
-import { Node, Plane } from '../../../../scenery/js/imports.js';
+import { Node } from '../../../../scenery/js/imports.js';
 import { AccordionBoxOptions } from '../../../../sun/js/AccordionBox.js';
 import leastSquaresRegression from '../../leastSquaresRegression.js';
 import LeastSquaresRegressionConstants from '../LeastSquaresRegressionConstants.js';
@@ -112,7 +112,9 @@ export default class LeastSquaresRegressionScreenView extends ScreenView {
     // Create a Push Button (next to the ComboBox) that can activate a dialog Node (Source and Reference Node) associated with each dataSet.
     const sourceAndReferenceNode = new SourceAndReferenceNode( model.selectedDataSetProperty );
     const infoButton = new InfoButton( {
-      listener: () => this.updateSourceAndReferenceNodeVisibility( sourceAndReferenceNode ),
+      listener: () => {
+        sourceAndReferenceNode.show();
+      },
       maxWidth: 34
     } );
 
@@ -345,34 +347,6 @@ export default class LeastSquaresRegressionScreenView extends ScreenView {
     super.step( dt );
     this.graphNode.step( );
   }
-
-  /**
-   * This is taken from MoleculesAndLightScreenView with modifications.
-   *
-   * Update the Source and Reference 'Dialog-like' Node visibility.  This node has behavior which is identical to the
-   * AboutDialog window, and this code is heavily borrowed from AboutDialog.js.
-   *
-   * @param sourceAndReferenceNode - The SourceAndReferenceNode whose visibility should be updated.
-   */
-  private updateSourceAndReferenceNodeVisibility( sourceAndReferenceNode: SourceAndReferenceNode ): void {
-
-    // Renderer must be specified here because the plane is added directly to the scene (instead of to some other node
-    // that already has svg renderer)
-    const plane = new Plane( { fill: 'black', opacity: 0.3 } );
-    this.addChild( plane );
-    this.addChild( sourceAndReferenceNode );
-
-    const sourceAndReferenceListener = {
-      up: () => {
-        sourceAndReferenceNode.removeInputListener( sourceAndReferenceListener );
-        sourceAndReferenceNode.detach();
-        plane.detach();
-      }
-    };
-
-    sourceAndReferenceNode.addInputListener( sourceAndReferenceListener );
-    plane.addInputListener( sourceAndReferenceListener );
-  }
 }
 
 leastSquaresRegression.register( 'LeastSquaresRegressionScreenView', LeastSquaresRegressionScreenView );

js/least-squares-regression/view/SourceAndReferenceNode.ts

@@ -8,30 +8,17 @@
 
 import Multilink from '../../../../axon/js/Multilink.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
-import Bounds2 from '../../../../dot/js/Bounds2.js';
-import ScreenView from '../../../../joist/js/ScreenView.js';
 import StringUtils from '../../../../phetcommon/js/util/StringUtils.js';
-import { Circle, Line, Node, RichText, VBox } from '../../../../scenery/js/imports.js';
-import Panel from '../../../../sun/js/Panel.js';
+import { RichText, VBox } from '../../../../scenery/js/imports.js';
+import Dialog from '../../../../sun/js/Dialog.js';
 import leastSquaresRegression from '../../leastSquaresRegression.js';
 import LeastSquaresRegressionStrings from '../../LeastSquaresRegressionStrings.js';
 import LeastSquaresRegressionConstants from '../LeastSquaresRegressionConstants.js';
 import DataSet from '../model/DataSet.js';
 
-export default class SourceAndReferenceNode extends ScreenView {
+export default class SourceAndReferenceNode extends Dialog {
 
   public constructor( selectedDataSetProperty: TReadOnlyProperty<DataSet> ) {
-    /*
-     * Use ScreenView, to help center and scale content. Renderer must be specified here because the window is added
-     * directly to the scene, instead of to some other node that already has svg renderer.
-     */
-    // A PhET wide decision was made to not update custom layout bounds even if they do not match the
-    // default layout bounds in ScreenView. Do not change these bounds as changes could break or disturb
-    // any phet-io instrumentation. https://github.com/phetsims/phet-io/issues/1939
-    super( { layoutBounds: new Bounds2( 0, 0, 1024, 618 ) } );
-
-    // limit the width of the dialog content for i18n
-    const maxContentWidth = this.layoutBounds.width * 2 / 3;
 
     const referenceText = new RichText( '', {
       font: LeastSquaresRegressionConstants.REFERENCE_FONT,
@@ -50,61 +37,16 @@ export default class SourceAndReferenceNode extends ScreenView {
     ];
 
     // Create the content box
-    const content = new VBox( { align: 'left', spacing: 10, children: children, maxWidth: maxContentWidth } );
-
-    // Create the panel that contains the source and reference
-    const panel = new Panel( content, {
-      centerX: this.layoutBounds.centerX,
-      centerY: this.layoutBounds.centerY,
-      xMargin: 20,
-      yMargin: 20,
-      fill: 'white',
-      stroke: 'black'
-    } );
-
-    // Create the 'Closed Button' in the upper right corner with a circle and a cross inside it.
-    // The button is not hooked to any listener since the closing of this node is handled in the main screenView
-    const buttonSize = 15;
-    const buttonLineWidth = 2;
-    const circle = new Circle( buttonSize, {
-      fill: 'black',
-      stroke: 'white',
-      lineWidth: buttonLineWidth,
-      centerX: 0,
-      centerY: 0
-    } );
-    const l = buttonSize / 3;
-    const upSlopeLine = new Line( l, l, -l, -l, {
-      stroke: 'white',
-      lineWidth: buttonLineWidth,
-      centerX: 0,
-      centerY: 0
-    } );
-    const downwardSlopeLine = new Line( l, -l, -l, l, {
-      stroke: 'white',
-      lineWidth: buttonLineWidth,
-      centerX: 0,
-      centerY: 0
-    } );
-    const button = new Node( { children: [ circle, upSlopeLine, downwardSlopeLine ] } );
-
-    // Add a cursor when hovering (see https://github.com/phetsims/least-squares-regression/issues/10)
-    button.cursor = 'pointer';
-
-    // Add to this node
-    this.addChild( panel );
-    this.addChild( button );
+    const content = new VBox( { align: 'left', spacing: 10, children: children, maxWidth: 400 } );
 
     // Update the content of this node and the layout.
     // no need to unlink, present for the lifetime of the sim
     Multilink.multilink( [ LeastSquaresRegressionStrings.sourcePatternStringProperty, selectedDataSetProperty ], ( sourcePatternString, selectedDataSet ) => {
       referenceText.setStringProperty( selectedDataSet.reference );
       sourceText.string = StringUtils.format( sourcePatternString, selectedDataSet.source );
-      panel.centerX = this.layoutBounds.centerX;
-      panel.centerY = this.layoutBounds.centerY;
-      button.centerX = panel.right;
-      button.centerY = panel.top;
     } );
+
+    super( content );
   }
 }