diff --git a/js/common/view/GOScreenView.ts b/js/common/view/GOScreenView.ts index fe167094..0f6a8cba 100644 --- a/js/common/view/GOScreenView.ts +++ b/js/common/view/GOScreenView.ts @@ -262,6 +262,12 @@ class GOScreenView extends ScreenView { visibleProperty: visibleProperties.secondPointVisibleProperty } ); + // create the target image + const targetNode = new TargetNode( model.representationProperty, model.firstTarget, model.optic, + visibleProperties.virtualImageVisibleProperty, visibleProperties.rayTracingVisibleProperty, modelViewTransform, { + tandem: options.tandem.createTandem( 'targetNode' ) + } ); + // The complete optical axis, to be put in the background const opticalAxisNode = new OpticalAxisNode( model.optic.positionProperty, modelBoundsProperty, modelViewTransform, { visibleProperty: model.optic.opticalAxisVisibleProperty @@ -271,7 +277,8 @@ class GOScreenView extends ScreenView { // the axis is going through the source object, real/virtual image, etc. const opticalAxisForegroundNode = new OpticalAxisForegroundNode( model.optic.positionProperty, model.representationProperty, model.sourceObject.positionProperty, model.firstTarget.positionProperty, - model.firstTarget.isVirtualProperty, model.barrier, modelBoundsProperty, modelViewTransform, { + model.firstTarget.isVirtualProperty, model.barrier, modelBoundsProperty, modelViewTransform, + targetNode.boundsProperty, { visibleProperty: model.optic.opticalAxisVisibleProperty } ); @@ -304,12 +311,6 @@ class GOScreenView extends ScreenView { visibleProperties.virtualImageVisibleProperty, modelViewTransform, this.visibleBoundsProperty, model.optic.positionProperty, model.firstTarget.positionProperty, model.firstTarget.isVirtualProperty, lightRays2Options ); - // create the target image - const targetNode = new TargetNode( model.representationProperty, model.firstTarget, model.optic, - visibleProperties.virtualImageVisibleProperty, visibleProperties.rayTracingVisibleProperty, modelViewTransform, { - tandem: options.tandem.createTandem( 'targetNode' ) - } ); - // focal points (F) const focalPointsNode = new Node( { children: [ diff --git a/js/common/view/OpticalAxisForegroundNode.ts b/js/common/view/OpticalAxisForegroundNode.ts index 38ea8c92..eefe444c 100644 --- a/js/common/view/OpticalAxisForegroundNode.ts +++ b/js/common/view/OpticalAxisForegroundNode.ts @@ -33,6 +33,7 @@ class OpticalAxisForegroundNode extends OpticalAxisNode { * @param barrier * @param modelBoundsProperty * @param modelViewTransform + * @param targetNodeBoundsProperty * @param providedOptions */ constructor( opticPositionProperty: IReadOnlyProperty, @@ -43,6 +44,7 @@ class OpticalAxisForegroundNode extends OpticalAxisNode { barrier: Barrier | null, modelBoundsProperty: IReadOnlyProperty, modelViewTransform: ModelViewTransform2, + targetNodeBoundsProperty: IReadOnlyProperty, providedOptions: OpticalAxisNodeOptions ) { const options = merge( {}, providedOptions ) as OpticalAxisNodeOptions; @@ -98,7 +100,7 @@ class OpticalAxisForegroundNode extends OpticalAxisNode { // The second rectangle is between the thing on the left and the left edge of the picture frame on the right. const x2 = modelViewTransform.modelToViewX( leftPosition.x ); - const halfFrameWidth = 34; //TODO get this from sourceObject.boundsProperty, or from sourceObjectNode + const halfFrameWidth = targetNodeBoundsProperty.value.width / 2; const clipWidth2 = modelViewTransform.modelToViewX( rightPosition.x ) - halfFrameWidth - x2; clipArea = new Shape()