@wordpress/block-editor
Version:
102 lines (100 loc) • 4.24 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js
var use_scroll_when_dragging_exports = {};
__export(use_scroll_when_dragging_exports, {
default: () => useScrollWhenDragging
});
module.exports = __toCommonJS(use_scroll_when_dragging_exports);
var import_dom = require("@wordpress/dom");
var import_element = require("@wordpress/element");
var SCROLL_INACTIVE_DISTANCE_PX = 50;
var SCROLL_INTERVAL_MS = 25;
var PIXELS_PER_SECOND_PER_PERCENTAGE = 1e3;
var VELOCITY_MULTIPLIER = PIXELS_PER_SECOND_PER_PERCENTAGE * (SCROLL_INTERVAL_MS / 1e3);
function useScrollWhenDragging() {
const dragStartYRef = (0, import_element.useRef)(null);
const velocityYRef = (0, import_element.useRef)(null);
const scrollParentYRef = (0, import_element.useRef)(null);
const scrollEditorIntervalRef = (0, import_element.useRef)(null);
(0, import_element.useEffect)(
() => () => {
if (scrollEditorIntervalRef.current) {
clearInterval(scrollEditorIntervalRef.current);
scrollEditorIntervalRef.current = null;
}
},
[]
);
const startScrolling = (0, import_element.useCallback)((event) => {
dragStartYRef.current = event.clientY;
scrollParentYRef.current = (0, import_dom.getScrollContainer)(event.target);
scrollEditorIntervalRef.current = setInterval(() => {
if (scrollParentYRef.current && velocityYRef.current) {
const newTop = scrollParentYRef.current.scrollTop + velocityYRef.current;
scrollParentYRef.current.scroll({
top: newTop
});
}
}, SCROLL_INTERVAL_MS);
}, []);
const scrollOnDragOver = (0, import_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) {
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) {
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