af276255434d71af1c618ab18a1c7e01362d23e59c7acf2d5e50401361d03112b0e077bc9aecebbe30a2935f459cf00c854b2299c5e944959a72eaf3971671 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index = require('../../../../hooks/use-namespace/index.js');
  5. var shared = require('@vue/shared');
  6. var style = require('../../../../utils/dom/style.js');
  7. const dragEventsKey = Symbol("dragEvents");
  8. function useDragNodeHandler({
  9. props,
  10. ctx,
  11. el$,
  12. dropIndicator$,
  13. store
  14. }) {
  15. const ns = index.useNamespace("tree");
  16. const dragState = vue.ref({
  17. showDropIndicator: false,
  18. draggingNode: null,
  19. dropNode: null,
  20. allowDrop: true,
  21. dropType: null
  22. });
  23. const treeNodeDragStart = ({ event, treeNode }) => {
  24. if (!event.dataTransfer)
  25. return;
  26. if (shared.isFunction(props.allowDrag) && !props.allowDrag(treeNode.node)) {
  27. event.preventDefault();
  28. return false;
  29. }
  30. event.dataTransfer.effectAllowed = "move";
  31. try {
  32. event.dataTransfer.setData("text/plain", "");
  33. } catch (e) {
  34. }
  35. dragState.value.draggingNode = treeNode;
  36. ctx.emit("node-drag-start", treeNode.node, event);
  37. };
  38. const treeNodeDragOver = ({ event, treeNode }) => {
  39. if (!event.dataTransfer)
  40. return;
  41. const dropNode = treeNode;
  42. const oldDropNode = dragState.value.dropNode;
  43. if (oldDropNode && oldDropNode.node.id !== dropNode.node.id) {
  44. style.removeClass(oldDropNode.$el, ns.is("drop-inner"));
  45. }
  46. const draggingNode = dragState.value.draggingNode;
  47. if (!draggingNode || !dropNode)
  48. return;
  49. let dropPrev = true;
  50. let dropInner = true;
  51. let dropNext = true;
  52. let userAllowDropInner = true;
  53. if (shared.isFunction(props.allowDrop)) {
  54. dropPrev = props.allowDrop(draggingNode.node, dropNode.node, "prev");
  55. userAllowDropInner = dropInner = props.allowDrop(draggingNode.node, dropNode.node, "inner");
  56. dropNext = props.allowDrop(draggingNode.node, dropNode.node, "next");
  57. }
  58. event.dataTransfer.dropEffect = dropInner || dropPrev || dropNext ? "move" : "none";
  59. if ((dropPrev || dropInner || dropNext) && (oldDropNode == null ? void 0 : oldDropNode.node.id) !== dropNode.node.id) {
  60. if (oldDropNode) {
  61. ctx.emit("node-drag-leave", draggingNode.node, oldDropNode.node, event);
  62. }
  63. ctx.emit("node-drag-enter", draggingNode.node, dropNode.node, event);
  64. }
  65. if (dropPrev || dropInner || dropNext) {
  66. dragState.value.dropNode = dropNode;
  67. } else {
  68. dragState.value.dropNode = null;
  69. }
  70. if (dropNode.node.nextSibling === draggingNode.node) {
  71. dropNext = false;
  72. }
  73. if (dropNode.node.previousSibling === draggingNode.node) {
  74. dropPrev = false;
  75. }
  76. if (dropNode.node.contains(draggingNode.node, false)) {
  77. dropInner = false;
  78. }
  79. if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
  80. dropPrev = false;
  81. dropInner = false;
  82. dropNext = false;
  83. }
  84. const dropEl = dropNode.$el;
  85. const targetPosition = dropEl.querySelector(`.${ns.be("node", "content")}`).getBoundingClientRect();
  86. const treePosition = el$.value.getBoundingClientRect();
  87. let dropType;
  88. const prevPercent = dropPrev ? dropInner ? 0.25 : dropNext ? 0.45 : 1 : Number.NEGATIVE_INFINITY;
  89. const nextPercent = dropNext ? dropInner ? 0.75 : dropPrev ? 0.55 : 0 : Number.POSITIVE_INFINITY;
  90. let indicatorTop = -9999;
  91. const distance = event.clientY - targetPosition.top;
  92. if (distance < targetPosition.height * prevPercent) {
  93. dropType = "before";
  94. } else if (distance > targetPosition.height * nextPercent) {
  95. dropType = "after";
  96. } else if (dropInner) {
  97. dropType = "inner";
  98. } else {
  99. dropType = "none";
  100. }
  101. const iconPosition = dropEl.querySelector(`.${ns.be("node", "expand-icon")}`).getBoundingClientRect();
  102. const dropIndicator = dropIndicator$.value;
  103. if (dropType === "before") {
  104. indicatorTop = iconPosition.top - treePosition.top;
  105. } else if (dropType === "after") {
  106. indicatorTop = iconPosition.bottom - treePosition.top;
  107. }
  108. dropIndicator.style.top = `${indicatorTop}px`;
  109. dropIndicator.style.left = `${iconPosition.right - treePosition.left}px`;
  110. if (dropType === "inner") {
  111. style.addClass(dropEl, ns.is("drop-inner"));
  112. } else {
  113. style.removeClass(dropEl, ns.is("drop-inner"));
  114. }
  115. dragState.value.showDropIndicator = dropType === "before" || dropType === "after";
  116. dragState.value.allowDrop = dragState.value.showDropIndicator || userAllowDropInner;
  117. dragState.value.dropType = dropType;
  118. ctx.emit("node-drag-over", draggingNode.node, dropNode.node, event);
  119. };
  120. const treeNodeDragEnd = (event) => {
  121. var _a, _b;
  122. const { draggingNode, dropType, dropNode } = dragState.value;
  123. event.preventDefault();
  124. if (event.dataTransfer) {
  125. event.dataTransfer.dropEffect = "move";
  126. }
  127. if ((draggingNode == null ? void 0 : draggingNode.node.data) && dropNode) {
  128. const draggingNodeCopy = { data: draggingNode.node.data };
  129. if (dropType !== "none") {
  130. draggingNode.node.remove();
  131. }
  132. if (dropType === "before") {
  133. (_a = dropNode.node.parent) == null ? void 0 : _a.insertBefore(draggingNodeCopy, dropNode.node);
  134. } else if (dropType === "after") {
  135. (_b = dropNode.node.parent) == null ? void 0 : _b.insertAfter(draggingNodeCopy, dropNode.node);
  136. } else if (dropType === "inner") {
  137. dropNode.node.insertChild(draggingNodeCopy);
  138. }
  139. if (dropType !== "none") {
  140. store.value.registerNode(draggingNodeCopy);
  141. if (store.value.key) {
  142. draggingNode.node.eachNode((node) => {
  143. var _a2;
  144. (_a2 = store.value.nodesMap[node.data[store.value.key]]) == null ? void 0 : _a2.setChecked(node.checked, !store.value.checkStrictly);
  145. });
  146. }
  147. }
  148. style.removeClass(dropNode.$el, ns.is("drop-inner"));
  149. ctx.emit("node-drag-end", draggingNode.node, dropNode.node, dropType, event);
  150. if (dropType !== "none") {
  151. ctx.emit("node-drop", draggingNode.node, dropNode.node, dropType, event);
  152. }
  153. }
  154. if (draggingNode && !dropNode) {
  155. ctx.emit("node-drag-end", draggingNode.node, null, dropType, event);
  156. }
  157. dragState.value.showDropIndicator = false;
  158. dragState.value.draggingNode = null;
  159. dragState.value.dropNode = null;
  160. dragState.value.allowDrop = true;
  161. };
  162. vue.provide(dragEventsKey, {
  163. treeNodeDragStart,
  164. treeNodeDragOver,
  165. treeNodeDragEnd
  166. });
  167. return {
  168. dragState
  169. };
  170. }
  171. exports.dragEventsKey = dragEventsKey;
  172. exports.useDragNodeHandler = useDragNodeHandler;
  173. //# sourceMappingURL=useDragNode.js.map