feat: UITransform pointer filter property

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-6473373363.commit-d038938",
+    "@dcl/protocol": "1.0.0-6590614146.commit-db4a595",
     "@dcl/quickjs-emscripten": "^0.21.0-3680274614.commit-1808aa1",
     "@dcl/ts-proto": "1.153.0",
     "@types/fs-extra": "^9.0.12",

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

@@ -2939,6 +2939,7 @@ export interface PBUiTransform {
     paddingTopUnit: YGUnit;
     // (undocumented)
     parent: number;
+    pointerFilter?: PointerFilterMode | undefined;
     // (undocumented)
     positionBottom: number;
     positionBottomUnit: YGUnit;
@@ -3125,6 +3126,17 @@ export const enum PointerEventType {
     PET_UP = 0
 }
 
+// @public (undocumented)
+export const enum PointerFilterMode {
+    // (undocumented)
+    PFM_BLOCK = 1,
+    // (undocumented)
+    PFM_NONE = 0
+}
+
+// @public
+export type PointerFilterType = 'none' | 'block';
+
 // @public (undocumented)
 export const PointerLock: LastWriteWinElementSetComponentDefinition<PBPointerLock>;
 
@@ -3941,6 +3953,7 @@ export interface UiTransformProps {
     minWidth?: PositionUnit;
     overflow?: OverflowType;
     padding?: Partial<Position> | PositionShorthand;
+    pointerFilter?: PointerFilterType;
     position?: Partial<Position> | PositionShorthand;
     positionType?: PositionType;
     width?: PositionUnit;

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

@@ -21,6 +21,7 @@ import { getFont, getTextAlign } from './utils'
 /* @__PURE__ */
 export function Label(props: EntityPropTypes & UiLabelProps) {
   const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...uiTextProps } = props
+
   const commonProps = parseProps({
     uiTransform,
     uiBackground,

packages/@dcl/react-ecs/src/components/uiTransform/index.ts

@@ -1,16 +1,26 @@
 import {
   getAlign,
-  getFlexDirection,
   getDisplay,
+  getFlexDirection,
   getFlexWrap,
   getJustify,
   getOverflow,
-  getPoistionType,
+  getPointerFilter,
+  getPositionType,
   parsePosition,
   parseSize
 } from './utils'
 import { UiTransformProps } from './types'
-import { YGAlign, YGDisplay, YGFlexDirection, YGJustify, YGOverflow, YGPositionType, YGUnit } from '@dcl/ecs'
+import {
+  PointerFilterMode,
+  YGAlign,
+  YGDisplay,
+  YGFlexDirection,
+  YGJustify,
+  YGOverflow,
+  YGPositionType,
+  YGUnit
+} from '@dcl/ecs'
 import { PBUiTransform } from '@dcl/ecs/dist/components'
 
 /**
@@ -65,7 +75,8 @@ const defaultUiTransform: PBUiTransform = {
   positionTopUnit: YGUnit.YGU_UNDEFINED,
   flexBasisUnit: YGUnit.YGU_UNDEFINED,
   widthUnit: YGUnit.YGU_UNDEFINED,
-  heightUnit: YGUnit.YGU_UNDEFINED
+  heightUnit: YGUnit.YGU_UNDEFINED,
+  pointerFilter: PointerFilterMode.PFM_NONE
 }
 
 /**
@@ -92,7 +103,8 @@ export function parseUiTransform(props: UiTransformProps = {}): PBUiTransform {
     ...getJustify(props.justifyContent),
     ...getFlexDirection(props.flexDirection),
     ...getOverflow(props.overflow),
-    ...getPoistionType(props.positionType),
+    ...getPointerFilter(props.pointerFilter),
+    ...getPositionType(props.positionType),
     // Optional values
     ...(alignContent && getAlign('alignContent', alignContent)),
     ...(alignItems && getAlign('alignItems', alignItems)),

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

@@ -65,7 +65,7 @@ export type FlexWrapType = 'wrap' | 'nowrap' | 'wrap-reverse'
 
 /**
  * @public
- * The overflow property controls what happens to content that is too big to fit into an area.
+ * The overflow property controls what happens to content that is too big to fit into an area
  */
 export type OverflowType = 'hidden' | 'scroll' | 'visible'
 
@@ -75,6 +75,12 @@ export type OverflowType = 'hidden' | 'scroll' | 'visible'
  */
 export type PositionType = 'absolute' | 'relative'
 
+/**
+ * @public
+ * 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'
+
 /**
  * Layout props to position things in the canvas
  * @public
@@ -124,4 +130,6 @@ export interface UiTransformProps {
   flexShrink?: number
   /** The overflow property controls what happens to content that is too big to fit into an area */
   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
 }

packages/@dcl/react-ecs/src/components/uiTransform/utils.ts

@@ -1,4 +1,14 @@
-import { YGAlign, YGDisplay, YGFlexDirection, YGJustify, YGOverflow, YGPositionType, YGUnit, YGWrap } from '@dcl/ecs'
+import {
+  YGAlign,
+  YGDisplay,
+  YGFlexDirection,
+  YGJustify,
+  YGOverflow,
+  YGPositionType,
+  YGUnit,
+  YGWrap,
+  PointerFilterMode
+} from '@dcl/ecs'
 import {
   AlignType,
   FlexDirectionType,
@@ -9,7 +19,8 @@ import {
   Position,
   PositionType,
   PositionUnit,
-  PositionShorthand
+  PositionShorthand,
+  PointerFilterType
 } from './types'
 
 function capitalize<T extends string>(value: T): Capitalize<T> {
@@ -211,7 +222,7 @@ const parseOverflow: Readonly<Record<OverflowType, YGOverflow>> = {
 /**
  * @internal
  */
-export function getPoistionType(position: PositionType | undefined): Record<'positionType', YGPositionType> {
+export function getPositionType(position: PositionType | undefined): Record<'positionType', YGPositionType> {
   const value: YGPositionType = position ? parsePositionType[position] : YGPositionType.YGPT_RELATIVE
   return { positionType: value }
 }
@@ -220,3 +231,18 @@ const parsePositionType: Readonly<Record<PositionType, YGPositionType>> = {
   relative: YGPositionType.YGPT_RELATIVE,
   absolute: YGPositionType.YGPT_ABSOLUTE
 }
+
+/**
+ * @internal
+ */
+export function getPointerFilter(
+  pointerFilter: PointerFilterType | undefined
+): Record<'pointerFilter', PointerFilterMode> {
+  const value: PointerFilterMode = pointerFilter ? parsePointerFilter[pointerFilter] : PointerFilterMode.PFM_NONE
+  return { pointerFilter: value }
+}
+
+const parsePointerFilter: Readonly<Record<PointerFilterType, PointerFilterMode>> = {
+  none: PointerFilterMode.PFM_NONE,
+  block: PointerFilterMode.PFM_BLOCK
+}

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

@@ -13,7 +13,7 @@
     "@dcl/inspector": "file:../inspector",
     "@dcl/linker-dapp": "^0.11.0",
     "@dcl/mini-comms": "1.0.1-20230216163137.commit-a4c75be",
-    "@dcl/protocol": "1.0.0-6473373363.commit-d038938",
+    "@dcl/protocol": "1.0.0-6590614146.commit-db4a595",
     "@dcl/quests-manager": "^0.1.2",
     "@dcl/rpc": "^1.1.1",
     "@dcl/schemas": "^8.2.3-20230718182824.commit-356025c",

test/ecs/components/UiComponent.spec.ts

@@ -1,14 +1,14 @@
 import {
+  PointerFilterMode,
   YGAlign,
   YGDisplay,
   YGFlexDirection,
   YGJustify,
   YGOverflow,
   YGPositionType,
   YGUnit
-  // YGUnit
 } from '../../../packages/@dcl/ecs/src/components/generated/pb/decentraland/sdk/components/ui_transform.gen'
-import { Engine, components } from '../../../packages/@dcl/ecs/src'
+import { components, Engine } from '../../../packages/@dcl/ecs/src'
 import { testComponentSerialization } from './assertion'
 
 describe('UiTransform component', () => {
@@ -66,7 +66,8 @@ describe('UiTransform component', () => {
       positionTopUnit: YGUnit.YGU_POINT,
       positionType: YGPositionType.YGPT_RELATIVE,
       width: 1,
-      widthUnit: YGUnit.YGU_POINT
+      widthUnit: YGUnit.YGU_POINT,
+      pointerFilter: PointerFilterMode.PFM_NONE
     })
   })
 })

test/react-ecs/transform.spec.tsx

@@ -7,7 +7,8 @@ import {
   YGAlign,
   YGDisplay,
   YGPositionType,
-  YGJustify
+  YGJustify,
+  PointerFilterMode
 } from '../../packages/@dcl/ecs'
 import { components } from '../../packages/@dcl/ecs/src'
 import { Position, PositionUnit, ReactEcs, UiEntity, UiTransformProps } from '../../packages/@dcl/react-ecs/src'
@@ -292,4 +293,26 @@ describe('UiTransform React Ecs', () => {
       marginBottomUnit: YGUnit.YGU_POINT
     })
   })
+
+  it('should parse pointerFilter correctly', async () => {
+    const { engine, uiRenderer } = setupEngine()
+    const UiTransform = components.UiTransform(engine)
+    const entityIndex = engine.addEntity() as number
+
+    // Helpers
+    const rootDivEntity = (entityIndex + 1) as Entity
+    const getUiTransform = (entity: Entity) => UiTransform.get(entity)
+    const ui = () => (
+      <UiEntity
+        uiTransform={{
+          pointerFilter: 'block'
+        }}
+      />
+    )
+    uiRenderer.setUiRenderer(ui)
+    await engine.update(1)
+    expect(getUiTransform(rootDivEntity)).toMatchObject({
+      pointerFilter: PointerFilterMode.PFM_BLOCK
+    })
+  })
 })