hongluan-ui/lib/components/dialog/src/resizer.js

Hongluan Component Library for Vue 3

'use strict';

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

require('../../../utils/index.js');
var animation = require('../../../utils/animation.js');

const initDialogResizer = (dlg) => {
  const resizer = dlg.__resizer__;
  const body = dlg.querySelector(".panel-body");
  body.addEventListener("mousedown", resizer.downHandler);
  resizer.width = 0;
  resizer.height = 0;
};
const resetDialogResizer = (dlg) => {
  const resizer = dlg.__resizer__;
  const body = dlg.querySelector(".panel-body");
  body.removeEventListener("mousedown", resizer.downHandler);
};
const DialogResizer = {
  beforeMount: (dlg, binding) => {
    dlg.__resizer__ = Object.assign({
      moveHandler: (e) => {
        const resizer = dlg.__resizer__;
        const { downX, downY, lastWidth, lastHeight, height: originHeight, width: originWidth } = resizer;
        const { clientX, clientY } = e;
        const transformStr = dlg.style.transform;
        const diffX = clientX - downX;
        const diffY = clientY - downY;
        const newWidth = lastWidth + diffX;
        const newHeight = lastHeight + diffY;
        const scaleX = newWidth / originWidth;
        const scaleY = newHeight / originHeight;
        dlg.style.transformOrigin = "top left";
        dlg.style.transform = animation.setTransform(transformStr, "scale", `scale(${scaleX},${scaleY})`);
      },
      upHandler: () => {
        const resizer = dlg.__resizer__;
        removeEventListener("mousemove", resizer.moveHandler);
        removeEventListener("mouseup", resizer.upHandler);
      },
      downHandler: (e) => {
        const resizer = dlg.__resizer__;
        const downX = e.clientX;
        const downY = e.clientY;
        resizer.downX = downX;
        resizer.downY = downY;
        const resizerDom = window.getComputedStyle(dlg.querySelector(".panel-body"), "::after");
        const resizerWidth = parseFloat(resizerDom.getPropertyValue("width"));
        const resizerHeight = parseFloat(resizerDom.getPropertyValue("height"));
        const targetRect = dlg.getBoundingClientRect();
        if (!resizer.width) {
          resizer.width = targetRect.width;
          resizer.height = targetRect.height;
        }
        const { bottom, right, height, width } = targetRect;
        resizer.lastWidth = width;
        resizer.lastHeight = height;
        const resizerTop = bottom - resizerHeight;
        const resizerLeft = right - resizerWidth;
        if (downX >= resizerLeft && downX <= right && downY <= bottom && downY >= resizerTop) {
          addEventListener("mousemove", resizer.moveHandler);
          addEventListener("mouseup", resizer.upHandler);
        }
      }
    });
    if (!binding.value.canResize)
      return;
    initDialogResizer(dlg);
  },
  updated(dlg, binding) {
    if (binding.value.canResize) {
      initDialogResizer(dlg);
    } else {
      resetDialogResizer(dlg);
    }
    if (binding.value.showAs === "drawer" || binding.value.placement === "fullscreen") {
      dlg.style.removeProperty("transform-origin");
      dlg.style.transform = animation.setTransform(dlg.style.transform, "scale", "");
    }
  },
  beforeUnmount(dlg) {
    resetDialogResizer(dlg);
    dlg.__resizer__ = {};
  }
};

exports.DialogResizer = DialogResizer;
//# sourceMappingURL=resizer.js.map