diff --git a/js/common/view/IdealGasLawContainerNode.ts b/js/common/view/IdealGasLawContainerNode.ts index 89663df5..03c40460 100644 --- a/js/common/view/IdealGasLawContainerNode.ts +++ b/js/common/view/IdealGasLawContainerNode.ts @@ -28,6 +28,7 @@ import LidNode from './LidNode.js'; import LidHandleKeyboardDragListener from './LidHandleKeyboardDragListener.js'; import ResizeHandleKeyboardDragListener from './ResizeHandleKeyboardDragListener.js'; import Multilink from '../../../../axon/js/Multilink.js'; +import Tandem from '../../../../tandem/js/Tandem.js'; // constants const LID_X_SPEED = -50; // pixels/second @@ -85,14 +86,16 @@ export default class IdealGasLawContainerNode extends Node { } ); // Resize handle on the left wall, wrapped in a Node so that its focus highlight is not affected by scaling. - const resizeHandleNode = new ResizeHandleNode( options.resizeGripColor ); + const resizeHandleNode = new ResizeHandleNode( options.resizeGripColor, options.tandem.createTandem( 'resizeHandleNode' ) ); // Lid on the top of the container const lidNode = new LidNode( holdConstantProperty, { baseWidth: modelViewTransform.modelToViewDeltaX( container.lidWidthProperty.value ), baseHeight: modelViewTransform.modelToViewDeltaX( container.lidThickness ), - gripColor: options.lidGripColor + gripColor: options.lidGripColor, + tandem: options.tandem.createTandem( 'lidNode' ) } ); + const lidHandleNode = lidNode.handleNode; options.children = [ previousBoundsNode, resizeHandleNode, wallsNode, lidNode ]; @@ -158,10 +161,10 @@ export default class IdealGasLawContainerNode extends Node { // Dragging the resize handle horizontally changes the container's width const resizeHandleDragListener = new ResizeHandleDragListener( container, modelViewTransform, this, - options.tandem.createTandem( 'resizeHandleDragListener' ) ); + resizeHandleNode.tandem.createTandem( 'resizeHandleDragListener' ) ); resizeHandleNode.addInputListener( resizeHandleDragListener ); const resizeHandleKeyboardDragListener = new ResizeHandleKeyboardDragListener( container, modelViewTransform, - options.tandem.createTandem( 'resizeHandleKeyboardDragListener' ) ); + resizeHandleNode.tandem.createTandem( 'resizeHandleKeyboardDragListener' ) ); resizeHandleNode.addInputListener( resizeHandleKeyboardDragListener ); // While interacting with the resize handle... @@ -188,11 +191,11 @@ export default class IdealGasLawContainerNode extends Node { // Dragging the lid's handle horizontally changes the size of the opening in the top of the container. const lidHandleDragListener = new LidHandleDragListener( container, modelViewTransform, this, - options.tandem.createTandem( 'lidHandleDragListener' ) ); - lidNode.handleNode.addInputListener( lidHandleDragListener ); + lidHandleNode.tandem.createTandem( 'lidHandleDragListener' ) ); + lidHandleNode.addInputListener( lidHandleDragListener ); const lidHandleKeyboardDragListener = new LidHandleKeyboardDragListener( container, modelViewTransform, - options.tandem.createTandem( 'lidHandleKeyboardDragListener' ) ); - lidNode.handleNode.addInputListener( lidHandleKeyboardDragListener ); + lidHandleNode.tandem.createTandem( 'lidHandleKeyboardDragListener' ) ); + lidHandleNode.addInputListener( lidHandleKeyboardDragListener ); // This implementation assumes that the lid is not interactive while the container is being resized. This is // handled in resizeHandlePressedListener above. The lid will behave badly if this is not the case, so verify. @@ -264,7 +267,7 @@ export default class IdealGasLawContainerNode extends Node { */ class ResizeHandleNode extends InteractiveHighlighting( Node ) { - public constructor( resizeGripColor: TColor ) { + public constructor( resizeGripColor: TColor, tandem: Tandem ) { super( { children: [ // Wrap HandleNode so that ResizeHandleNode's focus highlight is not affected by scaling. @@ -277,7 +280,10 @@ class ResizeHandleNode extends InteractiveHighlighting( Node ) { ], cursor: 'pointer', tagName: 'div', - focusable: true + focusable: true, + tandem: tandem, + phetioVisiblePropertyInstrumented: false, // sim sets resizeHandle.visibleProperty + phetioInputEnabledPropertyInstrumented: true } ); } } diff --git a/js/common/view/LidNode.ts b/js/common/view/LidNode.ts index 1a1e2950..62f28c65 100644 --- a/js/common/view/LidNode.ts +++ b/js/common/view/LidNode.ts @@ -14,6 +14,7 @@ import { InteractiveHighlighting, Node, NodeOptions, NodeTranslationOptions, Rec import gasProperties from '../../gasProperties.js'; import GasPropertiesColors from '../GasPropertiesColors.js'; import { HoldConstant } from '../model/HoldConstant.js'; +import PickRequired from '../../../../phet-core/js/types/PickRequired.js'; // constants const HANDLE_ATTACHMENT_LINE_WIDTH = 1; @@ -25,7 +26,7 @@ type SelfOptions = { gripColor?: TColor; }; -type LidNodeOptions = SelfOptions; +type LidNodeOptions = SelfOptions & PickRequired; export default class LidNode extends Node { @@ -40,7 +41,8 @@ export default class LidNode extends Node { gripColor: GasPropertiesColors.lidGripColorProperty, // NodeOptions - isDisposable: false + isDisposable: false, + phetioVisiblePropertyInstrumented: false }, providedOptions ); const baseNode = new Rectangle( 0, 0, options.baseWidth, options.baseHeight, { @@ -49,15 +51,16 @@ export default class LidNode extends Node { bottom: 0 } ); - const handleNode = new LidHandleNode( options.gripColor, { + const lidHandleNode = new LidHandleNode( options.gripColor, { right: baseNode.right - HANDLE_RIGHT_INSET, - bottom: baseNode.top + 1 + bottom: baseNode.top + 1, + tandem: options.tandem.createTandem( 'lidHandleNode' ) } ); - assert && assert( handleNode.width <= baseNode.width, - `handleNode.width ${handleNode.width} is wider than baseNode.width ${baseNode.width}` ); - handleNode.touchArea = handleNode.localBounds.dilatedXY( 25, 20 ); + assert && assert( lidHandleNode.width <= baseNode.width, + `handleNode.width ${lidHandleNode.width} is wider than baseNode.width ${baseNode.width}` ); + lidHandleNode.touchArea = lidHandleNode.localBounds.dilatedXY( 25, 20 ); - options.children = [ handleNode, baseNode ]; + options.children = [ lidHandleNode, baseNode ]; super( options ); @@ -65,10 +68,10 @@ export default class LidNode extends Node { // cooling, which will occur when the lid is open. See https://github.com/phetsims/gas-properties/issues/159 holdConstantProperty.link( holdConstant => { this.interruptSubtreeInput(); - handleNode.visible = ( holdConstant !== 'temperature' ); + lidHandleNode.visible = ( holdConstant !== 'temperature' ); } ); - this.handleNode = handleNode; + this.handleNode = lidHandleNode; this.baseNode = baseNode; } @@ -90,7 +93,7 @@ export default class LidNode extends Node { */ class LidHandleNode extends InteractiveHighlighting( Node ) { - public constructor( gripColor: TColor, providedOptions?: NodeTranslationOptions ) { + public constructor( gripColor: TColor, providedOptions?: NodeTranslationOptions & PickRequired ) { super( combineOptions( { children: [ // Wrap HandleNode so that LidHandleNode's focus highlight is not affected by scaling. @@ -103,7 +106,9 @@ class LidHandleNode extends InteractiveHighlighting( Node ) { ], cursor: 'pointer', tagName: 'div', - focusable: true + focusable: true, + phetioVisiblePropertyInstrumented: false, // sim sets lidHandleNode.visibleProperty + phetioInputEnabledPropertyInstrumented: true }, providedOptions ) ); } }