Decoupling, see #40

js/common/view/KeplersLawsControls.ts

@@ -71,7 +71,7 @@ class KeplersLawsControls extends VBox {
             } )
           ]
         } ),
-        new TargetOrbitsComboBox( model, topLayer, {
+        new TargetOrbitsComboBox( model.targetOrbitProperty, topLayer, {
           enabledProperty: model.isSolarSystemProperty,
           layoutOptions: {
             align: 'center'

js/common/view/KeplersLawsScreenView.ts

@@ -183,7 +183,7 @@ class KeplersLawsScreenView extends SolarSystemCommonScreenView {
     // UI ----------------------------------------------------------------------------------
     // Second and Third Law Accordion Boxes and Zoom Buttons
 
-    this.topLayer.addChild( new OrbitalWarningMessage( model, this.modelViewTransformProperty ) );
+    this.topLayer.addChild( new OrbitalWarningMessage( model.engine.orbitTypeProperty, model.engine.allowedOrbitProperty, this.modelViewTransformProperty ) );
 
     this.firstLawPanel = new FirstLawPanels( model );
     this.secondLawPanel = new SecondLawPanels( model );
@@ -297,7 +297,7 @@ class KeplersLawsScreenView extends SolarSystemCommonScreenView {
     this.interfaceLayer.addChild( lawsPanelsBox );
     this.interfaceLayer.addChild( topRightAlignBox );
     if ( options.allowLawSelection ) {
-      this.lawsButtons = new LawsButtons( model );
+      this.lawsButtons = new LawsButtons( model.selectedLawProperty );
 
       this.interfaceLayer.addChild( new AlignBox( new HBox( {
           children: [

js/common/view/LawsButtons.ts

@@ -10,17 +10,17 @@
 import { combineOptions } from '../../../../phet-core/js/optionize.js';
 import { Node } from '../../../../scenery/js/imports.js';
 import RectangularRadioButtonGroup, { RectangularRadioButtonGroupOptions } from '../../../../sun/js/buttons/RectangularRadioButtonGroup.js';
-import KeplersLawsModel from '../model/KeplersLawsModel.js';
 import LawMode from '../model/LawMode.js';
 import keplersLaws from '../../keplersLaws.js';
 import FirstLawScreenIcon from '../../first-law/FirstLawScreenIcon.js';
 import SecondLawScreenIcon from '../../second-law/SecondLawScreenIcon.js';
 import ThirdLawScreenIcon from '../../third-law/ThirdLawScreenIcon.js';
+import Property from '../../../../axon/js/Property.js';
 
 export type LawsButtonsOptions = RectangularRadioButtonGroupOptions;
 
 export default class LawsButtons extends RectangularRadioButtonGroup<LawMode> {
-  public constructor( model: KeplersLawsModel, providedOptions?: LawsButtonsOptions ) {
+  public constructor( selectedLawProperty: Property<LawMode>, providedOptions?: LawsButtonsOptions ) {
     const options = combineOptions<LawsButtonsOptions>( {
       orientation: 'horizontal',
       radioButtonOptions: {
@@ -38,7 +38,7 @@ export default class LawsButtons extends RectangularRadioButtonGroup<LawMode> {
 
 
     // Intentionally left without KeplersLawsStrings because this buttons will have icons
-    super( model.selectedLawProperty, [
+    super( selectedLawProperty, [
       {
         value: LawMode.FIRST_LAW,
         createNode: () => new Node( { children: [ FirstLawScreenIcon.getFullNode() ], scale: 1.5 } ),

js/common/view/OrbitalWarningMessage.ts

@@ -6,7 +6,6 @@
  * @author Agustín Vallejo
  */
 
-import KeplersLawsModel from '../model/KeplersLawsModel.js';
 import { Node, RichText, TextOptions } from '../../../../scenery/js/imports.js';
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
@@ -21,7 +20,9 @@ import { combineOptions } from '../../../../phet-core/js/optionize.js';
 
 export default class OrbitalWarningMessage extends Node {
 
-  public constructor( model: KeplersLawsModel, modelViewTransformProperty: TReadOnlyProperty<ModelViewTransform2> ) {
+  public constructor( orbitTypeProperty: TReadOnlyProperty<OrbitTypes>,
+                      allowedOrbitProperty: TReadOnlyProperty<boolean>,
+                      modelViewTransformProperty: TReadOnlyProperty<ModelViewTransform2> ) {
 
     const center = modelViewTransformProperty.value.modelToViewPosition( new Vector2( 0, -50 ) );
 
@@ -37,7 +38,7 @@ export default class OrbitalWarningMessage extends Node {
 
     Multilink.multilink(
       [
-        model.engine.orbitTypeProperty,
+        orbitTypeProperty,
         KeplersLawsStrings.warning.warningStringProperty,
         KeplersLawsStrings.warning.crashOrbitStringProperty,
         KeplersLawsStrings.warning.escapeOrbitStringProperty
@@ -65,7 +66,7 @@ export default class OrbitalWarningMessage extends Node {
     );
 
     super( {
-      visibleProperty: DerivedProperty.not( model.engine.allowedOrbitProperty ),
+      visibleProperty: DerivedProperty.not( allowedOrbitProperty ),
       center: center,
       children: [ warningText ]
     } );

js/common/view/SecondLawGraph.ts

@@ -110,7 +110,7 @@ export default class SecondLawGraph extends AccordionBox {
 
 class AreasBarPlot extends Node {
 
-  public constructor( public model: KeplersLawsModel ) {
+  public constructor( model: KeplersLawsModel ) {
     super();
 
     // -1 is so that the first bar is not inside the Y axis
@@ -141,7 +141,7 @@ class AreasBarPlot extends Node {
       activeAreas.forEach( ( area, index ) => {
         // Setting all the bar's height and pushing them to the dataSet
         const height = area.alreadyEntered && !area.insideProperty.value ? model.engine.segmentArea : area.sweptArea;
-        const realIndex = this.model.engine.retrograde ? this.model.periodDivisionProperty.value - index - 1 : index;
+        const realIndex = model.engine.retrograde ? model.periodDivisionProperty.value - index - 1 : index;
         dataSet.push( new Vector2( realIndex, height ) );
       } );
       barPlot.setDataSet( dataSet ); // BarPlot creates the rectangles here
@@ -203,7 +203,7 @@ class AreasBarPlot extends Node {
     // For every time the vertical scale of the Second Laws Graph needs to be updated
     const updateYRange = () => {
       // Because period divisions go down to 2, the maximum height is a bit more (const UPSCALE) than half the total area
-      modelYRange = new Range( 0, UPSCALE * this.model.engine.totalArea / 2 );
+      modelYRange = new Range( 0, UPSCALE * model.engine.totalArea / 2 );
       chartTransform.setModelYRange( modelYRange );
 
       const tickChildren: TickMarkSet[] = [];
@@ -246,7 +246,7 @@ class AreasBarPlot extends Node {
     };
 
     // Linking the period division to modify the chart ranges and labels
-    this.model.periodDivisionProperty.link( periodDivision => {
+    model.periodDivisionProperty.link( periodDivision => {
       modelXRange = new Range( -1, periodDivision );
       chartTransform.setModelXRange( modelXRange );
       barPlot.update();

js/common/view/TargetOrbitsComboBox.ts

@@ -8,12 +8,12 @@
 import keplersLaws from '../../keplersLaws.js';
 import TargetOrbits from '../model/TargetOrbits.js';
 import ComboBox, { ComboBoxOptions } from '../../../../sun/js/ComboBox.js';
-import KeplersLawsModel from '../model/KeplersLawsModel.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import { Node, Text } from '../../../../scenery/js/imports.js';
 import SolarSystemCommonConstants from '../../../../solar-system-common/js/SolarSystemCommonConstants.js';
 import { combineOptions } from '../../../../phet-core/js/optionize.js';
 import KeplersLawsStrings from '../../KeplersLawsStrings.js';
+import Property from '../../../../axon/js/Property.js';
 
 const targetOrbits = [
   TargetOrbits.NONE,
@@ -25,7 +25,7 @@ const targetOrbits = [
 ];
 
 export default class TargetOrbitsComboBox extends ComboBox<TargetOrbits> {
-  public constructor( model: KeplersLawsModel, listParent: Node, providedOptions: ComboBoxOptions ) {
+  public constructor( targetOrbitProperty: Property<TargetOrbits>, listParent: Node, providedOptions: ComboBoxOptions ) {
     const options = combineOptions<ComboBoxOptions>( {
       buttonTouchAreaXDilation: 10,
       buttonTouchAreaYDilation: 10,
@@ -45,7 +45,7 @@ export default class TargetOrbitsComboBox extends ComboBox<TargetOrbits> {
       };
     };
 
-    super( model.targetOrbitProperty, targetOrbits.map( targetOrbit => {
+    super( targetOrbitProperty, targetOrbits.map( targetOrbit => {
       return createItem( targetOrbit, targetOrbit.stringProperty );
     } ), listParent, options );
   }