feat: pointer event toggle highlight (#1024)

* Implements support for new PointerEvents showHighlight property
* Fixed bug existent bug for the case of using pointerEventsSystem.onPointerDown() without any of the pointer event optional properties (those entities weren't clickable before this PR)

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-11406954347.commit-ba19c4f",
+    "@dcl/protocol": "1.0.0-11599848164.commit-ef74edc",
     "@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

@@ -20,8 +20,14 @@ export type EventSystemOptions = {
   hoverText?: string
   maxDistance?: number
   showFeedback?: boolean
+  showHighlight?: boolean
 }
 
+export const getDefaultOpts = (opts: Partial<EventSystemOptions> = {}): EventSystemOptions => ({
+  button: InputAction.IA_ANY,
+  ...opts
+})
+
 /**
  * @public
  */
@@ -98,31 +104,24 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
   }
   type EventMapType = Map<EventType, { cb: EventSystemCallback; opts: EventSystemOptions }>
 
-  const getDefaultOpts = (opts: Partial<EventSystemOptions> = {}): EventSystemOptions => ({
-    button: InputAction.IA_ANY,
-    ...opts
-  })
-
   const eventsMap = new Map<Entity, EventMapType>()
 
   function getEvent(entity: Entity) {
     return eventsMap.get(entity) || eventsMap.set(entity, new Map()).get(entity)!
   }
 
   function setPointerEvent(entity: Entity, type: PointerEventType, opts: EventSystemOptions) {
-    if (opts.hoverText || opts.showFeedback) {
-      const pointerEvent = PointerEvents.getMutableOrNull(entity) || PointerEvents.create(entity)
-
-      pointerEvent.pointerEvents.push({
-        eventType: type,
-        eventInfo: {
-          button: opts.button,
-          showFeedback: opts.showFeedback,
-          hoverText: opts.hoverText,
-          maxDistance: opts.maxDistance
-        }
-      })
-    }
+    const pointerEvent = PointerEvents.getMutableOrNull(entity) || PointerEvents.create(entity)
+    pointerEvent.pointerEvents.push({
+      eventType: type,
+      eventInfo: {
+        button: opts.button,
+        showFeedback: opts.showFeedback,
+        showHighlight: opts.showHighlight,
+        hoverText: opts.hoverText,
+        maxDistance: opts.maxDistance
+      }
+    })
   }
 
   function removePointerEvent(entity: Entity, type: PointerEventType, button: InputAction) {

packages/@dcl/inspector/src/components/EntityInspector/PointerEventsInspector/PointerEventsInspector.tsx

@@ -115,6 +115,12 @@ export default withSdk<Props>(({ sdk, entity: entityId }) => {
               onChange={(e) => handleEventInfoChange({ showFeedback: !!e.target.checked }, idx)}
             />
           </Block>
+          <Block label="Show highlight">
+            <CheckboxField
+              checked={!!$.eventInfo?.showHighlight ?? DEFAULTS.eventInfo.showHighlight}
+              onChange={(e) => handleEventInfoChange({ showHighlight: !!e.target.checked }, idx)}
+            />
+          </Block>
           <AddButton onClick={() => handleRemove(idx)}>Remove Pointer Event</AddButton>
         </React.Fragment>
       ))}

packages/@dcl/inspector/src/components/EntityInspector/PointerEventsInspector/utils.spec.ts

@@ -23,7 +23,8 @@ describe('InputUtils', () => {
           button: InputAction.IA_ANY,
           hoverText: 'Interact',
           maxDistance: 10,
-          showFeedback: true
+          showFeedback: true,
+          showHighlight: true
         }
       }
       expect(result).toEqual(expected)
@@ -36,7 +37,8 @@ describe('InputUtils', () => {
           button: InputAction.IA_PRIMARY,
           hoverText: 'Custom Interaction',
           maxDistance: 15,
-          showFeedback: false
+          showFeedback: false,
+          showHighlight: false
         }
       })
       const expected = {
@@ -45,7 +47,8 @@ describe('InputUtils', () => {
           button: InputAction.IA_PRIMARY,
           hoverText: 'Custom Interaction',
           maxDistance: 15,
-          showFeedback: false
+          showFeedback: false,
+          showHighlight: false
         }
       }
       expect(result).toEqual(expected)
@@ -68,7 +71,8 @@ describe('InputUtils', () => {
           button: InputAction.IA_ANY,
           hoverText: 'Interact',
           maxDistance: 10,
-          showFeedback: true
+          showFeedback: true,
+          showHighlight: true
         }
       }
       expect(DEFAULTS).toEqual(expected)

packages/@dcl/inspector/src/components/EntityInspector/PointerEventsInspector/utils.ts

@@ -18,6 +18,7 @@ export function getDefaultPointerEvent(
       hoverText: 'Interact',
       maxDistance: 10,
       showFeedback: true,
+      showHighlight: true,
       ...def?.eventInfo
     }
   }

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

@@ -1130,6 +1130,7 @@ export type EventSystemOptions = {
     hoverText?: string;
     maxDistance?: number;
     showFeedback?: boolean;
+    showHighlight?: boolean;
 };
 
 // @public
@@ -1167,6 +1168,11 @@ export function getComponentEntityTree<T>(engine: Pick<IEngine, 'getEntitiesWith
 // @public @deprecated (undocumented)
 export function getCompositeRootComponent(engine: IEngine): LastWriteWinElementSetComponentDefinition<CompositeRootType>;
 
+// Warning: (ae-missing-release-tag) "getDefaultOpts" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const getDefaultOpts: (opts?: Partial<EventSystemOptions>) => EventSystemOptions;
+
 // Warning: (ae-missing-release-tag) "GlobalDirectionRaycastOptions" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -2677,6 +2683,7 @@ export interface PBPointerEvents_Info {
     hoverText?: string | undefined;
     maxDistance?: number | undefined;
     showFeedback?: boolean | undefined;
+    showHighlight?: boolean | undefined;
 }
 
 // @public (undocumented)

packages/@dcl/sdk-commands/package.json

@@ -13,7 +13,7 @@
     "@dcl/inspector": "file:../inspector",
     "@dcl/linker-dapp": "^0.14.2",
     "@dcl/mini-comms": "1.0.1-20230216163137.commit-a4c75be",
-    "@dcl/protocol": "1.0.0-11406954347.commit-ba19c4f",
+    "@dcl/protocol": "1.0.0-11599848164.commit-ef74edc",
     "@dcl/quests-client": "^1.0.3",
     "@dcl/quests-manager": "^0.1.4",
     "@dcl/rpc": "^1.1.1",

test/ecs/components/PointerEvents.spec.ts

@@ -14,7 +14,8 @@ describe('Generated OnPointerDown ProtoBuf', () => {
             button: 1,
             hoverText: 'Tap to run',
             maxDistance: 10,
-            showFeedback: true
+            showFeedback: true,
+            showHighlight: true
           }
         }
       ]
@@ -28,7 +29,8 @@ describe('Generated OnPointerDown ProtoBuf', () => {
             button: InputAction.IA_ACTION_4,
             hoverText: 'Run to tap',
             maxDistance: 5,
-            showFeedback: false
+            showFeedback: false,
+            showHighlight: false
           }
         }
       ]
@@ -51,7 +53,8 @@ describe('Generated OnPointerDown ProtoBuf', () => {
             button: InputAction.IA_ACTION_4,
             hoverText: 'Run to tap',
             maxDistance: 5,
-            showFeedback: false
+            showFeedback: false,
+            showHighlight: false
           }
         }
       ]

test/ecs/events/system.spec.ts

@@ -1,6 +1,10 @@
 import { Engine, Entity, IEngine, components, PointerEventType, InputAction } from '../../../packages/@dcl/ecs/src'
 import { createInputSystem } from '../../../packages/@dcl/ecs/src/engine/input'
-import { createPointerEventsSystem, PointerEventsSystem } from '../../../packages/@dcl/ecs/src/systems/events'
+import {
+  createPointerEventsSystem,
+  getDefaultOpts,
+  PointerEventsSystem
+} from '../../../packages/@dcl/ecs/src/systems/events'
 import { createTestPointerDownCommand } from './utils'
 
 let engine: IEngine
@@ -69,7 +73,6 @@ describe('Events System', () => {
     expect(counter).toBe(1)
     const removedFeedback = PointerEvents.getOrNull(entity)?.pointerEvents
     expect(removedFeedback?.length).toBe(0)
-
     // Update tick and verify we didnt increment the counter again
     await engine.update(1)
     expect(counter).toBe(1)
@@ -79,17 +82,20 @@ describe('Events System', () => {
     const entity = engine.addEntity()
     const PointerEvents = components.PointerEvents(engine)
     let counter = 0
-    EventsSystem.onPointerDown(
-      entity,
-      () => {
-        counter += 1
-      },
-      { hoverText: '' }
-    )
+    EventsSystem.onPointerDown(entity, () => {
+      counter += 1
+    })
     fakePointer(entity, PointerEventType.PET_DOWN)
     await engine.update(1)
     expect(counter).toBe(1)
-    expect(PointerEvents.getOrNull(entity)).toBe(null)
+    expect(PointerEvents.getOrNull(entity)).toMatchObject({
+      pointerEvents: [
+        {
+          eventInfo: getDefaultOpts(),
+          eventType: 1
+        }
+      ]
+    })
   })
 
   it('should remove pointer down', async () => {