improve layout of system-under-test Node, see #80

phetsims · Jan 16, 2025 · 676a203 · 676a203
1 parent 176fdd9
commit 676a203
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 38 deletions.
diff --git a/js/bloch-sphere/view/BlochSphereMeasurementArea.ts b/js/bloch-sphere/view/BlochSphereMeasurementArea.ts
@@ -10,7 +10,6 @@
 
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import DerivedStringProperty from '../../../../axon/js/DerivedStringProperty.js';
-import Dimension2 from '../../../../dot/js/Dimension2.js';
 import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import WithRequired from '../../../../phet-core/js/types/WithRequired.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
@@ -259,7 +258,6 @@ export default class BlochSphereMeasurementArea extends Node {
     } );
 
     const systemUnderTestNode = new SystemUnderTestNode(
-      new Dimension2( 150, 180 ),
       model.magneticFieldEnabledProperty,
       model.magneticFieldStrengthProperty,
       model.isSingleMeasurementModeProperty,

diff --git a/js/bloch-sphere/view/SystemUnderTestNode.ts b/js/bloch-sphere/view/SystemUnderTestNode.ts
@@ -11,11 +11,11 @@ import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import NumberProperty from '../../../../axon/js/NumberProperty.js';
 import Property from '../../../../axon/js/Property.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
-import Dimension2 from '../../../../dot/js/Dimension2.js';
 import { combineOptions } from '../../../../phet-core/js/optionize.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import ShadedSphereNode from '../../../../scenery-phet/js/ShadedSphereNode.js';
-import { Color, HBox, Node, NodeOptions, Rectangle, Text, VBox } from '../../../../scenery/js/imports.js';
+import ShadedSphereNode, { ShadedSphereNodeOptions } from '../../../../scenery-phet/js/ShadedSphereNode.js';
+import { Color, HBox, Node, Text, VBox } from '../../../../scenery/js/imports.js';
+import Panel, { PanelOptions } from '../../../../sun/js/Panel.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import { SpinMeasurementState } from '../model/SpinMeasurementState.js';
 import MagneticFieldNode from './MagneticFieldNode.js';
@@ -27,45 +27,42 @@ const ATOM_NODE_OPTIONS = {
 };
 const LABEL_FONT = new PhetFont( 18 );
 
-class SystemUnderTestNode extends Node {
+class SystemUnderTestNode extends Panel {
 
   /**
-   * @param size - the size of the node in view coordinates
    * @param magneticFieldEnabledProperty - whether the magnetic field is enabled
    * @param magneticFieldStrengthProperty - the property that indicates the magnetic field strength
    * @param isSingleMeasurementModeProperty - whether the system is in single measurement mode
    * @param measurementStateProperty - the state of the spin measurement
    * @param providedOptions - options for the node, mostly used for positioning if at all
    */
-  public constructor( size: Dimension2,
-                      magneticFieldEnabledProperty: TReadOnlyProperty<boolean>,
+  public constructor( magneticFieldEnabledProperty: TReadOnlyProperty<boolean>,
                       magneticFieldStrengthProperty: NumberProperty,
                       isSingleMeasurementModeProperty: TReadOnlyProperty<boolean>,
                       measurementStateProperty: Property<SpinMeasurementState>,
-                      providedOptions?: NodeOptions ) {
+                      providedOptions?: PanelOptions ) {
 
-    const rect = new Rectangle( 0, 0, size.width, size.height, {
-      stroke: Color.BLACK,
-      fill: new Color( 235, 255, 235 ),
-      cornerRadius: 8
+    // TODO: See https://github.com/phetsims/quantum-measurement/issues/80.  Make the title strings translatable once
+    //       this class is essentially approved by the design team.
+    const titleStringProperty = new DerivedProperty( [ isSingleMeasurementModeProperty ], isSingleMode => {
+      return isSingleMode ? 'Atom' : 'Atoms';
     } );
+    const titleNode = new Text( titleStringProperty, { font: LABEL_FONT } );
 
     const magneticFieldNode = new MagneticFieldNode( magneticFieldStrengthProperty, measurementStateProperty, {
-      center: rect.center,
       visibleProperty: magneticFieldEnabledProperty
     } );
 
-    const singleSphericalAtomNode = new ShadedSphereNode( ATOM_RADIUS, ATOM_NODE_OPTIONS );
-
-    const labeledSingleAtomNode = new VBox( {
-      children: [
-        singleSphericalAtomNode,
-        new Text( 'Atom', { font: LABEL_FONT } )
-      ],
-      center: rect.center,
-      spacing: 10,
-      visibleProperty: isSingleMeasurementModeProperty
-    } );
+    const singleSphericalAtomNode = new ShadedSphereNode(
+      ATOM_RADIUS,
+      combineOptions<ShadedSphereNodeOptions>(
+        {
+          center: magneticFieldNode.center,
+          visibleProperty: isSingleMeasurementModeProperty
+        },
+        ATOM_NODE_OPTIONS
+      )
+    );
 
     // Create the set of atom nodes for the multiple measurement mode.  The layout used here is quite specific to the
     // desired number of atoms and will need to be adjusted if that number ever changes.
@@ -88,24 +85,30 @@ class SystemUnderTestNode extends Node {
     const multipleSphericalAtomNode = new VBox( {
       children: atomRowHBoxes,
       spacing: 10,
-      center: rect.center
+      center: magneticFieldNode.center,
+      visibleProperty: DerivedProperty.valueEqualsConstant( isSingleMeasurementModeProperty, false )
     } );
 
-    const labeledMultiAtomNode = new VBox( {
-      children: [
-        multipleSphericalAtomNode,
-        new Text( 'Atoms', { font: LABEL_FONT } )
-      ],
-      spacing: 10,
-      center: rect.center,
-      visibleProperty: DerivedProperty.valueEqualsConstant( isSingleMeasurementModeProperty, false )
+    // Create a node with the magnetic field in the background and the atoms in the foreground.
+    const fieldAndAtomsNode = new Node( {
+      children: [ magneticFieldNode, singleSphericalAtomNode, multipleSphericalAtomNode ]
+    } );
+
+    // Combine the title and the field and atoms node into a single node for the content.
+    const content = new VBox( {
+      children: [ titleNode, fieldAndAtomsNode ],
+      spacing: 5,
+      resize: false
     } );
 
-    const options = combineOptions<NodeOptions>( {
-      children: [ rect, magneticFieldNode, labeledSingleAtomNode, labeledMultiAtomNode ]
+    const options = combineOptions<PanelOptions>( {
+      stroke: Color.BLACK,
+      fill: new Color( 235, 255, 235 ),
+      cornerRadius: 8,
+      resize: false
     }, providedOptions );
 
-    super( options );
+    super( content, options );
   }
 }