finished first pass on common view (still PDOM properties and some ot…

…her common code are broken), #404
phetsims · Oct 21, 2021 · 8999552 · 8999552
1 parent 4f42a62
commit 8999552
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 65 deletions.
diff --git a/js/common/model/RAPModel.ts b/js/common/model/RAPModel.ts
@@ -18,7 +18,7 @@ import NumberIO from '../../../../tandem/js/types/NumberIO.js';
 import ratioAndProportion from '../../ratioAndProportion.js';
 import rapConstants from '../rapConstants.js';
 import RAPRatio from './RAPRatio.js';
-import RatioTerm, { RatioTermType } from './RatioTerm.js';
+import RatioTerm from './RatioTerm.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import RAPRatioTuple from './RAPRatioTuple.js';
 
@@ -257,7 +257,7 @@ unclampedFitness: ${unclampedFitness}
    * @returns {number}
    * @public
    */
-  getIdealValueForTerm( ratioTerm: RatioTermType ) {
+  getIdealValueForTerm( ratioTerm: RatioTerm ) {
     if ( ratioTerm === RatioTerm.ANTECEDENT ) {
       return this.targetRatioProperty.value * this.ratio.tupleProperty.value.consequent;
     }

diff --git a/js/common/model/RAPRatioTuple.ts b/js/common/model/RAPRatioTuple.ts
@@ -10,7 +10,7 @@ import IOType from '../../../../tandem/js/types/IOType.js';
 import NumberIO from '../../../../tandem/js/types/NumberIO.js';
 import Range from '../../../../dot/js/Range.js';
 import ratioAndProportion from '../../ratioAndProportion.js';
-import RatioTerm, { RatioTermType } from './RatioTerm.js';
+import RatioTerm  from './RatioTerm.js';
 
 class RAPRatioTuple {
 
@@ -115,7 +115,7 @@ class RAPRatioTuple {
    * @param {RatioTerm} ratioTerm
    * @returns {number}
    */
-  getForTerm( ratioTerm: RatioTermType ) {
+  getForTerm( ratioTerm: RatioTerm ) {
     switch( ratioTerm ) {
       case RatioTerm.ANTECEDENT:
         return this.antecedent;

diff --git a/js/common/model/RatioTerm.ts b/js/common/model/RatioTerm.ts
@@ -6,19 +6,10 @@
  * @author Michael Kauzmann (PhET Interactive Simulations)
  */
 
-import Enumeration from '../../../../phet-core/js/Enumeration.js';
-import ratioAndProportion from '../../ratioAndProportion.js';
-
-type RatioTermType = {
-  ANTECEDENT: Object;
-  CONSEQUENT: Object;
-}
-
 // @ts-ignore
-const RatioTerm = <RatioTermType>Enumeration.byKeys( [ 'ANTECEDENT', 'CONSEQUENT' ] );
-
-
-ratioAndProportion.register( 'RatioTerm', RatioTerm );
+enum RatioTerm {
+  ANTECEDENT,
+  CONSEQUENT
+}
 
-export { RatioTermType };
 export default RatioTerm;
diff --git a/js/common/view/CueDisplay.ts b/js/common/view/CueDisplay.ts
@@ -6,5 +6,12 @@
  * @author Michael Kauzmann (PhET Interactive Simulations)
  */
 
-type CueDisplay = 'NONE'| 'W_S'| 'UP_DOWN'| 'ARROWS';
+
+enum CueDisplay {
+  NONE,
+  W_S,
+  UP_DOWN,
+  ARROWS
+}
+
 export default CueDisplay;
diff --git a/js/common/view/RAPScreenView.ts b/js/common/view/RAPScreenView.ts
@@ -51,6 +51,7 @@ import TickMarkView, { TickMarkViewType } from './TickMarkView.js';
 import TickMarkViewRadioButtonGroup from './TickMarkViewRadioButtonGroup.js';
 import RAPModel from '../model/RAPModel.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
+import CueDisplay from './CueDisplay.js';
 
 // constants
 const LAYOUT_BOUNDS = ScreenView.DEFAULT_LAYOUT_BOUNDS;
@@ -181,7 +182,7 @@ class RAPScreenView extends ScreenView {
       handColorProperty: options.leftHandColorProperty,
       accessibleName: ratioAndProportionStrings.a11y.leftHand,
       a11yDependencies: a11yDependencies,
-      bothHandsCueDisplay: 'W_S',
+      bothHandsCueDisplay: CueDisplay.W_S,
       isRight: false, // this way we get a left hand
 
       // Added to the antecedent for ease, but it applies to both RatioHalfs in the PDOM

diff --git a/js/common/view/RAPTickMarkLabelsNode.ts b/js/common/view/RAPTickMarkLabelsNode.ts
@@ -11,20 +11,28 @@ import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
 import Node from '../../../../scenery/js/nodes/Node.js';
 import Text from '../../../../scenery/js/nodes/Text.js';
 import ratioAndProportion from '../../ratioAndProportion.js';
-import TickMarkView from './TickMarkView.js';
+import TickMarkView, { TickMarkViewType } from './TickMarkView.js';
+import Color from '../../../../scenery/js/util/Color.js';
 
 const LABEL_X = 0;
 
 class RAPTickMarkLabelsNode extends Node {
 
+  private totalHeight: number;
+  private heightOfText: number | null;
+  private tickMarkViewProperty: Property<TickMarkViewType>;
+  private tickMarkRangeProperty: Property<number>;
+  private colorProperty: Property<Color>;
+
   /**
    * @param {Property.<TickMarkView>} tickMarkViewProperty
    * @param {Property.<number>} tickMarkRangeProperty
    * @param {number} height
    * @param {Property.<Color>} colorProperty
    * @param {Object} [options]
    */
-  constructor( tickMarkViewProperty, tickMarkRangeProperty, height, colorProperty, options ) {
+  constructor( tickMarkViewProperty: Property<TickMarkViewType>, tickMarkRangeProperty: Property<number>, height: number,
+               colorProperty: Property<Color>, options?: any ) {
 
     if ( options ) {
       assert && assert( !options.hasOwnProperty( 'children' ), 'RAPTickMarkLabelsNode sets its own children' );
@@ -62,7 +70,7 @@ class RAPTickMarkLabelsNode extends Node {
   /**
    * @public
    */
-  layout( height ) {
+  layout( height:number ) {
 
     this.totalHeight = height;
     this.update( this.tickMarkRangeProperty.value, this.tickMarkViewProperty.value );
@@ -71,7 +79,7 @@ class RAPTickMarkLabelsNode extends Node {
   /**
    * @private
    */
-  update( tickMarkRange, tickMarkView ) {
+  update( tickMarkRange: number, tickMarkView: TickMarkViewType ) {
 
     // subtract one to account for potential rounding errors. This helps guarantee that the last line is drawn.
     const horizontalSpacing = ( this.totalHeight - 1 ) / tickMarkRange;
@@ -86,7 +94,7 @@ class RAPTickMarkLabelsNode extends Node {
    * @param {boolean} showTickMarkUnits
    * @param {number} horizontalSpacing
    */
-  updateUnitLabels( showTickMarkUnits, horizontalSpacing ) {
+  updateUnitLabels( showTickMarkUnits: boolean, horizontalSpacing: number ) {
     this.children = [];
 
     assert && assert( typeof horizontalSpacing === 'number', 'Unit Labels only supported for horizontal lines' );

diff --git a/js/common/view/RatioHalf.ts b/js/common/view/RatioHalf.ts
@@ -26,7 +26,7 @@ import Rectangle from '../../../../scenery/js/nodes/Rectangle.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import ratioAndProportion from '../../ratioAndProportion.js';
 import ratioAndProportionStrings from '../../ratioAndProportionStrings.js';
-import RatioTerm, { RatioTermType } from '../model/RatioTerm.js';
+import RatioTerm from '../model/RatioTerm.js';
 import rapConstants from '../rapConstants.js';
 import CueDisplay from './CueDisplay.js';
 import RatioHalfTickMarksNode from './RatioHalfTickMarksNode.js';
@@ -48,12 +48,12 @@ const SNAP_TO_TICK_MARK_THRESHOLD = 0.1;
 // total horizontal drag distance;
 const X_MODEL_DRAG_DISTANCE = 1;
 const INITIAL_X_VALUE = 0;
-const getModelBoundsFromRange = range => new Bounds2( -1 * X_MODEL_DRAG_DISTANCE / 2, range.min, X_MODEL_DRAG_DISTANCE / 2, range.max );
+const getModelBoundsFromRange = ( range: Range ) => new Bounds2( -1 * X_MODEL_DRAG_DISTANCE / 2, range.min, X_MODEL_DRAG_DISTANCE / 2, range.max );
 
 const MIN_HAND_SCALE = 1.2;
 const MAX_HAND_SCALE = 2.5;
 
-function ratioHalfAccessibleNameBehavior( node, options, accessibleName, callbacksForOtherNodes ) {
+function ratioHalfAccessibleNameBehavior( node: RatioHalf, options: any, accessibleName: string, callbacksForOtherNodes: { (): void }[] ) {
   callbacksForOtherNodes.push( () => {
     node.ratioHandNode.accessibleName = accessibleName;
   } );
@@ -62,17 +62,22 @@ function ratioHalfAccessibleNameBehavior( node, options, accessibleName, callbac
 
 const TOTAL_RANGE = rapConstants.TOTAL_RATIO_TERM_VALUE_RANGE;
 
+type LayoutFunction = ( bounds: Bounds2, heightScalar: number ) => void;
+
 class RatioHalf extends Rectangle {
 
 
-  public readonly framingRectangleHeight: number;
+  public framingRectangleHeight: number;
   public readonly isBeingInteractedWithProperty: BooleanProperty;
   private ratioLockedProperty: BooleanProperty;
   private bothHandsDescriber: BothHandsDescriber;
   private handPositionsDescriber: HandPositionsDescriber;
   private tickMarkViewProperty: Property<TickMarkViewType>;
-  private ratioTerm: RatioTermType;
+  private ratioTerm: RatioTerm;
   private ratioTupleProperty: Property<RAPRatioTuple>;
+  ratioHandNode: RatioHandNode;
+  private layoutRatioHalf: LayoutFunction;
+  private resetRatioHalf: () => void;
 
   /**
    * @param {Object} config
@@ -151,7 +156,7 @@ class RatioHalf extends Rectangle {
       a11yDependencies: [],
 
       // {CueDisplay}
-      bothHandsCueDisplay: 'UP_DOWN',
+      bothHandsCueDisplay: CueDisplay.UP_DOWN,
 
       // phet-io
       tandem: Tandem.REQUIRED,
@@ -197,9 +202,9 @@ class RatioHalf extends Rectangle {
         bothHandsInteractedWith: boolean,
         displayBothHands: boolean ) => {
         return displayBothHands ? config.bothHandsCueDisplay :
-               keyboardFocused && !interactedWithKeyboard ? 'UP_DOWN' :
-               ( interactedWithKeyboard || interactedWithMouse || bothHandsInteractedWith ) ? 'NONE' :
-               'ARROWS';
+               keyboardFocused && !interactedWithKeyboard ? CueDisplay.UP_DOWN :
+               ( interactedWithKeyboard || interactedWithMouse || bothHandsInteractedWith ) ? CueDisplay.NONE :
+               CueDisplay.ARROWS;
       } );
 
 
@@ -209,10 +214,10 @@ class RatioHalf extends Rectangle {
       bidirectional: true,
       reentrant: true,
       valueType: 'number',
-      map: ratioTuple => ratioTuple.getForTerm( this.ratioTerm ),
-      inverseMap: term => this.ratioTerm === RatioTerm.ANTECEDENT ? this.ratioTupleProperty.value.withAntecedent( term ) :
-                          this.ratioTerm === RatioTerm.CONSEQUENT ? this.ratioTupleProperty.value.withConsequent( term ) :
-                          assert && assert( false, `unexpected ratioTerm ${this.ratioTerm}` )
+      map: ( ratioTuple: RAPRatioTuple ) => ratioTuple.getForTerm( this.ratioTerm ),
+      inverseMap: ( term: number ) => this.ratioTerm === RatioTerm.ANTECEDENT ? this.ratioTupleProperty.value.withAntecedent( term ) :
+                                      this.ratioTerm === RatioTerm.CONSEQUENT ? this.ratioTupleProperty.value.withConsequent( term ) :
+                                      assert && assert( false, `unexpected ratioTerm ${this.ratioTerm}` )
     } );
 
     // @private - The draggable element inside the Node framed with thick rectangles on the top and bottom.
@@ -244,7 +249,7 @@ class RatioHalf extends Rectangle {
       config.bounds );
 
     // Snap mouse/touch input to the nearest tick mark if close enough. This helps with reproducible precision
-    const getSnapToTickMarkValue = yValue => {
+    const getSnapToTickMarkValue = ( yValue: number ) => {
       if ( TickMarkView.displayHorizontal( config.tickMarkViewProperty.value ) ) {
         const tickMarkStep = 1 / config.tickMarkRangeProperty.value;
 
@@ -269,8 +274,8 @@ class RatioHalf extends Rectangle {
       reentrant: true,
       bidirectional: true,
       valueType: Vector2,
-      inverseMap: vector2 => vector2.y,
-      map: number => {
+      inverseMap: ( vector2: Vector2 ) => vector2.y,
+      map: ( number: number ) => {
 
         // initial case
         if ( mappingInitialValue ) {
@@ -286,7 +291,7 @@ class RatioHalf extends Rectangle {
     const dragBoundsProperty = new Property( new Bounds2( 0, 0, 1, 1 ) );
 
     // When set to a value, the horizontal position will not be changed throughout the whole drag. Set to null when not dragging.
-    let startingX = null;
+    let startingX: null | number = null;
 
     // transform and dragBounds set in layout code below
     const dragListener = new DragListener( {
@@ -342,7 +347,7 @@ class RatioHalf extends Rectangle {
     } );
 
     // When the range changes, update the dragBounds of the drag listener
-    config.enabledRatioTermsRangeProperty.link( enabledRange => {
+    config.enabledRatioTermsRangeProperty.link( ( enabledRange: Range ) => {
       const newBounds = getModelBoundsFromRange( enabledRange );
 
       // offset the bounds to account for the ratioHandNode's size, since the center of the ratioHandNode is controlled by the drag bounds.
@@ -379,7 +384,7 @@ class RatioHalf extends Rectangle {
       config.bounds.width, config.bounds.height - 2 * this.framingRectangleHeight,
       config.colorProperty );
 
-    const updatePointer = position => {
+    const updatePointer = ( position: Vector2 ) => {
       this.ratioHandNode.translation = modelViewTransform.modelToViewPosition( position );
     };
     positionProperty.link( updatePointer );
@@ -466,7 +471,7 @@ class RatioHalf extends Rectangle {
    * @public
    * @param {number} desiredBottom
    */
-  setBottomOfRatioHalf( desiredBottom ) {
+  setBottomOfRatioHalf( desiredBottom: number ) {
 
     // `selfBounds` is used for the position of the Rectangle, since RatioHalf extends Rectangle
     this.bottom = desiredBottom + ( this.bounds.bottom - this.localToParentBounds( this.selfBounds ).bottom );
@@ -477,7 +482,7 @@ class RatioHalf extends Rectangle {
    * @param {Bounds2} bounds - the bounds of this RatioHalf, effects dimensions, dragBounds, and width of guiding rectangles
    * @param {number} heightScalar - normalized between 0 and 1. When 1, it the ratio half will be the tallest it gets, at 0, the shortest
    */
-  layout( bounds, heightScalar ) {
+  layout( bounds: Bounds2, heightScalar: number ) {
     assert && assert( heightScalar >= 0 && heightScalar <= 1, 'scalar should be between 0 and 1' );
     this.layoutRatioHalf( bounds, heightScalar );
   }

diff --git a/js/common/view/RatioHalfTickMarksNode.ts b/js/common/view/RatioHalfTickMarksNode.ts
@@ -11,10 +11,14 @@ import Property from '../../../../axon/js/Property.js';
 import GridNode from '../../../../griddle/js/GridNode.js';
 import merge from '../../../../phet-core/js/merge.js';
 import ratioAndProportion from '../../ratioAndProportion.js';
-import TickMarkView from './TickMarkView.js';
+import TickMarkView, { TickMarkViewType } from './TickMarkView.js';
+import Color from '../../../../scenery/js/util/Color';
 
 class RatioHalfTickMarksNode extends GridNode {
 
+  private tickMarkViewProperty: Property<TickMarkViewType>;
+  private tickMarkRangeProperty: Property<number>;
+
   /**
    * @param {Property.<TickMarkView>} tickMarkViewProperty
    * @param {Property.<number>} tickMarkRangeProperty
@@ -23,7 +27,8 @@ class RatioHalfTickMarksNode extends GridNode {
    * @param {Property.<Color>} colorProperty
    * @param {Object} [options]
    */
-  constructor( tickMarkViewProperty, tickMarkRangeProperty, width, height, colorProperty, options ) {
+  constructor( tickMarkViewProperty: Property<TickMarkViewType>, tickMarkRangeProperty: Property<number>, width: number,
+               height: number, colorProperty: Property<Color>, options?: object ) {
     options = merge( {
 
       // initial line spacings
@@ -46,7 +51,7 @@ class RatioHalfTickMarksNode extends GridNode {
   /**
    * @public
    */
-  layout( width, height ) {
+  layout( width: number, height: number ) {
     this.setGridWidth( width );
     this.setGridHeight( height );
     this.update( this.tickMarkRangeProperty.value, this.tickMarkViewProperty.value );
@@ -55,7 +60,7 @@ class RatioHalfTickMarksNode extends GridNode {
   /**
    * @private
    */
-  update( tickMarkRange, tickMarkView ) {
+  update( tickMarkRange: number, tickMarkView: TickMarkViewType ) {
 
     // subtract one to account for potential rounding errors. This helps guarantee that the last line is drawn.
     this.setLineSpacings( {