tav-ui/lib/packages/components/modal/src/hooks/useModalDrag2.js

Tav UI

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var useTimeout = require('../../../../hooks/core/useTimeout2.js');

function useModalDragMove(context) {
  const getStyle = (dom, attr) => {
    return getComputedStyle(dom)[attr];
  };
  const drag = (wrap) => {
    if (!wrap)
      return;
    wrap.setAttribute("data-drag", vue.unref(context.draggable));
    const dialogHeaderEl = wrap.querySelector(".ant-modal-header");
    const dragDom = wrap.querySelector(".ant-modal");
    if (!dialogHeaderEl || !dragDom || !vue.unref(context.draggable))
      return;
    dialogHeaderEl.style.cursor = "move";
    dialogHeaderEl.onmousedown = (e) => {
      if (!e)
        return;
      const disX = e.clientX;
      const disY = e.clientY;
      const screenWidth = document.body.clientWidth;
      const screenHeight = document.documentElement.clientHeight;
      const dragDomWidth = dragDom.offsetWidth;
      const dragDomheight = dragDom.offsetHeight;
      const minDragDomLeft = dragDom.offsetLeft;
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
      const minDragDomTop = dragDom.offsetTop;
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
      const domLeft = getStyle(dragDom, "left");
      const domTop = getStyle(dragDom, "top");
      let styL = +domLeft;
      let styT = +domTop;
      if (domLeft.includes("%")) {
        styL = +document.body.clientWidth * (+domLeft.replace(/%/g, "") / 100);
        styT = +document.body.clientHeight * (+domTop.replace(/%/g, "") / 100);
      } else {
        styL = +domLeft.replace(/px/g, "");
        styT = +domTop.replace(/px/g, "");
      }
      document.onmousemove = function(e2) {
        let left = e2.clientX - disX;
        let top = e2.clientY - disY;
        if (-left > minDragDomLeft)
          left = -minDragDomLeft;
        else if (left > maxDragDomLeft)
          left = maxDragDomLeft;
        if (-top > minDragDomTop)
          top = -minDragDomTop;
        else if (top > maxDragDomTop)
          top = maxDragDomTop;
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  };
  const handleDrag = () => {
    const dragWraps = document.querySelectorAll(".ant-modal-wrap");
    for (const wrap of Array.from(dragWraps)) {
      if (!wrap)
        continue;
      const display = getStyle(wrap, "display");
      const draggable = wrap.getAttribute("data-drag");
      if (display !== "none") {
        if (draggable === null || vue.unref(context.destroyOnClose))
          drag(wrap);
      }
    }
  };
  vue.watchEffect(() => {
    if (!vue.unref(context.visible) || !vue.unref(context.draggable))
      return;
    useTimeout.useTimeoutFn(() => {
      handleDrag();
    }, 30);
  });
}

exports.useModalDragMove = useModalDragMove;
//# sourceMappingURL=useModalDrag2.js.map