marlitas
commented
1 year ago I'm trying to push myself to figure this one out and this is the starting patch.
```diff
Index: mean-share-and-balance/js/leveling-out/view/LevelingOutControlPanel.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/mean-share-and-balance/js/leveling-out/view/LevelingOutControlPanel.ts b/mean-share-and-balance/js/leveling-out/view/LevelingOutControlPanel.ts
--- a/mean-share-and-balance/js/leveling-out/view/LevelingOutControlPanel.ts (revision 6778dad7fee0fe0be317992a1732c6e58a9b1da1)
+++ b/mean-share-and-balance/js/leveling-out/view/LevelingOutControlPanel.ts (date 1667861861927)
@@ -64,7 +64,7 @@
titleNode: new Text( 'Mean', { fontSize: 15, maxWidth: MeanShareAndBalanceConstants.MAX_CONTROLS_TEXT_WIDTH } ),
expandedProperty: model.isMeanAccordionExpandedProperty,
layoutOptions: { minContentHeight: 200, yAlign: 'top' },
-
+ preferredWidth: 50,
// phet-io
tandem: options.tandem.createTandem( 'meanAccordionBox' )
} );
Index: sun/js/AccordionBox.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/sun/js/AccordionBox.ts b/sun/js/AccordionBox.ts
--- a/sun/js/AccordionBox.ts (revision 79e01827560f5480fe9231901d6ab4936f5d51c9)
+++ b/sun/js/AccordionBox.ts (date 1667863479040)
@@ -15,7 +15,7 @@
import InstanceRegistry from '../../phet-core/js/documentation/InstanceRegistry.js';
import optionize, { combineOptions } from '../../phet-core/js/optionize.js';
import StrictOmit from '../../phet-core/js/types/StrictOmit.js';
-import { FocusHighlightFromNode, InteractiveHighlighting, Node, NodeOptions, Path, PDOMBehaviorFunction, PDOMPeer, Rectangle, RectangleOptions, TColor, Text } from '../../scenery/js/imports.js';
+import { FocusHighlightFromNode, InteractiveHighlighting, Node, NodeOptions, Path, PDOMBehaviorFunction, PDOMPeer, Rectangle, RectangleOptions, TColor, Text, Sizable, SizableOptions, AlignBoxXAlign, AlignBoxYAlign, LayoutConstraint, isWidthSizable } from '../../scenery/js/imports.js';
import accordionBoxClosedSoundPlayer from '../../tambo/js/shared-sound-players/accordionBoxClosedSoundPlayer.js';
import accordionBoxOpenedSoundPlayer from '../../tambo/js/shared-sound-players/accordionBoxOpenedSoundPlayer.js';
import SoundClipPlayer from '../../tambo/js/sound-generators/SoundClipPlayer.js';
@@ -39,8 +39,8 @@
fill?: TColor;
minWidth?: number;
- titleAlignX?: 'center' | 'left' | 'right';
- titleAlignY?: 'top' | 'center';
+ titleAlignX?: AlignBoxXAlign;
+ titleAlignY?: AlignBoxYAlign;
titleXMargin?: number;
titleYMargin?: number;
titleXSpacing?: number;
@@ -79,14 +79,17 @@
headingTagName?: string;
};
-export type AccordionBoxOptions = SelfOptions & NodeOptions;
+type SuperOptions = NodeOptions & SizableOptions;
+export type AccordionBoxOptions = SelfOptions & SuperOptions;
-export default class AccordionBox extends Node {
+export default class AccordionBox extends Sizable( Node ) {
+
+ private readonly constraint: AccordionBoxConstraint;
public readonly expandedProperty: Property;
private readonly _contentAlign;
- private readonly _contentNode;
+ public readonly _contentNode;
private readonly _cornerRadius;
private readonly _buttonXMargin;
private readonly _buttonYMargin;
@@ -103,14 +106,14 @@
private readonly _showTitleWhenExpanded;
private readonly _buttonAlign;
private readonly disposeEmitterAccordionBox: TEmitter;
- private readonly titleNode: Node;
- private readonly expandCollapseButton: ExpandCollapseButton;
+ public readonly titleNode: Node;
+ public readonly expandCollapseButton: ExpandCollapseButton;
private readonly expandedBox: Rectangle;
private readonly collapsedBox: Rectangle;
private readonly workaroundBox: Rectangle;
private readonly expandedTitleBar: InteractiveHighlightPath;
private readonly collapsedTitleBar: InteractiveHighlightRectangle;
- private readonly containerNode: Node;
+ public readonly containerNode: Node;
private readonly resetAccordionBox: () => void;
// Only defined if there is a stroke
@@ -128,7 +131,7 @@
*/
public constructor( contentNode: Node, providedOptions?: AccordionBoxOptions ) {
- const options = optionize, NodeOptions>()( {
+ const options = optionize, SuperOptions>()( {
// If not provided, a Text node will be supplied. Should have and maintain well-defined bounds if passed in
titleNode: null as unknown as Node,
@@ -235,6 +238,9 @@
this._minWidth = options.minWidth;
this._showTitleWhenExpanded = options.showTitleWhenExpanded;
this._buttonAlign = options.buttonAlign;
+ this.constraint = new AccordionBoxConstraint( this, { minWidth: options.minWidth, xMargin: options.contentXMargin,
+ yMargin: options.contentYMargin, spacing: options.contentXSpacing, titleXMargin: options.titleXMargin,
+ titleYMargin: options.titleYMargin, titleSpacing: options.titleXSpacing, lineWidth: options.lineWidth } );
// Fires when this instance is disposed.
// AccordionBox does not use the {function} this.disposeAccordionBox pattern used in other PhET components.
@@ -465,6 +471,11 @@
/**
* Performs layout that positions everything that can change.
+ *
+ * No layout function in AccordionBox
+ * create a dimension2 sizeProperty, or a function that the Accordion Box to sets things
+ *
+ * potentially create a function that the Constraint calls so that AccordionBox elements aren't exposed.
*/
private layout(): void {
const hasValidBounds = this._contentNode.bounds.isValid();
@@ -641,6 +652,78 @@
};
}
+type AccordionBoxConstraintOptions = {
+ minWidth: number;
+ // minHeight: number;
+ xMargin: number;
+ yMargin: number;
+ spacing: number;
+ lineWidth?: number;
+
+ titleXMargin: number;
+ titleYMargin: number;
+ titleSpacing: number;
+};
+
+class AccordionBoxConstraint extends LayoutConstraint {
+ private readonly accordionBox: AccordionBox;
+ private readonly minWidth: number;
+ // private readonly minHeight: number;
+ private readonly xMargin: number;
+ private readonly spacing: number;
+ private readonly lineWidth: number;
+ private readonly titleXMargin: number;
+ private readonly titleYMargin: number;
+ private readonly titleSpacing: number;
+
+ public constructor( accordionBox: AccordionBox, options: AccordionBoxConstraintOptions ) {
+ super( accordionBox );
+
+ this.accordionBox = accordionBox;
+ this.minWidth = options.minWidth;
+ // this.minHeight = options.minHeight;
+ this.xMargin = options.xMargin;
+ this.spacing = options.spacing;
+ this.lineWidth = options.lineWidth ? options.lineWidth : 0;
+
+ this.titleXMargin = options.titleXMargin;
+ this.titleYMargin = options.titleYMargin;
+ this.titleSpacing = options.titleSpacing;
+
+ this.accordionBox.localPreferredWidthProperty.lazyLink( this._updateLayoutListener );
+ this.accordionBox.localPreferredHeightProperty.lazyLink( this._updateLayoutListener );
+ }
+
+ protected override layout(): void {
+ super.layout();
+
+ const accordionBox = this.accordionBox;
+ const content = accordionBox._contentNode;
+ const title = accordionBox.titleNode;
+ const hasValidBounds = content.bounds.isValid();
+
+ if ( !hasValidBounds ) {
+ return;
+ }
+
+ const minimumContentWidth = ( isWidthSizable( content ) && content.minimumWidth !== null ) ? content.minimumWidth : content.width;
+ const minimumTitleWidth = ( isWidthSizable( title ) && title.minimumWidth !== null ) ? title.minimumWidth : title.width;
+ // const minimumContentHeight = ( isHeightSizable( content ) && content.minimumHeight !== null ) ? content.minimumHeight : content.height;
+
+ const minimumWidth = Math.max( this.minWidth, minimumContentWidth + ( 2 * this.xMargin ) + this.lineWidth + this.spacing,
+ minimumTitleWidth + ( 2 * this.titleXMargin ) + this.titleSpacing + accordionBox.expandCollapseButton.width );
+
+ const preferredWidth = accordionBox.localPreferredWidth ? accordionBox.localPreferredWidth : minimumWidth;
+
+ if ( isWidthSizable( content ) && accordionBox.localPreferredWidth !== null ) {
+ content.preferredWidth = preferredWidth - this.lineWidth - 2 * this.xMargin;
+ }
+
+ // Set minimums at the end
+ accordionBox.localMinimumWidth = minimumWidth;
+ }
+}
+
class InteractiveHighlightPath extends InteractiveHighlighting( Path ) {}
class InteractiveHighlightRectangle extends InteractiveHighlighting( Rectangle ) {}
Index: scenery/js/layout/WidthSizable.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/scenery/js/layout/WidthSizable.ts b/scenery/js/layout/WidthSizable.ts
--- a/scenery/js/layout/WidthSizable.ts (revision db2acc03529c4088cccfc963796b6ad3427b55dd)
+++ b/scenery/js/layout/WidthSizable.ts (date 1667863479025)
@@ -5,6 +5,8 @@
* so that layout containers could know how "small" the component can be made. The preferred width is set by the
* layout container, and the component should adjust its size so that it takes up that width.
*
+ * // When converting to sizable: set minimumWidth/Height if preferred is non-null this should be the minimum
+ *
* @author Jonathan Olson
*/
```
jonathanolson
zepumph
pixelzoom
Implementation will be similar to Panel/ButtonNode. It should use the mixin Sizable.