SDK7: Removing one UiEntity can damage other remaining UiEntities

[cfravel]

Removing one UiEntity and its children can affect the color and positions of another remaining UiEntity

Background is provided in a comment. Scene demonstrating the fix is included.

Steps to reproduce

1. Clone the demo scene at Cloning the scene in https://gitlab.com/dcl-tech/demo-uis
2. Be sure that the useGeneralizedCompositing variable near the top of DemoUs.tsx is set to true
3. Run it in preview
4. If you don’t see the 2D Uis appear automatically, click on the green box to open them
5. . // You may have to click a second time, see issue #936
6. // Note the placement of the white Ui_2 text inside the minimized Ui_2
7. Click the CLOSE button on Ui_1
8. // Expected: it closes, Ui_2 is unaffected
9. // Actual: Ui_2 background turns white, and its “Ui_2” text moves down the screen.
10. // you can reset the scene by clicking on the black box if it is present
11. // Optionally before or after clicking the CLOSE button on Ui2,
12. // you can click the button on Ui_2 to maximize Ui_2 and see a second button.
13. // That button, when pressed, will present a temporary announcement
14. // for a few seconds.

This is ugly. I request a fix soon.

[cfravel]

Background: I needed a way to manage multiple unrelated 2D Uis being added and removed independently. Why?

1. Because one can only call ReactEcsRenderer once in a scene,
2. Because my scenes sometimes need more than one 2D Ui
3. Because those Uis may be completely unrelated, in their own reusable modules, for example a. BuilderHUD b. CinemaControls c. AdmissionTicket d. Dance button e. Stage Manager Controls The example scene linked above demonstrates such a mechanism, but also demonstrates some issues with SDK7 2D UIs, which I’ll report in decentraland/sdk, including interfering with (cross-talking with) the properties of other UiEntities.

Details of this particular issue: Removing one UiEntity and its children can affect the color and positions of another remaining UiEntity