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

Migration from hammer #2157

Merged
merged 43 commits into from
Aug 19, 2022
Merged

Migration from hammer #2157

merged 43 commits into from
Aug 19, 2022

Conversation

m-bert
Copy link
Contributor

@m-bert m-bert commented Aug 8, 2022

Description

This PR introduces new approach for RNGH on web as a response to issue #902. Main point is removing hammer.js and using pointer events instead. It is based mainly on Android implementation of GestureHandler, so it represents similar behavior.

Note that hammer.js is still enabled by default.

Each handler has set of methods called on specific event:

  • onPointerDown - called when new pointer is placed on the handler
    • onPointerAdd - this method is called manually when handler receives another pointer
  • onPointerUp - called when pointer is removed from the handler
    • onPointerRemove - similar to onPointerAdd, it is called when pointer is released from handler, but there are still remaining pointers
  • onPointerMove - called when pointers move in bounds of handler
  • onPointerOutOfBounds - called when pointer moves outside of handler (note that it had to be tracked first, so it requires onPointerDown to trigger)
  • onPointerOut - called when pointer leaves handler boundaries
  • onPointerEnter - called when pointer returns to handler
  • onPointerCancel - called when pointer gets canceled (for example by ScrollView)

Usage

To enable new implementation, call enableExperimentalWebImplementation() in the root of the project.

Structure

New implementation is located in src/web directory, while the old one is still available in web_hammer.

  • Detectors
    • RotationGestureDetector - it is used to calculate rotations in RotationGestureHandler
    • ScaleGestureDetector - it is used to calculate scaling in PinchGestureHandler
  • Handlers
    • This directory contains all handlers specific handlers along with GestureHandler base class
  • Tools
    • Here are located all additional classes:
      • Tracker - keeps track of pointers and their velocity
      • InteractionManager - it is used to properly handle simultaneous and waitFor relations
      • EventManager - it receives events from browser, and then calls callback received from handler
      • GestureHandlerOrchestrator - it is responsible for handling handlers state changes

Test plan

Tested on example app

Copy link
Member

@j-piasecki j-piasecki left a comment

Choose a reason for hiding this comment

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

Great job! Left some comments, mostly about cosmetic things for now.

example/src/App.tsx Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
src/EnableExperimentalImplementation.ts Outdated Show resolved Hide resolved
src/components/Swipeable.tsx Outdated Show resolved Hide resolved
src/RNGestureHandlerModule.web.ts Outdated Show resolved Hide resolved
src/web/tools/EventManager.ts Outdated Show resolved Hide resolved
src/web/tools/GestureHandlerOrchestrator.ts Outdated Show resolved Hide resolved
src/web/tools/GestureHandlerOrchestrator.ts Outdated Show resolved Hide resolved
src/web/tools/GestureHandlerOrchestrator.ts Outdated Show resolved Hide resolved
src/web/tools/Tracker.ts Outdated Show resolved Hide resolved
src/handlers/gestures/GestureDetector.tsx Outdated Show resolved Hide resolved
src/web/detectors/RotationGestureDetector.ts Outdated Show resolved Hide resolved
src/web/detectors/ScaleGestureDetector.ts Outdated Show resolved Hide resolved
src/web/detectors/ScaleGestureDetector.ts Outdated Show resolved Hide resolved
src/web/detectors/ScaleGestureDetector.ts Outdated Show resolved Hide resolved
src/web/tools/InteractionManager.ts Outdated Show resolved Hide resolved
src/web/interfaces.ts Outdated Show resolved Hide resolved
src/web/tools/EventManager.ts Show resolved Hide resolved
src/web/handlers/RotationGestureHandler.ts Show resolved Hide resolved
src/web/handlers/TapGestureHandler.ts Show resolved Hide resolved
Copy link
Member

@j-piasecki j-piasecki left a comment

Choose a reason for hiding this comment

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

👍

@m-bert m-bert merged commit 917295f into main Aug 19, 2022
@tomekzaw
Copy link
Member

Congratz! 🥳

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.

3 participants