use AxisLine in fourier-making-waves, phetsims/bamboo#38

phetsims · Jun 15, 2021 · 6936451 · 6936451
1 parent 682cecc
commit 6936451
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,