Instrument interactive components with Interactive Highlights, see ph…

…etsims/joist#858
phetsims · Oct 10, 2022 · 39d36d7 · 39d36d7
1 parent 711b43f
commit 39d36d7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/js/intro/view/PipeNode.ts b/js/intro/view/PipeNode.ts
@@ -10,7 +10,7 @@
 import Vector2 from '../../../../dot/js/Vector2.js';
 import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js';
 import { combineOptions, EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
-import { FireListener, Node, NodeOptions, Rectangle } from '../../../../scenery/js/imports.js';
+import { FireListener, FocusHighlightFromNode, InteractiveHighlighting, Node, NodeOptions, Rectangle } from '../../../../scenery/js/imports.js';
 import meanShareAndBalance from '../../meanShareAndBalance.js';
 import Pipe from '../model/Pipe.js';
 import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js';
@@ -26,7 +26,7 @@ type PipeNodeOptions = SelfOptions & StrictOmit<NodeOptions, 'phetioDynamicEleme
 
 const LINE_WIDTH = 1;
 
-export default class PipeNode extends Node {
+export default class PipeNode extends InteractiveHighlighting( Node ) {
 
   // Public for traversal order
   public readonly valveNode: ValveNode;
@@ -85,6 +85,10 @@ export default class PipeNode extends Node {
     this.addInputListener( {
       click: () => handleFire()
     } );
+
+    // interactive highlighting - set a custom highlight because the pipe nodes have a unique combined highlight
+    // collectively in the ScreenView
+    this.interactiveHighlight = new FocusHighlightFromNode( this );
   }
 }
 

diff --git a/js/leveling-out/view/DraggableChocolate.ts b/js/leveling-out/view/DraggableChocolate.ts
@@ -9,7 +9,7 @@
  */
 
 import meanShareAndBalance from '../../meanShareAndBalance.js';
-import { DragListener, Node, NodeOptions, Rectangle, Text } from '../../../../scenery/js/imports.js';
+import { DragListener, InteractiveHighlighting, Node, NodeOptions, Rectangle, Text } from '../../../../scenery/js/imports.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 import { combineOptions, EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
 import MeanShareAndBalanceConstants from '../../common/MeanShareAndBalanceConstants.js';
@@ -24,7 +24,7 @@ type SelfOptions = EmptySelfOptions;
 type DraggableChocolateNodeOptions = SelfOptions & NodeOptions & PickRequired<NodeOptions, 'tandem'>;
 
 // TODO: Should this be renamed ChocolateBarNode?
-export default class DraggableChocolate extends Node {
+export default class DraggableChocolate extends InteractiveHighlighting( Node ) {
 
   public readonly chocolateBarDragListener: DragListener;
   public readonly chocolateBarModel: ChocolateBar;