render clipAreas with ?debugOpticalAxis and ?debugRays, #125

js/common/GOQueryParameters.ts

@@ -58,13 +58,13 @@ const SCHEMA = {
   },
 
   // The optical axis is drawn using 2 Nodes, OpticalAxisNode and OpticalAxisForegroundNode.
-  // This flag uses 'red' stroke for the segments drawn by OpticalAxisForegroundNode.
+  // This flag uses 'red' stroke for OpticalAxisForegroundNode and its clipArea.
   debugOpticalAxis: {
     type: 'flag'
   },
 
   // The light rays are drawn using 2 Nodes, LightRaysNode and LightRaysForegroundNode.
-  // This flag uses 'red' stroke for the segments drawn by LightRaysForegroundNode.
+  // This flag uses 'red' stroke for LightRaysForegroundNode and its clipArea.
   debugRays: {
     type: 'flag'
   },

js/common/view/LightRaysForegroundNode.ts

@@ -18,6 +18,7 @@ import merge from '../../../../phet-core/js/merge.js';
 import Bounds2 from '../../../../dot/js/Bounds2.js';
 import Vector2 from '../../../../dot/js/Vector2.js';
 import Shape from '../../../../kite/js/Shape.js';
+import { Path } from '../../../../scenery/js/imports.js';
 
 class LightRaysForegroundNode extends LightRaysNode {
 
@@ -49,6 +50,15 @@ class LightRaysForegroundNode extends LightRaysNode {
 
     super( lightRays, representationProperty, virtualImageVisibleProperty, modelViewTransform, options );
 
+    // Stroke the clipArea in red.
+    let clipAreaNode: Path;
+    if ( GOQueryParameters.debugRays ) {
+      clipAreaNode = new Path( null, {
+        stroke: 'red'
+      } );
+      this.addChild( clipAreaNode );
+    }
+
     // Update the clipArea, to make rays look like they pass through a real Image.
     // This shows only the parts of this Node that are in the foreground, i.e. not occluded by other things.
     const updateClipArea = () => {
@@ -79,6 +89,10 @@ class LightRaysForegroundNode extends LightRaysNode {
         clipArea = Shape.rectangle( minX, visibleBounds.minY, maxX - minX, visibleBounds.height );
       }
       this.clipArea = clipArea;
+
+      if ( clipAreaNode ) {
+        clipAreaNode.shape = clipArea;
+      }
     };
 
     lightRays.raysProcessedEmitter.addListener( () => {

js/common/view/OpticalAxisForegroundNode.ts

@@ -24,7 +24,7 @@ import Representation from '../model/Representation.js';
 import OpticalAxisNode, { OpticalAxisNodeOptions } from './OpticalAxisNode.js';
 import GOQueryParameters from '../GOQueryParameters.js';
 import Emitter from '../../../../axon/js/Emitter.js';
-import { Node } from '../../../../scenery/js/imports.js';
+import { Node, Path } from '../../../../scenery/js/imports.js';
 
 class OpticalAxisForegroundNode extends OpticalAxisNode {
 
@@ -61,6 +61,15 @@ class OpticalAxisForegroundNode extends OpticalAxisNode {
     // create optical axis line, with arbitrary length values.
     super( opticPositionProperty, modelBoundsProperty, modelViewTransform, options );
 
+    // Stroke the clipArea in red.
+    let clipAreaNode: Path;
+    if ( GOQueryParameters.debugOpticalAxis ) {
+      clipAreaNode = new Path( null, {
+        stroke: 'red'
+      } );
+      this.addChild( clipAreaNode );
+    }
+
     // Update the clipArea, to make the axis look like it passes through things.
     // This shows only the parts of this Node that are in the foreground, i.e. not occluded by other things.
     // While it may seem a bit odd to be listening to the light rays, this is an optimization. When computation
@@ -117,6 +126,10 @@ class OpticalAxisForegroundNode extends OpticalAxisNode {
         clipArea = Shape.rectangle( minX, minY, maxX - minX, clipHeight );
       }
       this.clipArea = clipArea;
+
+      if ( clipAreaNode ) {
+        clipAreaNode.shape = clipArea;
+      }
     };
 
     lightRaysProcessedEmitter.addListener( () => {