@wordpress/block-editor/build-module/components/use-moving-animation/index.js

Generic block editor.

// packages/block-editor/src/components/use-moving-animation/index.js
import { Controller } from "@react-spring/web";
import { useLayoutEffect, useMemo, useRef } from "@wordpress/element";
import { getScrollContainer } from "@wordpress/dom";
import { useSelect } from "@wordpress/data";
import { store as blockEditorStore } from "../../store";
var BLOCK_ANIMATION_THRESHOLD = 200;
function getAbsolutePosition(element) {
  return {
    top: element.offsetTop,
    left: element.offsetLeft
  };
}
function useMovingAnimation({ triggerAnimationOnChange, clientId }) {
  const ref = useRef();
  const {
    isTyping,
    getGlobalBlockCount,
    isBlockSelected,
    isFirstMultiSelectedBlock,
    isBlockMultiSelected,
    isAncestorMultiSelected,
    isDraggingBlocks
  } = useSelect(blockEditorStore);
  const { previous, prevRect } = useMemo(
    () => ({
      previous: ref.current && getAbsolutePosition(ref.current),
      prevRect: ref.current && ref.current.getBoundingClientRect()
    }),
    [triggerAnimationOnChange]
  );
  useLayoutEffect(() => {
    if (!previous || !ref.current) {
      return;
    }
    const scrollContainer = 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 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;
export {
  use_moving_animation_default as default
};
//# sourceMappingURL=index.js.map