incremental progress towards making AC/DC panels draggable, #163

js/common/view/ACPowerSupplyPanel.ts

@@ -29,7 +29,7 @@ import PickRequired from '../../../../phet-core/js/types/PickRequired.js';
 
 type SelfOptions = EmptySelfOptions;
 
-type ACPowerSupplyPanelOptions = SelfOptions & PickRequired<PowerSupplyPanelOptions, 'position' | 'tandem'>;
+type ACPowerSupplyPanelOptions = SelfOptions & PickRequired<PowerSupplyPanelOptions, 'position' | 'dragBoundsProperty' | 'tandem'>;
 
 export default class ACPowerSupplyPanel extends PowerSupplyPanel {
 

js/common/view/DCPowerSupplyPanel.ts

@@ -32,7 +32,7 @@ const SLIDER_STEP = 1;
 
 type SelfOptions = EmptySelfOptions;
 
-type DCPowerSupplyPanelOptions = SelfOptions & PickRequired<PowerSupplyPanelOptions, 'position' | 'tandem'>;
+type DCPowerSupplyPanelOptions = SelfOptions & PickRequired<PowerSupplyPanelOptions, 'position' | 'dragBoundsProperty' | 'tandem'>;
 
 export default class DCPowerSupplyPanel extends PowerSupplyPanel {
 

js/common/view/FELScreenView.ts

@@ -77,7 +77,7 @@ export default class FELScreenView extends ScreenView {
 
       // To prevent compass from being occluded by right panels.
       dragBoundsProperty: new DerivedProperty( [ this.visibleBoundsProperty, options.rightPanels.boundsProperty ],
-        ( visibleBounds, panelsBounds ) => visibleBounds.withMaxX( panelsBounds.left ), {
+        ( visibleBounds, rightPanelsBounds ) => visibleBounds.withMaxX( rightPanelsBounds.left ), {
 
           // Because ScreenView visibleBoundProperty has problems with dependencies.
           // See https://github.com/phetsims/faradays-electromagnetic-lab/issues/65

js/common/view/PowerSupplyPanel.ts

@@ -21,9 +21,12 @@ import Vector2Property from '../../../../dot/js/Vector2Property.js';
 import Property from '../../../../axon/js/Property.js';
 import RichDragListener from '../../../../scenery-phet/js/RichDragListener.js';
 import RichKeyboardDragListener from '../../../../scenery-phet/js/RichKeyboardDragListener.js';
+import Bounds2 from '../../../../dot/js/Bounds2.js';
+import isSettingPhetioStateProperty from '../../../../tandem/js/isSettingPhetioStateProperty.js';
 
 type SelfOptions = {
   position: Vector2; // initial position of the panel's top-left corner
+  dragBoundsProperty: TReadOnlyProperty<Bounds2>;
 };
 
 export type PowerSupplyPanelOptions = SelfOptions &
@@ -67,20 +70,27 @@ export default class PowerSupplyPanel extends Panel {
 
     const dragListener = new RichDragListener( {
       positionProperty: this.positionProperty,
-      //TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/163 dragBoundsProperty
+      dragBoundsProperty: options.dragBoundsProperty,
       useParentOffset: true,
       tandem: options.tandem.createTandem( 'dragListener' )
     } );
     this.addInputListener( dragListener );
 
     const keyboardDragListener = new RichKeyboardDragListener( {
       positionProperty: this.positionProperty,
-      //TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/163 dragBoundsProperty
+      dragBoundsProperty: options.dragBoundsProperty,
       tandem: options.tandem.createTandem( 'keyboardDragListener' )
     } );
     this.addInputListener( keyboardDragListener );
 
-    //TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/163 move panel if outside drag bounds
+    // Keep the position inside of drag bounds.
+    options.dragBoundsProperty.lazyLink( dragBounds => {
+      if ( !isSettingPhetioStateProperty.value ) {
+        if ( !dragBounds.containsPoint( this.positionProperty.value ) ) {
+          this.positionProperty.value = dragBounds.closestBoundaryPointTo( this.positionProperty.value );
+        }
+      }
+    } );
   }
 
   public reset(): void {

js/electromagnet/view/ElectromagnetScreenView.ts

@@ -19,19 +19,23 @@ import FELConstants from '../../common/FELConstants.js';
 import DCPowerSupplyPanel from '../../common/view/DCPowerSupplyPanel.js';
 import ACPowerSupplyPanel from '../../common/view/ACPowerSupplyPanel.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
+import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 
 export default class ElectromagnetScreenView extends FELScreenView {
 
   public constructor( model: ElectromagnetScreenModel, tandem: Tandem ) {
 
+    // To improve readability
+    const electromagnet = model.electromagnet;
+
     const rightPanels = new ElectromagnetPanels( model, tandem.createTandem( 'rightPanels' ) );
 
     const timeControlNode = new FELTimeControlNode( model, tandem.createTandem( 'timeControlNode' ) );
 
-    const developerAccordionBox = new ElectromagnetDeveloperAccordionBox( model.electromagnet );
+    const developerAccordionBox = new ElectromagnetDeveloperAccordionBox( electromagnet );
 
     super( {
-      magnet: model.electromagnet,
+      magnet: electromagnet,
       compass: model.compass,
       fieldMeter: model.fieldMeter,
       rightPanels: rightPanels,
@@ -47,19 +51,26 @@ export default class ElectromagnetScreenView extends FELScreenView {
 
     const powerSupplyPanelPosition = new Vector2( this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN, this.layoutBounds.top + FELConstants.SCREEN_VIEW_Y_MARGIN );
 
-    const dcPowerSupplyPanel = new DCPowerSupplyPanel( model.electromagnet.dcPowerSupply, model.electromagnet.currentSourceProperty, {
+    //TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/163 dupicated, move into PowerSupplyPanel?
+    const powerSupplyPanelDragBoundsProperty = new DerivedProperty(
+      [ this.visibleBoundsProperty, rightPanels.boundsProperty ],
+      ( visibleBounds, rightPanelsBounds ) => visibleBounds.withMaxX( rightPanelsBounds.left ).erodedXY( 10, 10 ) );
+
+    const dcPowerSupplyPanel = new DCPowerSupplyPanel( electromagnet.dcPowerSupply, electromagnet.currentSourceProperty, {
       position: powerSupplyPanelPosition,
+      dragBoundsProperty: powerSupplyPanelDragBoundsProperty,
       tandem: tandem.createTandem( 'dcPowerSupplyPanel' )
     } );
 
-    const acPowerSupplyPanel = new ACPowerSupplyPanel( model.electromagnet.acPowerSupply, model.electromagnet.currentSourceProperty, {
+    const acPowerSupplyPanel = new ACPowerSupplyPanel( electromagnet.acPowerSupply, electromagnet.currentSourceProperty, {
       position: powerSupplyPanelPosition,
+      dragBoundsProperty: powerSupplyPanelDragBoundsProperty,
       tandem: tandem.createTandem( 'acPowerSupplyPanel' )
     } );
 
     const dragBoundsProperty = FELScreenView.createDragBoundsProperty( rightPanels.boundsProperty, this.layoutBounds );
 
-    const electromagnetNode = new ElectromagnetNode( model.electromagnet, {
+    const electromagnetNode = new ElectromagnetNode( electromagnet, {
       dragBoundsProperty: dragBoundsProperty,
       tandem: tandem.createTandem( 'electromagnetNode' )
     } );

js/transformer/view/TransformerScreenView.ts

@@ -22,6 +22,7 @@ import TransformerNode from './TransformerNode.js';
 import DCPowerSupplyPanel from '../../common/view/DCPowerSupplyPanel.js';
 import ACPowerSupplyPanel from '../../common/view/ACPowerSupplyPanel.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
+import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 
 export default class TransformerScreenView extends FELScreenView {
 
@@ -60,13 +61,19 @@ export default class TransformerScreenView extends FELScreenView {
 
     const powerSupplyPanelPosition = new Vector2( this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN, this.layoutBounds.top + FELConstants.SCREEN_VIEW_Y_MARGIN );
 
+    const powerSupplyPanelDragBoundsProperty = new DerivedProperty(
+      [ this.visibleBoundsProperty, rightPanels.boundsProperty ],
+      ( visibleBounds, rightPanelsBounds ) => visibleBounds.withMaxX( rightPanelsBounds.left ).erodedXY( 10, 10 ) );
+
     const dcPowerSupplyPanel = new DCPowerSupplyPanel( electromagnet.dcPowerSupply, electromagnet.currentSourceProperty, {
       position: powerSupplyPanelPosition,
+      dragBoundsProperty: powerSupplyPanelDragBoundsProperty,
       tandem: tandem.createTandem( 'dcPowerSupplyPanel' )
     } );
 
     const acPowerSupplyPanel = new ACPowerSupplyPanel( electromagnet.acPowerSupply, electromagnet.currentSourceProperty, {
       position: powerSupplyPanelPosition,
+      dragBoundsProperty: powerSupplyPanelDragBoundsProperty,
       tandem: tandem.createTandem( 'acPowerSupplyPanel' )
     } );