From 676a20350f3dee2c03a54c9ed40a72b3f423191e Mon Sep 17 00:00:00 2001 From: jbphet Date: Thu, 16 Jan 2025 14:15:26 -0700 Subject: [PATCH] improve layout of system-under-test Node, see https://github.com/phetsims/quantum-measurement/issues/80 --- .../view/BlochSphereMeasurementArea.ts | 2 - js/bloch-sphere/view/SystemUnderTestNode.ts | 75 ++++++++++--------- 2 files changed, 39 insertions(+), 38 deletions(-) diff --git a/js/bloch-sphere/view/BlochSphereMeasurementArea.ts b/js/bloch-sphere/view/BlochSphereMeasurementArea.ts index 801118b..3fcfa4d 100644 --- 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 index 037670e..2d9b3af 100644 --- 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, + public constructor( magneticFieldEnabledProperty: TReadOnlyProperty, magneticFieldStrengthProperty: NumberProperty, isSingleMeasurementModeProperty: TReadOnlyProperty, measurementStateProperty: Property, - 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( + { + 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( { - children: [ rect, magneticFieldNode, labeledSingleAtomNode, labeledMultiAtomNode ] + const options = combineOptions( { + stroke: Color.BLACK, + fill: new Color( 235, 255, 235 ), + cornerRadius: 8, + resize: false }, providedOptions ); - super( options ); + super( content, options ); } }