Layout improvements for preparation area, see #54

phetsims · Dec 25, 2024 · c96b534 · c96b534
1 parent 200ef04
commit c96b534
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 57 deletions.
diff --git a/js/bloch-sphere/view/BlochSphereScreenView.ts b/js/bloch-sphere/view/BlochSphereScreenView.ts
@@ -7,6 +7,7 @@
  */
 
 import BlochSphereModel from 'model/BlochSphereModel.js';
+import Dimension2 from '../../../../dot/js/Dimension2.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import ScreenView from '../../../../joist/js/ScreenView.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
@@ -34,17 +35,27 @@ export default class BlochSphereScreenView extends QuantumMeasurementScreenView
       tandem: tandem
     } );
 
-    const azimuthSlider = new Slider( model.blochSphere.azimuthalAngleProperty, model.blochSphere.azimuthalAngleProperty.range, {
-      center: new Vector2( 100, 100 ),
-      tandem: tandem.createTandem( 'azimuthSlider' ),
-      thumbFill: '#444'
-    } );
     const polarSlider = new Slider( model.blochSphere.polarAngleProperty, model.blochSphere.polarAngleProperty.range, {
       center: new Vector2( 100, 200 ),
       tandem: tandem.createTandem( 'polarSlider' ),
-      thumbFill: '#444'
+      thumbFill: '#444',
+      trackSize: new Dimension2( 150, 0.5 ),
+      majorTickLength: 10
+    } );
+    const azimuthSlider = new Slider( model.blochSphere.azimuthalAngleProperty, model.blochSphere.azimuthalAngleProperty.range, {
+      center: new Vector2( 100, 100 ),
+      tandem: tandem.createTandem( 'azimuthSlider' ),
+      thumbFill: '#444',
+      trackSize: new Dimension2( 150, 0.5 ),
+      majorTickLength: 10
     } );
 
+    polarSlider.addMajorTick( 0, new Text( '0', { font: new PhetFont( 15 ) } ) );
+    polarSlider.addMajorTick( Math.PI, new Text( 'π', { font: new PhetFont( 15 ) } ) );
+
+    azimuthSlider.addMajorTick( 0, new Text( '0', { font: new PhetFont( 15 ) } ) );
+    azimuthSlider.addMajorTick( 2 * Math.PI, new Text( '2π', { font: new PhetFont( 15 ) } ) );
+
     const slidersPanel = new Panel( new VBox( {
       spacing: 10,
       children: [
@@ -62,7 +73,6 @@ export default class BlochSphereScreenView extends QuantumMeasurementScreenView
     const blochSphereNode = new BlochSphereNode(
       model.blochSphere, {
         tandem: tandem.createTandem( 'blochSphereNode' ),
-        center: this.layoutBounds.center,
         expandBounds: false,
         drawTitle: false
       } );
@@ -79,8 +89,7 @@ export default class BlochSphereScreenView extends QuantumMeasurementScreenView
             fill: '#aff',
             cornerRadius: 5,
             stroke: null,
-            xMargin: 10,
-            yMargin: 10
+            xMargin: 10
           }
         ),
         blochSphereNode,

diff --git a/js/common/view/BlochSphereNode.ts b/js/common/view/BlochSphereNode.ts
@@ -2,8 +2,6 @@
 /**
  * Visual representation of the Bloch Sphere, meaning an orb with axis and the state vector.
  *
- * // TODO: Show the angle indicators and clean code, see https://github.com/phetsims/quantum-measurement/issues/44
- *
  * @author Agustín Vallejo
  */
 
@@ -64,7 +62,8 @@ export default class BlochSphereNode extends Node {
       drawKets: true,
       drawTitle: true,
       drawAngleIndicators: true,
-      expandBounds: true
+      expandBounds: true,
+      excludeInvisibleChildrenFromBounds: true
     }, providedOptions );
 
     const sphereRadius = 100;
@@ -174,6 +173,51 @@ export default class BlochSphereNode extends Node {
     }, angleIndicatorPathOptions ) );
     const zProjectionLine = new Path( null, angleIndicatorPathOptions );
 
+    options.children = [
+      title,
+      upStateLabel,
+      downStateLabel,
+      sphereNode,
+      equatorLine,
+      xAxis,
+      yAxis,
+      zAxis,
+      xAxisLabel,
+      yAxisLabel,
+      zAxisLabel,
+      polarAngleIndicator,
+      azimuthalAngleIndicator,
+      xyProjectionVector,
+      zProjectionLine,
+      stateVector
+    ];
+
+    super( options );
+
+    this.pointOnTheEquator = pointOnTheEquator;
+
+    const plusX = this.pointOnTheEquator( 0, xAxisOffsetAngleProperty.value );
+    const minusX = this.pointOnTheEquator( Math.PI, xAxisOffsetAngleProperty.value );
+    xAxis.shape = new Shape().moveTo( plusX.x, plusX.y ).lineTo( minusX.x, minusX.y );
+
+    const plusY = this.pointOnTheEquator( Math.PI / 2, xAxisOffsetAngleProperty.value );
+    const minusY = this.pointOnTheEquator( -Math.PI / 2, xAxisOffsetAngleProperty.value );
+    yAxis.shape = new Shape().moveTo( plusY.x, plusY.y ).lineTo( minusY.x, minusY.y );
+    zAxis.shape = new Shape().moveTo( 0, -sphereRadius ).lineTo( 0, sphereRadius );
+
+    xAxisLabel.centerX = plusX.x + 3 * LABELS_OFFSET;
+    xAxisLabel.centerY = plusX.y + 2 * LABELS_OFFSET;
+    yAxisLabel.centerX = plusY.x;
+    yAxisLabel.centerY = plusY.y - LABELS_OFFSET;
+
+    if ( options.expandBounds ) {
+      this.setLocalBounds( new Bounds2( -1.5 * sphereRadius, this.bounds.minY, 1.5 * sphereRadius, this.bounds.maxY ) );
+    }
+
+    this.sphereRadius = sphereRadius;
+    this.xAxisOffsetAngleProperty = xAxisOffsetAngleProperty;
+    this.stateVectorVisibleProperty = stateVectorVisibleProperty;
+
     Multilink.multilink(
       [
         blochSphere.azimuthalAngleProperty,
@@ -232,51 +276,6 @@ export default class BlochSphereNode extends Node {
         );
       }
     );
-
-    options.children = [
-      title,
-      upStateLabel,
-      downStateLabel,
-      sphereNode,
-      equatorLine,
-      xAxis,
-      yAxis,
-      zAxis,
-      xAxisLabel,
-      yAxisLabel,
-      zAxisLabel,
-      polarAngleIndicator,
-      azimuthalAngleIndicator,
-      xyProjectionVector,
-      zProjectionLine,
-      stateVector
-    ];
-
-    super( options );
-
-    this.pointOnTheEquator = pointOnTheEquator;
-
-    const plusX = this.pointOnTheEquator( 0, xAxisOffsetAngleProperty.value );
-    const minusX = this.pointOnTheEquator( Math.PI, xAxisOffsetAngleProperty.value );
-    xAxis.shape = new Shape().moveTo( plusX.x, plusX.y ).lineTo( minusX.x, minusX.y );
-
-    const plusY = this.pointOnTheEquator( Math.PI / 2, xAxisOffsetAngleProperty.value );
-    const minusY = this.pointOnTheEquator( -Math.PI / 2, xAxisOffsetAngleProperty.value );
-    yAxis.shape = new Shape().moveTo( plusY.x, plusY.y ).lineTo( minusY.x, minusY.y );
-    zAxis.shape = new Shape().moveTo( 0, -sphereRadius ).lineTo( 0, sphereRadius );
-
-    xAxisLabel.centerX = plusX.x + 3 * LABELS_OFFSET;
-    xAxisLabel.centerY = plusX.y + 2 * LABELS_OFFSET;
-    yAxisLabel.centerX = plusY.x;
-    yAxisLabel.centerY = plusY.y - LABELS_OFFSET;
-
-    if ( options.expandBounds ) {
-      this.setLocalBounds( new Bounds2( -1.5 * sphereRadius, this.bounds.minY, 1.5 * sphereRadius, this.bounds.maxY ) );
-    }
-
-    this.sphereRadius = sphereRadius;
-    this.xAxisOffsetAngleProperty = xAxisOffsetAngleProperty;
-    this.stateVectorVisibleProperty = stateVectorVisibleProperty;
   }
 }