Feat/pointer position and drag (#1052)

* update protocol

* unch

* missing

* add ui drag handlers

* lints are not a commit hook

* build

* missed the trigger

---------

Co-authored-by: Mateo "Kuruk" Miccino <mateomiccino@gmail.com>

Author: robtfm

.vscode/settings.json

@@ -19,6 +19,6 @@
     "packages/@dcl/inspector/hot-reload.js": false
   },
   "[typescript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   }
 }

package-lock.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-12415236132.commit-53e881e",
+    "@dcl/protocol": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-12791995584.commit-4338852.tgz",
     "@dcl/quickjs-emscripten": "^0.21.0-3680274614.commit-1808aa1",
     "@dcl/ts-proto": "1.153.0",
     "@types/fs-extra": "^9.0.12",

package.json

@@ -66,6 +66,27 @@ export interface PointerEventsSystem {
    */
   removeOnPointerHoverLeave(entity: Entity): void
 
+  /**
+   * @public
+   * Remove the callback for onPointerDrag event
+   * @param entity - Entity where the callback was attached
+   */
+  removeOnPointerDrag(entity: Entity): void
+
+  /**
+   * @public
+   * Remove the callback for onPointerDragLocked event
+   * @param entity - Entity where the callback was attached
+   */
+  removeOnPointerDragLocked(entity: Entity): void
+
+  /**
+   * @public
+   * Remove the callback for onPointerDragEnd event
+   * @param entity - Entity where the callback was attached
+   */
+  removeOnPointerDragEnd(entity: Entity): void
+
   /**
    * @internal
    * Execute callback when the user clicks the entity.
@@ -124,6 +145,34 @@ export interface PointerEventsSystem {
     pointerData: { entity: Entity; opts?: Partial<EventSystemOptions> },
     cb: EventSystemCallback
   ): void
+
+  /**
+   * @public
+   * Execute callback when the user clicks and drags the pointer from inside the entity
+   * @param pointerData - Entity to attach the callback - Opts to trigger Feedback and Button
+   * @param cb - Function to execute when click fires
+   */
+  onPointerDrag(pointerData: { entity: Entity; opts?: Partial<EventSystemOptions> }, cb: EventSystemCallback): void
+
+  /**
+   * @public
+   * Execute callback when the user clicks and drags the pointer from inside the entity,
+   * locking the cursor in place
+   * @param pointerData - Entity to attach the callback - Opts to trigger Feedback and Button
+   * @param cb - Function to execute when click fires
+   */
+  onPointerDragLocked(
+    pointerData: { entity: Entity; opts?: Partial<EventSystemOptions> },
+    cb: EventSystemCallback
+  ): void
+
+  /**
+   * @public
+   * Execute callback when the user releases the button after a drag
+   * @param pointerData - Entity to attach the callback - Opts to trigger Feedback and Button
+   * @param cb - Function to execute when click fires
+   */
+  onPointerDragEnd(pointerData: { entity: Entity; opts?: Partial<EventSystemOptions> }, cb: EventSystemCallback): void
 }
 
 /**
@@ -138,7 +187,10 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
     Down,
     Up,
     HoverEnter,
-    HoverLeave
+    HoverLeave,
+    Drag,
+    DragLocked,
+    DragEnd
   }
   type EventMapType = Map<EventType, { cb: EventSystemCallback; opts: EventSystemOptions }>
 
@@ -177,6 +229,12 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
       return PointerEventType.PET_HOVER_LEAVE
     } else if (eventType === EventType.HoverEnter) {
       return PointerEventType.PET_HOVER_ENTER
+    } else if (eventType === EventType.Drag) {
+      return PointerEventType.PET_DRAG
+    } else if (eventType === EventType.DragLocked) {
+      return PointerEventType.PET_DRAG_LOCKED
+    } else if (eventType === EventType.DragEnd) {
+      return PointerEventType.PET_DRAG_END
     }
     return PointerEventType.PET_DOWN
   }
@@ -210,7 +268,10 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
           eventType === EventType.Down ||
           eventType === EventType.Up ||
           eventType === EventType.HoverEnter ||
-          eventType === EventType.HoverLeave
+          eventType === EventType.HoverLeave ||
+          eventType === EventType.Drag ||
+          eventType === EventType.DragLocked ||
+          eventType === EventType.DragEnd
         ) {
           const command = inputSystem.getInputCommand(opts.button, getPointerEvent(eventType), entity)
           if (command) {
@@ -263,6 +324,33 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
     setPointerEvent(entity, PointerEventType.PET_HOVER_LEAVE, options)
   }
 
+  const onPointerDrag: PointerEventsSystem['onPointerDrag'] = (...args) => {
+    const [data, cb] = args
+    const { entity, opts } = data
+    const options = getDefaultOpts(opts)
+    removeEvent(entity, EventType.Drag)
+    getEvent(entity).set(EventType.Drag, { cb, opts: options })
+    setPointerEvent(entity, PointerEventType.PET_DRAG, options)
+  }
+
+  const onPointerDragLocked: PointerEventsSystem['onPointerDragLocked'] = (...args) => {
+    const [data, cb] = args
+    const { entity, opts } = data
+    const options = getDefaultOpts(opts)
+    removeEvent(entity, EventType.DragLocked)
+    getEvent(entity).set(EventType.DragLocked, { cb, opts: options })
+    setPointerEvent(entity, PointerEventType.PET_DRAG_LOCKED, options)
+  }
+
+  const onPointerDragEnd: PointerEventsSystem['onPointerDragEnd'] = (...args) => {
+    const [data, cb] = args
+    const { entity, opts } = data
+    const options = getDefaultOpts(opts)
+    removeEvent(entity, EventType.DragEnd)
+    getEvent(entity).set(EventType.DragEnd, { cb, opts: options })
+    setPointerEvent(entity, PointerEventType.PET_DRAG_END, options)
+  }
+
   return {
     removeOnClick(entity: Entity) {
       removeEvent(entity, EventType.Click)
@@ -284,6 +372,18 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
       removeEvent(entity, EventType.HoverLeave)
     },
 
+    removeOnPointerDrag(entity: Entity) {
+      removeEvent(entity, EventType.Drag)
+    },
+
+    removeOnPointerDragLocked(entity: Entity) {
+      removeEvent(entity, EventType.DragLocked)
+    },
+
+    removeOnPointerDragEnd(entity: Entity) {
+      removeEvent(entity, EventType.DragEnd)
+    },
+
     onClick(value, cb) {
       const { entity } = value
       const options = getDefaultOpts(value.opts)
@@ -298,6 +398,9 @@ export function createPointerEventsSystem(engine: IEngine, inputSystem: IInputSy
     onPointerDown,
     onPointerUp,
     onPointerHoverEnter,
-    onPointerHoverLeave
+    onPointerHoverLeave,
+    onPointerDrag,
+    onPointerDragLocked,
+    onPointerDragEnd
   }
 }

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

@@ -1144,6 +1144,9 @@ export type EntityComponents = {
     onMouseUp: Callback;
     onMouseEnter: Callback;
     onMouseLeave: Callback;
+    onMouseDrag: Callback;
+    onMouseDragLocked: Callback;
+    onMouseDragEnd: Callback;
 };
 
 // @public (undocumented)
@@ -1644,6 +1647,9 @@ export type Listeners = {
     onMouseUp?: Callback;
     onMouseEnter?: Callback;
     onMouseLeave?: Callback;
+    onMouseDrag?: Callback;
+    onMouseDragLocked?: Callback;
+    onMouseDragEnd?: Callback;
 };
 
 // @public (undocumented)
@@ -3596,6 +3602,18 @@ export interface PointerEventsSystem {
     }, cb: EventSystemCallback): void;
     // @deprecated (undocumented)
     onPointerDown(entity: Entity, cb: EventSystemCallback, opts?: Partial<EventSystemOptions>): void;
+    onPointerDrag(pointerData: {
+        entity: Entity;
+        opts?: Partial<EventSystemOptions>;
+    }, cb: EventSystemCallback): void;
+    onPointerDragEnd(pointerData: {
+        entity: Entity;
+        opts?: Partial<EventSystemOptions>;
+    }, cb: EventSystemCallback): void;
+    onPointerDragLocked(pointerData: {
+        entity: Entity;
+        opts?: Partial<EventSystemOptions>;
+    }, cb: EventSystemCallback): void;
     onPointerHoverEnter(pointerData: {
         entity: Entity;
         opts?: Partial<EventSystemOptions>;
@@ -3611,6 +3629,9 @@ export interface PointerEventsSystem {
     // @deprecated (undocumented)
     onPointerUp(entity: Entity, cb: EventSystemCallback, opts?: Partial<EventSystemOptions>): void;
     removeOnPointerDown(entity: Entity): void;
+    removeOnPointerDrag(entity: Entity): void;
+    removeOnPointerDragEnd(entity: Entity): void;
+    removeOnPointerDragLocked(entity: Entity): void;
     removeOnPointerHoverEnter(entity: Entity): void;
     removeOnPointerHoverLeave(entity: Entity): void;
     removeOnPointerUp(entity: Entity): void;

packages/@dcl/inspector/build.js

@@ -35,7 +35,18 @@ function getButtonProps(props: UiButtonProps) {
  */
 /* @__PURE__ */
 export function Button(props: UiButtonProps) {
-  const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props
+  const {
+    uiTransform,
+    uiBackground,
+    onMouseDown,
+    onMouseUp,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDrag,
+    onMouseDragLocked,
+    onMouseDragEnd,
+    ...otherProps
+  } = props
   const buttonProps = getButtonProps(props)
   const uiBackgroundProps = parseUiBackground({
     ...buttonProps.uiBackground,
@@ -66,6 +77,9 @@ export function Button(props: UiButtonProps) {
       onMouseUp={!!props.disabled ? undefined : onMouseUp}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
+      onMouseDrag={onMouseDrag}
+      onMouseDragLocked={onMouseDragLocked}
+      onMouseDragEnd={onMouseDragEnd}
       uiTransform={uiTransformProps}
       uiText={textProps}
       uiBackground={uiBackgroundProps}