diff --git a/js/common/view/ElectromagnetNode.ts b/js/common/view/ElectromagnetNode.ts index 709c9bdf..8e462158 100644 --- a/js/common/view/ElectromagnetNode.ts +++ b/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 | null; +}; type ElectromagnetNodeOptions = SelfOptions & PickRequired; @@ -31,7 +34,11 @@ export default class ElectromagnetNode extends FELMovableNode { public constructor( electromagnet: Electromagnet, providedOptions: ElectromagnetNodeOptions ) { - const options = optionize()( {}, providedOptions ); + const options = optionize()( { + + // 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; + } ); } } diff --git a/js/common/view/FELScreenView.ts b/js/common/view/FELScreenView.ts index 6bdf1151..cac8f8d1 100644 --- a/js/common/view/FELScreenView.ts +++ b/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, panelsBoundsProperty: TReadOnlyProperty, magnetPositionProperty: Property, - pickupCoilPositionProperty: Property, - magnetNode: BarMagnetNode | ElectromagnetNode, - pickupCoilNode: PickupCoilNode + pickupCoilPositionProperty: Property ): 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'; } } ); } diff --git a/js/common/view/PickupCoilNode.ts b/js/common/view/PickupCoilNode.ts index 87918d0e..6524c6f8 100644 --- a/js/common/view/PickupCoilNode.ts +++ b/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 | null; }; type PickupCoilNodeOptions = SelfOptions & @@ -37,7 +39,10 @@ export default class PickupCoilNode extends FELMovableNode { public constructor( pickupCoil: PickupCoil, providedOptions: PickupCoilNodeOptions ) { const options = optionize()( { - 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; + } ); } } diff --git a/js/pickup-coil/view/PickupCoilScreenView.ts b/js/pickup-coil/view/PickupCoilScreenView.ts index 8ea1de7b..19eaa9f0 100644 --- a/js/pickup-coil/view/PickupCoilScreenView.ts +++ b/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 ); diff --git a/js/transformer/view/TransformerNode.ts b/js/transformer/view/TransformerNode.ts index f8c337c0..eda6941f 100644 --- a/js/transformer/view/TransformerNode.ts +++ b/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, tandem: Tandem ) { + public constructor( transformer: Transformer, + dragBoundsProperty: TReadOnlyProperty, + lockToAxisProperty: TReadOnlyProperty, + 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' ) } ); diff --git a/js/transformer/view/TransformerScreenView.ts b/js/transformer/view/TransformerScreenView.ts index 0a88ed85..3e87f4d4 100644 --- a/js/transformer/view/TransformerScreenView.ts +++ b/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 );