fix options pattern usage, #22

js/common/view/OptionsPanel.js

@@ -47,11 +47,11 @@ define( require => {
   class OptionsPanel extends Panel {
 
     /**
-     * @param {Object} [panelOptions]
      * @param {OneDimensionModel|TwoDimensionsModel} model
      * @param {boolean} doShowPhases
+     * @param {Object} [options]
      */
-    constructor( panelOptions, model, doShowPhases = false ) {
+    constructor( model, doShowPhases, options ) {
 
       /*
       Model properties used:
@@ -288,7 +288,7 @@ define( require => {
         ]
       } );
 
-      super( contentNode, panelOptions );
+      super( contentNode, options );
     }
 
     /**

js/one-dimension/view/ModeGraphCanvasNode.js

@@ -11,40 +11,50 @@ define( require => {
   // modules
   const Bounds2 = require( 'DOT/Bounds2' );
   const CanvasNode = require( 'SCENERY/nodes/CanvasNode' );
+  const Dimension2 = require( 'DOT/Dimension2' );
   const inherit = require( 'PHET_CORE/inherit' );
+  const merge = require( 'PHET_CORE/merge' );
   const normalModes = require( 'NORMAL_MODES/normalModes' );
   const OneDimensionConstants = require( 'NORMAL_MODES/one-dimension/OneDimensionConstants' );
 
-  // constants
-  const RIGHT_WALL_PADDING = 25;
-  const X_LEN = 50;
-
   // TODO - this should be a class
   /**
    * @param {OneDimensionModel} model
+   * @param {number} normalNodeNumber
    * @param {Object} [options]
    * @constructor
    */
-  function ModeGraphCanvasNode( model, options ) {
-
-    options.canvasBounds = new Bounds2( 0, 0, ( options.wallHeight ) ? options.graphSize.width + RIGHT_WALL_PADDING : options.graphSize.width, options.graphSize.height );
+  function ModeGraphCanvasNode( model, normalNodeNumber, options ) {
+
+    options = merge( {
+      graphSize: new Dimension2( 133, 22 ),
+      graphStartX: 25,
+      wallHeight: 8,
+      strokeColor: 'blue',
+      wallColor: 'black',
+      textColor: 'black',
+      fontStyle: '16px sans-serif',
+      xResolution: 50
+    }, options );
+
+    options.canvasBounds = new Bounds2( 0, 0, options.graphSize.width + options.graphStartX, options.graphSize.height );
     CanvasNode.call( this, options );
 
+    this.normalModeNumber = normalNodeNumber; // @private {Number} - 0 to 9 (representing 1 to 10)
+
     this.graphSize = options.graphSize; // @private
     this.graphStart = { x: options.graphStartX, y: this.graphSize.height / 2 }; // @private
     this.wallHeight = options.wallHeight; // @private
+    this.xResolution = options.xResolution;
 
-    this.xStep = this.graphSize.width / X_LEN; // @private
-    this.normalModeNum = options.normalModeNum; // @private {Number} - 0 to 9 (representing 1 to 10)
-    this.curveYPositions = new Array( X_LEN ); // @private
-
-    this.strokeColor = options.strokeColor || 'blue'; // @private
-    this.wallColor = options.wallColor || 'black'; // @private
+    this.xStep = this.graphSize.width / this.xResolution; // @private
+    this.curveYPositions = new Array( this.xResolution ); // @private
 
-    this.textColor = options.textColor || 'black'; // @private
-    this.fontStyle = options.fontStyle || '16px sans-serif'; // @private
+    this.strokeColor = options.strokeColor; // @private
+    this.wallColor = options.wallColor; // @private
 
-    this.xRatio = options.graphSize.width; // @private
+    this.textColor = options.textColor; // @private
+    this.fontStyle = options.fontStyle; // @private
 
     this.model = model; // @private
   }
@@ -63,7 +73,7 @@ define( require => {
       // draw text (normal mode number)
       context.fillStyle = this.textColor;
       context.font = this.fontStyle;
-      context.fillText( ( this.normalModeNum + 1 ).toString(), 0, this.graphStart.y + 5.5 );
+      context.fillText( ( this.normalModeNumber + 1 ).toString(), 0, this.graphStart.y + 5.5 );
 
       // draw left wall
       context.beginPath();
@@ -96,14 +106,14 @@ define( require => {
 
     update: function() {
 
-      const n = this.normalModeNum;
+      const n = this.normalModeNumber;
       const amp = this.model.modeAmplitudeProperty[ n ].get();
       const phase = this.model.modePhaseProperty[ n ].get();
       const freq = this.model.modeFrequencyProperty[ n ].get();
       const time = this.model.timeProperty.get();
 
       for ( let i = 0; i < this.curveYPositions.length; i++ ) {
-        const x = i / X_LEN;
+        const x = i / this.xResolution;
 
         // put a negative sign in front of it because of y coordinate stuff
         this.curveYPositions[ i ] = -( 2 * this.graphSize.height / 3 ) * ( amp * Math.sin( x * ( n + 1 ) * Math.PI ) * Math.cos( freq * time - phase ) ) / OneDimensionConstants.MAX_MODE_AMPLITUDE;

js/one-dimension/view/NormalModeSpectrumAccordionBox.js

@@ -40,10 +40,10 @@ define( require => {
     // TODO - comment code
 
     /**
-     * @param {Object} [options]
      * @param {OneDimensionModel} model
+     * @param {Object} [options]
      */
-    constructor( options, model ) {
+    constructor( model, options ) {
 
       /*
       Model properties used:
@@ -78,10 +78,8 @@ define( require => {
           touchAreaXDilation: 6,
           touchAreaYDilation: 6
         },
-
         titleNode: new Text( normalModeSpectrumString, { font: NormalModesConstants.CONTROL_FONT } ),
         showTitleWhenExpanded: false
-
       }, options );
 
       const ampSliders = new Array( NormalModesConstants.MAX_MASSES_ROW_LEN );
@@ -136,11 +134,7 @@ define( require => {
           { font: NormalModesConstants.SMALL_FONT, maxWidth: 60 }
         );
 
-        modeGraphs[ i ] = new StaticModeGraphCanvasNode( model, {
-          normalModeNum: i,
-          graphSize: { width: 40, height: 25 },
-          graphStartX: 0
-        } );
+        modeGraphs[ i ] = new StaticModeGraphCanvasNode( model, i );
       }
 
       const panelColumns = new Array( NormalModesConstants.MAX_MASSES_ROW_LEN + 1 );

js/one-dimension/view/NormalModesAccordionBox.js

@@ -25,10 +25,10 @@ define( require => {
   class NormalModesAccordionBox extends AccordionBox {
 
     /**
-     * @param {Object} [options]
      * @param {OneDimensionModel} model
+     * @param {Object} [options]
      */
-    constructor( options, model ) {
+    constructor( model, options ) {
 
       /*
       Model properties used:
@@ -74,12 +74,7 @@ define( require => {
 
       // TODO - separate the mode number and right align it
       for ( let i = 0; i < normalModeGraphs.length; i++ ) {
-        normalModeGraphs[ i ] = new ModeGraphCanvasNode( model, {
-          normalModeNum: i,
-          graphSize: { width: 133, height: 22 },
-          graphStartX: 25,
-          wallHeight: 8
-        } );
+        normalModeGraphs[ i ] = new ModeGraphCanvasNode( model, i );
 
         Property.multilink( [ model.timeProperty, model.modeAmplitudeProperty[ i ], model.modePhaseProperty[ i ] ], function( time, amp, phase ) {
           normalModeGraphs[ i ].update();

js/one-dimension/view/OneDimensionScreenView.js

@@ -67,9 +67,9 @@ define( require => {
       };
 
       const optionsPanel = new OptionsPanel(
-        optionsPanelOptions,
         model,
-        true /* showPhases checkbox */
+        true, /* show showPhases checkbox */
+        optionsPanelOptions
       );
 
       const normalModeSpectrumAccordionBoxOptions = {
@@ -79,10 +79,8 @@ define( require => {
         stroke: NormalModesConstants.PANEL_COLORS.stroke,
         centerX: viewOrigin.x
       };
-      // maxWidth: VIEWBOX_WIDTH
-      // maxWidth: this.layoutBounds.maxX - 2 * OneDimensionConstants.SCREEN_VIEW_X_MARGIN - 240,
 
-      const normalModeSpectrumAccordionBox = new NormalModeSpectrumAccordionBox( normalModeSpectrumAccordionBoxOptions, model );
+      const normalModeSpectrumAccordionBox = new NormalModeSpectrumAccordionBox( model, normalModeSpectrumAccordionBoxOptions );
 
       this.addChild( normalModeSpectrumAccordionBox );
       this.addChild( optionsPanel );
@@ -110,12 +108,12 @@ define( require => {
         this.addChild( this.massNodes[ this.massNodes.length - 1 ] );
       }
 
-      this.normalModesAccordionBox = new NormalModesAccordionBox( {
+      this.normalModesAccordionBox = new NormalModesAccordionBox( model, {
         top: optionsPanel.bottom + 8,
         right: this.layoutBounds.maxX - OneDimensionConstants.SCREEN_VIEW_X_MARGIN - resetAllButton.width - 10,
         fill: NormalModesConstants.PANEL_COLORS.fill,
         stroke: NormalModesConstants.PANEL_COLORS.stroke
-      }, model );
+      } );
 
       this.addChild( this.normalModesAccordionBox );
     }

js/one-dimension/view/StaticModeGraphCanvasNode.js

@@ -1,7 +1,8 @@
 // Copyright 2020, University of Colorado Boulder
 
 /**
- * This node draws a normal mode graph. It is based on States of Matter's InteractionPotentialCanvasNode.
+ * This node draws a static normal mode graph with a fixed amplitude to represent the normal mode.
+ * It is based on States of Matter's InteractionPotentialCanvasNode.
  *
  * @author Franco Barpp Gomes (UTFPR)
  */
@@ -11,35 +12,43 @@ define( require => {
   // modules
   const Bounds2 = require( 'DOT/Bounds2' );
   const CanvasNode = require( 'SCENERY/nodes/CanvasNode' );
+  const Dimension2 = require( 'DOT/Dimension2' );
   const inherit = require( 'PHET_CORE/inherit' );
+  const merge = require( 'PHET_CORE/merge' );
   const normalModes = require( 'NORMAL_MODES/normalModes' );
   const OneDimensionConstants = require( 'NORMAL_MODES/one-dimension/OneDimensionConstants' );
 
-  // constants
-  const X_LEN = 100;
-
   // TODO - this should be a class
   /**
    * @param {OneDimensionModel} model
+   * @param {number} normalModeNumber
    * @param {Object} [options]
    * @constructor
    */
-  function StaticModeGraphCanvasNode( model, options ) {
+  function StaticModeGraphCanvasNode( model, normalModeNumber, options ) {
+
+    options = merge( {
+      graphSize: new Dimension2( 40, 25 ),
+      graphStartX: 0,
+      strokeColor: 'blue',
+      referenceLineStrokeColor: 'black',
+      xResolution: 100
+    }, options );
 
     options.canvasBounds = new Bounds2( 0, 0, options.graphSize.width, options.graphSize.height );
     CanvasNode.call( this, options );
 
+    this.normalModeNumber = normalModeNumber; // @private {Number} - 0 to 9 (representing 1 to 10)
+    this.xResolution = options.xResolution;
+
     this.graphSize = options.graphSize; // @private
     this.graphStart = { x: options.graphStartX, y: this.graphSize.height / 2 }; // @private
 
-    this.xStep = this.graphSize.width / X_LEN; // @private
-    this.normalModeNum = options.normalModeNum; // @private {Number} - 0 to 9 (representing 1 to 10)
-    this.curveYPositions = new Array( X_LEN );  // @private
-
-    this.strokeColor = options.strokeColor || 'blue'; // @private
-    this.refLineStrokeColor = options.refLineStrokeColor || 'black'; // @private
+    this.xStep = this.graphSize.width / this.xResolution; // @private
+    this.curveYPositions = new Array( this.xResolution );  // @private
 
-    this.xRatio = options.graphSize.width; // @private
+    this.strokeColor = options.strokeColor; // @private
+    this.referenceLineStrokeColor = options.referenceLineStrokeColor; // @private
 
     this.model = model; // @private
   }
@@ -57,7 +66,7 @@ define( require => {
 
       // draw reference line
       context.beginPath();
-      context.strokeStyle = this.refLineStrokeColor;
+      context.strokeStyle = this.referenceLineStrokeColor;
       context.lineWidth = 2;
       context.moveTo( this.graphStart.x, this.graphStart.y );
       context.lineTo( this.graphStart.x + this.graphSize.width, this.graphStart.y );
@@ -78,14 +87,14 @@ define( require => {
 
     update: function() {
 
-      const n = this.normalModeNum;
+      const n = this.normalModeNumber;
       const amp = 0.15;
       const phase = 0;
       const freq = this.model.modeFrequencyProperty[ n ].get();
       const time = 0;
 
       for ( let i = 0; i < this.curveYPositions.length; i++ ) {
-        const x = i / X_LEN;
+        const x = i / this.xResolution;
 
         // put a negative sign in front of it because of y coordinate stuff
         this.curveYPositions[ i ] = -( 2 * this.graphSize.height / 3 ) * ( amp * Math.sin( x * ( n + 1 ) * Math.PI ) * Math.cos( freq * time - phase ) ) / OneDimensionConstants.MAX_MODE_AMPLITUDE;

js/two-dimensions/view/AmplitudeSelectorRectangle.js

@@ -21,15 +21,15 @@ define( require => {
   class AmplitudeSelectorRectangle extends Rectangle {
 
     /**
-     * @param {Object} [options]
      * @param {TwoDimensionsModel} model
      * @param {number} row
      * @param {number} col
      * @param {DerivedProperty.<Property.<number>[][]>} axisAmplitudesProperty
      * @param {DerivedProperty.<number>} maxAmpProperty
      * @param {DerivedProperty.<number>} gridSizeProperty
+     * @param {Object} [options]
      */
-    constructor( options, model, row, col, axisAmplitudesProperty, maxAmpProperty, gridSizeProperty ) {
+    constructor( model, row, col, axisAmplitudesProperty, maxAmpProperty, gridSizeProperty, options ) {
 
       options = merge( {
         boundsMethod: 'none',

js/two-dimensions/view/NormalModeAmplitudesAccordionBox.js

@@ -94,17 +94,20 @@ define( require => {
       const selectorRectanglesLength = NormalModesConstants.MAX_MASSES_ROW_LEN ** 2;
       const selectorRectangles = new Array( selectorRectanglesLength );
 
+      const selectorRectangleOptions = {
+        rectGridSize: RECT_GRID_UNITS,
+        paddingGridSize: PADDING_GRID_UNITS,
+        backgroundRect: {
+          fill: Color.toColor( options.fill ).colorUtilsBrighter( 0.6 )
+        }
+      };
+
       for ( let i = 0; i < selectorRectanglesLength; i++ ) {
         const row = Math.trunc( i / NormalModesConstants.MAX_MASSES_ROW_LEN );
         const col = i % NormalModesConstants.MAX_MASSES_ROW_LEN;
 
-        selectorRectangles[ i ] = new AmplitudeSelectorRectangle( {
-          rectGridSize: RECT_GRID_UNITS,
-          paddingGridSize: PADDING_GRID_UNITS,
-          backgroundRect: {
-            fill: Color.toColor( options.fill ).colorUtilsBrighter( 0.6 )
-          }
-        }, model, row, col, axisAmplitudesProperty, maxAmpProperty, gridSizeProperty );
+        selectorRectangles[ i ] = new AmplitudeSelectorRectangle( model, row, col, axisAmplitudesProperty,
+          maxAmpProperty, gridSizeProperty, selectorRectangleOptions );
       }
 
       const selectorBox = new Rectangle( {

js/two-dimensions/view/TwoDimensionsScreenView.js

@@ -66,9 +66,9 @@ define( require => {
       };
 
       const optionsPanel = new OptionsPanel(
-        optionsPanelOptions,
         model,
-        false /* showPhases checkbox */
+        false, /* no showPhases checkbox */
+        optionsPanelOptions,
       );
 
       this.addChild( optionsPanel );