diff --git a/js/energy-skate-park/common/Constants.js b/js/energy-skate-park/common/Constants.js index 424f7acc..6651bb07 100644 --- a/js/energy-skate-park/common/Constants.js +++ b/js/energy-skate-park/common/Constants.js @@ -11,6 +11,7 @@ import Dimension2 from '../../../../dot/js/Dimension2.js'; import Range from '../../../../dot/js/Range.js'; import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; import energySkatePark from '../../energySkatePark.js'; +import EnergySkateParkColorScheme from './view/EnergySkateParkColorScheme.js'; // for zoom buttons for bar graphs, pressing button will increase/decrease scale by this much const ZOOM_FACTOR_DELTA = 1 / 60; @@ -22,6 +23,8 @@ const JUPITER_GRAVITY = 25.96; // maximum coefficient of friction const MAX_FRICTION = 0.1; +const PANEL_CORNER_RADIUS = 8; + const Constants = { SLIDER_OPTIONS: { thumbSize: new Dimension2( 10, 20 ), @@ -37,10 +40,19 @@ const Constants = { maxWidth: 25 // selected by choosing the length of widest English string in ?stringTest=double }, + // options for boxes and panels + PANEL_CORNER_RADIUS: PANEL_CORNER_RADIUS, + PANEL_OPTIONS: { + cornerRadius: PANEL_CORNER_RADIUS, + fill: EnergySkateParkColorScheme.panelFill, + stroke: EnergySkateParkColorScheme.panelStroke + }, + // options for the ComboBoxes in this sim COMBO_BOX_OPTIONS: { xMargin: 10, - yMargin: 6 + yMargin: 6, + cornerRadius: PANEL_CORNER_RADIUS }, COMBO_BOX_ITEM_OPTIONS: { font: new PhetFont( 11 ), maxWidth: 80 }, diff --git a/js/energy-skate-park/common/view/AttachDetachToggleButtons.js b/js/energy-skate-park/common/view/AttachDetachToggleButtons.js index 07a93e5e..3c4c4618 100644 --- a/js/energy-skate-park/common/view/AttachDetachToggleButtons.js +++ b/js/energy-skate-park/common/view/AttachDetachToggleButtons.js @@ -14,6 +14,7 @@ import Panel from '../../../../../sun/js/Panel.js'; import attachIcon from '../../../../images/attach_png.js'; import detachIcon from '../../../../images/detach_png.js'; import energySkatePark from '../../../energySkatePark.js'; +import Constants from '../Constants.js'; // constants const SELECTED_LINE_WIDTH = 2.3; @@ -33,11 +34,9 @@ class AttachDetachToggleButtons extends Panel { // Match the style of the EnergySkateParkControlPanel options = merge( { - fill: '#F0F0F0', - stroke: null, xMargin: 15, yMargin: 5 - }, options ); + }, Constants.PANEL_OPTIONS, options ); // This is sort of hack to pass through the tandem of the radioButtonGroupMember to its child. const attachRadioButtonTandemName = 'attachRadioButton'; diff --git a/js/energy-skate-park/common/view/EnergyBarGraph.js b/js/energy-skate-park/common/view/EnergyBarGraph.js index 6325699e..f03259a6 100644 --- a/js/energy-skate-park/common/view/EnergyBarGraph.js +++ b/js/energy-skate-park/common/view/EnergyBarGraph.js @@ -135,24 +135,25 @@ class EnergyBarGraph extends Node { let content = null; if ( options.showBarGraphZoomButtons ) { - const zoomOutButton = new ZoomButton( { - in: false, + const zoomButtonOptions = { scale: 0.3, - baseColor: ColorConstants.LIGHT_BLUE, + baseColor: ColorConstants.LIGHT_BLUE + }; + + const zoomOutButton = new ZoomButton( merge( { + in: false, listener: () => { barGraphScaleProperty.set( Math.max( barGraphScaleProperty.get() - Constants.ZOOM_FACTOR_DELTA, Constants.MIN_ZOOM_FACTOR ) ); }, tandem: tandem.createTandem( 'zoomOutButton' ) - } ); - const zoomInButton = new ZoomButton( { + }, zoomButtonOptions ) ); + const zoomInButton = new ZoomButton( merge( { in: true, - scale: 0.3, - baseColor: ColorConstants.LIGHT_BLUE, listener: () => { barGraphScaleProperty.set( Math.min( barGraphScaleProperty.get() + Constants.ZOOM_FACTOR_DELTA, Constants.MAX_ZOOM_FACTOR ) ); }, tandem: tandem.createTandem( 'zoomInButton' ) - } ); + }, zoomButtonOptions ) ); const zoomButtons = new HBox( { children: [ zoomOutButton, zoomInButton ], diff --git a/js/energy-skate-park/common/view/EnergyBarGraphAccordionBox.js b/js/energy-skate-park/common/view/EnergyBarGraphAccordionBox.js index 327991e7..f3c5d47c 100644 --- a/js/energy-skate-park/common/view/EnergyBarGraphAccordionBox.js +++ b/js/energy-skate-park/common/view/EnergyBarGraphAccordionBox.js @@ -9,6 +9,7 @@ import merge from '../../../../../phet-core/js/merge.js'; import AccordionBox from '../../../../../sun/js/AccordionBox.js'; import energySkatePark from '../../../energySkatePark.js'; +import Constants from '../Constants.js'; import EnergyBarGraph from './EnergyBarGraph.js'; class EnergyBarGraphAccordionBox extends AccordionBox { @@ -27,13 +28,12 @@ class EnergyBarGraphAccordionBox extends AccordionBox { const energyBarGraph = new EnergyBarGraph( model.skater, model.barGraphScaleProperty, model.barGraphVisibleProperty, tandem.createTandem( 'energyBarGraph' ), options.barGraphOptions ); const margin = 5; - super( energyBarGraph, { + super( energyBarGraph, merge( { contentXMargin: margin, contentYMargin: margin, buttonXMargin: margin, buttonYMargin: margin, - cornerRadius: margin, titleNode: EnergyBarGraph.createLabel(), @@ -44,7 +44,7 @@ class EnergyBarGraphAccordionBox extends AccordionBox { barGraphOptions: null, tandem: tandem - } ); + }, Constants.PANEL_OPTIONS ) ); // create an icon that represents the content, it is invisible when expanded const graphIcon = EnergyBarGraph.createBarGraphIcon( tandem.createTandem( 'barGraphIcon' ), { scale: 0.8 } ); diff --git a/js/energy-skate-park/common/view/EnergySkateParkColorScheme.js b/js/energy-skate-park/common/view/EnergySkateParkColorScheme.js index fa079236..922650d7 100644 --- a/js/energy-skate-park/common/view/EnergySkateParkColorScheme.js +++ b/js/energy-skate-park/common/view/EnergySkateParkColorScheme.js @@ -39,6 +39,7 @@ const EnergySkateParkColorScheme = { referenceArrowFill: new Color( 254, 240, 53 ), panelFill: new Color( '#F0F0F0' ), + panelStroke: new Color( '#ababab' ), // surrounds text for better visibility transparentPanelFill: new Color( 255, 255, 255, 0.5 ) diff --git a/js/energy-skate-park/common/view/EnergySkateParkControlPanel.js b/js/energy-skate-park/common/view/EnergySkateParkControlPanel.js index 490defd5..6c896257 100644 --- a/js/energy-skate-park/common/view/EnergySkateParkControlPanel.js +++ b/js/energy-skate-park/common/view/EnergySkateParkControlPanel.js @@ -12,7 +12,7 @@ import VBox from '../../../../../scenery/js/nodes/VBox.js'; import HSeparator from '../../../../../sun/js/HSeparator.js'; import Panel from '../../../../../sun/js/Panel.js'; import energySkatePark from '../../../energySkatePark.js'; -import EnergySkateParkColorScheme from './EnergySkateParkColorScheme.js'; +import Constants from '../Constants.js'; import EnergySkateParkGravityControls from './EnergySkateParkGravityControls.js'; import EnergySkateParkMassControls from './EnergySkateParkMassControls.js'; import EnergySkateParkVisibilityControls from './EnergySkateParkVisibilityControls.js'; @@ -104,14 +104,12 @@ class EnergySkateParkControlPanel extends Panel { const content = new VBox( { resize: false, spacing: 8, children: children } ); - super( content, { + super( content, merge( { xMargin: 5, yMargin: 5, - fill: EnergySkateParkColorScheme.panelFill, - stroke: null, resize: false, tandem: tandem - } ); + }, Constants.PANEL_OPTIONS ) ); } } diff --git a/js/energy-skate-park/common/view/PieChartLegend.js b/js/energy-skate-park/common/view/PieChartLegend.js index cfac6120..13124d96 100644 --- a/js/energy-skate-park/common/view/PieChartLegend.js +++ b/js/energy-skate-park/common/view/PieChartLegend.js @@ -18,6 +18,7 @@ import VStrut from '../../../../../scenery/js/nodes/VStrut.js'; import Panel from '../../../../../sun/js/Panel.js'; import energySkateParkStrings from '../../../energy-skate-park-strings.js'; import energySkatePark from '../../../energySkatePark.js'; +import Constants from '../Constants.js'; import EnergySkateParkColorScheme from './EnergySkateParkColorScheme.js'; const energyEnergyString = energySkateParkStrings.energy.energy; @@ -120,18 +121,14 @@ class PieChartLegend extends Panel { ] } ); - super( contentWithTitle, - { - x: 4, - y: 4, - xMargin: 6, - yMargin: 5, - fill: 'white', - stroke: 'gray', - lineWidth: 1, - resize: false, - tandem: tandem - } ); + super( contentWithTitle, merge( { + x: 4, + y: 4, + xMargin: 6, + yMargin: 5, + resize: false, + tandem: tandem + }, Constants.PANEL_OPTIONS ) ); this.addChild( clearThermalButton ); const strutGlobal = clearThermalButtonStrut.parentToGlobalPoint( clearThermalButtonStrut.center ); diff --git a/js/energy-skate-park/common/view/ToolboxPanel.js b/js/energy-skate-park/common/view/ToolboxPanel.js index 77c805ee..4e5797cb 100644 --- a/js/energy-skate-park/common/view/ToolboxPanel.js +++ b/js/energy-skate-park/common/view/ToolboxPanel.js @@ -17,7 +17,7 @@ import HBox from '../../../../../scenery/js/nodes/HBox.js'; import Panel from '../../../../../sun/js/Panel.js'; import Tandem from '../../../../../tandem/js/Tandem.js'; import energySkatePark from '../../../energySkatePark.js'; -import EnergySkateParkColorScheme from './EnergySkateParkColorScheme.js'; +import Constants from '../Constants.js'; class ToolboxPanel extends Panel { @@ -29,10 +29,8 @@ class ToolboxPanel extends Panel { */ constructor( model, view, tandem, options ) { options = merge( { - lineWidth: 0, - align: 'center', - fill: EnergySkateParkColorScheme.panelFill - }, options ); + align: 'center' + }, Constants.PANEL_OPTIONS, options ); // create the icons const measuringTapeIcon = MeasuringTapeNode.createIcon(); diff --git a/js/energy-skate-park/common/view/TrackToolboxPanel.js b/js/energy-skate-park/common/view/TrackToolboxPanel.js index 0742f000..4bea2981 100644 --- a/js/energy-skate-park/common/view/TrackToolboxPanel.js +++ b/js/energy-skate-park/common/view/TrackToolboxPanel.js @@ -24,9 +24,7 @@ class TrackToolboxPanel extends Panel { */ constructor( model, view, tandem, options ) { - options = merge( { - cornerRadius: 6 - }, options ); + options = merge( {}, Constants.PANEL_OPTIONS, options ); const iconTrack = model.createDraggableTrack( { trackOptions: { diff --git a/js/energy-skate-park/common/view/VisibilityControlsPanel.js b/js/energy-skate-park/common/view/VisibilityControlsPanel.js index 96834c21..80175bd2 100644 --- a/js/energy-skate-park/common/view/VisibilityControlsPanel.js +++ b/js/energy-skate-park/common/view/VisibilityControlsPanel.js @@ -7,8 +7,10 @@ * @author Jesse Greenberg (PhET Interactive Simulations) */ +import merge from '../../../../../phet-core/js/merge.js'; import Panel from '../../../../../sun/js/Panel.js'; import energySkatePark from '../../../energySkatePark.js'; +import Constants from '../Constants.js'; import EnergySkateParkVisibilityControls from './EnergySkateParkVisibilityControls.js'; class VisibilityControlsPanel extends Panel { @@ -19,6 +21,8 @@ class VisibilityControlsPanel extends Panel { * @param {Object} [options] */ constructor( model, tandem, options ) { + options = merge( {}, Constants.PANEL_OPTIONS, options ); + const content = new EnergySkateParkVisibilityControls( model, tandem, { showPieChartCheckbox: false, showSpeedCheckbox: false, diff --git a/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js b/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js index f85cfeed..ef675bef 100644 --- a/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js +++ b/js/energy-skate-park/graphs/view/EnergyGraphAccordionBox.js @@ -19,6 +19,7 @@ import AccordionBox from '../../../../../sun/js/AccordionBox.js'; import VerticalCheckboxGroup from '../../../../../sun/js/VerticalCheckboxGroup.js'; import energySkateParkStrings from '../../../energy-skate-park-strings.js'; import energySkatePark from '../../../energySkatePark.js'; +import Constants from '../../common/Constants.js'; import EnergySkateParkColorScheme from '../../common/view/EnergySkateParkColorScheme.js'; import GraphsConstants from '../GraphsConstants.js'; import GraphsModel from '../model/GraphsModel.js'; @@ -150,7 +151,7 @@ class EnergyGraphAccordionBox extends AccordionBox { xLabelText.centerTop = energyPlot.centerBottom.plusXY( 0, 10 ); checkboxGroup.rightCenter = yLabel.leftCenter.minusXY( 10, 0 ); - super( contentNode, { + super( contentNode, merge( { titleNode: titleNode, titleAlignX: 'left', titleXSpacing: 7, @@ -159,10 +160,10 @@ class EnergyGraphAccordionBox extends AccordionBox { contentYMargin: 2, contentXMargin: 4, contentYSpacing: 0, - stroke: EnergySkateParkColorScheme.panelFill, + expandedProperty: model.energyPlotVisibleProperty, tandem: tandem.createTandem( 'accordionBox' ) - } ); + }, Constants.PANEL_OPTIONS ) ); // position the elements of the titleNode using global positioning after AccordionBox positions its titleNode variableSwitch.centerX = variableSwitch.globalToParentPoint( energyPlot.parentToGlobalPoint( energyPlot.plotPath.center ) ).x; diff --git a/js/energy-skate-park/measure/view/SkaterPathSensorNode.js b/js/energy-skate-park/measure/view/SkaterPathSensorNode.js index f541573a..49a8d142 100644 --- a/js/energy-skate-park/measure/view/SkaterPathSensorNode.js +++ b/js/energy-skate-park/measure/view/SkaterPathSensorNode.js @@ -29,6 +29,7 @@ import VBox from '../../../../../scenery/js/nodes/VBox.js'; import SunConstants from '../../../../../sun/js/SunConstants.js'; import energySkateParkStrings from '../../../energy-skate-park-strings.js'; import energySkatePark from '../../../energySkatePark.js'; +import Constants from '../../common/Constants.js'; import EnergySkateParkColorScheme from '../../common/view/EnergySkateParkColorScheme.js'; const energyEnergyString = energySkateParkStrings.energy.energy; @@ -151,7 +152,7 @@ class SkaterPathSensorNode extends Node { } ); // the body is a rounded rectangle - const body = new Rectangle( content.bounds.dilated( 5 ), 5, 5, { + const body = new Rectangle( content.bounds.dilated( 5 ), Constants.PANEL_CORNER_RADIUS, Constants.PANEL_CORNER_RADIUS, { fill: 'rgb(47,64,113)', stroke: 'rgb(210,210,210)', lineWidth: 2