[Question] positioning nested groups

[JohnPaulHarold]

Describe your question

I'm having issues trying to align nested groups. It's quite possible I am doing this wrong, so it's a question for now, rather than viewing this as a bug.

Your code (either pasted here, or a link to a hosted example)

a simple CodePen is here, https://codepen.io/johnpaulharold/pen/EaYyjOa

Screenshots
a grab of what the codepen shows

Environment (please select one):

• Code executes in browser (e.g: using script tag to load library)
• Packaged software (e.g: ES6 imports, react, angular, vue.js)
• Running headless (usually Node.js)

---

If applicable:

Desktop (please complete the following information):

• OS: OSX
• Browser Chrome stable
• Version 131

Additional context

My expectation with the code is that the group of 3 red buttons should be aligned to that the vertical guideline appears to cut straight through the middle of the menu, which should be the "B" button. Instead, it appears as though only the first button in the group is considered. Am I doing something wrong here?

[jonobr1]

Thanks for posting with a great example. This is a bug. Working on it 👍

[jonobr1]

This patch fixes the underlying issue: #755

But, your question is still valid. How do nested elements layout? Hopefully the below helps clarify your question:

By default Two.js elements render in their own transformation matrix at the center. So the 0, 0 (also known as the origin) of a Two.Rectangle is not the upper-left corner, but the center. As a result, your code's origin is the center of the first rectangle. In order to move the origin of the Menu group is to offset the positions of the buttons by the total width of all the buttons. You can do that with a simple method: menu.center()

[JohnPaulHarold]

@jonobr1 Thank you for looking into this. I've update the pen but am still seeing issues. I might be doing something wrong still.

I added menu.center() to the menu grouping. This does change the layout, but now the alignment is towards the last element in the group. Like this,

The change I made looks like

menu.position.x = world.width / 2;
menu.position.y = world.height / 2;
+ menu.center();

[jonobr1]

I haven't published the changes yet to NPM. You'll need to use the GitHub dev branch until I do.

[JohnPaulHarold]

I haven't published the changes yet to NPM. You'll need to use the GitHub dev branch until I do.

urggh, how silly of me. Thanks!