From 2fb8ba85056b41aaec54b8a4f7b9a86cbbba0c97 Mon Sep 17 00:00:00 2001 From: pixelzoom Date: Tue, 28 May 2024 15:18:50 -0600 Subject: [PATCH] incremental progress towards making AC/DC panels draggable, https://github.com/phetsims/faradays-electromagnetic-lab/issues/163 --- js/common/view/ACPowerSupplyPanel.ts | 2 +- js/common/view/DCPowerSupplyPanel.ts | 2 +- js/common/view/FELScreenView.ts | 2 +- js/common/view/PowerSupplyPanel.ts | 16 +++++++++++--- .../view/ElectromagnetScreenView.ts | 21 ++++++++++++++----- js/transformer/view/TransformerScreenView.ts | 7 +++++++ 6 files changed, 39 insertions(+), 11 deletions(-) diff --git a/js/common/view/ACPowerSupplyPanel.ts b/js/common/view/ACPowerSupplyPanel.ts index 46dc80ab..ff767b14 100644 --- a/js/common/view/ACPowerSupplyPanel.ts +++ b/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; +type ACPowerSupplyPanelOptions = SelfOptions & PickRequired; export default class ACPowerSupplyPanel extends PowerSupplyPanel { diff --git a/js/common/view/DCPowerSupplyPanel.ts b/js/common/view/DCPowerSupplyPanel.ts index 981183e7..0a61fbdf 100644 --- a/js/common/view/DCPowerSupplyPanel.ts +++ b/js/common/view/DCPowerSupplyPanel.ts @@ -32,7 +32,7 @@ const SLIDER_STEP = 1; type SelfOptions = EmptySelfOptions; -type DCPowerSupplyPanelOptions = SelfOptions & PickRequired; +type DCPowerSupplyPanelOptions = SelfOptions & PickRequired; export default class DCPowerSupplyPanel extends PowerSupplyPanel { diff --git a/js/common/view/FELScreenView.ts b/js/common/view/FELScreenView.ts index d087e734..fc2a04be 100644 --- a/js/common/view/FELScreenView.ts +++ b/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 diff --git a/js/common/view/PowerSupplyPanel.ts b/js/common/view/PowerSupplyPanel.ts index f002c8fd..ad335c08 100644 --- a/js/common/view/PowerSupplyPanel.ts +++ b/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; }; export type PowerSupplyPanelOptions = SelfOptions & @@ -67,7 +70,7 @@ 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' ) } ); @@ -75,12 +78,19 @@ export default class PowerSupplyPanel extends Panel { 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 { diff --git a/js/electromagnet/view/ElectromagnetScreenView.ts b/js/electromagnet/view/ElectromagnetScreenView.ts index f879e207..6817567a 100644 --- a/js/electromagnet/view/ElectromagnetScreenView.ts +++ b/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' ) } ); diff --git a/js/transformer/view/TransformerScreenView.ts b/js/transformer/view/TransformerScreenView.ts index 5e149b3e..2bc3a689 100644 --- a/js/transformer/view/TransformerScreenView.ts +++ b/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' ) } );