tweak pointer areas for checkboxes, #267

phetsims · Mar 8, 2023 · 305e22e · 305e22e
1 parent f515aac
commit 305e22e
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 34 deletions.
diff --git a/js/common/CalculusGrapherConstants.ts b/js/common/CalculusGrapherConstants.ts
@@ -14,6 +14,7 @@ import PhetFont from '../../../scenery-phet/js/PhetFont.js';
 import calculusGrapher from '../calculusGrapher.js';
 import { Text } from '../../../scenery/js/imports.js';
 import { PathBoundsMethod } from '../../../scenery/js/imports.js';
+import { CheckboxOptions } from '../../../sun/js/Checkbox.js';
 
 const CONTROL_FONT = new PhetFont( 16 ); // for text on checkboxes, radio buttons, push buttons, etc.
 
@@ -35,6 +36,14 @@ const TYPICAL_AREA = CURVE_X_LENGTH * TYPICAL_Y;
 // See Path.setBoundsMethod and https://github.com/phetsims/calculus-grapher/issues/210
 const PLOT_BOUNDS_METHOD: PathBoundsMethod = 'none';
 
+const CHECKBOX_OPTIONS: CheckboxOptions = {
+  boxWidth: new Text( 'A', { font: CONTROL_FONT } ).height,
+  touchAreaXDilation: 6,
+  touchAreaYDilation: 3,
+  mouseAreaXDilation: 6,
+  mouseAreaYDilation: 3
+};
+
 const CalculusGrapherConstants = {
 
   // margins
@@ -91,7 +100,7 @@ const CalculusGrapherConstants = {
 
   PREFERENCES_DESCRIPTION_LINE_WRAP: 325,
 
-  CHECKBOX_WIDTH: new Text( 'A', { font: CONTROL_FONT } ).height,
+  CHECKBOX_OPTIONS: CHECKBOX_OPTIONS,
 
   // for Panels and AccordionBoxes
   CORNER_RADIUS: 5,

diff --git a/js/common/view/GridCheckbox.ts b/js/common/view/GridCheckbox.ts
@@ -7,20 +7,21 @@
  */
 
 import Property from '../../../../axon/js/Property.js';
-import Checkbox from '../../../../sun/js/Checkbox.js';
+import Checkbox, { CheckboxOptions } from '../../../../sun/js/Checkbox.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import calculusGrapher from '../../calculusGrapher.js';
 import CalculusGrapherConstants from '../../common/CalculusGrapherConstants.js';
 import GridIcon from '../../../../scenery-phet/js/GridIcon.js';
+import { combineOptions } from '../../../../phet-core/js/optionize.js';
 
 export default class GridCheckbox extends Checkbox {
 
   public constructor( scrubberVisibleProperty: Property<boolean>, tandem: Tandem ) {
 
-    super( scrubberVisibleProperty, new GridIcon(), {
-      boxWidth: CalculusGrapherConstants.CHECKBOX_WIDTH,
-      tandem: tandem
-    } );
+    super( scrubberVisibleProperty, new GridIcon(), combineOptions<CheckboxOptions>(
+      {}, CalculusGrapherConstants.CHECKBOX_OPTIONS, {
+        tandem: tandem
+      } ) );
   }
 }
 

diff --git a/js/common/view/ReferenceLineCheckbox.ts b/js/common/view/ReferenceLineCheckbox.ts
@@ -7,8 +7,9 @@
  */
 
 import Property from '../../../../axon/js/Property.js';
+import { combineOptions } from '../../../../phet-core/js/optionize.js';
 import { HBox, RichText } from '../../../../scenery/js/imports.js';
-import Checkbox from '../../../../sun/js/Checkbox.js';
+import Checkbox, { CheckboxOptions } from '../../../../sun/js/Checkbox.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import calculusGrapher from '../../calculusGrapher.js';
 import CalculusGrapherStrings from '../../CalculusGrapherStrings.js';
@@ -32,10 +33,10 @@ export default class ReferenceLineCheckbox extends Checkbox {
       spacing: 8
     } );
 
-    super( scrubberVisibleProperty, box, {
-      boxWidth: CalculusGrapherConstants.CHECKBOX_WIDTH,
-      tandem: tandem
-    } );
+    super( scrubberVisibleProperty, box, combineOptions<CheckboxOptions>(
+      {}, CalculusGrapherConstants.CHECKBOX_OPTIONS, {
+        tandem: tandem
+      } ) );
   }
 }
 

diff --git a/js/common/view/ShowOriginalCurveCheckbox.ts b/js/common/view/ShowOriginalCurveCheckbox.ts
@@ -17,7 +17,7 @@ import CalculusGrapherConstants from '../CalculusGrapherConstants.js';
 import GraphTypeLabelNode from './GraphTypeLabelNode.js';
 import GraphType from '../model/GraphType.js';
 import { HBox, Text } from '../../../../scenery/js/imports.js';
-import Checkbox from '../../../../sun/js/Checkbox.js';
+import Checkbox, { CheckboxOptions } from '../../../../sun/js/Checkbox.js';
 import Property from '../../../../axon/js/Property.js';
 import CalculusGrapherPreferences from '../model/CalculusGrapherPreferences.js';
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
@@ -26,6 +26,7 @@ import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import BackgroundNode from '../../../../scenery-phet/js/BackgroundNode.js';
 import CalculusGrapherColors from '../CalculusGrapherColors.js';
+import { combineOptions } from '../../../../phet-core/js/optionize.js';
 
 const POINTER_AREA_DILATION = 6;
 
@@ -47,17 +48,17 @@ export default class ShowOriginalCurveCheckbox extends BackgroundNode {
       spacing: 5
     } );
 
-    const checkbox = new Checkbox( showOriginalCurveProperty, checkboxContent, {
-      boxWidth: CalculusGrapherConstants.CHECKBOX_WIDTH,
-      touchAreaXDilation: POINTER_AREA_DILATION,
-      touchAreaYDilation: POINTER_AREA_DILATION,
-      mouseAreaXDilation: POINTER_AREA_DILATION,
-      mouseAreaYDilation: POINTER_AREA_DILATION,
-      tandem: tandem,
+    const checkbox = new Checkbox( showOriginalCurveProperty, checkboxContent,
+      combineOptions<CheckboxOptions>( {}, CalculusGrapherConstants.CHECKBOX_OPTIONS, {
+        touchAreaXDilation: POINTER_AREA_DILATION,
+        touchAreaYDilation: POINTER_AREA_DILATION,
+        mouseAreaXDilation: POINTER_AREA_DILATION,
+        mouseAreaYDilation: POINTER_AREA_DILATION,
+        tandem: tandem,
 
-      // because 'showOriginalCurveCheckbox.visibleProperty' is the tandem name for BackgroundNode's visibleProperty
-      phetioVisiblePropertyInstrumented: false
-    } );
+        // because 'showOriginalCurveCheckbox.visibleProperty' is the tandem name for BackgroundNode's visibleProperty
+        phetioVisiblePropertyInstrumented: false
+      } ) );
 
     super( checkbox, {
       xMargin: POINTER_AREA_DILATION,

diff --git a/js/derivative/view/TangentCheckbox.ts b/js/derivative/view/TangentCheckbox.ts
@@ -10,8 +10,9 @@
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import Property from '../../../../axon/js/Property.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
+import { combineOptions } from '../../../../phet-core/js/optionize.js';
 import { HBox, RichText } from '../../../../scenery/js/imports.js';
-import Checkbox from '../../../../sun/js/Checkbox.js';
+import Checkbox, { CheckboxOptions } from '../../../../sun/js/Checkbox.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import calculusGrapher from '../../calculusGrapher.js';
 import CalculusGrapherStrings from '../../CalculusGrapherStrings.js';
@@ -36,11 +37,11 @@ export default class TangentCheckbox extends Checkbox {
       spacing: 8
     } );
 
-    super( scrubberVisibleProperty, box, {
-      boxWidth: CalculusGrapherConstants.CHECKBOX_WIDTH,
-      enabledProperty: DerivedProperty.not( predictEnabledProperty ),
-      tandem: tandem
-    } );
+    super( scrubberVisibleProperty, box, combineOptions<CheckboxOptions>(
+      {}, CalculusGrapherConstants.CHECKBOX_OPTIONS, {
+        enabledProperty: DerivedProperty.not( predictEnabledProperty ),
+        tandem: tandem
+      } ) );
   }
 }
 

diff --git a/js/integral/view/AreaUnderCurveCheckbox.ts b/js/integral/view/AreaUnderCurveCheckbox.ts
@@ -10,8 +10,9 @@
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import Property from '../../../../axon/js/Property.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
+import { combineOptions } from '../../../../phet-core/js/optionize.js';
 import { HBox, RichText } from '../../../../scenery/js/imports.js';
-import Checkbox from '../../../../sun/js/Checkbox.js';
+import Checkbox, { CheckboxOptions } from '../../../../sun/js/Checkbox.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import calculusGrapher from '../../calculusGrapher.js';
 import CalculusGrapherStrings from '../../CalculusGrapherStrings.js';
@@ -36,11 +37,11 @@ export default class AreaUnderCurveCheckbox extends Checkbox {
       spacing: 8
     } );
 
-    super( scrubberVisibleProperty, box, {
-      boxWidth: CalculusGrapherConstants.CHECKBOX_WIDTH,
-      enabledProperty: DerivedProperty.not( predictEnabledProperty ),
-      tandem: tandem
-    } );
+    super( scrubberVisibleProperty, box, combineOptions<CheckboxOptions>(
+      {}, CalculusGrapherConstants.CHECKBOX_OPTIONS, {
+        enabledProperty: DerivedProperty.not( predictEnabledProperty ),
+        tandem: tandem
+      } ) );
   }
 }