@dcl/react-ecs 7.6.8-12260048919.commit-4123b99 → 7.6.8-12415739875.commit-c9a0fe7

package/dist/components/Button/index.js

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

package/dist/components/Dropdown/index.js

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

package/dist/components/Input/index.js

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

package/dist/components/Label/index.js

@@ -16,12 +16,14 @@ export { scaleFontSize } from './utils';
  */
 /* @__PURE__ */
 export function Label(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...uiTextProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...uiTextProps } = props;
     const commonProps = parseProps({
         uiTransform,
         uiBackground,
         onMouseDown,
-        onMouseUp
+        onMouseUp,
+        onMouseEnter,
+        onMouseLeave
     });
     const { font, textAlign, fontSize, textWrap, ...textProps } = uiTextProps;
     const uiText = {
@@ -29,7 +31,9 @@ export function Label(props) {
         ...getFont(font),
         ...getTextAlign(textAlign),
         ...getFontSize(fontSize),
-        ...getTextWrap(textWrap)
+        ...getTextWrap(textWrap),
+        outlineWidth: props.outlineWidth,
+        outlineColor: props.outlineColor
     };
     return ReactEcs.createElement("entity", { ...commonProps, uiText: uiText });
 }

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

@@ -15,6 +15,10 @@ export interface UiLabelProps {
     textAlign?: TextAlignType | undefined;
     /** Label font type. @defaultValue 'sans-serif' */
     font?: UiFontType | undefined;
+    /** Outline width of the text. @defaultValue 0 */
+    outlineWidth?: number | undefined;
+    /** Outline color of the text. @defaultValue `{ r: 0, g: 0, b: 0, a: 1 }` */
+    outlineColor?: Color4 | undefined;
     /** Behaviour when text reached. @defaultValue 'wrap' */
     textWrap?: UiTextWrapType | undefined;
 }

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

@@ -12,4 +12,8 @@ export type Listeners = {
     onMouseDown?: Callback;
     /** triggered on mouse up event */
     onMouseUp?: Callback;
+    /** triggered on mouse hover event */
+    onMouseEnter?: Callback;
+    /** triggered on mouse leave event */
+    onMouseLeave?: Callback;
 };

package/dist/components/listeners/types.js

@@ -1,6 +1,8 @@
 const listeners = {
     onMouseDown: undefined,
-    onMouseUp: undefined
+    onMouseUp: undefined,
+    onMouseEnter: undefined,
+    onMouseLeave: undefined
 };
 const listenersKey = Object.keys(listeners);
 /**

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

@@ -1,5 +1,5 @@
-import { UiTransformProps } from './types';
 import { PBUiTransform } from '@dcl/ecs/dist/components';
+import { UiTransformProps } from './types';
 /**
  * @public
  */

package/dist/components/uiTransform/index.js

@@ -1,4 +1,4 @@
-import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parsePosition, parseSize } from './utils';
+import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, getScrollPosition, getScrollVisible, parsePosition, parseSize } from './utils';
 /**
  * @internal
  */
@@ -51,14 +51,16 @@ const defaultUiTransform = {
     flexBasisUnit: 0 /* YGUnit.YGU_UNDEFINED */,
     widthUnit: 3 /* YGUnit.YGU_AUTO */,
     heightUnit: 0 /* YGUnit.YGU_UNDEFINED */,
-    pointerFilter: 0 /* PointerFilterMode.PFM_NONE */
+    pointerFilter: 0 /* PointerFilterMode.PFM_NONE */,
+    opacity: 1,
+    zIndex: 0
 };
 /**
  * @public
  */
 /* @__PURE__ */
 export function parseUiTransform(props = {}) {
-    const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, ...otherProps } = props;
+    const { scrollPosition, scrollVisible, height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, zIndex, ...otherProps } = props;
     return {
         ...defaultUiTransform,
         ...otherProps,
@@ -81,6 +83,9 @@ export function parseUiTransform(props = {}) {
         // Optional values
         ...(alignContent && getAlign('alignContent', alignContent)),
         ...(alignItems && getAlign('alignItems', alignItems)),
-        ...(flexWrap && getFlexWrap(flexWrap))
+        ...(flexWrap && getFlexWrap(flexWrap)),
+        ...(scrollPosition && getScrollPosition(scrollPosition)),
+        ...(scrollVisible && getScrollVisible(scrollVisible)),
+        ...(zIndex && { zIndex })
     };
 }

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

@@ -1,3 +1,4 @@
+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'
@@ -62,6 +63,11 @@ export type PositionType = 'absolute' | 'relative';
  * The pointer filter property determines if the ui element blocks the pointer or not (elements with pointer events always block the pointer regardless of this property)
  */
 export type PointerFilterType = 'none' | 'block';
+/**
+ * @public
+ * The scroll-visible determines if the scrollbars are shown when the scroll overflow is enabled
+ */
+export type ScrollVisibleType = 'horizontal' | 'vertical' | 'both' | 'hidden';
 /**
  * Layout props to position things in the canvas
  * @public
@@ -113,4 +119,14 @@ export interface UiTransformProps {
     overflow?: OverflowType;
     /** The pointer filter property determines if the ui element blocks the pointer or not (elements with pointer events always block the pointer regardless of this property) **/
     pointerFilter?: PointerFilterType;
+    /** The opacity property sets the opacity level for an element, it's accumulated across children @defaultValue 1 */
+    opacity?: number;
+    /** A reference value to identify the element, default empty */
+    elementId?: string;
+    /** default position=(0,0) if it aplies, a vector or a reference-id */
+    scrollPosition?: Vector2 | string;
+    /** default ShowScrollBar.SSB_BOTH */
+    scrollVisible?: ScrollVisibleType;
+    /** default 0 */
+    zIndex?: number;
 }

package/dist/components/uiTransform/utils.js

@@ -184,3 +184,40 @@ 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
+                }
+            }
+        };
+    }
+    else {
+        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

@@ -20,6 +20,8 @@ export type EntityComponents = {
     uiDropdown: PBUiDropdown;
     onMouseDown: Callback;
     onMouseUp: Callback;
+    onMouseEnter: Callback;
+    onMouseLeave: Callback;
 };
 /**
  * @hidden

package/dist/reconciler/index.d.ts

@@ -1,6 +1,7 @@
 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): {
-    update: (component: ReactEcs.JSX.ReactNode) => number;
+export interface DclReconciler {
+    update: (component: ReactEcs.JSX.ReactNode) => void;
     getEntities: () => Entity[];
-};
+}
+export declare function createReconciler(engine: Pick<IEngine, 'getComponent' | 'addEntity' | 'removeEntity' | 'defineComponentFromSchema' | 'getEntitiesWith'>, pointerEvents: PointerEventsSystem, rootEntity: Entity | undefined): DclReconciler;

package/dist/reconciler/index.js

@@ -6,11 +6,13 @@ import { componentKeys, isNotUndefined, noopConfig, propsChanged } from './utils
 function getPointerEnum(pointerKey) {
     const pointers = {
         onMouseDown: 1 /* PointerEventType.PET_DOWN */,
-        onMouseUp: 0 /* PointerEventType.PET_UP */
+        onMouseUp: 0 /* PointerEventType.PET_UP */,
+        onMouseEnter: 2 /* PointerEventType.PET_HOVER_ENTER */,
+        onMouseLeave: 3 /* PointerEventType.PET_HOVER_LEAVE */
     };
     return pointers[pointerKey];
 }
-export function createReconciler(engine, pointerEvents) {
+export function createReconciler(engine, pointerEvents, 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
@@ -24,6 +26,8 @@ export function createReconciler(engine, pointerEvents) {
     const UiInputResult = components.UiInputResult(engine);
     const UiDropdown = components.UiDropdown(engine);
     const UiDropdownResult = components.UiDropdownResult(engine);
+    const UiScrollResult = components.UiScrollResult(engine);
+    const Transform = components.Transform(engine);
     // Component ID Helper
     const getComponentId = {
         uiTransform: UiTransform.componentId,
@@ -50,6 +54,12 @@ export function createReconciler(engine, pointerEvents) {
             else if (update.component === 'onMouseUp') {
                 pointerEvents.removeOnPointerUp(instance.entity);
             }
+            else if (update.component === 'onMouseEnter') {
+                pointerEvents.removeOnPointerHoverEnter(instance.entity);
+            }
+            else if (update.component === 'onMouseLeave') {
+                pointerEvents.removeOnPointerHoverLeave(instance.entity);
+            }
             return;
         }
         if (update.props) {
@@ -59,13 +69,24 @@ export function createReconciler(engine, pointerEvents) {
             entityEvent.set(pointerEvent, update.props);
             if (alreadyHasPointerEvent)
                 return;
-            const pointerEventSystem = update.component === 'onMouseDown' ? pointerEvents.onPointerDown : pointerEvents.onPointerUp;
-            pointerEventSystem(instance.entity, () => pointerEventCallback(instance.entity, pointerEvent), {
-                button: 0 /* InputAction.IA_POINTER */,
-                // We add this showFeedBack so the pointerEventSystem creates a PointerEvent component with our entity
-                // This is needed for the renderer to know which entities are clickeables
-                showFeedback: true
-            });
+            const pointerEventSystem = update.component === 'onMouseDown'
+                ? pointerEvents.onPointerDown
+                : update.component === 'onMouseUp'
+                    ? pointerEvents.onPointerUp
+                    : update.component === 'onMouseEnter'
+                        ? pointerEvents.onPointerHoverEnter
+                        : update.component === 'onMouseLeave' && pointerEvents.onPointerHoverLeave;
+            if (pointerEventSystem) {
+                pointerEventSystem({
+                    entity: instance.entity,
+                    opts: {
+                        button: 0 /* InputAction.IA_POINTER */,
+                        // We add this showFeedBack so the pointerEventSystem creates a PointerEvent component with our entity
+                        // This is needed for the renderer to know which entities are clickeables
+                        showFeedback: true
+                    }
+                }, () => pointerEventCallback(instance.entity, pointerEvent));
+            }
         }
     }
     function removeComponent(instance, component) {
@@ -163,6 +184,10 @@ export function createReconciler(engine, pointerEvents) {
         ...noopConfig,
         createInstance(type, props) {
             const entity = engine.addEntity();
+            // set root
+            if (rootEntity !== undefined) {
+                Transform.createOrReplace(entity, { parent: rootEntity });
+            }
             entities.add(entity);
             const instance = {
                 entity,
@@ -257,6 +282,8 @@ export function createReconciler(engine, pointerEvents) {
             if (changeEvents.size) {
                 handleOnChange(UiInput.componentId, UiInputResult);
                 handleOnChange(UiDropdown.componentId, UiDropdownResult);
+                // TODO: maybe as componentId could be a virtual id since the scroll input doesn't exist
+                handleOnChange(UiTransform.componentId, UiScrollResult);
             }
             return reconciler.updateContainer(component, root, null);
         },

package/dist/reconciler/utils.js

@@ -33,6 +33,8 @@ const entityComponent = {
     uiTransform: undefined,
     onMouseDown: undefined,
     onMouseUp: undefined,
+    onMouseEnter: undefined,
+    onMouseLeave: undefined,
     uiInput: undefined,
     uiDropdown: undefined
 };

package/dist/system.d.ts

@@ -1,3 +1,4 @@
+import type { Entity } from '@dcl/ecs';
 import type { ReactEcs } from './react-ecs';
 /**
  * @public
@@ -9,4 +10,5 @@ export type UiComponent = () => ReactEcs.JSX.ReactNode;
 export interface ReactBasedUiSystem {
     destroy(): void;
     setUiRenderer(ui: UiComponent): void;
+    setTextureRenderer(entity: Entity, ui: UiComponent): void;
 }

package/dist/system.js

@@ -3,11 +3,15 @@ import { createReconciler } from './reconciler';
  * @internal
  */
 export function createReactBasedUiSystem(engine, pointerSystem) {
-    const renderer = createReconciler(engine, pointerSystem);
+    const renderer = createReconciler(engine, pointerSystem, undefined);
     let uiComponent = undefined;
+    const textureRenderersAndUis = [];
     function ReactBasedUiSystem() {
         if (uiComponent)
             renderer.update(uiComponent());
+        for (const [textureRenderer, ui] of textureRenderersAndUis) {
+            textureRenderer.update(ui());
+        }
     }
     engine.addSystem(ReactBasedUiSystem, 100e3, '@dcl/react-ecs');
     return {
@@ -16,9 +20,20 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
             for (const entity of renderer.getEntities()) {
                 engine.removeEntity(entity);
             }
+            for (const [textureRenderer, _] of textureRenderersAndUis) {
+                for (const entity of textureRenderer.getEntities()) {
+                    engine.removeEntity(entity);
+                }
+            }
+            for (const entity of renderer.getEntities()) {
+                engine.removeEntity(entity);
+            }
         },
         setUiRenderer(ui) {
             uiComponent = ui;
+        },
+        setTextureRenderer(entity, ui) {
+            textureRenderersAndUis.push([createReconciler(engine, pointerSystem, entity), ui]);
         }
     };
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.6.8-12260048919.commit-4123b99",
+  "version": "7.6.8-12415739875.commit-c9a0fe7",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.6.8-12260048919.commit-4123b99",
+    "@dcl/ecs": "7.6.8-12415739875.commit-c9a0fe7",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -40,5 +40,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "4123b99ea50b207270b479c572210a344efa74ea"
+  "commit": "c9a0fe76107e97476e7c04c0184360b719543f47"
 }