@wordpress/block-editor
Version:
129 lines (127 loc) • 4.49 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/use-moving-animation/index.js
var use_moving_animation_exports = {};
__export(use_moving_animation_exports, {
default: () => use_moving_animation_default
});
module.exports = __toCommonJS(use_moving_animation_exports);
var import_web = require("@react-spring/web");
var import_element = require("@wordpress/element");
var import_dom = require("@wordpress/dom");
var import_data = require("@wordpress/data");
var import_store = require("../../store");
var BLOCK_ANIMATION_THRESHOLD = 200;
function getAbsolutePosition(element) {
return {
top: element.offsetTop,
left: element.offsetLeft
};
}
function useMovingAnimation({ triggerAnimationOnChange, clientId }) {
const ref = (0, import_element.useRef)();
const {
isTyping,
getGlobalBlockCount,
isBlockSelected,
isFirstMultiSelectedBlock,
isBlockMultiSelected,
isAncestorMultiSelected,
isDraggingBlocks
} = (0, import_data.useSelect)(import_store.store);
const { previous, prevRect } = (0, import_element.useMemo)(
() => ({
previous: ref.current && getAbsolutePosition(ref.current),
prevRect: ref.current && ref.current.getBoundingClientRect()
}),
[triggerAnimationOnChange]
);
(0, import_element.useLayoutEffect)(() => {
if (!previous || !ref.current) {
return;
}
const scrollContainer = (0, import_dom.getScrollContainer)(ref.current);
const isSelected = isBlockSelected(clientId);
const adjustScrolling = isSelected || isFirstMultiSelectedBlock(clientId);
const isDragging = isDraggingBlocks();
function preserveScrollPosition() {
if (isDragging) {
return;
}
if (adjustScrolling && prevRect) {
const blockRect = ref.current.getBoundingClientRect();
const diff = blockRect.top - prevRect.top;
if (diff) {
scrollContainer.scrollTop += diff;
}
}
}
const disableAnimation = window.matchMedia("(prefers-reduced-motion: reduce)").matches || isTyping() || getGlobalBlockCount() > BLOCK_ANIMATION_THRESHOLD;
if (disableAnimation) {
preserveScrollPosition();
return;
}
const isPartOfSelection = isSelected || isBlockMultiSelected(clientId) || isAncestorMultiSelected(clientId);
if (isPartOfSelection && isDragging) {
return;
}
const zIndex = isPartOfSelection ? "1" : "";
const controller = new import_web.Controller({
x: 0,
y: 0,
config: { mass: 5, tension: 2e3, friction: 200 },
onChange({ value }) {
if (!ref.current) {
return;
}
let { x: x2, y: y2 } = value;
x2 = Math.round(x2);
y2 = Math.round(y2);
const finishedMoving = x2 === 0 && y2 === 0;
ref.current.style.transformOrigin = "center center";
ref.current.style.transform = finishedMoving ? null : `translate3d(${x2}px,${y2}px,0)`;
ref.current.style.zIndex = zIndex;
preserveScrollPosition();
}
});
ref.current.style.transform = void 0;
const destination = getAbsolutePosition(ref.current);
const x = Math.round(previous.left - destination.left);
const y = Math.round(previous.top - destination.top);
controller.start({ x: 0, y: 0, from: { x, y } });
return () => {
controller.stop();
controller.set({ x: 0, y: 0 });
};
}, [
previous,
prevRect,
clientId,
isTyping,
getGlobalBlockCount,
isBlockSelected,
isFirstMultiSelectedBlock,
isBlockMultiSelected,
isAncestorMultiSelected,
isDraggingBlocks
]);
return ref;
}
var use_moving_animation_default = useMovingAnimation;
//# sourceMappingURL=index.js.map