Create MVT's in subclasses and use a different MVT for the particle m…

…ovement. Use the same atom center X for both screens to maintain the atoms/buttons aligned between screens. See #46.

js/chart-intro/model/EnergyLevelModel.ts

@@ -1,9 +1,12 @@
 // Copyright 2022, University of Colorado Boulder
 
 import createObservableArray, { ObservableArray } from '../../../../axon/js/createObservableArray.js';
+import Bounds2 from '../../../../dot/js/Bounds2.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
+import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js';
 import Particle from '../../../../shred/js/model/Particle.js';
 import buildANucleus from '../../buildANucleus.js';
+import BANConstants from '../../common/BANConstants.js';
 
 type ParticleShellPosition = {
   particle: Particle | null;
@@ -21,9 +24,14 @@ class EnergyLevelModel {
 
   public readonly particleShellPositions: ParticleShellPosition[][];
   private particles: ObservableArray<Particle>;
+  public modelViewTransform: ModelViewTransform2;
 
   public constructor() {
 
+    const particleWidth = BANConstants.PARTICLE_RADIUS * 2;
+    this.modelViewTransform = ModelViewTransform2.createRectangleInvertedYMapping( new Bounds2( 0, 0, 5, 2 ),
+      new Bounds2( 0, 0, particleWidth * 6, particleWidth * 8 ) );
+
     this.particles = createObservableArray();
 
     // Initialize the positions where a nucleon can be placed.
@@ -120,7 +128,7 @@ class EnergyLevelModel {
 
       assert && assert( sortedOpenPositions.length > 0, 'No open positions found for protons' );
       sortedOpenPositions[ 0 ].particle = particle;
-      particle.destinationProperty.set( new Vector2( sortedOpenPositions[ 0 ].xPosition, yPosition ) );
+      particle.destinationProperty.set( this.modelViewTransform.modelToViewPosition( new Vector2( sortedOpenPositions[ 0 ].xPosition, yPosition ) ) );
 
       // Listen for removal of the proton and handle it.
       const particleRemovedListener = ( userControlled: boolean ) => {

js/chart-intro/view/ChartIntroScreenView.ts

@@ -22,6 +22,8 @@ import ArrowNode from '../../../../scenery-phet/js/ArrowNode.js';
 import BANColors from '../../common/BANColors.js';
 import EnergyLevelNode from './EnergyLevelNode.js';
 import EnergyLevelModel from '../model/EnergyLevelModel.js';
+import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js';
+import Vector2 from '../../../../dot/js/Vector2.js';
 
 // types
 export type NuclideChartIntroScreenViewOptions = BANScreenViewOptions;
@@ -32,13 +34,19 @@ class ChartIntroScreenView extends BANScreenView<ChartIntroModel> {
 
   public constructor( model: ChartIntroModel, providedOptions?: NuclideChartIntroScreenViewOptions ) {
 
+    const modelViewTransform = ModelViewTransform2.createSinglePointScaleMapping(
+      Vector2.ZERO,
+      new Vector2( BANConstants.SCREEN_VIEW_ATOM_CENTER_X, 420 ), // the bottom left corner of proton energy levels
+      1.0 );
+
     const options = optionize<NuclideChartIntroScreenViewOptions, EmptySelfOptions, BANScreenViewOptions>()( {
 
+      particleViewMVT: ModelViewTransform2.createSinglePointScaleMapping( Vector2.ZERO, new Vector2( 140, 420 ), 1.0 ),
       // phet-io options
       tandem: Tandem.REQUIRED
     }, providedOptions );
 
-    super( model, options );
+    super( model, modelViewTransform, options );
 
     this.model = model;
 

js/common/BANConstants.ts

@@ -51,7 +51,11 @@ const BANConstants = {
   REGULAR_FONT: new PhetFont( 20 ),
 
   DEFAULT_INITIAL_PROTON_COUNT: 0,
-  DEFAULT_INITIAL_NEUTRON_COUNT: 0
+  DEFAULT_INITIAL_NEUTRON_COUNT: 0,
+
+  // center of the atom
+  SCREEN_VIEW_ATOM_CENTER_X: 335,
+  SCREEN_VIEW_ATOM_CENTER_Y: 339
 };
 
 buildANucleus.register( 'BANConstants', BANConstants );

js/common/view/BANScreenView.ts

@@ -11,7 +11,7 @@ import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.j
 import Tandem from '../../../../tandem/js/Tandem.js';
 import buildANucleus from '../../buildANucleus.js';
 import BANConstants from '../../common/BANConstants.js';
-import optionize, { EmptySelfOptions } from '../../../../phet-core/js/optionize.js';
+import optionize from '../../../../phet-core/js/optionize.js';
 import BANModel from '../model/BANModel.js';
 import ArrowButton from '../../../../sun/js/buttons/ArrowButton.js';
 import { Circle, Color, Node, PressListenerEvent, ProfileColorProperty, RadialGradient, Text, VBox } from '../../../../scenery/js/imports.js';
@@ -46,7 +46,10 @@ const TOUCH_AREA_Y_DILATION = 3;
 const NUMBER_OF_NUCLEON_LAYERS = 22; // This is based on max number of particles, may need adjustment if that changes.
 
 // types
-export type BANScreenViewOptions = WithRequired<ScreenViewOptions, 'tandem'>;
+type SelfOptions = {
+  particleViewMVT?: ModelViewTransform2;
+};
+export type BANScreenViewOptions = SelfOptions & WithRequired<ScreenViewOptions, 'tandem'>;
 export type ParticleViewMap = Record<number, ParticleView>;
 
 type ParticleTypeInfo = {
@@ -96,9 +99,11 @@ abstract class BANScreenView<M extends BANModel> extends ScreenView {
   protected readonly emptyAtomCircle: Node;
   protected readonly elementName: Text;
 
-  protected constructor( model: M, providedOptions?: BANScreenViewOptions ) {
+  protected constructor( model: M, modelViewTransform: ModelViewTransform2, providedOptions?: BANScreenViewOptions ) {
+
+    const options = optionize<BANScreenViewOptions, SelfOptions, ScreenViewOptions>()( {
 
-    const options = optionize<BANScreenViewOptions, EmptySelfOptions, ScreenViewOptions>()( {
+      particleViewMVT: modelViewTransform,
 
       // phet-io options
       tandem: Tandem.REQUIRED
@@ -111,10 +116,7 @@ abstract class BANScreenView<M extends BANModel> extends ScreenView {
     this.previousProtonCount = 0;
     this.previousNeutronCount = 0;
 
-    this.modelViewTransform = ModelViewTransform2.createSinglePointScaleMapping(
-      Vector2.ZERO,
-      new Vector2( 335, 339 ), // the center of the atom node
-      1.0 );
+    this.modelViewTransform = modelViewTransform;
 
     this.particleViewMap = {};
 
@@ -415,7 +417,7 @@ abstract class BANScreenView<M extends BANModel> extends ScreenView {
 
     // add ParticleView's to match the model
     this.model.particles.addItemAddedListener( ( particle: Particle ) => {
-      const particleView = new ParticleView( particle, this.modelViewTransform );
+      const particleView = new ParticleView( particle, options.particleViewMVT );
 
       this.particleViewMap[ particleView.particle.id ] = particleView;
       this.addParticleView( particle, particleView );

js/decay/view/DecayScreenView.ts

@@ -35,6 +35,7 @@ import DecayType from '../../common/view/DecayType.js';
 import Multilink from '../../../../axon/js/Multilink.js';
 import ReturnButton from '../../../../scenery-phet/js/buttons/ReturnButton.js';
 import StringProperty from '../../../../axon/js/StringProperty.js';
+import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js';
 
 // constants
 const NUCLEON_CAPTURE_RADIUS = 100;
@@ -56,13 +57,18 @@ class DecayScreenView extends BANScreenView<DecayModel> {
 
   public constructor( model: DecayModel, providedOptions?: DecayScreenViewOptions ) {
 
+    const modelViewTransform = ModelViewTransform2.createSinglePointScaleMapping(
+      Vector2.ZERO,
+      new Vector2( BANConstants.SCREEN_VIEW_ATOM_CENTER_X, BANConstants.SCREEN_VIEW_ATOM_CENTER_Y ), // the center of the atom node
+      1.0 );
+
     const options = optionize<DecayScreenViewOptions, EmptySelfOptions, BANScreenViewOptions>()( {
 
       // phet-io options
       tandem: Tandem.REQUIRED
     }, providedOptions );
 
-    super( model, options );
+    super( model, modelViewTransform, options );
 
     this.model = model;