51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
|
import { PanSession } from './PanSession.mjs';
|
||
|
|
import { addPointerEvent } from '../../events/add-pointer-event.mjs';
|
||
|
|
import { Feature } from '../../motion/features/Feature.mjs';
|
||
|
|
import { noop } from '../../utils/noop.mjs';
|
||
|
|
import { getContextWindow } from '../../utils/get-context-window.mjs';
|
||
|
|
import { frame } from '../../frameloop/frame.mjs';
|
||
|
|
|
||
|
|
const asyncHandler = (handler) => (event, info) => {
|
||
|
|
if (handler) {
|
||
|
|
frame.update(() => handler(event, info));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
class PanGesture extends Feature {
|
||
|
|
constructor() {
|
||
|
|
super(...arguments);
|
||
|
|
this.removePointerDownListener = noop;
|
||
|
|
}
|
||
|
|
onPointerDown(pointerDownEvent) {
|
||
|
|
this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
|
||
|
|
transformPagePoint: this.node.getTransformPagePoint(),
|
||
|
|
contextWindow: getContextWindow(this.node),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
createPanHandlers() {
|
||
|
|
const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
|
||
|
|
return {
|
||
|
|
onSessionStart: asyncHandler(onPanSessionStart),
|
||
|
|
onStart: asyncHandler(onPanStart),
|
||
|
|
onMove: onPan,
|
||
|
|
onEnd: (event, info) => {
|
||
|
|
delete this.session;
|
||
|
|
if (onPanEnd) {
|
||
|
|
frame.update(() => onPanEnd(event, info));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
mount() {
|
||
|
|
this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event));
|
||
|
|
}
|
||
|
|
update() {
|
||
|
|
this.session && this.session.updateHandlers(this.createPanHandlers());
|
||
|
|
}
|
||
|
|
unmount() {
|
||
|
|
this.removePointerDownListener();
|
||
|
|
this.session && this.session.end();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export { PanGesture };
|