phetsims / sun

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

AquaRadioButton dynamic layout problems #813

Closed pixelzoom closed 1 year ago

pixelzoom commented 1 year ago

AquaRadioButton does not adjust its layout if its label changes. For example if the label is Text that observes a StringProperty, like this example in Gas Properties, then the labels do not remain vertically centered:

screenshot_364

AquaRadioButton also has some odd layout code. It's positioning labelNode twice -- once relative to selectedNode, then again relative to selectedNode.

Here's the relevant code in AquaRadioButton.ts:

    // selected Node
    const selectedNode = new Node();
    const innerCircle = new Circle( options.radius / 3, { fill: options.centerColor } );
    const outerCircleSelected = new Circle( options.radius, { fill: options.selectedColor, stroke: options.stroke } );
    const selectedCircleButton = new Node( {
      children: [ outerCircleSelected, innerCircle ]
    } );
    selectedNode.addChild( selectedCircleButton );
    selectedNode.addChild( labelNode );
    labelNode.left = outerCircleSelected.right + options.xSpacing;
    labelNode.centerY = outerCircleSelected.centerY;

    // deselected Node
    const deselectedNode = new Node();
    const deselectedCircleButton = new Circle( options.radius, {
      fill: options.deselectedColor,
      stroke: options.stroke
    } );
    deselectedNode.addChild( deselectedCircleButton );
    deselectedNode.addChild( labelNode );
    labelNode.left = deselectedCircleButton.right + options.xSpacing;
    labelNode.centerY = deselectedCircleButton.centerY;
pixelzoom commented 1 year ago

Support for dynamic layout was added in the above commit. dispose removes the labelNode bounds listener. Closing.