tdesign-vue/lib/tree/hooks/useDraggable.js

tdesign-vue

/**
 * tdesign v1.12.1
 * (c) 2025 tdesign
 * @license MIT
 */

import { throttle } from 'lodash-es';
import { reactive } from '@vue/composition-api';

var DragPosition = /* @__PURE__ */function (DragPosition2) {
  DragPosition2[DragPosition2["Before"] = -1] = "Before";
  DragPosition2[DragPosition2["Inside"] = 0] = "Inside";
  DragPosition2[DragPosition2["After"] = 1] = "After";
  return DragPosition2;
}(DragPosition || {});
function useDraggable(state) {
  var treeItemRef = state.treeItemRef;
  var dragStates = reactive({
    isDragOver: false,
    isDragging: false,
    dropPosition: 0 /* Inside */
  });
  var updateDropPosition = function updateDropPosition(dragEvent) {
    var _rootNode$getBounding;
    var rootNode = treeItemRef.value;
    if (!rootNode) return;
    var rect = rootNode === null || rootNode === void 0 || (_rootNode$getBounding = rootNode.getBoundingClientRect) === null || _rootNode$getBounding === void 0 ? void 0 : _rootNode$getBounding.call(rootNode);
    var offsetY = window.scrollY + rect.top;
    var pageY = dragEvent.pageY;
    var gapHeight = rect.height / 4;
    var diff = pageY - offsetY;
    if (diff < gapHeight) {
      dragStates.dropPosition = -1 /* Before */;
    } else if (diff < rect.height - gapHeight) {
      dragStates.dropPosition = 0 /* Inside */;
    } else {
      dragStates.dropPosition = 1 /* After */;
    }
  };
  var setDragStatus = function setDragStatus(status, dragEvent) {
    var _drag$handleDragStart, _drag$handleDragEnd, _drag$handleDragOver, _drag$handleDragLeave, _drag$handleDrop;
    var node = state.node,
      treeScope = state.treeScope;
    var drag = treeScope.drag;
    if (!drag) return;
    switch (status) {
      case "dragStart":
        dragStates.isDragging = true;
        dragStates.dropPosition = 0 /* Inside */;
        (_drag$handleDragStart = drag.handleDragStart) === null || _drag$handleDragStart === void 0 || _drag$handleDragStart.call(drag, {
          node: node,
          dragEvent: dragEvent
        });
        break;
      case "dragEnd":
        dragStates.isDragging = false;
        dragStates.isDragOver = false;
        dragStates.dropPosition = 0 /* Inside */;
        throttleUpdateDropPosition.cancel();
        (_drag$handleDragEnd = drag.handleDragEnd) === null || _drag$handleDragEnd === void 0 || _drag$handleDragEnd.call(drag, {
          node: node,
          dragEvent: dragEvent
        });
        break;
      case "dragOver":
        dragStates.isDragOver = true;
        throttleUpdateDropPosition(dragEvent);
        (_drag$handleDragOver = drag.handleDragOver) === null || _drag$handleDragOver === void 0 || _drag$handleDragOver.call(drag, {
          node: node,
          dragEvent: dragEvent
        });
        break;
      case "dragLeave":
        dragStates.isDragOver = false;
        dragStates.dropPosition = 0 /* Inside */;
        throttleUpdateDropPosition.cancel();
        (_drag$handleDragLeave = drag.handleDragLeave) === null || _drag$handleDragLeave === void 0 || _drag$handleDragLeave.call(drag, {
          node: node,
          dragEvent: dragEvent
        });
        break;
      case "drop":
        (_drag$handleDrop = drag.handleDrop) === null || _drag$handleDrop === void 0 || _drag$handleDrop.call(drag, {
          node: node,
          dropPosition: dragStates.dropPosition,
          dragEvent: dragEvent
        });
        dragStates.isDragOver = false;
        throttleUpdateDropPosition.cancel();
        break;
    }
  };
  var handleDragStart = function handleDragStart(evt) {
    var node = state.node;
    if (!node.isDraggable()) return;
    evt.stopPropagation();
    setDragStatus("dragStart", evt);
    try {
      var _evt$dataTransfer;
      (_evt$dataTransfer = evt.dataTransfer) === null || _evt$dataTransfer === void 0 || _evt$dataTransfer.setData("text/plain", "");
    } catch (e) {}
  };
  var handleDragEnd = function handleDragEnd(evt) {
    var node = state.node;
    if (!node.isDraggable()) return;
    evt.stopPropagation();
    setDragStatus("dragEnd", evt);
  };
  var handleDragOver = function handleDragOver(evt) {
    var node = state.node;
    if (!node.isDraggable()) return;
    evt.stopPropagation();
    evt.preventDefault();
    setDragStatus("dragOver", evt);
  };
  var handleDragLeave = function handleDragLeave(evt) {
    var node = state.node;
    if (!node.isDraggable()) return;
    evt.stopPropagation();
    setDragStatus("dragLeave", evt);
  };
  var handleDrop = function handleDrop(evt) {
    var node = state.node;
    if (!node.isDraggable()) return;
    evt.stopPropagation();
    evt.preventDefault();
    setDragStatus("drop", evt);
  };
  var throttleUpdateDropPosition = throttle(function (dragEvent) {
    updateDropPosition(dragEvent);
  });
  return {
    dragStates: dragStates,
    handleDragStart: handleDragStart,
    handleDragEnd: handleDragEnd,
    handleDragOver: handleDragOver,
    handleDragLeave: handleDragLeave,
    handleDrop: handleDrop
  };
}

export { DragPosition, useDraggable as default };
//# sourceMappingURL=useDraggable.js.map