diff --git a/js/common/CalculusGrapherConstants.ts b/js/common/CalculusGrapherConstants.ts index c5090f84..01fe4fda 100644 --- 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 index 39f241a0..a8644804 100644 --- 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, tandem: Tandem ) { - super( scrubberVisibleProperty, new GridIcon(), { - boxWidth: CalculusGrapherConstants.CHECKBOX_WIDTH, - tandem: tandem - } ); + super( scrubberVisibleProperty, new GridIcon(), combineOptions( + {}, CalculusGrapherConstants.CHECKBOX_OPTIONS, { + tandem: tandem + } ) ); } } diff --git a/js/common/view/ReferenceLineCheckbox.ts b/js/common/view/ReferenceLineCheckbox.ts index c21d7eef..e752fc1e 100644 --- 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( + {}, CalculusGrapherConstants.CHECKBOX_OPTIONS, { + tandem: tandem + } ) ); } } diff --git a/js/common/view/ShowOriginalCurveCheckbox.ts b/js/common/view/ShowOriginalCurveCheckbox.ts index 7333ed16..ca80556d 100644 --- 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( {}, 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 index db3dea0e..41377e39 100644 --- 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( + {}, CalculusGrapherConstants.CHECKBOX_OPTIONS, { + enabledProperty: DerivedProperty.not( predictEnabledProperty ), + tandem: tandem + } ) ); } } diff --git a/js/integral/view/AreaUnderCurveCheckbox.ts b/js/integral/view/AreaUnderCurveCheckbox.ts index 89c9317c..e74b9054 100644 --- 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( + {}, CalculusGrapherConstants.CHECKBOX_OPTIONS, { + enabledProperty: DerivedProperty.not( predictEnabledProperty ), + tandem: tandem + } ) ); } }