add workaround for phetsims/scenery#1333, #283

phetsims · Jan 18, 2022 · ff9ab58 · ff9ab58
1 parent 017954d
commit ff9ab58
Showing 1 changed file with 31 additions and 2 deletions.
diff --git a/js/common/view/TargetNode.ts b/js/common/view/TargetNode.ts
@@ -21,6 +21,7 @@ import Tandem from '../../../../tandem/js/Tandem.js';
 import IReadOnlyProperty from '../../../../axon/js/IReadOnlyProperty.js';
 import GOColors from '../GOColors.js';
 import GOQueryParameters from '../GOQueryParameters.js';
+import Shape from '../../../../kite/js/Shape.js';
 
 type Options = {
   tandem: Tandem
@@ -50,7 +51,7 @@ class TargetNode extends Node {
 
     // This mask is used to reduce the opacity of the portion of the axis that is occluded by the
     // real or virtual image. See https://github.com/phetsims/geometric-optics/issues/283.
-    const maskNode = new Path( imageNode.getSelfShape(), {
+    const maskNode = new Path( null, {
       fill: GOColors.screenBackgroundColorProperty,
       opacity: 0.80,
       stroke: GOQueryParameters.debugMask ? 'red' : null
@@ -114,7 +115,35 @@ class TargetNode extends Node {
           // update the image
           assert && assert( image ); // {HTMLImageElement|null}
           imageNode.image = image!;
-          maskNode.shape = imageNode.getSelfShape();
+
+          //TODO https://github.com/phetsims/scenery/issues/1333 replace with: maskNode.shape = imageNode.getSelfShape();
+          {
+            const xInset1 = 12;
+            const xInset2 = 10;
+            const yInset1 = 56;
+            const yInset2 = 3;
+            const yInset3 = 6;
+            if ( target.positionProperty.value.x > optic.positionProperty.value.x ) {
+              maskNode.shape = new Shape()
+                .moveTo( xInset1, yInset1 )
+                .lineTo( imageNode.width - xInset2, yInset2 )
+                .lineTo( imageNode.width, yInset3 )
+                .lineTo( imageNode.width, imageNode.height - yInset3 )
+                .lineTo( imageNode.width - xInset2, imageNode.height - yInset2 )
+                .lineTo( xInset1, imageNode.height - yInset1 )
+                .close();
+            }
+            else {
+              maskNode.shape = new Shape()
+                .moveTo( 0, yInset3 )
+                .lineTo( xInset2, yInset2 )
+                .lineTo( imageNode.width - xInset1, yInset1 )
+                .lineTo( imageNode.width - xInset1, imageNode.height - yInset1 )
+                .lineTo( xInset2, imageNode.height - yInset2 )
+                .lineTo( 0, imageNode.height - yInset3 )
+                .close();
+            }
+          }
 
           // update the scale of the image
           updateScaleAndPosition();