phetsims / fourier-making-waves

"Fourier: Making Waves" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
6 stars 3 forks source link

Tools should be bounded on the top of the sim #183

Closed ariel-phet closed 3 years ago

ariel-phet commented 3 years ago

For #178

@pixelzoom I think this should be a pretty quick change, but some of the tools can have there label covered by moving them to the top of the sim, it seems like the bounds should be such that the label (such as lambda) cannot be lost.

Currently: tools

Ideally, the tool would go no higher than the top of the label at the sim bounds: tools1

pixelzoom commented 3 years ago

As I started working on this, it seemed like the drag bounds could use a little polishing overall, and that's been done in the above commits. I've also added a debugTools query parameter, defined as follows:

  // Shows the origin (as a red dot) and the drag bounds (as a red rectangle) for measurement tools.
  // For internal use only, not public facing.
  debugTools: {
    type: 'flag'
  }

Below are a couple of screenshots, running with ?dev&debugTools, showing the tool origins and drag bounds for the Discrete and Wave Packet screens. The red dot (origin) is constrained to stay within the drag bounds (red rectangle).

@arouinfar @ariel-phet please review in master.

screenshot_1280 screenshot_1279
ariel-phet commented 3 years ago

That all works well for me. Might be good to see if @arouinfar agrees.

pixelzoom commented 3 years ago

There's still a minor problem here. The λ1 = ∞ is slight outside layout bound when dragged to left. Self-assigning to address this.

pixelzoom commented 3 years ago

Fixed in the above commit. λ1 = ∞ now stays inside the layout bounds. And note that I also fixed its origin (red dot) so that it's a the bottom center. See screenshot below, running with ?dev&debugTools.

Back to @arouinfar to review.

screenshot_1287
arouinfar commented 3 years ago

The updated bounds feel good to me. Thanks @pixelzoom @ariel-phet!