@dcl/react-ecs 7.29.1-35862852104.commit-1f44e80 → 7.29.1-35901015152.commit-d1b7b96

package/dist/components/Button/index.js

@@ -29,7 +29,7 @@ function getButtonProps(props) {
  */
 /* @__PURE__ */
 export function Button(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...otherProps } = props;
     const buttonProps = getButtonProps(props);
     const uiBackgroundProps = parseUiBackground({
         ...buttonProps.uiBackground,
@@ -58,5 +58,5 @@ export function Button(props) {
             uiBackgroundProps.color = { ...uiBackgroundProps.color, a: uiBackgroundProps.color.a / 2 };
         }
     }
-    return (ReactEcs.createElement("entity", { onMouseDown: !!props.disabled ? undefined : onMouseDown, onMouseUp: !!props.disabled ? undefined : onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
+    return (ReactEcs.createElement("entity", { onMouseDown: !!props.disabled ? undefined : onMouseDown, onMouseUp: !!props.disabled ? undefined : onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDrag: onMouseDrag, onMouseDragLocked: onMouseDragLocked, onMouseDragEnd: onMouseDragEnd, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
 }

package/dist/components/Dropdown/index.js

@@ -34,7 +34,7 @@ function parseUiDropdown(props) {
  */
 /* @__PURE__ */
 export function Dropdown(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...otherProps } = props;
     const dropdownProps = parseUiDropdown(otherProps);
     const commonProps = parseProps({
         uiTransform,
@@ -42,7 +42,10 @@ export function Dropdown(props) {
         onMouseDown,
         onMouseUp,
         onMouseEnter,
-        onMouseLeave
+        onMouseLeave,
+        onMouseDrag,
+        onMouseDragLocked,
+        onMouseDragEnd
     });
     return ReactEcs.createElement("entity", { ...commonProps, uiDropdown: dropdownProps });
 }

package/dist/components/Input/index.js

@@ -35,7 +35,7 @@ function parseUiInput(props) {
  * @category Component
  */ /* @__PURE__ */
 export function Input(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...otherProps } = props;
     const inputProps = parseUiInput(otherProps);
     const commonProps = parseProps({
         uiTransform,
@@ -43,7 +43,10 @@ export function Input(props) {
         onMouseDown,
         onMouseUp,
         onMouseEnter,
-        onMouseLeave
+        onMouseLeave,
+        onMouseDrag,
+        onMouseDragLocked,
+        onMouseDragEnd
     });
     return ReactEcs.createElement("entity", { ...commonProps, uiInput: inputProps });
 }

package/dist/components/Label/index.js

@@ -16,14 +16,17 @@ export { scaleFontSize } from './utils';
  */
 /* @__PURE__ */
 export function Label(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...uiTextProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...uiTextProps } = props;
     const commonProps = parseProps({
         uiTransform,
         uiBackground,
         onMouseDown,
         onMouseUp,
         onMouseEnter,
-        onMouseLeave
+        onMouseLeave,
+        onMouseDrag,
+        onMouseDragLocked,
+        onMouseDragEnd
     });
     const { font, textAlign, fontSize, textWrap, ...textProps } = uiTextProps;
     const uiText = {

package/dist/components/Label/types.d.ts

@@ -17,6 +17,8 @@ export interface UiLabelProps {
     font?: UiFontType | undefined;
     /** Behaviour when text reached. @defaultValue 'wrap' */
     textWrap?: UiTextWrapType | undefined;
+    /** A font file in the scene, or a Google Fonts family name; `font` is the fallback. @defaultValue undefined */
+    fontSrc?: string | undefined;
 }
 /**
  * @public

package/dist/components/listeners/types.d.ts

@@ -1,8 +1,10 @@
+import { PBPointerEventsResult } from '@dcl/ecs';
 /**
- * Callback function to be triggered on a specified event
+ * Callback function to be triggered on a specified event. Receives the pointer event that
+ * fired it (button, hit, and for drags the pointer delta), which handlers may ignore.
  * @public
  */
-export type Callback = () => void;
+export type Callback = (event: PBPointerEventsResult) => void;
 /**
  * User key event Listeners
  * @public
@@ -16,4 +18,10 @@ export type Listeners = {
     onMouseEnter?: Callback;
     /** triggered on mouse leave event */
     onMouseLeave?: Callback;
+    /** triggered while the pointer is dragged after pressing on the element */
+    onMouseDrag?: Callback;
+    /** triggered while the pointer is dragged with the cursor locked in place */
+    onMouseDragLocked?: Callback;
+    /** triggered when a drag that started on the element ends */
+    onMouseDragEnd?: Callback;
 };

package/dist/components/listeners/types.js

@@ -2,7 +2,10 @@ const listeners = {
     onMouseDown: undefined,
     onMouseUp: undefined,
     onMouseEnter: undefined,
-    onMouseLeave: undefined
+    onMouseLeave: undefined,
+    onMouseDrag: undefined,
+    onMouseDragLocked: undefined,
+    onMouseDragEnd: undefined
 };
 const listenersKey = Object.keys(listeners);
 /**

package/dist/components/uiBackground/types.d.ts

@@ -1,4 +1,4 @@
-import { BorderRect } from '@dcl/ecs';
+import { BorderRect, Entity } from '@dcl/ecs';
 import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
 /**
  * @public
@@ -15,6 +15,8 @@ export interface UiBackgroundProps {
     uvs?: number[];
     /** AvatarTexture for the background */
     avatarTexture?: UiAvatarTexture;
+    /** VideoTexture for the background: the frames of a VideoPlayer on another entity */
+    videoTexture?: UiVideoTexture;
     /** Texture for the background */
     texture?: UiTexture;
 }
@@ -27,6 +29,15 @@ export interface UiAvatarTexture {
     wrapMode?: TextureWrapType;
     filterMode?: TextureFilterType;
 }
+/**
+ * Video Texture
+ * @public
+ */
+export interface UiVideoTexture {
+    videoPlayerEntity: Entity;
+    wrapMode?: TextureWrapType;
+    filterMode?: TextureFilterType;
+}
 /**
  * Texture
  * @public

package/dist/components/uiBackground/utils.js

@@ -30,6 +30,14 @@ export function getTexture(props) {
             }
         };
     }
+    if (props.videoTexture) {
+        return {
+            tex: {
+                $case: 'videoTexture',
+                videoTexture: parseTexture(props.videoTexture)
+            }
+        };
+    }
     return undefined;
 }
 function parseTexture(texture) {

package/dist/components/uiTransform/index.js

@@ -1,4 +1,4 @@
-import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parseBorderColor, parseBorderRadius, parseBorderWidth, parsePosition, parseSize } from './utils';
+import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, getScrollPosition, getScrollVisible, parseBorderColor, parseBorderRadius, parseBorderWidth, parsePosition, parseSize } from './utils';
 /**
  * @internal
  */
@@ -60,7 +60,7 @@ const defaultUiTransform = {
  */
 /* @__PURE__ */
 export function parseUiTransform(props = {}) {
-    const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, borderRadius, borderWidth, borderColor, ...otherProps } = props;
+    const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, borderRadius, borderWidth, borderColor, scrollPosition, scrollVisible, ...otherProps } = props;
     return {
         ...defaultUiTransform,
         ...otherProps,
@@ -86,6 +86,8 @@ export function parseUiTransform(props = {}) {
         ...(flexWrap && getFlexWrap(flexWrap)),
         ...(borderRadius && parseBorderRadius(borderRadius)),
         ...(borderWidth && parseBorderWidth(borderWidth)),
-        ...(borderColor && parseBorderColor(borderColor))
+        ...(borderColor && parseBorderColor(borderColor)),
+        ...(scrollPosition && getScrollPosition(scrollPosition)),
+        ...(scrollVisible && getScrollVisible(scrollVisible))
     };
 }

package/dist/components/uiTransform/types.d.ts

@@ -1,4 +1,5 @@
 import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
+import { Vector2 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/vectors.gen';
 import { ScaleUnit } from '../types';
 /**
  * unit value specified. i.e. 1 || '100%' || '1px' || '10vw'
@@ -131,4 +132,15 @@ export interface UiTransformProps {
     opacity?: number;
     /** default 0 */
     zIndex?: number;
+    /** A reference id for the element, e.g. as a scrollPosition target or for SetUiFocus. default empty */
+    elementId?: string;
+    /** Scroll offset when overflow is 'scroll': a position, or the elementId of a child to scroll to. default (0, 0) */
+    scrollPosition?: Vector2 | string;
+    /** Which scrollbars to show when overflow is 'scroll'. default 'both' */
+    scrollVisible?: ScrollVisibleType;
 }
+/**
+ * Which scrollbars are shown when the overflow is scrollable
+ * @public
+ */
+export type ScrollVisibleType = 'horizontal' | 'vertical' | 'both' | 'hidden';

package/dist/components/uiTransform/utils.js

@@ -244,3 +244,24 @@ const parsePointerFilter = {
     none: 0 /* PointerFilterMode.PFM_NONE */,
     block: 1 /* PointerFilterMode.PFM_BLOCK */
 };
+/**
+ * @internal
+ */
+export function getScrollPosition(scrollPosition) {
+    if (typeof scrollPosition === 'string') {
+        return { scrollPosition: { value: { $case: 'reference', reference: scrollPosition } } };
+    }
+    return { scrollPosition: { value: { $case: 'position', position: scrollPosition } } };
+}
+const parseScrollVisible = {
+    both: 0 /* ShowScrollBar.SSB_BOTH */,
+    hidden: 3 /* ShowScrollBar.SSB_HIDDEN */,
+    horizontal: 2 /* ShowScrollBar.SSB_ONLY_HORIZONTAL */,
+    vertical: 1 /* ShowScrollBar.SSB_ONLY_VERTICAL */
+};
+/**
+ * @internal
+ */
+export function getScrollVisible(scrollVisible) {
+    return { scrollVisible: parseScrollVisible[scrollVisible] };
+}

package/dist/react-ecs.d.ts

@@ -23,6 +23,9 @@ export type EntityComponents = {
     onMouseUp: Callback;
     onMouseEnter: Callback;
     onMouseLeave: Callback;
+    onMouseDrag: Callback;
+    onMouseDragLocked: Callback;
+    onMouseDragEnd: Callback;
 };
 /**
  * @hidden

package/dist/reconciler/index.d.ts

@@ -1,6 +1,6 @@
 import { Entity, IEngine, PointerEventsSystem } from '@dcl/ecs';
 import { ReactEcs } from '../react-ecs';
-export declare function createReconciler(engine: Pick<IEngine, 'getComponent' | 'addEntity' | 'removeEntity' | 'defineComponentFromSchema' | 'getEntitiesWith'>, pointerEvents: PointerEventsSystem): {
+export declare function createReconciler(engine: Pick<IEngine, 'getComponent' | 'addEntity' | 'removeEntity' | 'defineComponentFromSchema' | 'getEntitiesWith'>, pointerEvents: PointerEventsSystem, rootEntity?: Entity): {
     update: (component: ReactEcs.JSX.ReactNode) => number;
     getEntities: () => Entity[];
 };

package/dist/reconciler/index.js

@@ -8,11 +8,17 @@ function getPointerEnum(pointerKey) {
         onMouseDown: 1 /* PointerEventType.PET_DOWN */,
         onMouseUp: 0 /* PointerEventType.PET_UP */,
         onMouseEnter: 2 /* PointerEventType.PET_HOVER_ENTER */,
-        onMouseLeave: 3 /* PointerEventType.PET_HOVER_LEAVE */
+        onMouseLeave: 3 /* PointerEventType.PET_HOVER_LEAVE */,
+        onMouseDrag: 7 /* PointerEventType.PET_DRAG */,
+        onMouseDragLocked: 6 /* PointerEventType.PET_DRAG_LOCKED */,
+        onMouseDragEnd: 8 /* PointerEventType.PET_DRAG_END */
     };
     return pointers[pointerKey];
 }
-export function createReconciler(engine, pointerEvents) {
+export function createReconciler(engine, pointerEvents, 
+// When set, every entity this reconciler creates is parented to it -- a UiCanvas on the root
+// entity then renders the tree to a texture instead of the screen.
+rootEntity) {
     // Store all the entities so when we destroy the UI we can also destroy them
     const entities = new Set();
     // Store the onChange callbacks to be runned every time a Result has changed
@@ -29,6 +35,7 @@ export function createReconciler(engine, pointerEvents) {
     const UiInputResult = components.UiInputResult(engine);
     const UiDropdown = components.UiDropdown(engine);
     const UiDropdownResult = components.UiDropdownResult(engine);
+    const Transform = components.Transform(engine);
     const UiInputBinding = components.UiInputBinding(engine);
     // Component ID Helper
     const getComponentId = {
@@ -39,17 +46,14 @@ export function createReconciler(engine, pointerEvents) {
         uiDropdown: UiDropdown.componentId,
         uiInputBinding: UiInputBinding.componentId
     };
-    function pointerEventCallback(entity, pointerEvent) {
+    function pointerEventCallback(entity, pointerEvent, event) {
         const callback = clickEvents.get(entity)?.get(pointerEvent);
         if (callback)
-            callback();
+            callback(event);
         return;
     }
     function updateTree(instance, props) {
-        // `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');
+        upsertComponent(instance, props, 'uiTransform');
     }
     function upsertListener(instance, update) {
         if (update.type === 'delete' || !update.props) {
@@ -66,6 +70,15 @@ export function createReconciler(engine, pointerEvents) {
             else if (update.component === 'onMouseLeave') {
                 pointerEvents.removeOnPointerHoverLeave(instance.entity);
             }
+            else if (update.component === 'onMouseDrag') {
+                pointerEvents.removeOnPointerDrag(instance.entity);
+            }
+            else if (update.component === 'onMouseDragLocked') {
+                pointerEvents.removeOnPointerDragLocked(instance.entity);
+            }
+            else if (update.component === 'onMouseDragEnd') {
+                pointerEvents.removeOnPointerDragEnd(instance.entity);
+            }
             return;
         }
         if (update.props) {
@@ -81,7 +94,13 @@ export function createReconciler(engine, pointerEvents) {
                     ? pointerEvents.onPointerUp
                     : update.component === 'onMouseEnter'
                         ? pointerEvents.onPointerHoverEnter
-                        : update.component === 'onMouseLeave' && pointerEvents.onPointerHoverLeave;
+                        : update.component === 'onMouseLeave'
+                            ? pointerEvents.onPointerHoverLeave
+                            : update.component === 'onMouseDrag'
+                                ? pointerEvents.onPointerDrag
+                                : update.component === 'onMouseDragLocked'
+                                    ? pointerEvents.onPointerDragLocked
+                                    : update.component === 'onMouseDragEnd' && pointerEvents.onPointerDragEnd;
             if (pointerEventSystem) {
                 pointerEventSystem({
                     entity: instance.entity,
@@ -91,7 +110,7 @@ export function createReconciler(engine, pointerEvents) {
                         // This is needed for the renderer to know which entities are clickeables
                         showFeedback: true
                     }
-                }, () => pointerEventCallback(instance.entity, pointerEvent));
+                }, (event) => pointerEventCallback(instance.entity, pointerEvent, event));
             }
         }
     }
@@ -150,6 +169,8 @@ 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
@@ -192,36 +213,6 @@ 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);
@@ -248,6 +239,9 @@ export function createReconciler(engine, pointerEvents) {
         ...noopConfig,
         createInstance(type, props) {
             const entity = engine.addEntity();
+            if (rootEntity !== undefined) {
+                Transform.createOrReplace(entity, { parent: rootEntity });
+            }
             entities.add(entity);
             const instance = {
                 entity,
@@ -276,7 +270,6 @@ export function createReconciler(engine, pointerEvents) {
         appendChild,
         appendChildToContainer: appendChild,
         appendInitialChild: appendChild,
-        insertInContainerBefore: insertBefore,
         removeChild: removeChild,
         prepareUpdate(_instance, _type, oldProps, newProps) {
             return componentKeys
@@ -297,20 +290,42 @@ export function createReconciler(engine, pointerEvents) {
                 }
             }
         },
-        insertBefore,
-        removeChildFromContainer: removeChild
+        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);
+        }
     };
     const reconciler = Reconciler(hostConfig);
-    // 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, '', 
+    const root = reconciler.createContainer({}, 0, null, false, null, '', 
     /* istanbul ignore next */
     function () { }, null);
     return {

package/dist/reconciler/utils.js

@@ -49,6 +49,9 @@ const entityComponent = {
     onMouseUp: undefined,
     onMouseEnter: undefined,
     onMouseLeave: undefined,
+    onMouseDrag: undefined,
+    onMouseDragLocked: undefined,
+    onMouseDragEnd: undefined,
     uiInput: undefined,
     uiDropdown: undefined,
     uiInputBinding: undefined

package/dist/system.d.ts

@@ -27,17 +27,6 @@ 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; a renderer zIndex of 0 is interpreted as "unset"
-     * (positional order); elements inside a renderer keep their own `zIndex`.
-     */
-    zIndex?: number;
 };
 /**
  * @public
@@ -85,6 +74,20 @@ export interface ReactBasedUiSystem {
      * @param entity - The entity whose UI renderer should be removed
      */
     removeUiRenderer(entity: Entity): void;
+    /**
+     * Render a UI tree to a texture. The tree is rooted at `entity`, which must carry a UiCanvas
+     * describing the texture; the result can be sampled through `TextureUnion.uiTexture`. Replaces
+     * any texture renderer already set on the entity, and is torn down when the entity is removed.
+     *
+     * @param entity - The UiCanvas entity the UI tree hangs from
+     * @param ui - The UI component to render
+     */
+    setTextureRenderer(entity: Entity, ui: UiComponent): void;
+    /**
+     * Remove a texture renderer previously set with setTextureRenderer(), destroying its entities.
+     * @param entity - The UiCanvas entity the renderer was set on
+     */
+    removeTextureRenderer(entity: Entity): void;
 }
 /**
  * @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, UiEntity } from './components';
+import { InteractableArea, ScreenInsetArea } from './components';
 import { isMobile } from './platform';
 /**
  * Default virtual screen size used on mobile platforms, and the size 16:9
@@ -47,14 +47,18 @@ 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;
+    // UI trees rendered to a texture, keyed by their UiCanvas entity. Each needs its own reconciler
+    // because the root parent is a per-reconciler property.
+    const textureRenderers = new Map();
+    function destroyTextureRenderer(entity) {
+        const entry = textureRenderers.get(entity);
+        if (!entry)
+            return;
+        textureRenderers.delete(entity);
+        for (const uiEntity of entry.renderer.getEntities()) {
+            engine.removeEntity(uiEntity);
+        }
+    }
     const UiCanvasInformation = ecsComponents.UiCanvasInformation(engine);
     // Unique owner to prevent other UI systems resetting this scale factor.
     const uiScaleFactorOwner = Symbol('react-ecs-ui-scale');
@@ -127,58 +131,37 @@ 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, unless a `zIndex` needs a root entity to live on. Applied per
-     * renderer, so each renderer can use a different inset.
+     * screen. Applied per renderer, so each renderer can use a different inset.
      */
-    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 } };
+    function wrapWithScreenInset(ui, inset, key) {
         // 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 (options?.screenInset ?? DEFAULT_SCREEN_INSET) {
+        switch (inset ?? DEFAULT_SCREEN_INSET) {
             case 'device':
-                return React.createElement(ScreenInsetArea, wrapperProps, React.createElement(ui));
+                return React.createElement(ScreenInsetArea, { key }, React.createElement(ui));
             case 'interactable':
-                return React.createElement(InteractableArea, wrapperProps, React.createElement(ui));
+                return React.createElement(InteractableArea, { key }, React.createElement(ui));
             // 'none' — the whole screen, no wrapper entity
             default:
-                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));
+                return React.createElement(ui, { key });
         }
     }
     function ReactBasedUiSystem() {
         const components = [];
-        if (uiComponent !== undefined && mainOrder === undefined)
-            mainOrder = nextOrder++;
-        let mainPushed = uiComponent === undefined;
+        // Add main UI component
+        if (uiComponent) {
+            components.push(wrapWithScreenInset(uiComponent, mainOptions?.screenInset, '__main__'));
+        }
         const entitiesToRemove = [];
         for (const [entity, entry] of additionalRenderers) {
             // Check for entity-based cleanup
             if (engine.getEntityState(entity) === EntityState.Removed) {
                 entitiesToRemove.push(entity);
-                continue;
             }
-            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;
+            else {
+                components.push(wrapWithScreenInset(entry.ui, entry.options?.screenInset, `__entity_${entity}__`));
             }
-            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) {
@@ -191,6 +174,14 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
         else {
             renderer.update(null);
         }
+        for (const [entity, entry] of textureRenderers) {
+            if (engine.getEntityState(entity) === EntityState.Removed) {
+                destroyTextureRenderer(entity);
+            }
+            else {
+                entry.renderer.update(React.createElement(entry.ui));
+            }
+        }
     }
     function UiScaleSystem() {
         const canvasInfo = UiCanvasInformation.getOrNull(engine.RootEntity);
@@ -248,17 +239,26 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
             for (const entity of renderer.getEntities()) {
                 engine.removeEntity(entity);
             }
+            for (const entity of textureRenderers.keys()) {
+                destroyTextureRenderer(entity);
+            }
         },
         setUiRenderer(ui, options) {
             uiComponent = ui;
             mainOptions = options;
         },
         addUiRenderer(entity, ui, options) {
-            // A replacement keeps its place in the stacking order.
-            additionalRenderers.set(entity, { ui, options, order: additionalRenderers.get(entity)?.order });
+            additionalRenderers.set(entity, { ui, options });
         },
         removeUiRenderer(entity) {
             additionalRenderers.delete(entity);
+        },
+        setTextureRenderer(entity, ui) {
+            destroyTextureRenderer(entity);
+            textureRenderers.set(entity, { renderer: createReconciler(engine, pointerSystem, entity), ui });
+        },
+        removeTextureRenderer(entity) {
+            destroyTextureRenderer(entity);
         }
     };
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.29.1-35862852104.commit-1f44e80",
+  "version": "7.29.1-35901015152.commit-d1b7b96",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.29.1-35862852104.commit-1f44e80",
+    "@dcl/ecs": "7.29.1-35901015152.commit-d1b7b96",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -40,5 +40,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "1f44e80aec8fa365230f39956a8f6526011c6bd5"
+  "commit": "d1b7b964cd184465c1b65118e47b5dc6be68a184"
 }