@wordpress/block-editor
Version:
88 lines (82 loc) • 3.75 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useScrollWhenDragging;
var _dom = require("@wordpress/dom");
var _element = require("@wordpress/element");
/**
* WordPress dependencies
*/
const SCROLL_INACTIVE_DISTANCE_PX = 50;
const SCROLL_INTERVAL_MS = 25;
const PIXELS_PER_SECOND_PER_PERCENTAGE = 1000;
const VELOCITY_MULTIPLIER = PIXELS_PER_SECOND_PER_PERCENTAGE * (SCROLL_INTERVAL_MS / 1000);
/**
* React hook that scrolls the scroll container when a block is being dragged.
*
* @return {Function[]} `startScrolling`, `scrollOnDragOver`, `stopScrolling`
* functions to be called in `onDragStart`, `onDragOver`
* and `onDragEnd` events respectively.
*/
function useScrollWhenDragging() {
const dragStartYRef = (0, _element.useRef)(null);
const velocityYRef = (0, _element.useRef)(null);
const scrollParentYRef = (0, _element.useRef)(null);
const scrollEditorIntervalRef = (0, _element.useRef)(null);
// Clear interval when unmounting.
(0, _element.useEffect)(() => () => {
if (scrollEditorIntervalRef.current) {
clearInterval(scrollEditorIntervalRef.current);
scrollEditorIntervalRef.current = null;
}
}, []);
const startScrolling = (0, _element.useCallback)(event => {
dragStartYRef.current = event.clientY;
// Find nearest parent(s) to scroll.
scrollParentYRef.current = (0, _dom.getScrollContainer)(event.target);
scrollEditorIntervalRef.current = setInterval(() => {
if (scrollParentYRef.current && velocityYRef.current) {
const newTop = scrollParentYRef.current.scrollTop + velocityYRef.current;
// Setting `behavior: 'smooth'` as a scroll property seems to hurt performance.
// Better to use a small scroll interval.
scrollParentYRef.current.scroll({
top: newTop
});
}
}, SCROLL_INTERVAL_MS);
}, []);
const scrollOnDragOver = (0, _element.useCallback)(event => {
if (!scrollParentYRef.current) {
return;
}
const scrollParentHeight = scrollParentYRef.current.offsetHeight;
const offsetDragStartPosition = dragStartYRef.current - scrollParentYRef.current.offsetTop;
const offsetDragPosition = event.clientY - scrollParentYRef.current.offsetTop;
if (event.clientY > offsetDragStartPosition) {
// User is dragging downwards.
const moveableDistance = Math.max(scrollParentHeight - offsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
const dragDistance = Math.max(offsetDragPosition - offsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
const distancePercentage = moveableDistance === 0 || dragDistance === 0 ? 0 : dragDistance / moveableDistance;
velocityYRef.current = VELOCITY_MULTIPLIER * distancePercentage;
} else if (event.clientY < offsetDragStartPosition) {
// User is dragging upwards.
const moveableDistance = Math.max(offsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
const dragDistance = Math.max(offsetDragStartPosition - offsetDragPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
const distancePercentage = moveableDistance === 0 || dragDistance === 0 ? 0 : dragDistance / moveableDistance;
velocityYRef.current = -VELOCITY_MULTIPLIER * distancePercentage;
} else {
velocityYRef.current = 0;
}
}, []);
const stopScrolling = () => {
dragStartYRef.current = null;
scrollParentYRef.current = null;
if (scrollEditorIntervalRef.current) {
clearInterval(scrollEditorIntervalRef.current);
scrollEditorIntervalRef.current = null;
}
};
return [startScrolling, scrollOnDragOver, stopScrolling];
}
//# sourceMappingURL=use-scroll-when-dragging.js.map