add TimeControlNode to binder, phetsims/binder#27

js/common/ProportionConstants.js

@@ -19,7 +19,10 @@ const ProportionConstants = {
 
   // distance (in fitness) from max fitness that still indicates a successful proportion when both hands moving in the
   // same direction. See RatioAndProportionModel.movingInDirection()
-  MOVING_IN_PROPORTION_FITNESS_THRESHOLD: .01
+  MOVING_IN_PROPORTION_FITNESS_THRESHOLD: .01,
+
+  // The value to multiple the keyboard step size by to get the shift + keydown step size
+  SHIFT_KEY_MULTIPLIER: 1 / 5
 };
 
 ratioAndProportion.register( 'ProportionConstants', ProportionConstants );

js/common/view/RatioAndProportionScreenView.js

@@ -86,6 +86,9 @@ class RatioAndProportionScreenView extends ScreenView {
     // @protected
     this.gridViewProperty = gridViewProperty;
 
+    // by default, the keyboard step size should be half of one default grid line width. See https://github.com/phetsims/ratio-and-proportion/issues/85
+    const keyboardStep = 1 / 2 / options.gridBaseUnitProperty.value;
+
     const defaultRatioHalfBounds = Bounds2.rect( 0, 0, RATIO_HALF_WIDTH, LAYOUT_BOUNDS.height );
 
     // @private {RatioHalf}
@@ -99,7 +102,8 @@ class RatioAndProportionScreenView extends ScreenView {
       options.gridBaseUnitProperty,
       ratioDescriber,
       gridDescriber,
-      gridAndLabelsColorProperty, {
+      gridAndLabelsColorProperty,
+      keyboardStep, {
         labelContent: ratioAndProportionStrings.a11y.leftHand,
         isRight: false // this way we get a left hand
       }
@@ -116,7 +120,8 @@ class RatioAndProportionScreenView extends ScreenView {
       options.gridBaseUnitProperty,
       ratioDescriber,
       gridDescriber,
-      gridAndLabelsColorProperty, {
+      gridAndLabelsColorProperty,
+      keyboardStep, {
         labelContent: ratioAndProportionStrings.a11y.rightHand
       } );
 
@@ -131,7 +136,7 @@ class RatioAndProportionScreenView extends ScreenView {
       ]
     } );
     const ratioInteractionListener = new RatioInteractionListener( a11yRatioContainer, model.leftValueProperty,
-      model.rightValueProperty, model.valueRange, model.firstInteractionProperty, options.gridBaseUnitProperty );
+      model.rightValueProperty, model.valueRange, model.firstInteractionProperty, options.gridBaseUnitProperty, keyboardStep );
     a11yRatioContainer.addInputListener( ratioInteractionListener );
 
     // @private

js/common/view/RatioHalf.js

@@ -52,10 +52,11 @@ class RatioHalf extends Rectangle {
    * @param {RatioDescriber} ratioDescriber
    * @param {GridDescriber} gridDescriber
    * @param {Property.<Color>} colorProperty
+   * @param {number} keyboardStep
    * @param {Object} [options]
    */
   constructor( positionProperty, valueProperty, valueRange, firstInteractionProperty, bounds, gridViewProperty,
-               gridBaseUnitProperty, ratioDescriber, gridDescriber, colorProperty, options ) {
+               gridBaseUnitProperty, ratioDescriber, gridDescriber, colorProperty, keyboardStep, options ) {
 
     options = merge( {
       cursor: 'ratioHandNode',
@@ -92,7 +93,7 @@ class RatioHalf extends Rectangle {
     this.addChild( gridNode );
 
     // The draggable element inside the Node framed with thick rectangles on the top and bottom.
-    const ratioHandNode = new RatioHandNode( valueProperty, valueRange, gridViewProperty, gridBaseUnitProperty, {
+    const ratioHandNode = new RatioHandNode( valueProperty, valueRange, gridViewProperty, keyboardStep, {
       startDrag: () => { firstInteractionProperty.value = false; },
       isRight: options.isRight
     } );

js/common/view/RatioHandNode.js

@@ -16,6 +16,7 @@ import Node from '../../../../scenery/js/nodes/Node.js';
 import AccessibleSlider from '../../../../sun/js/accessibility/AccessibleSlider.js';
 import filledInHandImage from '../../../images/filled-in-hand_png.js';
 import ratioAndProportion from '../../ratioAndProportion.js';
+import ProportionConstants from '../ProportionConstants.js';
 import GridView from './GridView.js';
 
 class RatioHandNode extends Node {
@@ -25,14 +26,18 @@ class RatioHandNode extends Node {
    * @param {Property.<number>} valueProperty
    * @param {Range} valueRange
    * @param {EnumerationProperty.<GridView>} gridViewProperty
-   * @param {Property.<number>} gridBaseUnitProperty
+   * @param {number} keyboardStep
    * @param {Object} [options]
    */
-  constructor( valueProperty, valueRange, gridViewProperty, gridBaseUnitProperty, options ) {
+  constructor( valueProperty, valueRange, gridViewProperty, keyboardStep, options ) {
 
     options = merge( {
       isRight: true, // right hand or left hand
-      asIcon: false // when true, no input will be attached
+      asIcon: false, // when true, no input will be attached
+
+      keyboardStep: keyboardStep,
+      shiftKeyboardStep: keyboardStep * ProportionConstants.SHIFT_KEY_MULTIPLIER,
+      pageKeyboardStep: 1 / 5
     }, options );
     super();
 
@@ -54,14 +59,6 @@ class RatioHandNode extends Node {
       handCircle.visible = GridView.displayHorizontal( gridView );
     } );
 
-    // don't change update this for icons
-    !options.asIcon && gridBaseUnitProperty.link( baseUnit => {
-      const downDelta = 1 / baseUnit;
-      this.setKeyboardStep( downDelta );
-      this.setShiftKeyboardStep( downDelta / 10 );
-      this.setPageKeyboardStep( 1 / 5 );
-    } );
-
     assert && assert( !options.children, 'RatioHandeNode sets its own children' );
     this.children = [ handImage, handCircle ];
 

js/common/view/RatioInteractionListener.js

@@ -9,6 +9,7 @@
 import BooleanProperty from '../../../../axon/js/BooleanProperty.js';
 import KeyStateTracker from '../../../../scenery/js/accessibility/KeyStateTracker.js';
 import ratioAndProportion from '../../ratioAndProportion.js';
+import ProportionConstants from '../ProportionConstants.js';
 
 class RatioInteractionListener {
 
@@ -19,9 +20,10 @@ class RatioInteractionListener {
    * @param {Range} valueRange
    * @param {Property.<boolean>} firstInteractionProperty
    * @param {Property.<number>} gridBaseUnitProperty
+   * @param {number} keyboardStep
    */
   constructor( targetNode, leftValueProperty, rightValueProperty, valueRange,
-               firstInteractionProperty, gridBaseUnitProperty ) {
+               firstInteractionProperty, gridBaseUnitProperty, keyboardStep ) {
 
     // @private
     this.keyStateTracker = new KeyStateTracker();
@@ -31,6 +33,7 @@ class RatioInteractionListener {
     this.gridBaseUnitProperty = gridBaseUnitProperty;
     this.leftValueProperty = leftValueProperty;
     this.rightValueProperty = rightValueProperty;
+    this.keyboardStep = keyboardStep;
 
     // @private - true whenever the user is interacting with this listener
     this.isBeingInteractedWithProperty = new BooleanProperty( false );
@@ -49,8 +52,7 @@ class RatioInteractionListener {
    */
   stepValue( property, increment ) {
     this.firstInteractionProperty.value = false;
-    const value = 1 / this.gridBaseUnitProperty.value;
-    const amount = this.keyStateTracker.shiftKeyDown ? value / 10 : value;
+    const amount = this.keyStateTracker.shiftKeyDown ? this.keyboardStep * ProportionConstants.SHIFT_KEY_MULTIPLIER : this.keyboardStep;
     property.value = this.valueRange.constrainValue( property.value + ( amount * ( increment ? 1 : -1 ) ) );
   }