From 69364515771c9441bf1d71ec95cc78a1c64b12dc Mon Sep 17 00:00:00 2001 From: pixelzoom Date: Tue, 15 Jun 2021 17:17:39 -0600 Subject: [PATCH] use AxisLine in fourier-making-waves, https://github.com/phetsims/bamboo/issues/38 --- js/common/FMWConstants.js | 7 +++---- js/common/view/WaveformChartNode.js | 17 +++++------------ js/wavepacket/view/ComponentsChartNode.js | 16 +++------------- .../view/WavePacketAmplitudesChartNode.js | 16 +++------------- js/wavepacket/view/WavePacketSumChartNode.js | 16 +++------------- 5 files changed, 17 insertions(+), 55 deletions(-) diff --git a/js/common/FMWConstants.js b/js/common/FMWConstants.js index c19ab9ba..566a0f52 100644 --- a/js/common/FMWConstants.js +++ b/js/common/FMWConstants.js @@ -94,10 +94,9 @@ const FMWConstants = { ZOOM_BUTTON_GROUP_SCALE: 0.75, X_AXIS_LABEL_SPACING: 10, // horizontal space between chart rectangle and x-axis label Y_AXIS_LABEL_SPACING: 36, // horizontal space between chart rectangle and y-axis label - AXIS_OPTIONS: { - fill: FMWColorProfile.axisStrokeProperty, - stroke: null, - tailWidth: 1 + AXIS_LINE_OPTIONS: { + stroke: FMWColorProfile.axisStrokeProperty, + lineWidth: 1 }, GRID_LINE_OPTIONS: { stroke: FMWColorProfile.chartGridLinesStrokeProperty, diff --git a/js/common/view/WaveformChartNode.js b/js/common/view/WaveformChartNode.js index 43cea442..8023ee04 100644 --- a/js/common/view/WaveformChartNode.js +++ b/js/common/view/WaveformChartNode.js @@ -8,7 +8,7 @@ */ import Property from '../../../../axon/js/Property.js'; -import AxisNode from '../../../../bamboo/js/AxisNode.js'; +import AxisLine from '../../../../bamboo/js/AxisLine.js'; import ChartRectangle from '../../../../bamboo/js/ChartRectangle.js'; import ChartTransform from '../../../../bamboo/js/ChartTransform.js'; import GridLineSet from '../../../../bamboo/js/GridLineSet.js'; @@ -88,7 +88,7 @@ class WaveformChartNode extends Node { // x axis (space or time) --------------------------------------------------------- - const xAxis = new AxisNode( chartTransform, Orientation.HORIZONTAL, FMWConstants.AXIS_OPTIONS ); + const xAxis = new AxisLine( chartTransform, Orientation.HORIZONTAL, FMWConstants.AXIS_LINE_OPTIONS ); const xGridLines = new GridLineSet( chartTransform, Orientation.HORIZONTAL, xAxisDescriptionProperty.value.gridLineSpacing, FMWConstants.GRID_LINE_OPTIONS ); @@ -150,7 +150,7 @@ class WaveformChartNode extends Node { // y axis (amplitude ) --------------------------------------------------------- - const yAxis = new AxisNode( chartTransform, Orientation.VERTICAL, FMWConstants.AXIS_OPTIONS ); + const yAxis = new AxisLine( chartTransform, Orientation.VERTICAL, FMWConstants.AXIS_LINE_OPTIONS ); const yGridLines = new GridLineSet( chartTransform, Orientation.VERTICAL, yAxisDescriptionProperty.value.gridLineSpacing, FMWConstants.GRID_LINE_OPTIONS ); @@ -200,19 +200,12 @@ class WaveformChartNode extends Node { // --------------------------------------------------------------- - // Parent for Nodes that must be clipped to the bounds of chartRectangle - const clippedParent = new Node( { - clipArea: chartRectangle.getShape(), - children: [ xAxis, yAxis ] - } ); - assert && assert( !options.children, 'AmplitudesChartNode sets children' ); options.children = [ xTickMarks, yTickMarks, // ticks behind chartRectangle, so we don't see how they extend into chart's interior chartRectangle, - xAxisLabel, xGridLines, xTickLabels, - yAxisLabel, yGridLines, yTickLabels, - clippedParent + xAxis, xAxisLabel, xGridLines, xTickLabels, + yAxis, yAxisLabel, yGridLines, yTickLabels ]; xZoomButtonGroup && options.children.push( xZoomButtonGroup ); yZoomButtonGroup && options.children.push( yZoomButtonGroup ); diff --git a/js/wavepacket/view/ComponentsChartNode.js b/js/wavepacket/view/ComponentsChartNode.js index 618fa58b..0b42b4c9 100644 --- a/js/wavepacket/view/ComponentsChartNode.js +++ b/js/wavepacket/view/ComponentsChartNode.js @@ -8,6 +8,7 @@ import EnumerationProperty from '../../../../axon/js/EnumerationProperty.js'; import Property from '../../../../axon/js/Property.js'; +import AxisLine from '../../../../bamboo/js/AxisLine.js'; import ChartRectangle from '../../../../bamboo/js/ChartRectangle.js'; import ChartTransform from '../../../../bamboo/js/ChartTransform.js'; import GridLineSet from '../../../../bamboo/js/GridLineSet.js'; @@ -17,7 +18,6 @@ import merge from '../../../../phet-core/js/merge.js'; import Orientation from '../../../../phet-core/js/Orientation.js'; import StringUtils from '../../../../phetcommon/js/util/StringUtils.js'; import PhetFont from '../../../../scenery-phet/js/PhetFont.js'; -import Line from '../../../../scenery/js/nodes/Line.js'; import Node from '../../../../scenery/js/nodes/Node.js'; import RichText from '../../../../scenery/js/nodes/RichText.js'; import Text from '../../../../scenery/js/nodes/Text.js'; @@ -75,12 +75,7 @@ class ComponentsChartNode extends Node { // x axis --------------------------------------------------------- - //TODO use AxisNode - const xAxis = new Line( 0, 0, options.transformOptions.viewWidth, 0, { - stroke: FMWColorProfile.axisStrokeProperty, - lineWidth: 1, - center: chartRectangle.center - } ); + const xAxis = new AxisLine( chartTransform, Orientation.HORIZONTAL, FMWConstants.AXIS_LINE_OPTIONS ); const xAxisLabel = new RichText( '', { font: FMWConstants.AXIS_LABEL_FONT, @@ -123,12 +118,7 @@ class ComponentsChartNode extends Node { // y axis --------------------------------------------------------- - //TODO use AxisNode - const yAxis = new Line( 0, 0, 0, options.transformOptions.viewHeight, { - stroke: FMWColorProfile.axisStrokeProperty, - lineWidth: 1, - center: chartRectangle.center - } ); + const yAxis = new AxisLine( chartTransform, Orientation.VERTICAL, FMWConstants.AXIS_LINE_OPTIONS ); const yAxisLabel = new RichText( fourierMakingWavesStrings.amplitude, { font: FMWConstants.AXIS_LABEL_FONT, diff --git a/js/wavepacket/view/WavePacketAmplitudesChartNode.js b/js/wavepacket/view/WavePacketAmplitudesChartNode.js index 15b853b3..eb57db5f 100644 --- a/js/wavepacket/view/WavePacketAmplitudesChartNode.js +++ b/js/wavepacket/view/WavePacketAmplitudesChartNode.js @@ -6,6 +6,7 @@ * @author Chris Malley (PixelZoom, Inc.) */ +import AxisLine from '../../../../bamboo/js/AxisLine.js'; import ChartRectangle from '../../../../bamboo/js/ChartRectangle.js'; import ChartTransform from '../../../../bamboo/js/ChartTransform.js'; import LabelSet from '../../../../bamboo/js/LabelSet.js'; @@ -15,7 +16,6 @@ import Utils from '../../../../dot/js/Utils.js'; import merge from '../../../../phet-core/js/merge.js'; import Orientation from '../../../../phet-core/js/Orientation.js'; import StringUtils from '../../../../phetcommon/js/util/StringUtils.js'; -import Line from '../../../../scenery/js/nodes/Line.js'; import Node from '../../../../scenery/js/nodes/Node.js'; import RichText from '../../../../scenery/js/nodes/RichText.js'; import Tandem from '../../../../tandem/js/Tandem.js'; @@ -67,11 +67,7 @@ class WavePacketAmplitudesChartNode extends Node { // x axis --------------------------------------------------------- - //TODO use AxisNode - const xAxis = new Line( 0, 0, options.transformOptions.viewWidth, 0, { - stroke: FMWColorProfile.axisStrokeProperty, - lineWidth: 1 - } ); + const xAxis = new AxisLine( chartTransform, Orientation.HORIZONTAL, FMWConstants.AXIS_LINE_OPTIONS ); const xTickMarks = new TickMarkSet( chartTransform, Orientation.HORIZONTAL, Math.PI, FMWConstants.TICK_MARK_OPTIONS ); @@ -88,13 +84,7 @@ class WavePacketAmplitudesChartNode extends Node { // y axis --------------------------------------------------------- - //TODO use AxisNode - const yAxis = new Line( 0, 0, 0, options.transformOptions.viewHeight, { - stroke: FMWColorProfile.axisStrokeProperty, - lineWidth: 1, - centerX: chartRectangle.left, - centerY: chartRectangle.centerY - } ); + const yAxis = new AxisLine( chartTransform, Orientation.VERTICAL, FMWConstants.AXIS_LINE_OPTIONS ); const yAxisLabel = new RichText( fourierMakingWavesStrings.amplitude, { font: FMWConstants.AXIS_LABEL_FONT, diff --git a/js/wavepacket/view/WavePacketSumChartNode.js b/js/wavepacket/view/WavePacketSumChartNode.js index d8f5dc1a..2068e332 100644 --- a/js/wavepacket/view/WavePacketSumChartNode.js +++ b/js/wavepacket/view/WavePacketSumChartNode.js @@ -9,6 +9,7 @@ import EnumerationProperty from '../../../../axon/js/EnumerationProperty.js'; import Property from '../../../../axon/js/Property.js'; +import AxisLine from '../../../../bamboo/js/AxisLine.js'; import ChartRectangle from '../../../../bamboo/js/ChartRectangle.js'; import ChartTransform from '../../../../bamboo/js/ChartTransform.js'; import GridLineSet from '../../../../bamboo/js/GridLineSet.js'; @@ -17,7 +18,6 @@ import Range from '../../../../dot/js/Range.js'; import merge from '../../../../phet-core/js/merge.js'; import Orientation from '../../../../phet-core/js/Orientation.js'; import StringUtils from '../../../../phetcommon/js/util/StringUtils.js'; -import Line from '../../../../scenery/js/nodes/Line.js'; import Node from '../../../../scenery/js/nodes/Node.js'; import RichText from '../../../../scenery/js/nodes/RichText.js'; import Tandem from '../../../../tandem/js/Tandem.js'; @@ -75,12 +75,7 @@ class WavePacketSumChartNode extends Node { // x axis --------------------------------------------------------- - //TODO use AxisNode - const xAxis = new Line( 0, 0, options.transformOptions.viewWidth, 0, { - stroke: FMWColorProfile.axisStrokeProperty, - lineWidth: 1, - center: chartRectangle.center - } ); + const xAxis = new AxisLine( chartTransform, Orientation.HORIZONTAL, FMWConstants.AXIS_LINE_OPTIONS ); const xAxisLabel = new RichText( '', { font: FMWConstants.AXIS_LABEL_FONT, @@ -123,12 +118,7 @@ class WavePacketSumChartNode extends Node { // y axis --------------------------------------------------------- - //TODO use AxisNode - const yAxis = new Line( 0, 0, 0, options.transformOptions.viewHeight, { - stroke: FMWColorProfile.axisStrokeProperty, - lineWidth: 1, - center: chartRectangle.center - } ); + const yAxis = new AxisLine( chartTransform, Orientation.VERTICAL, FMWConstants.AXIS_LINE_OPTIONS ); const yAxisLabel = new RichText( fourierMakingWavesStrings.amplitude, { font: FMWConstants.AXIS_LABEL_FONT,