| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- 'use strict';
- Object.defineProperty(exports, '__esModule', { value: true });
- var vue = require('vue');
- var index = require('../../../../hooks/use-namespace/index.js');
- var shared = require('@vue/shared');
- var style = require('../../../../utils/dom/style.js');
- const dragEventsKey = Symbol("dragEvents");
- function useDragNodeHandler({
- props,
- ctx,
- el$,
- dropIndicator$,
- store
- }) {
- const ns = index.useNamespace("tree");
- const dragState = vue.ref({
- showDropIndicator: false,
- draggingNode: null,
- dropNode: null,
- allowDrop: true,
- dropType: null
- });
- const treeNodeDragStart = ({ event, treeNode }) => {
- if (!event.dataTransfer)
- return;
- if (shared.isFunction(props.allowDrag) && !props.allowDrag(treeNode.node)) {
- event.preventDefault();
- return false;
- }
- event.dataTransfer.effectAllowed = "move";
- try {
- event.dataTransfer.setData("text/plain", "");
- } catch (e) {
- }
- dragState.value.draggingNode = treeNode;
- ctx.emit("node-drag-start", treeNode.node, event);
- };
- const treeNodeDragOver = ({ event, treeNode }) => {
- if (!event.dataTransfer)
- return;
- const dropNode = treeNode;
- const oldDropNode = dragState.value.dropNode;
- if (oldDropNode && oldDropNode.node.id !== dropNode.node.id) {
- style.removeClass(oldDropNode.$el, ns.is("drop-inner"));
- }
- const draggingNode = dragState.value.draggingNode;
- if (!draggingNode || !dropNode)
- return;
- let dropPrev = true;
- let dropInner = true;
- let dropNext = true;
- let userAllowDropInner = true;
- if (shared.isFunction(props.allowDrop)) {
- dropPrev = props.allowDrop(draggingNode.node, dropNode.node, "prev");
- userAllowDropInner = dropInner = props.allowDrop(draggingNode.node, dropNode.node, "inner");
- dropNext = props.allowDrop(draggingNode.node, dropNode.node, "next");
- }
- event.dataTransfer.dropEffect = dropInner || dropPrev || dropNext ? "move" : "none";
- if ((dropPrev || dropInner || dropNext) && (oldDropNode == null ? void 0 : oldDropNode.node.id) !== dropNode.node.id) {
- if (oldDropNode) {
- ctx.emit("node-drag-leave", draggingNode.node, oldDropNode.node, event);
- }
- ctx.emit("node-drag-enter", draggingNode.node, dropNode.node, event);
- }
- if (dropPrev || dropInner || dropNext) {
- dragState.value.dropNode = dropNode;
- } else {
- dragState.value.dropNode = null;
- }
- if (dropNode.node.nextSibling === draggingNode.node) {
- dropNext = false;
- }
- if (dropNode.node.previousSibling === draggingNode.node) {
- dropPrev = false;
- }
- if (dropNode.node.contains(draggingNode.node, false)) {
- dropInner = false;
- }
- if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
- dropPrev = false;
- dropInner = false;
- dropNext = false;
- }
- const dropEl = dropNode.$el;
- const targetPosition = dropEl.querySelector(`.${ns.be("node", "content")}`).getBoundingClientRect();
- const treePosition = el$.value.getBoundingClientRect();
- let dropType;
- const prevPercent = dropPrev ? dropInner ? 0.25 : dropNext ? 0.45 : 1 : Number.NEGATIVE_INFINITY;
- const nextPercent = dropNext ? dropInner ? 0.75 : dropPrev ? 0.55 : 0 : Number.POSITIVE_INFINITY;
- let indicatorTop = -9999;
- const distance = event.clientY - targetPosition.top;
- if (distance < targetPosition.height * prevPercent) {
- dropType = "before";
- } else if (distance > targetPosition.height * nextPercent) {
- dropType = "after";
- } else if (dropInner) {
- dropType = "inner";
- } else {
- dropType = "none";
- }
- const iconPosition = dropEl.querySelector(`.${ns.be("node", "expand-icon")}`).getBoundingClientRect();
- const dropIndicator = dropIndicator$.value;
- if (dropType === "before") {
- indicatorTop = iconPosition.top - treePosition.top;
- } else if (dropType === "after") {
- indicatorTop = iconPosition.bottom - treePosition.top;
- }
- dropIndicator.style.top = `${indicatorTop}px`;
- dropIndicator.style.left = `${iconPosition.right - treePosition.left}px`;
- if (dropType === "inner") {
- style.addClass(dropEl, ns.is("drop-inner"));
- } else {
- style.removeClass(dropEl, ns.is("drop-inner"));
- }
- dragState.value.showDropIndicator = dropType === "before" || dropType === "after";
- dragState.value.allowDrop = dragState.value.showDropIndicator || userAllowDropInner;
- dragState.value.dropType = dropType;
- ctx.emit("node-drag-over", draggingNode.node, dropNode.node, event);
- };
- const treeNodeDragEnd = (event) => {
- var _a, _b;
- const { draggingNode, dropType, dropNode } = dragState.value;
- event.preventDefault();
- if (event.dataTransfer) {
- event.dataTransfer.dropEffect = "move";
- }
- if ((draggingNode == null ? void 0 : draggingNode.node.data) && dropNode) {
- const draggingNodeCopy = { data: draggingNode.node.data };
- if (dropType !== "none") {
- draggingNode.node.remove();
- }
- if (dropType === "before") {
- (_a = dropNode.node.parent) == null ? void 0 : _a.insertBefore(draggingNodeCopy, dropNode.node);
- } else if (dropType === "after") {
- (_b = dropNode.node.parent) == null ? void 0 : _b.insertAfter(draggingNodeCopy, dropNode.node);
- } else if (dropType === "inner") {
- dropNode.node.insertChild(draggingNodeCopy);
- }
- if (dropType !== "none") {
- store.value.registerNode(draggingNodeCopy);
- if (store.value.key) {
- draggingNode.node.eachNode((node) => {
- var _a2;
- (_a2 = store.value.nodesMap[node.data[store.value.key]]) == null ? void 0 : _a2.setChecked(node.checked, !store.value.checkStrictly);
- });
- }
- }
- style.removeClass(dropNode.$el, ns.is("drop-inner"));
- ctx.emit("node-drag-end", draggingNode.node, dropNode.node, dropType, event);
- if (dropType !== "none") {
- ctx.emit("node-drop", draggingNode.node, dropNode.node, dropType, event);
- }
- }
- if (draggingNode && !dropNode) {
- ctx.emit("node-drag-end", draggingNode.node, null, dropType, event);
- }
- dragState.value.showDropIndicator = false;
- dragState.value.draggingNode = null;
- dragState.value.dropNode = null;
- dragState.value.allowDrop = true;
- };
- vue.provide(dragEventsKey, {
- treeNodeDragStart,
- treeNodeDragOver,
- treeNodeDragEnd
- });
- return {
- dragState
- };
- }
- exports.dragEventsKey = dragEventsKey;
- exports.useDragNodeHandler = useDragNodeHandler;
- //# sourceMappingURL=useDragNode.js.map
|