Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve hook to register events on canvas #1481

Merged
merged 1 commit into from
Aug 31, 2023
Merged

Improve hook to register events on canvas #1481

merged 1 commit into from
Aug 31, 2023

Conversation

axelboc
Copy link
Contributor

@axelboc axelboc commented Aug 25, 2023

I'm rethinking useCanvasEvents a bit. The hook is now called useCanvasEvent (singular) and allows registering only one event listener at a time. This brings the API closer to that of useEventListener from react-hookz and avoids registering event listeners that are not actually used.

Additional benefits of the new implementation:

  • It allows more events to be registered, not just pointerdown, pointerup, pointermove and wheel — so basically any event that has offsetX and offsetY (i.e. any event that extends MouseEvent, including WheelEvent, PointerEvent, DragEvent).
  • It uses useSyncedRef so consumers don't have to wrap their listeners in useCallback — this simplifies a bunch of code.
  • It allows overriding the options passed to addEventListener, notably passive, which might be useful at some point notably for wheel events (currently, the only place where we do need to configure passive is in useWheelCapture but it doesn't rely on useCanvasEvent).

@axelboc axelboc requested a review from loichuder August 25, 2023 13:17
Copy link
Member

@loichuder loichuder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So much cleaner from the consumer perspective. Well done 👍

apps/storybook/src/Utilities.mdx Outdated Show resolved Hide resolved
packages/lib/src/interactions/models.ts Show resolved Hide resolved
Base automatically changed from usedrag to main August 31, 2023 07:20
@axelboc axelboc merged commit 174e5b5 into main Aug 31, 2023
8 checks passed
@axelboc axelboc deleted the use-canvas-event branch August 31, 2023 07:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants