feat: pointer event toggle highlight (#1024)

pravusjif · web-flow · commit a53af9d3a32f · 2024-10-31T14:20:20.000+01:00
* 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)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",
diff --git a/packages/@dcl/ecs/src/systems/events.ts b/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) {
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/PointerEventsInspector/PointerEventsInspector.tsx b/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>
       ))}
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/PointerEventsInspector/utils.spec.ts b/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)
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/PointerEventsInspector/utils.ts b/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
     }
   }
diff --git a/packages/@dcl/playground-assets/etc/playground-assets.api.md b/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)
diff --git a/packages/@dcl/sdk-commands/package-lock.json b/packages/@dcl/sdk-commands/package-lock.json
diff --git a/packages/@dcl/sdk-commands/package.json b/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",
diff --git a/test/ecs/components/PointerEvents.spec.ts b/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
           }
         }
       ]
diff --git a/test/ecs/events/system.spec.ts b/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 () => {
diff --git a/test/snapshots/package-lock.json b/test/snapshots/package-lock.json

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,8 @@ describe('InputUtils', () => {`
`23`	`23`	`button: InputAction.IA_ANY,`
`24`	`24`	`hoverText: 'Interact',`
`25`	`25`	`maxDistance: 10,`
`26`		`- showFeedback: true`
	`26`	`+ showFeedback: true,`
	`27`	`+ showHighlight: true`
`27`	`28`	`}`
`28`	`29`	`}`
`29`	`30`	`expect(result).toEqual(expected)`
`@@ -36,7 +37,8 @@ describe('InputUtils', () => {`
`36`	`37`	`button: InputAction.IA_PRIMARY,`
`37`	`38`	`hoverText: 'Custom Interaction',`
`38`	`39`	`maxDistance: 15,`
`39`		`- showFeedback: false`
	`40`	`+ showFeedback: false,`
	`41`	`+ showHighlight: false`
`40`	`42`	`}`
`41`	`43`	`})`
`42`	`44`	`const expected = {`
`@@ -45,7 +47,8 @@ describe('InputUtils', () => {`
`45`	`47`	`button: InputAction.IA_PRIMARY,`
`46`	`48`	`hoverText: 'Custom Interaction',`
`47`	`49`	`maxDistance: 15,`
`48`		`- showFeedback: false`
	`50`	`+ showFeedback: false,`
	`51`	`+ showHighlight: false`
`49`	`52`	`}`
`50`	`53`	`}`
`51`	`54`	`expect(result).toEqual(expected)`
`@@ -68,7 +71,8 @@ describe('InputUtils', () => {`
`68`	`71`	`button: InputAction.IA_ANY,`
`69`	`72`	`hoverText: 'Interact',`
`70`	`73`	`maxDistance: 10,`
`71`		`- showFeedback: true`
	`74`	`+ showFeedback: true,`
	`75`	`+ showHighlight: true`
`72`	`76`	`}`
`73`	`77`	`}`
`74`	`78`	`expect(DEFAULTS).toEqual(expected)`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ export function getDefaultPointerEvent(`
`18`	`18`	`hoverText: 'Interact',`
`19`	`19`	`maxDistance: 10,`
`20`	`20`	`showFeedback: true,`
	`21`	`+ showHighlight: true,`
`21`	`22`	`...def?.eventInfo`
`22`	`23`	`}`
`23`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,8 @@ describe('Generated OnPointerDown ProtoBuf', () => {`
`14`	`14`	`button: 1,`
`15`	`15`	`hoverText: 'Tap to run',`
`16`	`16`	`maxDistance: 10,`
`17`		`- showFeedback: true`
	`17`	`+ showFeedback: true,`
	`18`	`+ showHighlight: true`
`18`	`19`	`}`
`19`	`20`	`}`
`20`	`21`	`]`
`@@ -28,7 +29,8 @@ describe('Generated OnPointerDown ProtoBuf', () => {`
`28`	`29`	`button: InputAction.IA_ACTION_4,`
`29`	`30`	`hoverText: 'Run to tap',`
`30`	`31`	`maxDistance: 5,`
`31`		`- showFeedback: false`
	`32`	`+ showFeedback: false,`
	`33`	`+ showHighlight: false`
`32`	`34`	`}`
`33`	`35`	`}`
`34`	`36`	`]`
`@@ -51,7 +53,8 @@ describe('Generated OnPointerDown ProtoBuf', () => {`
`51`	`53`	`button: InputAction.IA_ACTION_4,`
`52`	`54`	`hoverText: 'Run to tap',`
`53`	`55`	`maxDistance: 5,`
`54`		`- showFeedback: false`
	`56`	`+ showFeedback: false,`
	`57`	`+ showHighlight: false`
`55`	`58`	`}`
`56`	`59`	`}`
`57`	`60`	`]`