feat: add enter/leave helpers and UI map

.vscode/launch.json

@@ -13,7 +13,7 @@
         "--async-stack-traces"
       ],
       "args": [
-        "${fileBasename}",
+        "${file}",
         "--verbose",
         "--no-cache",
         "-i"

package.json

@@ -6,7 +6,7 @@
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
     "@actions/core": "^1.10.0",
-    "@dcl/protocol": "1.0.0-11858567019.commit-f8ad8ea",
+    "@dcl/protocol": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-12138436446.commit-48eb63e.tgz",
     "@dcl/quickjs-emscripten": "^0.21.0-3680274614.commit-1808aa1",
     "@dcl/ts-proto": "1.153.0",
     "@types/fs-extra": "^9.0.12",

packages/@dcl/ecs/src/systems/events.ts

@@ -52,6 +52,20 @@ export interface PointerEventsSystem {
    */
   removeOnPointerUp(entity: Entity): void
 
+  /**
+   * @public
+   * Remove the callback for onPointerHoverEnter event
+   * @param entity - Entity where the callback was attached
+   */
+  removeOnPointerHoverEnter(entity: Entity): void
+
+  /**
+   * @public
+   * Remove the callback for onPointerHoverLeave event
+   * @param entity - Entity where the callback was attached
+   */
+  removeOnPointerHoverLeave(entity: Entity): void
+
   /**
    * @internal
    * Execute callback when the user clicks the entity.
@@ -88,6 +102,28 @@ export interface PointerEventsSystem {
    * @param opts - Opts to trigger Feedback and Button
    */
   onPointerUp(entity: Entity, cb: EventSystemCallback, opts?: Partial<EventSystemOptions>): void
+
+  /**
+   * @public
+   * Execute callback when the user place the pointer over the entity
+   * @param pointerData - Entity to attach the callback - Opts to trigger Feedback and Button
+   * @param cb - Function to execute when click fires
+   */
+  onPointerHoverEnter(
+    pointerData: { entity: Entity; opts?: Partial<EventSystemOptions> },
+    cb: EventSystemCallback
+  ): void
+
+  /**
+   * @public
+   * Execute callback when the user take the pointer out of the entity
+   * @param pointerData - Entity to attach the callback - Opts to trigger Feedback and Button
+   * @param cb - Function to execute when click fires
+   */
+  onPointerHoverLeave(
+    pointerData: { entity: Entity; opts?: Partial<EventSystemOptions> },
+    cb: EventSystemCallback
+  ): void
 }
 
 /**
@@ -100,7 +136,9 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
   enum EventType {
     Click,
     Down,
-    Up
+    Up,
+    HoverEnter,
+    HoverLeave
   }
   type EventMapType = Map<EventType, { cb: EventSystemCallback; opts: EventSystemOptions }>
 
@@ -135,6 +173,10 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
   function getPointerEvent(eventType: EventType) {
     if (eventType === EventType.Up) {
       return PointerEventType.PET_UP
+    } else if (eventType === EventType.HoverLeave) {
+      return PointerEventType.PET_HOVER_LEAVE
+    } else if (eventType === EventType.HoverEnter) {
+      return PointerEventType.PET_HOVER_ENTER
     }
     return PointerEventType.PET_DOWN
   }
@@ -164,7 +206,12 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
             checkNotThenable(cb(command.up), 'Click event returned a thenable. Only synchronous functions are allowed')
         }
 
-        if (eventType === EventType.Down || eventType === EventType.Up) {
+        if (
+          eventType === EventType.Down ||
+          eventType === EventType.Up ||
+          eventType === EventType.HoverEnter ||
+          eventType === EventType.HoverLeave
+        ) {
           const command = inputSystem.getInputCommand(opts.button, getPointerEvent(eventType), entity)
           if (command) {
             checkNotThenable(cb(command), 'Event handler returned a thenable. Only synchronous functions are allowed')
@@ -198,6 +245,24 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
     setPointerEvent(entity, PointerEventType.PET_UP, options)
   }
 
+  const onPointerHoverEnter: PointerEventsSystem['onPointerHoverEnter'] = (...args) => {
+    const [data, cb] = args
+    const { entity, opts } = data
+    const options = getDefaultOpts(opts)
+    removeEvent(entity, EventType.HoverEnter)
+    getEvent(entity).set(EventType.HoverEnter, { cb, opts: options })
+    setPointerEvent(entity, PointerEventType.PET_HOVER_ENTER, options)
+  }
+
+  const onPointerHoverLeave: PointerEventsSystem['onPointerHoverLeave'] = (...args) => {
+    const [data, cb] = args
+    const { entity, opts } = data
+    const options = getDefaultOpts(opts)
+    removeEvent(entity, EventType.HoverLeave)
+    getEvent(entity).set(EventType.HoverLeave, { cb, opts: options })
+    setPointerEvent(entity, PointerEventType.PET_HOVER_LEAVE, options)
+  }
+
   return {
     removeOnClick(entity: Entity) {
       removeEvent(entity, EventType.Click)
@@ -211,6 +276,14 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
       removeEvent(entity, EventType.Up)
     },
 
+    removeOnPointerHoverEnter(entity: Entity) {
+      removeEvent(entity, EventType.HoverEnter)
+    },
+
+    removeOnPointerHoverLeave(entity: Entity) {
+      removeEvent(entity, EventType.HoverLeave)
+    },
+
     onClick(value, cb) {
       const { entity } = value
       const options = getDefaultOpts(value.opts)
@@ -223,6 +296,8 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
     },
 
     onPointerDown,
-    onPointerUp
+    onPointerUp,
+    onPointerHoverEnter,
+    onPointerHoverLeave
   }
 }

packages/@dcl/playground-assets/etc/playground-assets.api.md

@@ -1141,6 +1141,8 @@ export type EntityComponents = {
     uiDropdown: PBUiDropdown;
     onMouseDown: Callback;
     onMouseUp: Callback;
+    onMouseEnter: Callback;
+    onMouseLeave: Callback;
 };
 
 // @public (undocumented)
@@ -1626,6 +1628,8 @@ export const Light: LastWriteWinElementSetComponentDefinition<PBLight>;
 export type Listeners = {
     onMouseDown?: Callback;
     onMouseUp?: Callback;
+    onMouseEnter?: Callback;
+    onMouseLeave?: Callback;
 };
 
 // @public (undocumented)
@@ -3109,6 +3113,9 @@ export interface PBTween {
     } | {
         $case: "scale";
         scale: Scale;
+    } | {
+        $case: "textureMove";
+        textureMove: TextureMove;
     } | undefined;
     playing?: boolean | undefined;
 }
@@ -3395,6 +3402,7 @@ export interface PBUiTransform {
     // (undocumented)
     width: number;
     widthUnit: YGUnit;
+    zIndex?: number | undefined;
 }
 
 // @public (undocumented)
@@ -3557,13 +3565,23 @@ export interface PointerEventsSystem {
     }, cb: EventSystemCallback): void;
     // @deprecated (undocumented)
     onPointerDown(entity: Entity, cb: EventSystemCallback, opts?: Partial<EventSystemOptions>): void;
+    onPointerHoverEnter(pointerData: {
+        entity: Entity;
+        opts?: Partial<EventSystemOptions>;
+    }, cb: EventSystemCallback): void;
+    onPointerHoverLeave(pointerData: {
+        entity: Entity;
+        opts?: Partial<EventSystemOptions>;
+    }, cb: EventSystemCallback): void;
     onPointerUp(pointerData: {
         entity: Entity;
         opts?: Partial<EventSystemOptions>;
     }, cb: EventSystemCallback): void;
     // @deprecated (undocumented)
     onPointerUp(entity: Entity, cb: EventSystemCallback, opts?: Partial<EventSystemOptions>): void;
     removeOnPointerDown(entity: Entity): void;
+    removeOnPointerHoverEnter(entity: Entity): void;
+    removeOnPointerHoverLeave(entity: Entity): void;
     removeOnPointerUp(entity: Entity): void;
 }
 
@@ -4229,6 +4247,30 @@ export interface TextureHelper {
 // @public
 export type TextureMode = 'nine-slices' | 'center' | 'stretch';
 
+// @public (undocumented)
+export interface TextureMove {
+    // (undocumented)
+    end: PBVector2 | undefined;
+    movementType?: TextureMovementType | undefined;
+    // (undocumented)
+    start: PBVector2 | undefined;
+}
+
+// @public (undocumented)
+export namespace TextureMove {
+    // (undocumented)
+    export function decode(input: _m0.Reader | Uint8Array, length?: number): TextureMove;
+    // (undocumented)
+    export function encode(message: TextureMove, writer?: _m0.Writer): _m0.Writer;
+}
+
+// @public (undocumented)
+export const enum TextureMovementType {
+    TMT_OFFSET = 0,
+    // (undocumented)
+    TMT_TILING = 1
+}
+
 // @public (undocumented)
 export interface TextureUnion {
     // (undocumented)
@@ -4554,6 +4596,7 @@ export interface UiTransformProps {
     scrollPosition?: PBVector2 | string;
     scrollVisible?: ScrollVisibleType;
     width?: PositionUnit | 'auto';
+    zIndex?: number;
 }
 
 // @public (undocumented)

packages/@dcl/react-ecs/src/components/Button/index.tsx

@@ -35,7 +35,7 @@ function getButtonProps(props: UiButtonProps) {
  */
 /* @__PURE__ */
 export function Button(props: UiButtonProps) {
-  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,
@@ -64,6 +64,8 @@ export function Button(props: UiButtonProps) {
     <entity
       onMouseDown={!!props.disabled ? undefined : onMouseDown}
       onMouseUp={!!props.disabled ? undefined : onMouseUp}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
       uiTransform={uiTransformProps}
       uiText={textProps}
       uiBackground={uiBackgroundProps}

packages/@dcl/react-ecs/src/components/Dropdown/index.tsx

@@ -39,13 +39,15 @@ function parseUiDropdown(props: UiDropdownProps): PBUiDropdown {
  */
 /* @__PURE__ */
 export function Dropdown(props: UiDropdownProps) {
-  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 <entity {...commonProps} uiDropdown={dropdownProps} />
 }

packages/@dcl/react-ecs/src/components/Input/index.tsx

@@ -41,13 +41,15 @@ function parseUiInput(props: Partial<UiInputProps>): PBUiInput {
  * @category Component
  */ /* @__PURE__ */
 export function Input(props: EntityPropTypes & Partial<UiInputProps>) {
-  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 <entity {...commonProps} uiInput={inputProps} />
 }

packages/@dcl/react-ecs/src/components/Label/index.tsx

@@ -23,13 +23,15 @@ export { scaleFontSize } from './utils'
 
 /* @__PURE__ */
 export function Label(props: EntityPropTypes & UiLabelProps) {
-  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: PBUiText = {

packages/@dcl/react-ecs/src/components/listeners/types.ts

@@ -13,11 +13,17 @@ 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
 }
 
 const listeners: Listeners = {
   onMouseDown: undefined,
-  onMouseUp: undefined
+  onMouseUp: undefined,
+  onMouseEnter: undefined,
+  onMouseLeave: undefined
 }
 const listenersKey = Object.keys(listeners)