Add a link to more options menu

[sadrajafari]

Hello,
I’m trying to add a link to our website in the overflow menu, but I haven’t been able to figure out the right way to do it. I’d really appreciate your guidance.
Thank you!

[samreid]

If you are referring to the PhetMenu in the bottom right, which looks like this:

The code is in this area:
https://github.com/phetsims/joist/blob/f786715eb2f3c43bbf1a31275f89c990b79a9b66/js/PhetMenu.ts#L102-L112

[sadrajafari]

Thanks for your response!
Well, I actually couldn't figure out how to add it. I am using SceneryStack NPM package.

[brettfiedler]

@samreid, is this relevant? https://nm.mathforcollege.com/nmsims/HNM%20Simulations%20Documentation/_book/brand.html

It's quite outdated (from a community contributor several years ago), but would working within brand work to swap out those elements, including the website?

Maybe this is a question for @jonathanolson for how well custom brand works with the NPM package.

[samreid]

Yes, I believe that is another way, but that will show in the about dialog.

[samreid]

I also do not know how scenerystack interoperates with brand/ if at all.

[jonathanolson]

There is no currently-supported good way to do this. Brands currently don't provide options like this.

So in case it is useful, here's a workaround that works in the current (2.0) and next (3.0) SceneryStack versions:

  // import PhetMenu from scenerystack/sim
  // import MenuItem from scenerystack/sun
  // import Property from scenerystack/axon
  // import openPopup from scenerystack/scenery (or do whatever other way of opening the link)

  const adjustPhetMenuListener = () => {
    const popupNode = sim.topLayer.children[ 1 ]?.children[ 0 ];

    if ( popupNode instanceof PhetMenu ) {
      // Chose index 0, but can be inserted wherever
      popupNode.children[ 1 ].insertChild( 0, new MenuItem(
        // Hide callback
        () => {
          popupNode.hide()
        },
        
        // String Property for the label
        new Property( 'Test Link' ),
        
        // Fire callback
        () => {
          openPopup( 'https://github.com' ); // Replace with URL here
        },
        
        // present, and whether it should be hidden if links are not allowed
        true,
        true
      ) );

      sim.topLayer.childrenChangedEmitter.removeListener( adjustPhetMenuListener );
    }
  };
  sim.topLayer.childrenChangedEmitter.addListener( adjustPhetMenuListener );

[sadrajafari]

Thank you so much!