Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Ignore mouse move/leave events when the cursor hasn’t moved (#2069)
* Ignore mouse move/leave events when the cursor hasn’t moved A mouse enter / leave event where the cursor hasn’t moved happen only because of: - Scrolling - The container moved * Fix linting errors * Update changelog * wip * Fix tests * fix linting error * Tweak tests to bypass tracked pointer checks * Fixup * Add stuff * Fix build script * fix stuff * wip
- Loading branch information
1 parent
a6dea8a
commit 2e941f8
Showing
16 changed files
with
293 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
packages/@headlessui-react/src/hooks/use-tracked-pointer.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { useRef } from 'react' | ||
|
|
||
| type PointerPosition = [x: number, y: number] | ||
|
|
||
| function eventToPosition(evt: PointerEvent): PointerPosition { | ||
| return [evt.screenX, evt.screenY] | ||
| } | ||
|
|
||
| export function useTrackedPointer() { | ||
| let lastPos = useRef<PointerPosition>([-1, -1]) | ||
|
|
||
| return { | ||
| wasMoved(evt: PointerEvent) { | ||
| // FIXME: Remove this once we use browser testing in all the relevant places. | ||
| // NOTE: This is replaced with a compile-time define during the build process | ||
| // This hack exists to work around a few failing tests caused by our inability to "move" the virtual pointer in JSDOM pointer events. | ||
| if (process.env.TEST_BYPASS_TRACKED_POINTER) { | ||
| return true | ||
| } | ||
|
|
||
| let newPos = eventToPosition(evt) | ||
|
|
||
| if (lastPos.current[0] === newPos[0] && lastPos.current[1] === newPos[1]) { | ||
| return false | ||
| } | ||
|
|
||
| lastPos.current = newPos | ||
| return true | ||
| }, | ||
|
|
||
| update(evt: PointerEvent) { | ||
| lastPos.current = eventToPosition(evt) | ||
| }, | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| export class FakePointer { | ||
| private x: number = 0 | ||
| private y: number = 0 | ||
|
|
||
| constructor(private width: number, private height: number) { | ||
| this.width = width | ||
| this.height = height | ||
| } | ||
|
|
||
| get options() { | ||
| return { | ||
| screenX: this.x, | ||
| screenY: this.y, | ||
| } | ||
| } | ||
|
|
||
| randomize() { | ||
| this.x = Math.floor(Math.random() * this.width) | ||
| this.y = Math.floor(Math.random() * this.height) | ||
| } | ||
|
|
||
| advance(amount: number = 1) { | ||
| this.x += amount | ||
|
|
||
| if (this.x >= this.width) { | ||
| this.x %= this.width | ||
| this.y++ | ||
| } | ||
|
|
||
| if (this.y >= this.height) { | ||
| this.y %= this.height | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * JSDOM does not support pointer events. | ||
| * Because of this when we try to set the pointer position it returns undefined so our checks fail. | ||
| * | ||
| * This runs the callback with the TEST_IGNORE_TRACKED_POINTER environment variable set to 1 so we bypass the checks. | ||
| */ | ||
| bypassingTrackingChecks(callback: () => void) { | ||
| let original = process.env.TEST_BYPASS_TRACKED_POINTER | ||
| process.env.TEST_BYPASS_TRACKED_POINTER = '1' | ||
| callback() | ||
| process.env.TEST_BYPASS_TRACKED_POINTER = original | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * A global pointer for use in pointer and mouse event checks | ||
| */ | ||
| export let pointer = new FakePointer(1920, 1080) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.