feat: add enter/leave helpers and UI map (#1040)

* wip * wip * fix tests * add missing tests * fix coverage * update snapshosts --------- Co-authored-by: Gonzalo DCL <[email protected]>
decentraland · Dec 16, 2024 · 0c727b8 · 0c727b8
1 parent 4123b99
commit 0c727b8
Show file tree

Hide file tree

Showing 14 changed files with 351 additions and 28 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -13,7 +13,7 @@
         "--async-stack-traces"
       ],
       "args": [
-        "${fileBasename}",
+        "${file}",
         "--verbose",
         "--no-cache",
         "-i"

diff --git a/packages/@dcl/ecs/src/systems/events.ts b/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
   }
 }
diff --git a/packages/@dcl/playground-assets/etc/playground-assets.api.md b/packages/@dcl/playground-assets/etc/playground-assets.api.md
@@ -1082,6 +1082,8 @@ export type EntityComponents = {
     uiDropdown: PBUiDropdown;
     onMouseDown: Callback;
     onMouseUp: Callback;
+    onMouseEnter: Callback;
+    onMouseLeave: Callback;
 };
 
 // @public (undocumented)
@@ -1558,6 +1560,8 @@ export interface LastWriteWinElementSetComponentDefinition<T> extends BaseCompon
 export type Listeners = {
     onMouseDown?: Callback;
     onMouseUp?: Callback;
+    onMouseEnter?: Callback;
+    onMouseLeave?: Callback;
 };
 
 // @public (undocumented)
@@ -3313,13 +3317,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;
 }
 

diff --git a/packages/@dcl/react-ecs/src/components/Button/index.tsx b/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}

diff --git a/packages/@dcl/react-ecs/src/components/Dropdown/index.tsx b/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} />
 }
diff --git a/packages/@dcl/react-ecs/src/components/Input/index.tsx b/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} />
 }
diff --git a/packages/@dcl/react-ecs/src/components/Label/index.tsx b/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 = {

diff --git a/packages/@dcl/react-ecs/src/components/listeners/types.ts b/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)
 

diff --git a/packages/@dcl/react-ecs/src/react-ecs.ts b/packages/@dcl/react-ecs/src/react-ecs.ts
@@ -21,6 +21,8 @@ export type EntityComponents = {
   uiDropdown: PBUiDropdown
   onMouseDown: Callback
   onMouseUp: Callback
+  onMouseEnter: Callback
+  onMouseLeave: Callback
 }
 
 /**

diff --git a/packages/@dcl/react-ecs/src/reconciler/index.ts b/packages/@dcl/react-ecs/src/reconciler/index.ts
@@ -27,7 +27,9 @@ import { componentKeys, isNotUndefined, noopConfig, propsChanged } from './utils
 function getPointerEnum(pointerKey: keyof Listeners): PointerEventType {
   const pointers: { [key in keyof Required<Listeners>]: PointerEventType } = {
     onMouseDown: PointerEventType.PET_DOWN,
-    onMouseUp: PointerEventType.PET_UP
+    onMouseUp: PointerEventType.PET_UP,
+    onMouseEnter: PointerEventType.PET_HOVER_ENTER,
+    onMouseLeave: PointerEventType.PET_HOVER_LEAVE
   }
   return pointers[pointerKey]
 }
@@ -80,13 +82,20 @@ export function createReconciler(
     upsertComponent(instance, props as { rightOf: number; parent: number }, 'uiTransform')
   }
 
-  function upsertListener(instance: Instance, update: Changes<keyof Pick<Listeners, 'onMouseDown' | 'onMouseUp'>>) {
+  function upsertListener(
+    instance: Instance,
+    update: Changes<keyof Pick<Listeners, 'onMouseDown' | 'onMouseUp' | 'onMouseEnter' | 'onMouseLeave'>>
+  ) {
     if (update.type === 'delete' || !update.props) {
       clickEvents.get(instance.entity)?.delete(getPointerEnum(update.component))
       if (update.component === 'onMouseDown') {
         pointerEvents.removeOnPointerDown(instance.entity)
       } 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
     }
@@ -101,13 +110,28 @@ export function createReconciler(
       if (alreadyHasPointerEvent) return
 
       const pointerEventSystem =
-        update.component === 'onMouseDown' ? pointerEvents.onPointerDown : pointerEvents.onPointerUp
-      pointerEventSystem(instance.entity, () => pointerEventCallback(instance.entity, pointerEvent), {
-        button: 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
-      })
+        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: 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)
+        )
+      }
     }
   }
 

diff --git a/packages/@dcl/react-ecs/src/reconciler/utils.ts b/packages/@dcl/react-ecs/src/reconciler/utils.ts
@@ -58,6 +58,8 @@ const entityComponent: EntityComponents = {
   uiTransform: undefined as any,
   onMouseDown: undefined as any,
   onMouseUp: undefined as any,
+  onMouseEnter: undefined as any,
+  onMouseLeave: undefined as any,
   uiInput: undefined as any,
   uiDropdown: undefined as any
 }