Adding the direction combo box, see #54

js/bloch-sphere/model/BlochSphereModel.ts

@@ -8,12 +8,15 @@
  */
 
 import NumberProperty from '../../../../axon/js/NumberProperty.js';
+import Property from '../../../../axon/js/Property.js';
 import TModel from '../../../../joist/js/TModel.js';
 import { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 import { PhetioObjectOptions } from '../../../../tandem/js/PhetioObject.js';
+import EnumerationIO from '../../../../tandem/js/types/EnumerationIO.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
 import ComplexBlochSphere from './ComplexBlochSphere.js';
+import { StateDirection } from './StateDirection.js';
 
 type SelfOptions = EmptySelfOptions;
 
@@ -29,6 +32,9 @@ export default class BlochSphereModel implements TModel {
   public readonly downCoefficientProperty: NumberProperty;
   public readonly phaseFactorProperty: NumberProperty;
 
+  // Selected State Direction
+  public selectedStateDirectionProperty: Property<StateDirection>;
+
   public constructor( providedOptions: QuantumMeasurementModelOptions ) {
 
     this.blochSphere = new ComplexBlochSphere( {
@@ -50,13 +56,36 @@ export default class BlochSphereModel implements TModel {
       phetioReadOnly: true
     } );
 
+    this.selectedStateDirectionProperty = new Property( StateDirection.Z_PLUS, {
+      tandem: providedOptions.tandem.createTandem( 'selectedStateDirectionProperty' ),
+      phetioValueType: EnumerationIO( StateDirection )
+    } );
+
+    let selectingStateDirection = false;
+    this.selectedStateDirectionProperty.link( stateDirection => {
+      if ( stateDirection !== StateDirection.CUSTOM ) {
+        selectingStateDirection = true;
+        this.blochSphere.polarAngleProperty.value = stateDirection.polarAngle;
+        this.blochSphere.azimuthalAngleProperty.value = stateDirection.azimuthalAngle;
+        selectingStateDirection = false;
+      }
+    } );
+
     this.blochSphere.polarAngleProperty.link( theta => {
       this.upCoefficientProperty.value = Math.cos( theta / 2 );
       this.downCoefficientProperty.value = Math.sin( theta / 2 );
+
+      if ( !selectingStateDirection ) {
+        this.selectedStateDirectionProperty.value = StateDirection.CUSTOM;
+      }
     } );
 
     this.blochSphere.azimuthalAngleProperty.link( phi => {
       this.phaseFactorProperty.value = phi / Math.PI;
+
+      if ( !selectingStateDirection ) {
+        this.selectedStateDirectionProperty.value = StateDirection.CUSTOM;
+      }
     } );
   }
 

js/bloch-sphere/model/StateDirection.ts

@@ -0,0 +1,32 @@
+// Copyright 2024, University of Colorado Boulder
+
+/**
+ * Represents the possible preset directions the state vector within the Bloch Sphere can have.
+ *
+ * @author Agustín Vallejo
+ */
+
+import Enumeration from '../../../../phet-core/js/Enumeration.js';
+import EnumerationValue from '../../../../phet-core/js/EnumerationValue.js';
+import quantumMeasurement from '../../quantumMeasurement.js';
+
+export class StateDirection extends EnumerationValue {
+  public static readonly Z_PLUS = new StateDirection( '+Z', 0, 0, 'ZPlus' );
+  public static readonly Z_MINUS = new StateDirection( '-Z', Math.PI, 0, 'ZMinus' );
+  public static readonly X_PLUS = new StateDirection( '+X', Math.PI / 2, 0, 'XPlus' );
+  public static readonly X_MINUS = new StateDirection( '-X', Math.PI / 2, Math.PI, 'XMinus' );
+  public static readonly Y_PLUS = new StateDirection( '+Y', Math.PI / 2, Math.PI / 2, 'YPlus' );
+  public static readonly Y_MINUS = new StateDirection( '-Y', Math.PI / 2, 3 * Math.PI / 2, 'YMinus' );
+  public static readonly CUSTOM = new StateDirection( 'Custom', 0, 0, 'Custom' );
+
+  public static readonly enumeration = new Enumeration( StateDirection );
+
+  public constructor( public readonly description: string,
+                      public readonly polarAngle: number,
+                      public readonly azimuthalAngle: number,
+                      public readonly tandemName: string ) {
+    super();
+  }
+}
+
+quantumMeasurement.register( 'StateDirection', StateDirection );

js/bloch-sphere/view/BlochSphereScreenView.ts

@@ -12,6 +12,7 @@ import Vector2 from '../../../../dot/js/Vector2.js';
 import ScreenView from '../../../../joist/js/ScreenView.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import { Color, Image, Line, Text, VBox } from '../../../../scenery/js/imports.js';
+import ComboBox, { ComboBoxItem } from '../../../../sun/js/ComboBox.js';
 import Panel from '../../../../sun/js/Panel.js';
 import Slider from '../../../../sun/js/Slider.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
@@ -20,6 +21,7 @@ import QuantumMeasurementColors from '../../common/QuantumMeasurementColors.js';
 import BlochSphereNode from '../../common/view/BlochSphereNode.js';
 import QuantumMeasurementScreenView from '../../common/view/QuantumMeasurementScreenView.js';
 import quantumMeasurement from '../../quantumMeasurement.js';
+import { StateDirection } from '../model/StateDirection.js';
 import BlochSphereNumericalEquationNode from './BlochSphereNumericalEquationNode.js';
 import BlochSphereSymbolicEquationNode from './BlochSphereSymbolicEquationNode.js';
 
@@ -56,9 +58,21 @@ export default class BlochSphereScreenView extends QuantumMeasurementScreenView
     azimuthSlider.addMajorTick( 0, new Text( '0', { font: new PhetFont( 15 ) } ) );
     azimuthSlider.addMajorTick( 2 * Math.PI, new Text( '2π', { font: new PhetFont( 15 ) } ) );
 
+    const comboBoxItems: ComboBoxItem<StateDirection>[] = StateDirection.enumeration.values.map( direction => {
+      return {
+        value: direction,
+        createNode: () => new Text( direction.description, { font: new PhetFont( 16 ) } )
+      };
+    } );
+
+    const directionComboBox = new ComboBox( model.selectedStateDirectionProperty, comboBoxItems, this, {
+      tandem: tandem.createTandem( 'directionComboBox' )
+    } );
+
     const slidersPanel = new Panel( new VBox( {
       spacing: 10,
       children: [
+        directionComboBox,
         new Text( 'Polar Angle (θ): ', { font: new PhetFont( 15 ) } ), // Theta symbol: θ
         polarSlider,
         new Text( 'Azimuthal Angle (φ)', { font: new PhetFont( 15 ) } ), // Phi symbol: φ
@@ -79,7 +93,7 @@ export default class BlochSphereScreenView extends QuantumMeasurementScreenView
 
     const blochSpherePreparationArea = new VBox( {
       left: this.layoutBounds.left + 20,
-      spacing: 20,
+      spacing: 10,
       align: 'center',
       children: [
         new Text( 'State to Prepare', { font: new PhetFont( { size: 20, weight: 'bolder' } ) } ),

js/common/model/AbstractBlochSphere.ts

@@ -40,13 +40,15 @@ export default abstract class AbstractBlochSphere extends PhetioObject {
     this.azimuthalAngleProperty = new NumberProperty( 0, {
       range: new Range( 0, 2 * Math.PI ),
       tandem: options.tandem.createTandem( 'azimuthalAngleProperty' ),
-      phetioReadOnly: true
+      phetioReadOnly: true,
+      reentrant: true
     } );
 
     this.polarAngleProperty = new NumberProperty( 0, {
       range: new Range( 0, Math.PI ),
       tandem: options.tandem.createTandem( 'polarAngleProperty' ),
-      phetioReadOnly: true
+      phetioReadOnly: true,
+      reentrant: true
     } );
 
     this.alphaProperty = new NumberProperty( 1, {