@dcl/react-ecs 7.24.4-28553021180.commit-e8ab68c → 7.24.4-28656241733.commit-c65544e

package/dist/components/InteractableArea/index.d.ts

@@ -0,0 +1,23 @@
+import { ReactEcs } from '../../react-ecs';
+import { UiInteractableAreaProps } from './types';
+/**
+ *
+ * @public
+ * InteractableArea component
+ *
+ * Constrains its children to the area inside the renderer-reported interactable
+ * area. This is the portion of the screen not covered by client UI such as the
+ * minimap, chat window, or other platform overlays. On the Unity desktop client
+ * the left 25% of the screen is reserved for client UI, so this container
+ * positions its children within the remaining 75%.
+ *
+ * The container is absolutely positioned with top/left/right/bottom matching
+ * the current `UiCanvasInformation.interactableArea`, so a child sized
+ * 100%x100% fills the interactable area exactly.
+ *
+ * @example
+ * <InteractableArea><MyHud /></InteractableArea>
+ *
+ * @category Component
+ */
+export declare function InteractableArea(props: UiInteractableAreaProps): ReactEcs.JSX.Element;

package/dist/components/InteractableArea/index.js

@@ -0,0 +1,33 @@
+import { ReactEcs } from '../../react-ecs';
+import { UiEntity } from '../index';
+import { getInteractableArea } from '../utils';
+/**
+ *
+ * @public
+ * InteractableArea component
+ *
+ * Constrains its children to the area inside the renderer-reported interactable
+ * area. This is the portion of the screen not covered by client UI such as the
+ * minimap, chat window, or other platform overlays. On the Unity desktop client
+ * the left 25% of the screen is reserved for client UI, so this container
+ * positions its children within the remaining 75%.
+ *
+ * The container is absolutely positioned with top/left/right/bottom matching
+ * the current `UiCanvasInformation.interactableArea`, so a child sized
+ * 100%x100% fills the interactable area exactly.
+ *
+ * @example
+ * <InteractableArea><MyHud /></InteractableArea>
+ *
+ * @category Component
+ */
+/* @__PURE__ */
+export function InteractableArea(props) {
+    const { top, left, right, bottom } = getInteractableArea();
+    const { uiTransform, ...otherProps } = props;
+    return (ReactEcs.createElement(UiEntity, { ...otherProps, uiTransform: {
+            ...uiTransform,
+            positionType: 'absolute',
+            position: { top, left, right, bottom }
+        } }));
+}

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

@@ -0,0 +1,23 @@
+import { EntityPropTypes } from '../types';
+/**
+ * InteractableArea component props
+ *
+ * The container reads the current `interactableArea` reported by the renderer
+ * via `UiCanvasInformation` (the HUD-safe zone — the portion of the screen not
+ * covered by client UI such as the minimap, chat window, or other overlays) and
+ * constrains its children to the area inside those insets using absolute
+ * positioning. Layout props that control the container's own position
+ * (`positionType`, `position`) are owned by the component and are not
+ * configurable from props — every other layout, background and event prop is
+ * forwarded as usual.
+ *
+ * @public
+ */
+export type UiInteractableAreaProps = Omit<EntityPropTypes, 'uiTransform'> & {
+    /**
+     * Layout overrides forwarded to the underlying entity. The
+     * `positionType` and `position` fields are reserved by the container and
+     * any value provided here is ignored.
+     */
+    uiTransform?: Omit<NonNullable<EntityPropTypes['uiTransform']>, 'positionType' | 'position'>;
+};

package/dist/components/InteractableArea/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -10,11 +10,13 @@ export * from './Dropdown/types';
 export * from './Label/types';
 export * from './Button/types';
 export * from './ScreenInsetArea/types';
+export * from './InteractableArea/types';
 export { Dropdown } from './Dropdown';
 export { Input } from './Input';
 export { Label, scaleFontSize } from './Label';
 export { Button } from './Button';
 export { ScreenInsetArea } from './ScreenInsetArea';
+export { InteractableArea } from './InteractableArea';
 /**
  * @public
  * @category Component

package/dist/components/index.js

@@ -10,11 +10,13 @@ export * from './Dropdown/types';
 export * from './Label/types';
 export * from './Button/types';
 export * from './ScreenInsetArea/types';
+export * from './InteractableArea/types';
 export { Dropdown } from './Dropdown';
 export { Input } from './Input';
 export { Label, scaleFontSize } from './Label';
 export { Button } from './Button';
 export { ScreenInsetArea } from './ScreenInsetArea';
+export { InteractableArea } from './InteractableArea';
 /**
  * @public
  * @category Component

package/dist/components/utils.js

@@ -6,6 +6,8 @@ let uiScaleOwner = undefined;
 const ZERO_INSETS = { top: 0, left: 0, right: 0, bottom: 0 };
 let screenInsetArea = { ...ZERO_INSETS };
 let screenInsetAreaOwner = undefined;
+let interactableArea = { ...ZERO_INSETS };
+let interactableAreaOwner = undefined;
 /**
  * @internal
  */
@@ -124,6 +126,42 @@ export function resetScreenInsetArea(owner) {
     screenInsetAreaOwner = undefined;
     screenInsetArea = { ...ZERO_INSETS };
 }
+/**
+ * @internal
+ */
+export function getInteractableArea() {
+    return { ...interactableArea };
+}
+/**
+ * Sets the global interactable area.
+ *
+ * The `owner` symbol implements a cooperative reset-protection scheme shared
+ * with {@link resetInteractableArea}:
+ *  - Writes always succeed — last writer claims ownership (the most recent
+ *    `owner` passed to `set` is the one allowed to `reset`).
+ *  - Resets from a non-matching owner are ignored, so a stale system can't
+ *    stomp the active area while another system is driving it.
+ *  - A reset called without an owner always wins (used by tests / teardown).
+ *
+ * @internal
+ */
+export function setInteractableArea(next, owner) {
+    if (owner) {
+        interactableAreaOwner = owner;
+    }
+    interactableArea = { top: next.top, left: next.left, right: next.right, bottom: next.bottom };
+}
+/**
+ * @internal
+ */
+export function resetInteractableArea(owner) {
+    // No-op for non-owners (see ownership rules on `setInteractableArea`).
+    // A reset with no owner always wins — used by tests and teardown.
+    if (owner && interactableAreaOwner !== owner)
+        return;
+    interactableAreaOwner = undefined;
+    interactableArea = { ...ZERO_INSETS };
+}
 /**
  * @internal
  */

package/dist/system.js

@@ -2,7 +2,7 @@ import { EntityState } from '@dcl/ecs';
 import * as ecsComponents from '@dcl/ecs/dist/components';
 import React from 'react';
 import { createReconciler } from './reconciler';
-import { getUiScaleFactor, resetScreenInsetArea, resetUiScaleFactor, setScreenInsetArea, setUiScaleFactor } from './components/utils';
+import { getUiScaleFactor, resetInteractableArea, resetScreenInsetArea, resetUiScaleFactor, setInteractableArea, setScreenInsetArea, setUiScaleFactor } from './components/utils';
 /**
  * @public
  */
@@ -16,6 +16,8 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
     const uiScaleFactorOwner = Symbol('react-ecs-ui-scale');
     // Unique owner for the screen inset module variable.
     const screenInsetAreaOwner = Symbol('react-ecs-screen-inset-area');
+    // Unique owner for the interactable area module variable.
+    const interactableAreaOwner = Symbol('react-ecs-interactable-area');
     function getActiveVirtualSize() {
         // Main renderer options win; otherwise use the first additional renderer option.
         if (virtualSize)
@@ -62,6 +64,10 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
         if (canvasInfo?.screenInsetArea) {
             setScreenInsetArea(canvasInfo.screenInsetArea, screenInsetAreaOwner);
         }
+        // Update the interactable area module variable unconditionally.
+        if (canvasInfo?.interactableArea) {
+            setInteractableArea(canvasInfo.interactableArea, interactableAreaOwner);
+        }
         const activeVirtualSize = getActiveVirtualSize();
         if (!activeVirtualSize) {
             // Reset only if this system owns the scale factor.
@@ -91,6 +97,7 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
             engine.removeSystem(ReactBasedUiSystem);
             resetUiScaleFactor(uiScaleFactorOwner);
             resetScreenInsetArea(screenInsetAreaOwner);
+            resetInteractableArea(interactableAreaOwner);
             for (const entity of renderer.getEntities()) {
                 engine.removeEntity(entity);
             }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.24.4-28553021180.commit-e8ab68c",
+  "version": "7.24.4-28656241733.commit-c65544e",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.24.4-28553021180.commit-e8ab68c",
+    "@dcl/ecs": "7.24.4-28656241733.commit-c65544e",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -40,5 +40,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "e8ab68c18f53041c643a4971478eff00a29aa732"
+  "commit": "c65544e970e6bc383df8954be6ef562616ef892b"
 }