@dcl/react-ecs 7.28.1-34955459026.commit-7db2d46 → 7.29.1-34986384248.commit-bb45080

package/dist/reconciler/index.js

@@ -46,7 +46,10 @@ export function createReconciler(engine, pointerEvents) {
         return;
     }
     function updateTree(instance, props) {
-        upsertComponent(instance, props, 'uiTransform');
+        // `rightOf` is a required int32 where 0 means "first sibling". A missing left
+        // neighbour is written as 0 so the first child of any parent (the canvas root
+        // included) serializes the same way as an explicit `rightOf: 0`.
+        upsertComponent(instance, { ...props, rightOf: props.rightOf ?? 0 }, 'uiTransform');
     }
     function upsertListener(instance, update) {
         if (update.type === 'delete' || !update.props) {
@@ -147,8 +150,6 @@ export function createReconciler(engine, pointerEvents) {
         }
     }
     function appendChild(parent, child) {
-        if (!child || !Object.keys(parent).length)
-            return;
         const isReorder = parent._child.find((c) => c.entity === child.entity);
         // If its a reorder its seems that its a mutation of an array with key prop
         // We need to move the child to the end of the array
@@ -191,6 +192,36 @@ export function createReconciler(engine, pointerEvents) {
         }
         removeChildEntity(child);
     }
+    function insertBefore(parentInstance, child, beforeChild) {
+        // Handle reorder: if child already exists in this parent, remove it from its old position
+        // and fix up the old neighbor's rightOf before inserting at the new position.
+        const existingIndex = parentInstance._child.findIndex((c) => c.entity === child.entity);
+        if (existingIndex !== -1) {
+            // If beforeChild.rightOf already points to child, child is already in the correct
+            // position in the rightOf chain. Setting child.rightOf = beforeChild.rightOf would
+            // produce a self-cycle (child.rightOf = child.entity).
+            if (beforeChild.rightOf === child.entity) {
+                return;
+            }
+            const oldNextSibling = parentInstance._child[existingIndex + 1];
+            if (oldNextSibling) {
+                oldNextSibling.rightOf = child.rightOf;
+                updateTree(oldNextSibling, { rightOf: oldNextSibling.rightOf });
+            }
+            parentInstance._child.splice(existingIndex, 1);
+        }
+        const beforeChildIndex = parentInstance._child.findIndex((c) => c.entity === beforeChild.entity);
+        parentInstance._child = [
+            ...parentInstance._child.slice(0, beforeChildIndex),
+            child,
+            ...parentInstance._child.slice(beforeChildIndex)
+        ];
+        child.rightOf = beforeChild.rightOf;
+        beforeChild.rightOf = child.entity;
+        child.parent = parentInstance.entity;
+        updateTree(child, { rightOf: child.rightOf, parent: child.parent });
+        updateTree(beforeChild, { rightOf: beforeChild.rightOf });
+    }
     function updateOnChange(entity, componentId, state) {
         const hasEvent = changeEvents.has(entity);
         const event = changeEvents.get(entity) || changeEvents.set(entity, new Map()).get(entity);
@@ -245,6 +276,7 @@ export function createReconciler(engine, pointerEvents) {
         appendChild,
         appendChildToContainer: appendChild,
         appendInitialChild: appendChild,
+        insertInContainerBefore: insertBefore,
         removeChild: removeChild,
         prepareUpdate(_instance, _type, oldProps, newProps) {
             return componentKeys
@@ -265,42 +297,20 @@ export function createReconciler(engine, pointerEvents) {
                 }
             }
         },
-        insertBefore(parentInstance, child, beforeChild) {
-            // Handle reorder: if child already exists in this parent, remove it from its old position
-            // and fix up the old neighbor's rightOf before inserting at the new position.
-            const existingIndex = parentInstance._child.findIndex((c) => c.entity === child.entity);
-            if (existingIndex !== -1) {
-                // If beforeChild.rightOf already points to child, child is already in the correct
-                // position in the rightOf chain. Setting child.rightOf = beforeChild.rightOf would
-                // produce a self-cycle (child.rightOf = child.entity).
-                if (beforeChild.rightOf === child.entity) {
-                    return;
-                }
-                const oldNextSibling = parentInstance._child[existingIndex + 1];
-                if (oldNextSibling) {
-                    oldNextSibling.rightOf = child.rightOf;
-                    updateTree(oldNextSibling, { rightOf: oldNextSibling.rightOf });
-                }
-                parentInstance._child.splice(existingIndex, 1);
-            }
-            const beforeChildIndex = parentInstance._child.findIndex((c) => c.entity === beforeChild.entity);
-            parentInstance._child = [
-                ...parentInstance._child.slice(0, beforeChildIndex),
-                child,
-                ...parentInstance._child.slice(beforeChildIndex)
-            ];
-            child.rightOf = beforeChild.rightOf;
-            beforeChild.rightOf = child.entity;
-            child.parent = parentInstance.entity;
-            updateTree(child, { rightOf: child.rightOf, parent: child.parent });
-            updateTree(beforeChild, { rightOf: beforeChild.rightOf });
-        },
-        removeChildFromContainer(parenInstance, child) {
-            removeChildEntity(child);
-        }
+        insertBefore,
+        removeChildFromContainer: removeChild
     };
     const reconciler = Reconciler(hostConfig);
-    const root = reconciler.createContainer({}, 0, null, false, null, '', 
+    // The container is a real Instance standing in for the canvas root, so
+    // top-level elements get the same parent/rightOf bookkeeping as any other
+    // sibling group. It is never rendered itself.
+    const containerInstance = {
+        entity: CANVAS_ROOT_ENTITY,
+        _child: [],
+        parent: undefined,
+        rightOf: undefined
+    };
+    const root = reconciler.createContainer(containerInstance, 0, null, false, null, '', 
     /* istanbul ignore next */
     function () { }, null);
     return {

package/dist/system.d.ts

@@ -27,6 +27,16 @@ export type UiRendererOptions = {
      * can use different insets simultaneously.
      */
     screenInset?: UiScreenInset;
+    /**
+     * Stacking order of this renderer's UI relative to the other renderers (the main
+     * one and every `addUiRenderer`). Higher values render in front. When omitted,
+     * renderers stack in the order they first render, later ones on top; among those
+     * first rendered in the same tick the main UI goes at the back.
+     *
+     * It is applied to the renderer's root container entity, so it only orders whole
+     * renderers against each other; elements inside a renderer keep their own `zIndex`.
+     */
+    zIndex?: number;
 };
 /**
  * @public

package/dist/system.js

@@ -3,7 +3,7 @@ import * as ecsComponents from '@dcl/ecs/dist/components';
 import React from 'react';
 import { createReconciler } from './reconciler';
 import { getUiScaleFactor, resetInteractableArea, resetScreenInsetArea, resetUiScaleFactor, setInteractableArea, setScreenInsetArea, setUiScaleFactor } from './components/utils';
-import { InteractableArea, ScreenInsetArea } from './components';
+import { InteractableArea, ScreenInsetArea, UiEntity } from './components';
 import { isMobile } from './platform';
 /**
  * Default virtual screen size used on mobile platforms, and the size 16:9
@@ -47,6 +47,14 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
     let uiComponent = undefined;
     let mainOptions = undefined;
     const additionalRenderers = new Map();
+    // Renderers are laid out in the order they first render, later ones on top, with
+    // the main UI first among those first rendered in the same tick. That is the order
+    // their entities were created in before the stacking was explicit, so scenes that
+    // set no zIndex keep the stacking they had. A renderer gets its sequence number the
+    // first time it renders and keeps it when replaced; the Map iterates in insertion
+    // order, so it is already sorted by `order` and only the main UI has to be slotted in.
+    let nextOrder = 0;
+    let mainOrder = undefined;
     const UiCanvasInformation = ecsComponents.UiCanvasInformation(engine);
     // Unique owner to prevent other UI systems resetting this scale factor.
     const uiScaleFactorOwner = Symbol('react-ecs-ui-scale');
@@ -119,37 +127,58 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
     /**
      * Wraps a renderer's component in a container positioned within the selected
      * screen inset area. `'none'` adds no wrapper, leaving the UI on the whole
-     * screen. Applied per renderer, so each renderer can use a different inset.
+     * screen, unless a `zIndex` needs a root entity to live on. Applied per
+     * renderer, so each renderer can use a different inset.
      */
-    function wrapWithScreenInset(ui, inset, key) {
+    function wrapWithScreenInset(ui, options, key) {
+        const zIndex = options?.zIndex;
+        // Only forward a provided zIndex: `{ zIndex: undefined }` would override the
+        // transform parser default and change what is written for every renderer.
+        const wrapperProps = zIndex === undefined ? { key } : { key, uiTransform: { zIndex } };
         // An omitted inset is resolved to DEFAULT_SCREEN_INSET ('device') before the
         // switch, so it lands on `case 'device'`. Only an explicit 'none' reaches the
         // `default` clause below — the two are unrelated despite sharing a name.
-        switch (inset ?? DEFAULT_SCREEN_INSET) {
+        switch (options?.screenInset ?? DEFAULT_SCREEN_INSET) {
             case 'device':
-                return React.createElement(ScreenInsetArea, { key }, React.createElement(ui));
+                return React.createElement(ScreenInsetArea, wrapperProps, React.createElement(ui));
             case 'interactable':
-                return React.createElement(InteractableArea, { key }, React.createElement(ui));
+                return React.createElement(InteractableArea, wrapperProps, React.createElement(ui));
             // 'none' — the whole screen, no wrapper entity
             default:
-                return React.createElement(ui, { key });
+                if (zIndex === undefined)
+                    return React.createElement(ui, { key });
+                // A whole-screen container: absolutely positioned on every edge so it
+                // fills the canvas, with the zIndex the renderer is stacked by.
+                return React.createElement(UiEntity, {
+                    key,
+                    uiTransform: { positionType: 'absolute', position: { top: 0, left: 0, right: 0, bottom: 0 }, zIndex }
+                }, React.createElement(ui));
         }
     }
     function ReactBasedUiSystem() {
         const components = [];
-        // Add main UI component
-        if (uiComponent) {
-            components.push(wrapWithScreenInset(uiComponent, mainOptions?.screenInset, '__main__'));
-        }
+        if (uiComponent !== undefined && mainOrder === undefined)
+            mainOrder = nextOrder++;
+        let mainPushed = uiComponent === undefined;
         const entitiesToRemove = [];
         for (const [entity, entry] of additionalRenderers) {
             // Check for entity-based cleanup
             if (engine.getEntityState(entity) === EntityState.Removed) {
                 entitiesToRemove.push(entity);
+                continue;
             }
-            else {
-                components.push(wrapWithScreenInset(entry.ui, entry.options?.screenInset, `__entity_${entity}__`));
+            if (entry.order === undefined)
+                entry.order = nextOrder++;
+            // The main UI goes right before the first renderer that rendered after it.
+            if (!mainPushed && mainOrder < entry.order) {
+                components.push(wrapWithScreenInset(uiComponent, mainOptions, '__main__'));
+                mainPushed = true;
             }
+            components.push(wrapWithScreenInset(entry.ui, entry.options, `__entity_${entity}__`));
+        }
+        // Main UI first rendered after every other renderer (or alone): it goes on top.
+        if (!mainPushed) {
+            components.push(wrapWithScreenInset(uiComponent, mainOptions, '__main__'));
         }
         // Entity-based cleanup
         for (const entity of entitiesToRemove) {
@@ -225,7 +254,8 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
             mainOptions = options;
         },
         addUiRenderer(entity, ui, options) {
-            additionalRenderers.set(entity, { ui, options });
+            // A replacement keeps its place in the stacking order.
+            additionalRenderers.set(entity, { ui, options, order: additionalRenderers.get(entity)?.order });
         },
         removeUiRenderer(entity) {
             additionalRenderers.delete(entity);

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.28.1-34955459026.commit-7db2d46",
+  "version": "7.29.1-34986384248.commit-bb45080",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.28.1-34955459026.commit-7db2d46",
+    "@dcl/ecs": "7.29.1-34986384248.commit-bb45080",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -40,5 +40,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "7db2d4613572a8d72af9166b3df228a3b8f8c427"
+  "commit": "bb450800d3d88bfed04e25cca38b2c833eb3cd53"
 }