OpticalAxisForegroundNode extends OpticalAxisNode, #283

js/common/view/OpticalAxisForegroundNode.ts

@@ -1,32 +1,26 @@
 // Copyright 2021, University of Colorado Boulder
 
 /**
- * OpticalAxisForegroundNode is the segment(s) of the optical axis that are not occluded by things in the view.
+ * OpticalAxisForegroundNode is a subclass of OpticalAxisNode that (using clipArea) shows only the segment(s) of
+ * the optical axis that are not occluded. It is intended to be layered in front of things that occlude the
+ * optical axis (objects, images, and projection screen).
  *
  * @author Chris Malley (PixelZoom, Inc.)
  */
 
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
-import IProperty from '../../../../axon/js/IProperty.js';
 import IReadOnlyProperty from '../../../../axon/js/IReadOnlyProperty.js';
 import Property from '../../../../axon/js/Property.js';
 import Bounds2 from '../../../../dot/js/Bounds2.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import Shape from '../../../../kite/js/Shape.js';
-import merge from '../../../../phet-core/js/merge.js';
 import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransform2.js';
-import { Line } from '../../../../scenery/js/imports.js';
 import geometricOptics from '../../geometricOptics.js';
-import GOColors from '../GOColors.js';
-import GOConstants from '../GOConstants.js';
 import Barrier from '../model/Barrier.js';
 import Representation from '../model/Representation.js';
+import OpticalAxisNode, { OpticalAxisNodeOptions } from './OpticalAxisNode.js';
 
-type Options = {
-  visibleProperty: IProperty<boolean>
-};
-
-class OpticalAxisForegroundNode extends Line {
+class OpticalAxisForegroundNode extends OpticalAxisNode {
 
   /**
    * @param opticPositionProperty
@@ -47,27 +41,10 @@ class OpticalAxisForegroundNode extends Line {
                barrier: Barrier | null,
                modelBoundsProperty: IReadOnlyProperty<Bounds2>,
                modelViewTransform: ModelViewTransform2,
-               options?: Options ) {
+               options: OpticalAxisNodeOptions ) {
 
     // create optical axis line, with arbitrary length values.
-    super( 0, 0, 1, 0, merge( {
-      stroke: phet.chipper.queryParameters.dev ? 'red' : GOColors.opticalAxisStrokeProperty,
-      lineWidth: GOConstants.AXIS_LINE_WIDTH,
-      lineDash: GOConstants.AXIS_LINE_DASH
-    }, options ) );
-
-    // set the horizontal extent of the optical axis line
-    modelBoundsProperty.link( bounds => {
-      this.setX1( modelViewTransform.modelToViewX( bounds.left ) );
-      this.setX2( modelViewTransform.modelToViewX( bounds.right ) );
-    } );
-
-    // update y-position of line based on position of optic
-    opticPositionProperty.link( position => {
-      const yView = modelViewTransform.modelToViewY( position.y );
-      this.setY1( yView );
-      this.setY2( yView );
-    } );
+    super( opticPositionProperty, modelBoundsProperty, modelViewTransform, options );
 
     //TODO this is a hack for dealing with the fact that the Mirror screen doesn't have a ProjectionScreen
     let barrierPositionProperty;

js/common/view/OpticalAxisNode.ts

@@ -20,7 +20,7 @@ import geometricOptics from '../../geometricOptics.js';
 import GOColors from '../GOColors.js';
 import GOConstants from '../GOConstants.js';
 
-type Options = {
+type OpticalAxisNodeOptions = {
   visibleProperty: IProperty<boolean>
 };
 
@@ -33,7 +33,7 @@ class OpticalAxisNode extends Line {
    * @param options
    */
   constructor( opticPositionProperty: IReadOnlyProperty<Vector2>, modelBoundsProperty: IReadOnlyProperty<Bounds2>,
-               modelViewTransform: ModelViewTransform2, options: Options ) {
+               modelViewTransform: ModelViewTransform2, options: OpticalAxisNodeOptions ) {
 
     // create optical axis line, with arbitrary length values.
     super( 0, 0, 1, 0, merge( {
@@ -65,3 +65,4 @@ class OpticalAxisNode extends Line {
 geometricOptics.register( 'OpticalAxisNode', OpticalAxisNode );
 
 export default OpticalAxisNode;
+export type { OpticalAxisNodeOptions };