make ElectromagnetNode and PickupCoilNode responsible for their own c…

…ursors, #169

js/common/view/ElectromagnetNode.ts

@@ -15,13 +15,16 @@ import FELMovableNode, { FELMovableNodeOptions } from './FELMovableNode.js';
 import CoilNode from './CoilNode.js';
 import { Node, Path } from '../../../../scenery/js/imports.js';
 import { Shape } from '../../../../kite/js/imports.js';
-import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
+import optionize from '../../../../phet-core/js/optionize.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 import Multilink from '../../../../axon/js/Multilink.js';
 import DCPowerSupplyNode from './DCPowerSupplyNode.js';
 import ACPowerSupplyNode from './ACPowerSupplyNode.js';
+import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 
-type SelfOptions = EmptySelfOptions;
+type SelfOptions = {
+  lockToAxisProperty?: TReadOnlyProperty<boolean> | null;
+};
 
 type ElectromagnetNodeOptions = SelfOptions & PickRequired<FELMovableNodeOptions, 'tandem' | 'dragBoundsProperty'>;
 
@@ -31,7 +34,11 @@ export default class ElectromagnetNode extends FELMovableNode {
 
   public constructor( electromagnet: Electromagnet, providedOptions: ElectromagnetNodeOptions ) {
 
-    const options = optionize<ElectromagnetNodeOptions, SelfOptions, FELMovableNodeOptions>()( {}, providedOptions );
+    const options = optionize<ElectromagnetNodeOptions, SelfOptions, FELMovableNodeOptions>()( {
+
+      // SelfOptions
+      lockToAxisProperty: null
+    }, providedOptions );
 
     const coilNode = new CoilNode( electromagnet.coil, electromagnet, {
       dragBoundsProperty: options.dragBoundsProperty,
@@ -88,6 +95,13 @@ export default class ElectromagnetNode extends FELMovableNode {
     electromagnet.positionProperty.link( position => {
       this.backgroundNode.translation = position;
     } );
+
+    // Change the cursor to indicate whether dragging is constrained to the x-axis.
+    options.lockToAxisProperty && options.lockToAxisProperty.link( lockToAxis => {
+      const cursor = lockToAxis ? 'ew-resize' : 'pointer';
+      this.cursor = cursor;
+      this.backgroundNode.cursor = cursor;
+    } );
   }
 }
 

js/common/view/FELScreenView.ts

@@ -25,13 +25,10 @@ import Vector2 from '../../../../dot/js/Vector2.js';
 import Bounds2 from '../../../../dot/js/Bounds2.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import Property from '../../../../axon/js/Property.js';
-import PickupCoilNode from './PickupCoilNode.js';
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import isSettingPhetioStateProperty from '../../../../tandem/js/isSettingPhetioStateProperty.js';
 import FELQueryParameters from '../FELQueryParameters.js';
 import StrictOmit from '../../../../phet-core/js/types/StrictOmit.js';
-import BarMagnetNode from './BarMagnetNode.js';
-import ElectromagnetNode from './ElectromagnetNode.js';
 
 type SelfOptions = {
 
@@ -186,9 +183,7 @@ export default class FELScreenView extends ScreenView {
     lockedToAxisProperty: TReadOnlyProperty<boolean>,
     panelsBoundsProperty: TReadOnlyProperty<Bounds2>,
     magnetPositionProperty: Property<Vector2>,
-    pickupCoilPositionProperty: Property<Vector2>,
-    magnetNode: BarMagnetNode | ElectromagnetNode,
-    pickupCoilNode: PickupCoilNode
+    pickupCoilPositionProperty: Property<Vector2>
   ): void {
     Multilink.multilink( [ lockedToAxisProperty, panelsBoundsProperty ], ( lockToAxis, panelsBounds ) => {
       if ( lockToAxis ) {
@@ -208,28 +203,12 @@ export default class FELScreenView extends ScreenView {
 
         // Constrain to horizontal dragging.
         dragBoundsProperty.value = new Bounds2( this.layoutBounds.left, y, panelsBounds.left, y );
-
-        // Change the cursors to indicate that drag direction is constrained to horizontal.
-        magnetNode.cursor = 'ew-resize';
-        if ( magnetNode instanceof ElectromagnetNode ) {
-          magnetNode.backgroundNode.cursor = 'ew-resize';
-        }
-        pickupCoilNode.cursor = 'ew-resize';
-        pickupCoilNode.backgroundNode.cursor = 'ew-resize';
       }
       else {
         // Dragging is 2D, horizontal and vertical.
 
         // Restore drag bounds.
         dragBoundsProperty.value = this.layoutBounds.withMaxX( panelsBounds.left );
-
-        // Restore cursors.
-        magnetNode.cursor = 'pointer';
-        if ( magnetNode instanceof ElectromagnetNode ) {
-          magnetNode.backgroundNode.cursor = 'pointer';
-        }
-        pickupCoilNode.cursor = 'pointer';
-        pickupCoilNode.backgroundNode.cursor = 'pointer';
       }
     } );
   }

js/common/view/PickupCoilNode.ts

@@ -21,9 +21,11 @@ import optionize from '../../../../phet-core/js/optionize.js';
 import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 import PickOptional from '../../../../phet-core/js/types/PickOptional.js';
 import PickupCoilAreaNode from './PickupCoilAreaNode.js';
+import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 
 type SelfOptions = {
   maxRayLength?: number; // passed to LightBulbNode
+  lockToAxisProperty?: TReadOnlyProperty<boolean> | null;
 };
 
 type PickupCoilNodeOptions = SelfOptions &
@@ -37,7 +39,10 @@ export default class PickupCoilNode extends FELMovableNode {
   public constructor( pickupCoil: PickupCoil, providedOptions: PickupCoilNodeOptions ) {
 
     const options = optionize<PickupCoilNodeOptions, SelfOptions, NodeOptions>()( {
-      maxRayLength: 350
+
+      // SelfOptions
+      maxRayLength: 350,
+      lockToAxisProperty: null
     }, providedOptions );
 
     const coilNode = new CoilNode( pickupCoil.coil, pickupCoil, {
@@ -95,6 +100,13 @@ export default class PickupCoilNode extends FELMovableNode {
     pickupCoil.positionProperty.link( position => {
       this.backgroundNode.translation = position;
     } );
+
+    // Change the cursor to indicate whether dragging is constrained to the x-axis.
+    options.lockToAxisProperty && options.lockToAxisProperty.link( lockToAxis => {
+      const cursor = lockToAxis ? 'ew-resize' : 'pointer';
+      this.cursor = cursor;
+      this.backgroundNode.cursor = cursor;
+    } );
   }
 }
 

js/pickup-coil/view/PickupCoilScreenView.ts

@@ -58,11 +58,12 @@ export default class PickupCoilScreenView extends FELScreenView {
 
     const pickupCoilNode = new PickupCoilNode( model.pickupCoil, {
       dragBoundsProperty: dragBoundsProperty,
+      lockToAxisProperty: lockToAxisProperty,
       tandem: tandem.createTandem( 'pickupCoilNode' )
     } );
 
     this.configureDragBoundsProperty( dragBoundsProperty, lockToAxisProperty, rightPanels.boundsProperty,
-      model.barMagnet.positionProperty, model.pickupCoil.positionProperty, barMagnetNode, pickupCoilNode );
+      model.barMagnet.positionProperty, model.pickupCoil.positionProperty );
 
     const pickupCoilAxisNode = new PickupCoilAxisNode( lockToAxisProperty, model.pickupCoil.positionProperty,
       this.visibleBoundsProperty );

js/transformer/view/TransformerNode.ts

@@ -20,15 +20,20 @@ export default class TransformerNode extends Node {
   public readonly electromagnetNode: ElectromagnetNode;
   public readonly pickupCoilNode: PickupCoilNode;
 
-  public constructor( transformer: Transformer, dragBoundsProperty: TReadOnlyProperty<Bounds2>, tandem: Tandem ) {
+  public constructor( transformer: Transformer,
+                      dragBoundsProperty: TReadOnlyProperty<Bounds2>,
+                      lockToAxisProperty: TReadOnlyProperty<boolean>,
+                      tandem: Tandem ) {
 
     const electromagnetNode = new ElectromagnetNode( transformer.electromagnet, {
       dragBoundsProperty: dragBoundsProperty,
+      lockToAxisProperty: lockToAxisProperty,
       tandem: tandem.createTandem( 'electromagnetNode' )
     } );
 
     const pickupCoilNode = new PickupCoilNode( transformer.pickupCoil, {
       dragBoundsProperty: dragBoundsProperty,
+      lockToAxisProperty: lockToAxisProperty,
       tandem: tandem.createTandem( 'pickupCoilNode' )
     } );
 

js/transformer/view/TransformerScreenView.ts

@@ -62,13 +62,11 @@ export default class TransformerScreenView extends FELScreenView {
     // Set to correct bounds by calling this.configureDragBoundsProperty below.
     const dragBoundsProperty = new Property( this.layoutBounds );
 
-    const transformerNode = new TransformerNode( model.transformer, dragBoundsProperty,
+    const transformerNode = new TransformerNode( model.transformer, dragBoundsProperty, lockToAxisProperty,
       tandem.createTandem( 'transformerNode' ) );
 
-    //TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/163 How to prevent things from getting lost behind dcPowerSupplyPanel and acPowerSupplyPanel
     this.configureDragBoundsProperty( dragBoundsProperty, lockToAxisProperty, rightPanels.boundsProperty,
-      electromagnet.positionProperty, pickupCoil.positionProperty, transformerNode.electromagnetNode,
-      transformerNode.pickupCoilNode );
+      electromagnet.positionProperty, pickupCoil.positionProperty );
 
     const pickupCoilAxisNode = new PickupCoilAxisNode( lockToAxisProperty, pickupCoil.positionProperty,
       this.visibleBoundsProperty );