@dcl/react-ecs 7.17.1-21217092165.commit-1c2ff72 → 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

@@ -4,12 +4,25 @@ 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.
@@ -22,10 +35,12 @@ export interface ReactBasedUiSystem {
      * @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): void;
+    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;

package/dist/system.js

@@ -1,13 +1,29 @@
 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() {
         const components = [];
         // Add main UI component
@@ -15,13 +31,13 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
             components.push(React.createElement(uiComponent, { key: '__main__' }));
         }
         const entitiesToRemove = [];
-        for (const [entity, component] of additionalRenderers) {
+        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(component, { key: `__entity_${entity}__` }));
+                components.push(React.createElement(entry.ui, { key: `__entity_${entity}__` }));
             }
         }
         // Entity-based cleanup
@@ -36,19 +52,43 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
             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) {
-            additionalRenderers.set(entity, ui);
+        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-21217092165.commit-1c2ff72",
+  "version": "7.17.1-21366395728.commit-ada88b6",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.17.1-21217092165.commit-1c2ff72",
+    "@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": "1c2ff7242cd11eb981666a8318f670c0b302813b"
+  "commit": "ada88b6fe8e93150056e0cade4b94e0c1e7dc850"
 }