xdesign-vue-next/lib/drawer/hooks.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { ref, computed } from 'vue';

var useDrag = function useDrag(props) {
  var isSizeDragging = ref(false);
  var draggedSizeValue = ref(null);
  var enableDrag = function enableDrag() {
    document.addEventListener("mouseup", handleMouseup, true);
    document.addEventListener("mousemove", handleMousemove, true);
    isSizeDragging.value = true;
  };
  var handleMouseup = function handleMouseup() {
    document.removeEventListener("mouseup", handleMouseup, true);
    document.removeEventListener("mousemove", handleMousemove, true);
    isSizeDragging.value = false;
  };
  var handleMousemove = function handleMousemove(e) {
    var x = e.x,
      y = e.y;
    var maxHeight = document.documentElement.clientHeight;
    var maxWidth = document.documentElement.clientWidth;
    var offsetHeight = 8;
    var offsetWidth = 8;
    if (isSizeDragging.value && props.sizeDraggable) {
      if (props.placement === "right") {
        var moveLeft = Math.min(Math.max(maxWidth - x + offsetWidth, offsetWidth), maxWidth);
        draggedSizeValue.value = "".concat(moveLeft, "px");
      }
      if (props.placement === "left") {
        var moveRight = Math.min(Math.max(x + offsetWidth, offsetWidth), maxWidth);
        draggedSizeValue.value = "".concat(moveRight, "px");
      }
      if (props.placement === "top") {
        var moveBottom = Math.min(Math.max(y + offsetHeight, offsetHeight), maxHeight);
        draggedSizeValue.value = "".concat(moveBottom, "px");
      }
      if (props.placement === "bottom") {
        var moveTop = Math.min(Math.max(maxHeight - y + offsetHeight, offsetHeight), maxHeight);
        draggedSizeValue.value = "".concat(moveTop, "px");
      }
    }
  };
  var draggableLineStyles = computed(function () {
    var _ref;
    var isHorizontal = ["right", "left"].includes(props.placement);
    var oppositeMap = {
      left: "right",
      right: "left",
      top: "bottom",
      bottom: "top"
    };
    return _ref = {
      zIndex: 1,
      position: "absolute",
      background: "transparent"
    }, _defineProperty(_ref, oppositeMap[props.placement], 0), _defineProperty(_ref, "width", isHorizontal ? "16px" : "100%"), _defineProperty(_ref, "height", isHorizontal ? "100%" : "16px"), _defineProperty(_ref, "cursor", isHorizontal ? "col-resize" : "row-resize"), _ref;
  });
  return {
    draggedSizeValue: draggedSizeValue,
    enableDrag: enableDrag,
    draggableLineStyles: draggableLineStyles
  };
};

export { useDrag };
//# sourceMappingURL=hooks.js.map