index.mjs 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import { frame } from 'motion-dom';
  2. import { noop } from 'motion-utils';
  3. import { addPointerEvent } from '../../events/add-pointer-event.mjs';
  4. import { Feature } from '../../motion/features/Feature.mjs';
  5. import { getContextWindow } from '../../utils/get-context-window.mjs';
  6. import { PanSession } from './PanSession.mjs';
  7. const asyncHandler = (handler) => (event, info) => {
  8. if (handler) {
  9. frame.postRender(() => handler(event, info));
  10. }
  11. };
  12. class PanGesture extends Feature {
  13. constructor() {
  14. super(...arguments);
  15. this.removePointerDownListener = noop;
  16. }
  17. onPointerDown(pointerDownEvent) {
  18. this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
  19. transformPagePoint: this.node.getTransformPagePoint(),
  20. contextWindow: getContextWindow(this.node),
  21. });
  22. }
  23. createPanHandlers() {
  24. const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
  25. return {
  26. onSessionStart: asyncHandler(onPanSessionStart),
  27. onStart: asyncHandler(onPanStart),
  28. onMove: onPan,
  29. onEnd: (event, info) => {
  30. delete this.session;
  31. if (onPanEnd) {
  32. frame.postRender(() => onPanEnd(event, info));
  33. }
  34. },
  35. };
  36. }
  37. mount() {
  38. this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event));
  39. }
  40. update() {
  41. this.session && this.session.updateHandlers(this.createPanHandlers());
  42. }
  43. unmount() {
  44. this.removePointerDownListener();
  45. this.session && this.session.end();
  46. }
  47. }
  48. export { PanGesture };