@itwin/itwinui-react/DEV-cjs/utils/hooks/useDragAndDrop.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'useDragAndDrop', {
  enumerable: true,
  get: function () {
    return useDragAndDrop;
  },
});
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _index = require('../functions/index.js');
const _useEventListener = require('./useEventListener.js');
const _useResizeObserver = require('./useResizeObserver.js');
const getContainerRect = (containerRef) => {
  let containerRect = containerRef?.current?.getBoundingClientRect();
  return {
    top: containerRect?.top ?? 0,
    right: containerRect?.right ?? (0, _index.getWindow)()?.innerWidth ?? 0,
    bottom: containerRect?.bottom ?? (0, _index.getWindow)()?.innerHeight ?? 0,
    left: containerRect?.left ?? 0,
  };
};
const useDragAndDrop = (elementRef, containerRef, enabled = true) => {
  let grabOffsetX = _react.useRef(0);
  let grabOffsetY = _react.useRef(0);
  let translateX = _react.useRef(void 0);
  let translateY = _react.useRef(void 0);
  let containerRectRef = _react.useRef(getContainerRect(containerRef));
  let adjustTransform = _react.useCallback(() => {
    if (!elementRef.current || !enabled) return;
    let { top, right, bottom, left } =
      elementRef.current?.getBoundingClientRect();
    let [newTranslateX, newTranslateY] = (0,
    _index.getTranslateValuesFromElement)(elementRef.current);
    containerRectRef.current = getContainerRect(containerRef);
    if (bottom > containerRectRef.current.bottom)
      newTranslateY -= bottom - containerRectRef.current.bottom;
    if (top < containerRectRef.current.top)
      newTranslateY += containerRectRef.current.top - top;
    if (right > containerRectRef.current.right)
      newTranslateX -= right - containerRectRef.current.right;
    if (left < containerRectRef.current.left)
      newTranslateX += containerRectRef.current.left - left;
    translateX.current = newTranslateX;
    translateY.current = newTranslateY;
    elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
  }, [containerRef, elementRef, enabled]);
  let [resizeRef, resizeObserver] = (0, _useResizeObserver.useResizeObserver)(
    adjustTransform,
  );
  resizeRef(containerRef?.current);
  _react.useEffect(
    () => () => {
      resizeObserver?.disconnect();
    },
    [resizeObserver],
  );
  (0, _useEventListener.useEventListener)(
    'resize',
    () => {
      adjustTransform();
      if (null != translateX.current && null != translateY.current)
        setTransform(
          `translate(${translateX.current}px, ${translateY.current}px)`,
        );
    },
    (0, _index.getWindow)(),
  );
  let [transform, setTransform] = _react.useState('');
  let onPointerMove = _react.useRef((event) => {
    if (!elementRef.current) return;
    let newTranslateX = event.clientX - grabOffsetX.current;
    let newTranslateY = event.clientY - grabOffsetY.current;
    elementRef.current.style.transform = `translate(${newTranslateX}px, ${newTranslateY}px)`;
    adjustTransform();
  });
  let originalUserSelect = _react.useRef('');
  let onPointerDown = _react.useCallback(
    (e) => {
      if (!elementRef.current || 0 !== e.button || !enabled) return;
      let [x, y] = (0, _index.getTranslateValuesFromElement)(
        elementRef.current,
      );
      grabOffsetX.current = e.clientX - x;
      grabOffsetY.current = e.clientY - y;
      originalUserSelect.current = elementRef.current.style.userSelect;
      elementRef.current.style.userSelect = 'none';
      let ownerDocument = elementRef.current.ownerDocument || document;
      ownerDocument.addEventListener('pointermove', onPointerMove.current);
      ownerDocument.addEventListener(
        'pointerup',
        () => {
          setTransform(
            `translate(${translateX.current}px, ${translateY.current}px)`,
          );
          ownerDocument.removeEventListener(
            'pointermove',
            onPointerMove.current,
          );
          if (elementRef.current)
            elementRef.current.style.userSelect = originalUserSelect.current;
        },
        {
          once: true,
        },
      );
    },
    [elementRef, enabled],
  );
  return {
    onPointerDown,
    transform,
  };
};