diff --git a/js/BooleanToggleNode.ts b/js/BooleanToggleNode.ts index cd3a179a..35847259 100644 --- a/js/BooleanToggleNode.ts +++ b/js/BooleanToggleNode.ts @@ -31,8 +31,8 @@ export default class BooleanToggleNode extends ToggleNode { falseNode: Node, providedOptions?: BooleanToggleNodeOptions ) { super( booleanProperty, [ - { value: true, node: trueNode }, - { value: false, node: falseNode } + { value: true, createNode: tandem => trueNode }, + { value: false, createNode: tandem => falseNode } ], providedOptions ); } } diff --git a/js/ToggleNode.ts b/js/ToggleNode.ts index 1f9c0a3b..3c0feef3 100644 --- a/js/ToggleNode.ts +++ b/js/ToggleNode.ts @@ -14,11 +14,11 @@ import { Node, NodeOptions } from '../../scenery/js/imports.js'; import Tandem from '../../tandem/js/Tandem.js'; import sun from './sun.js'; import TReadOnlyProperty from '../../axon/js/TReadOnlyProperty.js'; +import GroupItemOptions, { getGroupItemNodes } from './GroupItemOptions.js'; export type ToggleNodeElement = { value: T; // a value - node: Node; // the Node associated with the value, to be shown by the ToggleNode -}; +} & GroupItemOptions; type SelfOptions = { @@ -52,12 +52,14 @@ export default class ToggleNode extends Node { tandem: Tandem.OPTIONAL }, providedOptions ); + const nodes = getGroupItemNodes( elements, options.tandem.createTandem( 'elements' ) ); + const valueListener = ( value: T ) => { let matchCount = 0; for ( let i = 0; i < elements.length; i++ ) { const element = elements[ i ]; const visible = element.value === value; - element.node.visible = visible; + nodes[ i ].visible = visible; if ( visible ) { matchCount++; } @@ -66,7 +68,7 @@ export default class ToggleNode extends Node { }; valueProperty.link( valueListener ); - options.children = _.map( elements, 'node' ); + options.children = nodes; options.alignChildren( options.children );