update clipArea only when visible, #286

phetsims · Jan 12, 2022 · e12624f · e12624f
1 parent 68c9d83
commit e12624f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 27 deletions.
diff --git a/js/common/view/LightRaysForegroundNode.ts b/js/common/view/LightRaysForegroundNode.ts
@@ -49,36 +49,49 @@ class LightRaysForegroundNode extends LightRaysNode {
 
     super( lightRays, representationProperty, virtualImageVisibleProperty, modelViewTransform, options );
 
-    // When light rays have been computed, update the clipArea, to make rays look like they pass through a real Image.
-    lightRays.raysProcessedEmitter.addListener( () => {
-        let clipArea: Shape | null = null;
-        if ( representationProperty.value.isObject && !isVirtualProperty.value ) {
+    // 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 = () => {
+      let clipArea: Shape | null = null;
+      if ( representationProperty.value.isObject && !isVirtualProperty.value ) {
 
-          const opticPosition = opticPositionProperty.value;
-          const targetPosition = targetPositionProperty.value;
-          const visibleBounds = visibleBoundsProperty.value;
+        const opticPosition = opticPositionProperty.value;
+        const targetPosition = targetPositionProperty.value;
+        const visibleBounds = visibleBoundsProperty.value;
 
-          // For a real image...
-          let minX: number;
-          let maxX: number;
-          if ( targetPosition.x > opticPosition.x ) {
+        // For a real image...
+        let minX: number;
+        let maxX: number;
+        if ( targetPosition.x > opticPosition.x ) {
 
-            // For a real image to the right of the optic, the clipArea is everything to the left of the image,
-            // because the image is facing left in perspective.
-            minX = visibleBounds.minX;
-            maxX = modelViewTransform.modelToViewX( targetPosition.x );
-          }
-          else {
+          // For a real image to the right of the optic, the clipArea is everything to the left of the image,
+          // because the image is facing left in perspective.
+          minX = visibleBounds.minX;
+          maxX = modelViewTransform.modelToViewX( targetPosition.x );
+        }
+        else {
 
-            // For a real image to the left of the optic, the clipArea is everything to the right of the image,
-            // because the image is facing right in perspective.
-            minX = modelViewTransform.modelToViewX( targetPosition.x );
-            maxX = visibleBounds.maxX;
-          }
-          clipArea = Shape.rectangle( minX, visibleBounds.minY, maxX - minX, visibleBounds.height );
+          // For a real image to the left of the optic, the clipArea is everything to the right of the image,
+          // because the image is facing right in perspective.
+          minX = modelViewTransform.modelToViewX( targetPosition.x );
+          maxX = visibleBounds.maxX;
         }
-        this.clipArea = clipArea;
-      } );
+        clipArea = Shape.rectangle( minX, visibleBounds.minY, maxX - minX, visibleBounds.height );
+      }
+      this.clipArea = clipArea;
+    };
+
+    lightRays.raysProcessedEmitter.addListener( () => {
+      if ( this.visible ) {
+        updateClipArea();
+      }
+    } );
+
+    this.visibleProperty.link( visible => {
+      if ( visible ) {
+        updateClipArea();
+      }
+    } );
   }
 }
 

diff --git a/js/common/view/OpticalAxisForegroundNode.ts b/js/common/view/OpticalAxisForegroundNode.ts
@@ -66,11 +66,12 @@ class OpticalAxisForegroundNode extends OpticalAxisNode {
                                     new DerivedProperty( [ modelBoundsProperty ], ( modelBounds: Bounds2 ) =>
                                       new Vector2( modelBounds.right + 1, modelBounds.centerX ) );
 
-    // Update the clipArea, used to show only the part(s) of the optical axis that are in the foreground.
+    // 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
     // of the light rays has completed, we know that other things are in their final positions, and therefore
     // don't end up computing intermediate states as things move around.
-    lightRaysProcessedEmitter.addListener( () => {
+    const updateClipArea = () => {
 
       const opticPosition = opticPositionProperty.value;
       const sourceObjectPosition = sourceObjectPositionProperty.value;
@@ -123,6 +124,18 @@ class OpticalAxisForegroundNode extends OpticalAxisNode {
         clipArea = Shape.rectangle( minX, minY, maxX - minX, maxY - minY );
       }
       this.clipArea = clipArea;
+    };
+
+    lightRaysProcessedEmitter.addListener( () => {
+      if ( this.visible ) {
+        updateClipArea();
+      }
+    } );
+
+    this.visibleProperty.link( visible => {
+      if ( visible ) {
+        updateClipArea();
+      }
     } );
   }