phetsims / sun

User-interface components for PhET simulations, built on top of Scenery.
MIT License
4 stars 12 forks source link

Add options to dilate pointer areas for Slider's track #836

Open pixelzoom opened 1 year ago

pixelzoom commented 1 year ago

Slider has a little-known feature: you can click in the track to change the value. When the track is very narrow (like in https://github.com/phetsims/calculus-grapher/issues/282), then it becomes difficult to click in the track. So it would be nice to have Slider options to dilate the track's pointer area; i.e., add these fields to SliderOptions, with default value 0:

  trackTouchAreaXDilation?: number;
  trackTouchAreaYDilation?: number;
  trackMouseAreaXDilation?: number;
  trackMouseAreaYDilation?: number;

I attempted to do this, and it was straightforward to add to Slider. But changing the track's pointer areas totally messed up it's ability to map a point on the track to a value. I beleive that the culprit here is SliderTrack, the base class for DefaultSliderTrack and all custom slider tracks. Converting a position on the track to a value has a dependency on the track's localPreferredWidthProperty, and that's apparently affected by changing pointer areas. Here's the relevant code in SliderTrack.ts:

  this.internalWidthProperty = new DerivedProperty( [ this.localPreferredWidthProperty ], localPreferredWidth => {
...
  this.valueToPositionProperty = new DerivedProperty( [ this.rangeProperty, this.internalWidthProperty ], ( range, width ) => {
...

Since this is a little-known feature, I'm not going to do any further work on it. And we decided to live with it in Calculus Grapher https://github.com/phetsims/calculus-grapher/issues/282. @kathy-phet FYI for future work.