Use DisplayClickToDismissListener for #789 and phetsims/joist#770

phetsims · Dec 6, 2021 · c71117f · c71117f
1 parent 80211a2
commit c71117f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 45 deletions.
diff --git a/js/view/CircuitElementNode.ts b/js/view/CircuitElementNode.ts
@@ -7,12 +7,9 @@
  */
 
 import Emitter from '../../../axon/js/Emitter.js';
-import dotRandom from '../../../dot/js/dotRandom.js';
 import Vector2 from '../../../dot/js/Vector2.js';
 import merge from '../../../phet-core/js/merge.js';
-import { KeyboardUtils } from '../../../scenery/js/imports.js';
-import { SceneryEvent } from '../../../scenery/js/imports.js';
-import { Node } from '../../../scenery/js/imports.js';
+import { KeyboardUtils, Node, SceneryEvent } from '../../../scenery/js/imports.js';
 import CCKCConstants from '../CCKCConstants.js';
 import circuitConstructionKitCommon from '../circuitConstructionKitCommon.js';
 import Circuit from '../model/Circuit.js';
@@ -22,6 +19,7 @@ import CCKCScreenView from './CCKCScreenView.js';
 import CircuitLayerNode from './CircuitLayerNode.js';
 import Vertex from '../model/Vertex.js';
 import IOType from '../../../tandem/js/types/IOType.js';
+import DisplayClickToDismissListener from '../../../joist/js/DisplayClickToDismissListener.js';
 
 abstract class CircuitElementNode extends Node {
   private readonly useHitTestForSensors: any;
@@ -255,34 +253,27 @@ abstract class CircuitElementNode extends Node {
       const disposeListener = () => phet.joist.display.removeInputListener( clickToDismissListener );
 
       // listener for 'click outside to dismiss'
-      const clickToDismissListener = {
+      const dismissListener = ( event: SceneryEvent ) => {
 
-        down: ( event: any ) => {
+        // if the target was in a CircuitElementEditContainerNode, don't dismiss the event because the user was
+        // dragging the slider or pressing the trash button or another control in that panel
+        const trails = event.target.getTrails( ( node: Node ) => {
 
-          // When fuzzing, don't click away from the circuit element so eagerly, so that fuzzing has more of a chance to
-          // press the associated controls.
-          if ( phet.chipper.isFuzzEnabled() && dotRandom.nextDouble() < 0.99 ) {
-            return;
-          }
+          // If the user tapped any component in the CircuitElementContainerPanel or on the selected node
+          // allow interaction to proceed normally.  Any other taps will deselect the circuit element
+          return node instanceof CircuitElementEditContainerNode || node === this;
+        } );
 
-          // if the target was in a CircuitElementEditContainerNode, don't dismiss the event because the user was
-          // dragging the slider or pressing the trash button or another control in that panel
-          const trails = event.target.getTrails( ( node: Node ) => {
-
-            // If the user tapped any component in the CircuitElementContainerPanel or on the selected node
-            // allow interaction to proceed normally.  Any other taps will deselect the circuit element
-            return node instanceof CircuitElementEditContainerNode || node === this;
-          } );
-
-          if ( trails.length === 0 ) {
-            phet.joist.display.removeInputListener( clickToDismissListener );
-            if ( this.disposeEmitterCircuitElementNode.hasListener( disposeListener ) ) {
-              this.disposeEmitterCircuitElementNode.removeListener( disposeListener );
-            }
-            circuitLayerNode.circuit.selectedCircuitElementProperty.set( null );
+        if ( trails.length === 0 ) {
+          phet.joist.display.removeInputListener( clickToDismissListener );
+          if ( this.disposeEmitterCircuitElementNode.hasListener( disposeListener ) ) {
+            this.disposeEmitterCircuitElementNode.removeListener( disposeListener );
           }
+          circuitLayerNode.circuit.selectedCircuitElementProperty.set( null );
         }
       };
+
+      const clickToDismissListener = new DisplayClickToDismissListener( dismissListener );
       phet.joist.display.addInputListener( clickToDismissListener );
 
       // If the user deletes the element with the delete button, make sure to detach the display input listener

diff --git a/js/view/VertexNode.ts b/js/view/VertexNode.ts
@@ -6,15 +6,10 @@
  * @author Sam Reid (PhET Interactive Simulations)
  */
 
-import dotRandom from '../../../dot/js/dotRandom.js';
 import Utils from '../../../dot/js/Utils.js';
 import Vector2 from '../../../dot/js/Vector2.js';
 import merge from '../../../phet-core/js/merge.js';
-import { KeyboardUtils } from '../../../scenery/js/imports.js';
-import { Circle } from '../../../scenery/js/imports.js';
-import { Node } from '../../../scenery/js/imports.js';
-import { Text } from '../../../scenery/js/imports.js';
-import { Color } from '../../../scenery/js/imports.js';
+import { Circle, Color, KeyboardUtils, Node, SceneryEvent, Text } from '../../../scenery/js/imports.js';
 import RoundPushButton from '../../../sun/js/buttons/RoundPushButton.js';
 import Tandem from '../../../tandem/js/Tandem.js';
 import CCKCConstants from '../CCKCConstants.js';
@@ -25,6 +20,7 @@ import Circuit from '../model/Circuit.js';
 import Vertex from '../model/Vertex.js';
 import CircuitLayerNode from './CircuitLayerNode.js';
 import CircuitLayerNodeDragListener from './CircuitLayerNodeDragListener.js';
+import DisplayClickToDismissListener from '../../../joist/js/DisplayClickToDismissListener.js';
 
 // constants
 const DISTANCE_TO_CUT_BUTTON = 70; // How far in view coordinates the cut button appears from the vertex node
@@ -204,21 +200,13 @@ class VertexNode extends Node {
 
           vertex.selectedProperty.set( true );
 
-          const clickToDismissListener = {
-            down: ( event: any ) => {
-
-              // When fuzzing, don't click away from the circuit element so eagerly, so that fuzzing has more of a chance to
-              // press the associated controls.
-              if ( phet.chipper.isFuzzEnabled() && dotRandom.nextDouble() < 0.99 ) {
-                return;
-              }
-
-              if ( !_.includes( event.trail.nodes, this ) && !_.includes( event.trail.nodes, cutButton ) ) {
-                vertex.selectedProperty.set( false );
-                this.clearClickListeners();
-              }
+          const dismissListener = ( event: SceneryEvent ) => {
+            if ( !_.includes( event.trail.nodes, this ) && !_.includes( event.trail.nodes, cutButton ) ) {
+              vertex.selectedProperty.set( false );
+              this.clearClickListeners();
             }
           };
+          const clickToDismissListener = new DisplayClickToDismissListener( dismissListener );
           phet.joist.display.addInputListener( clickToDismissListener );
           this.clickToDismissListeners.push( clickToDismissListener );
         }