search

phetsims / projectile-data-lab

"Projectile Data Lab" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
0 stars 0 forks source link

Sampling histogram info panel changes size #158

Closed matthew-blackman closed 7 months ago

matthew-blackman commented 7 months ago

This happens when the number of samples increases in length. Let's make it a constant size, and leave padding when the numbers are single or double-digit.

samreid commented 7 months ago

I started with this patch:

```diff Subject: [PATCH] Highlight the selected thumbnail node, see https://github.com/phetsims/projectile-data-lab/issues/157 --- Index: js/sampling/view/SamplingHistogramNode.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/sampling/view/SamplingHistogramNode.ts b/js/sampling/view/SamplingHistogramNode.ts --- a/js/sampling/view/SamplingHistogramNode.ts (revision a8e4a36fafbbd69fd611e569a39ee5027104bb6c) +++ b/js/sampling/view/SamplingHistogramNode.ts (date 1707864995157) @@ -84,7 +84,9 @@ children: [ iconNode, textVBox ] } ), { fill: 'white', - cornerRadius: 5 + cornerRadius: 5, + minWidth: 200, + maxWidth: 200 } ); this.chartNode.addChild( textPanel ); ```

The problem is that when the translation changes, the panel doesn't know to shrink:

image

I'm not sure how to have the panel "fit" the text when translation changes but not when the number changes.

samreid commented 7 months ago

OK I addressed it in the commit. I tried to thoroughly address the various cases of string lengths, so the solution is a bit more complex. But it seems nice at runtime and in the string length tests. @matthew-blackman can you please review and close if it seems ok?

matthew-blackman commented 7 months ago

Reviewed - I really like how you implemented this @samreid. Everything looks good in the panel, and I learned how to use the bounds of a node that isn't added to the scene. Nice work! Closing.