avoid decorator pattern when using AccordionBox, see #227

js/common/view/DoubleNumberLineAccordionBox.ts

@@ -13,7 +13,7 @@
 
 import Vector2 from '../../../../dot/js/Vector2.js';
 import EraserButton from '../../../../scenery-phet/js/buttons/EraserButton.js';
-import { Node, NodeTranslationOptions, Path, Rectangle, Text } from '../../../../scenery/js/imports.js';
+import { Node, NodeTranslationOptions, Path, Text } from '../../../../scenery/js/imports.js';
 import undoSolidShape from '../../../../sherpa/js/fontawesome-5/undoSolidShape.js';
 import AccordionBox, { AccordionBoxOptions } from '../../../../sun/js/AccordionBox.js';
 import RectangularPushButton from '../../../../sun/js/buttons/RectangularPushButton.js';
@@ -64,13 +64,12 @@ export default class DoubleNumberLineAccordionBox extends AccordionBox {
         resize: false // see https://github.com/phetsims/unit-rates/issues/218
       }, providedOptions );
 
-    // An invisible rectangle that has the same bounds as the accordion box. Used to position the keypad.
-    // Dimensions will be set after calling super.  This was added so when converting to an ES6 class, because
-    // we can't use this before super.  See https://github.com/phetsims/tasks/issues/1026#issuecomment-594357784
-    const thisBoundsNode = new Rectangle( 0, 0, 1, 1, {
-      visible: false,
-      pickable: false
-    } );
+    // Computes the global bounds of this AccordionBox. Used to position the keypad. Will be defined after calling
+    // super. This was added so when converting to an ES6 class, because we can't use this before super.
+    // See https://github.com/phetsims/tasks/issues/1026#issuecomment-5943577
+    const computeGlobalBounds = () => {
+      return this.globalBounds;
+    };
 
     // title on the accordion box
     assert && assert( !options.titleNode, 'creates its own titleNode' );
@@ -94,7 +93,7 @@ export default class DoubleNumberLineAccordionBox extends AccordionBox {
     const markerEditorNodeOutOfRangeX = doubleNumberLineNode.x + doubleNumberLineNode.outOfRangeXOffset;
 
     // marker editor
-    const markerEditorNode = new MarkerEditorNode( markerEditor, thisBoundsNode, keypadLayer, {
+    const markerEditorNode = new MarkerEditorNode( markerEditor, computeGlobalBounds, keypadLayer, {
       keypadPanelPosition: options.keypadPanelPosition,
       x: markerEditorNodeHomeX,
       centerY: doubleNumberLineNode.centerY
@@ -142,11 +141,6 @@ export default class DoubleNumberLineAccordionBox extends AccordionBox {
 
     super( contentNode, options );
 
-    // Adjust rectangle to match accordion box size.
-    thisBoundsNode.setRectBounds( this.localBounds );
-    this.addChild( thisBoundsNode );
-    thisBoundsNode.moveToBack();
-
     // animation for marker editor
     let markerEditorAnimation: Animation | null = null;
 

js/common/view/MarkerEditorNode.ts

@@ -20,6 +20,7 @@ import MarkerEditor from '../model/MarkerEditor.js';
 import KeypadLayer from './KeypadLayer.js';
 import optionize from '../../../../phet-core/js/optionize.js';
 import KeypadPanel from './KeypadPanel.js';
+import Bounds2 from '../../../../dot/js/Bounds2.js';
 
 type SelfOptions = {
   lineLength?: number; // length of the vertical line between numerator and denominator values
@@ -39,12 +40,12 @@ export default class MarkerEditorNode extends Node {
 
   /**
    * @param markerEditor
-   * @param doubleNumberLinePanel - panel that contains the double number line, for positioning the keypad
+   * @param computePanelGlobalBounds - computes global bounds of a containing panel, for positioning the keypad
    * @param keypadLayer - layer that manages the keypad
    * @param [providedOptions]
    */
   public constructor( markerEditor: MarkerEditor,
-                      doubleNumberLinePanel: Node,
+                      computePanelGlobalBounds: () => Bounds2,
                       keypadLayer: KeypadLayer,
                       providedOptions?: MarkerEditorNodeOptions ) {
 
@@ -151,7 +152,7 @@ export default class MarkerEditorNode extends Node {
 
       // position the keypad relative to edit button and double number line panel
       const doubleNumberLinePanelBounds =
-        keypadPanel.globalToParentBounds( doubleNumberLinePanel.localToGlobalBounds( doubleNumberLinePanel.localBounds ) );
+        keypadPanel.globalToParentBounds( computePanelGlobalBounds() );
       const editButtonBounds =
         keypadPanel.globalToParentBounds( numeratorEditButton.localToGlobalBounds( numeratorEditButton.localBounds ) );