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

phetsims · May 28, 2024 · df4e715 · df4e715
1 parent 7130190
commit df4e715
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/js/common/view/PowerSupplyPanel.ts b/js/common/view/PowerSupplyPanel.ts
@@ -19,17 +19,19 @@ import { Node } from '../../../../scenery/js/imports.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 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';
 
 type SelfOptions = {
-  position: Vector2; // initial position of the panel
+  position: Vector2; // initial position of the panel's top-left corner
 };
 
 export type PowerSupplyPanelOptions = SelfOptions &
   PickRequired<PanelOptions, 'fill' | 'stroke' | 'tandem'>;
 
 export default class PowerSupplyPanel extends Panel {
 
-  // Position of the panel's top left corner.
+  // Position of the panel's top-left corner.
   private readonly positionProperty: Property<Vector2>;
 
   public constructor( content: Node, powerSupply: CurrentSource, currentSourceProperty: TReadOnlyProperty<CurrentSource>,
@@ -39,6 +41,10 @@ export default class PowerSupplyPanel extends Panel {
       visibleProperty: new DerivedProperty( [ currentSourceProperty ], currentSource => ( currentSource === powerSupply ) ),
       xMargin: 10,
       yMargin: 5,
+      cursor: 'pointer',
+      tagName: 'div', // for KeyboardDragListener
+      focusable: true, // for KeyboardDragListener
+      groupFocusHighlight: true, //TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/163 slider and drag are both affected
       phetioFeatured: true
     }, providedOptions );
 
@@ -56,11 +62,26 @@ export default class PowerSupplyPanel extends Panel {
     this.visibleProperty.lazyLink( visible => !visible && this.interruptSubtreeInput() );
 
     this.addLinkedElement( powerSupply );
+
+    const dragListener = new RichDragListener( {
+      positionProperty: this.positionProperty,
+      //TODO https://github.com/phetsims/faradays-electromagnetic-lab/issues/163 dragBoundsProperty
+      useParentOffset: true,
+      tandem: options.tandem.createTandem( 'dragListener' )
+    } );
+    this.addInputListener( dragListener );
+
+    const keyboardDragListener = new RichKeyboardDragListener( {
+      positionProperty: this.positionProperty,
+      tandem: options.tandem.createTandem( 'keyboardDragListener' )
+    } );
+    this.addInputListener( keyboardDragListener );
   }
 
   public reset(): void {
     this.positionProperty.reset();
   }
 }
 
+
 faradaysElectromagneticLab.register( 'PowerSupplyPanel', PowerSupplyPanel );
diff --git a/js/electromagnet/view/ElectromagnetScreenView.ts b/js/electromagnet/view/ElectromagnetScreenView.ts
@@ -37,17 +37,23 @@ export default class ElectromagnetScreenView extends FELScreenView {
       rightPanels: rightPanels,
       timeControlNode: timeControlNode,
       developerAccordionBox: developerAccordionBox,
-      resetAll: () => model.reset(),
+      resetAll: () => {
+        model.reset();
+        dcPowerSupplyPanel.reset();
+        acPowerSupplyPanel.reset();
+      },
       tandem: tandem
     } );
 
+    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, {
-      position: new Vector2( this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN, this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN ),
+      position: powerSupplyPanelPosition,
       tandem: tandem.createTandem( 'dcPowerSupplyPanel' )
     } );
 
     const acPowerSupplyPanel = new ACPowerSupplyPanel( model.electromagnet.acPowerSupply, model.electromagnet.currentSourceProperty, {
-      position: new Vector2( this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN, this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN ),
+      position: powerSupplyPanelPosition,
       tandem: tandem.createTandem( 'acPowerSupplyPanel' )
     } );
 

diff --git a/js/transformer/view/TransformerScreenView.ts b/js/transformer/view/TransformerScreenView.ts
@@ -52,17 +52,21 @@ export default class TransformerScreenView extends FELScreenView {
       resetAll: () => {
         model.reset();
         lockToAxisProperty.reset();
+        dcPowerSupplyPanel.reset();
+        acPowerSupplyPanel.reset();
       },
       tandem: tandem
     } );
 
+    const powerSupplyPanelPosition = new Vector2( this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN, this.layoutBounds.top + FELConstants.SCREEN_VIEW_Y_MARGIN );
+
     const dcPowerSupplyPanel = new DCPowerSupplyPanel( electromagnet.dcPowerSupply, electromagnet.currentSourceProperty, {
-      position: new Vector2( this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN, this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN ),
+      position: powerSupplyPanelPosition,
       tandem: tandem.createTandem( 'dcPowerSupplyPanel' )
     } );
 
     const acPowerSupplyPanel = new ACPowerSupplyPanel( electromagnet.acPowerSupply, electromagnet.currentSourceProperty, {
-      position: new Vector2( this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN, this.layoutBounds.left + FELConstants.SCREEN_VIEW_X_MARGIN ),
+      position: powerSupplyPanelPosition,
       tandem: tandem.createTandem( 'acPowerSupplyPanel' )
     } );