@dcl/react-ecs 7.17.1-21043804740.commit-3c928e0 → 7.17.1-21366395728.commit-ada88b6

package/dist/components/Label/utils.js

@@ -1,4 +1,4 @@
-import { calcOnViewport, getScaleCtx } from '../utils';
+import { calcOnViewport, getScaleCtx, getUiScaleFactor } from '../utils';
 const parseFont = {
     'sans-serif': 0 /* Font.F_SANS_SERIF */,
     serif: 1 /* Font.F_SERIF */,
@@ -39,7 +39,7 @@ export function getFontSize(fontSize) {
         return undefined;
     if (typeof fontSize === 'string')
         return { fontSize: calcOnViewport(fontSize) };
-    return { fontSize };
+    return { fontSize: fontSize * getUiScaleFactor() };
 }
 /**
  * Scales a font size depending on a context's width/height

package/dist/components/uiTransform/utils.js

@@ -1,4 +1,4 @@
-import { calcOnViewport } from '../utils';
+import { calcOnViewport, getUiScaleFactor } from '../utils';
 function capitalize(value) {
     return `${value[0].toUpperCase()}${value.slice(1, value.length)}`;
 }
@@ -14,6 +14,9 @@ function isVw(val) {
 function isVh(val) {
     return typeof val === 'string' && val.endsWith('vh');
 }
+function scalePixelValue(value) {
+    return value * getUiScaleFactor();
+}
 function parsePositionUnit(val) {
     function getValue(key, value) {
         return Number(value.slice(0, value.indexOf(key)));
@@ -25,13 +28,13 @@ function parsePositionUnit(val) {
         return [0, 3 /* YGUnit.YGU_AUTO */];
     }
     if (typeof val === 'number' || (typeof val === 'string' && !isNaN(Number(val)))) {
-        return [Number(val), 1 /* YGUnit.YGU_POINT */];
+        return [scalePixelValue(Number(val)), 1 /* YGUnit.YGU_POINT */];
     }
     if (isPercent(val)) {
         return [getValue('%', val), 2 /* YGUnit.YGU_PERCENT */];
     }
     if (isPoint(val)) {
-        return [getValue('px', val), 1 /* YGUnit.YGU_POINT */];
+        return [scalePixelValue(getValue('px', val)), 1 /* YGUnit.YGU_POINT */];
     }
     if (isVw(val) || isVh(val)) {
         return [calcOnViewport(val), 1 /* YGUnit.YGU_POINT */];

package/dist/components/utils.js

@@ -1,6 +1,8 @@
 import { engine, UiCanvasInformation as engineUiCanvasInformation } from '@dcl/ecs';
 import { parseUiBackground } from './uiBackground';
 import { parseUiTransform } from './uiTransform';
+let uiScaleFactor = 1;
+let uiScaleOwner = undefined;
 /**
  * @internal
  */
@@ -45,6 +47,34 @@ export function getScaleCtx(_engine = engine) {
     const { width, height, devicePixelRatio } = canvasInfo;
     return { width, height, ratio: devicePixelRatio };
 }
+/**
+ * @internal
+ */
+export function getUiScaleFactor() {
+    return uiScaleFactor;
+}
+/**
+ * @internal
+ */
+export function setUiScaleFactor(nextScale, owner) {
+    if (!Number.isFinite(nextScale) || nextScale < 0)
+        return;
+    if (owner) {
+        // Mark ownership so only that system can reset the scale.
+        uiScaleOwner = owner;
+    }
+    uiScaleFactor = nextScale;
+}
+/**
+ * @internal
+ */
+export function resetUiScaleFactor(owner) {
+    // Ignore resets from non-owners to avoid stomping active scale.
+    if (owner && uiScaleOwner !== owner)
+        return;
+    uiScaleOwner = undefined;
+    uiScaleFactor = 1;
+}
 /**
  * @internal
  */

package/dist/system.d.ts

@@ -1,15 +1,49 @@
-import type { IEngine, PointerEventsSystem } from '@dcl/ecs';
+import { type Entity, type IEngine, type PointerEventsSystem } from '@dcl/ecs';
 import type { ReactEcs } from './react-ecs';
 /**
  * @public
  */
 export type UiComponent = () => ReactEcs.JSX.ReactNode;
+/**
+ * @public
+ */
+export type UiRendererOptions = {
+    virtualWidth: number;
+    virtualHeight: number;
+};
 /**
  * @public
  */
 export interface ReactBasedUiSystem {
+    /**
+     * Destroy all UI entities and unregister related systems.
+     */
     destroy(): void;
-    setUiRenderer(ui: UiComponent): void;
+    /**
+     * Set the main UI renderer. Optional virtual size defines the global UI scale factor.
+     */
+    setUiRenderer(ui: UiComponent, options?: UiRendererOptions): void;
+    /**
+     * Add a UI renderer associated with an entity. The UI will be automatically cleaned up
+     * when the entity is removed from the engine.
+     *
+     * If a renderer is already associated with the given entity, it will be replaced.
+     *
+     * This allows dynamically adding UI Renderers that are rendered alongside the main
+     * UI set via setUiRenderer().
+     *
+     * @param entity - The entity to associate with this UI renderer. When the entity is removed,
+     *                 the UI renderer is automatically cleaned up.
+     * @param ui - The UI component to render
+     * @param options - Optional virtual size used for UI scale factor when main UI has none
+     */
+    addUiRenderer(entity: Entity, ui: UiComponent, options?: UiRendererOptions): void;
+    /**
+     * Remove a previously added UI renderer by its associated entity.
+     * It does not affect the main UI renderer.
+     * @param entity - The entity whose UI renderer should be removed
+     */
+    removeUiRenderer(entity: Entity): void;
 }
 /**
  * @public

package/dist/system.js

@@ -1,25 +1,97 @@
+import { EntityState } from '@dcl/ecs';
+import * as ecsComponents from '@dcl/ecs/dist/components';
 import React from 'react';
 import { createReconciler } from './reconciler';
+import { getUiScaleFactor, resetUiScaleFactor, setUiScaleFactor } from './components/utils';
 /**
  * @public
  */
 export function createReactBasedUiSystem(engine, pointerSystem) {
     const renderer = createReconciler(engine, pointerSystem);
     let uiComponent = undefined;
+    let virtualSize = undefined;
+    const additionalRenderers = new Map();
+    const UiCanvasInformation = ecsComponents.UiCanvasInformation(engine);
+    // Unique owner to prevent other UI systems resetting this scale factor.
+    const uiScaleFactorOwner = Symbol('react-ecs-ui-scale');
+    function getActiveVirtualSize() {
+        // Main renderer options win; otherwise use the first additional renderer option.
+        if (virtualSize)
+            return virtualSize;
+        for (const entry of additionalRenderers.values()) {
+            if (entry.options)
+                return entry.options;
+        }
+        return undefined;
+    }
     function ReactBasedUiSystem() {
-        if (uiComponent)
-            renderer.update(React.createElement(uiComponent));
+        const components = [];
+        // Add main UI component
+        if (uiComponent) {
+            components.push(React.createElement(uiComponent, { key: '__main__' }));
+        }
+        const entitiesToRemove = [];
+        for (const [entity, entry] of additionalRenderers) {
+            // Check for entity-based cleanup
+            if (engine.getEntityState(entity) === EntityState.Removed) {
+                entitiesToRemove.push(entity);
+            }
+            else {
+                components.push(React.createElement(entry.ui, { key: `__entity_${entity}__` }));
+            }
+        }
+        // Entity-based cleanup
+        for (const entity of entitiesToRemove) {
+            additionalRenderers.delete(entity);
+        }
+        // Always update the renderer - pass null when empty to clear the UI
+        if (components.length > 0) {
+            renderer.update(React.createElement(React.Fragment, null, ...components));
+        }
+        else {
+            renderer.update(null);
+        }
     }
+    function UiScaleSystem() {
+        const activeVirtualSize = getActiveVirtualSize();
+        if (!activeVirtualSize) {
+            // Reset only if this system owns the scale factor.
+            resetUiScaleFactor(uiScaleFactorOwner);
+            return;
+        }
+        const canvasInfo = UiCanvasInformation.getOrNull(engine.RootEntity);
+        if (!canvasInfo)
+            return;
+        const { width, height } = canvasInfo;
+        const { virtualWidth, virtualHeight } = activeVirtualSize;
+        if (!virtualWidth || !virtualHeight)
+            return;
+        const nextScale = Math.min(width / virtualWidth, height / virtualHeight);
+        if (Number.isFinite(nextScale) && nextScale !== getUiScaleFactor()) {
+            // Track ownership when updating to avoid cross-system conflicts.
+            setUiScaleFactor(nextScale, uiScaleFactorOwner);
+        }
+    }
+    engine.addSystem(UiScaleSystem, 100e3 + 1, '@dcl/react-ecs-ui-scale');
     engine.addSystem(ReactBasedUiSystem, 100e3, '@dcl/react-ecs');
     return {
         destroy() {
+            engine.removeSystem(UiScaleSystem);
             engine.removeSystem(ReactBasedUiSystem);
+            resetUiScaleFactor(uiScaleFactorOwner);
             for (const entity of renderer.getEntities()) {
                 engine.removeEntity(entity);
             }
         },
-        setUiRenderer(ui) {
+        setUiRenderer(ui, options) {
             uiComponent = ui;
+            virtualSize = options;
+        },
+        addUiRenderer(entity, ui, options) {
+            additionalRenderers.set(entity, { ui, options });
+        },
+        removeUiRenderer(entity) {
+            additionalRenderers.delete(entity);
         }
     };
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.17.1-21043804740.commit-3c928e0",
+  "version": "7.17.1-21366395728.commit-ada88b6",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.17.1-21043804740.commit-3c928e0",
+    "@dcl/ecs": "7.17.1-21366395728.commit-ada88b6",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -40,5 +40,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "3c928e0a4e46c8020bd70368e02a57efb6f5788c"
+  "commit": "ada88b6fe8e93150056e0cade4b94e0c1e7dc850"
 }