1 line
16 KiB
Plaintext
1 line
16 KiB
Plaintext
|
{"version":3,"file":"useDragNode.mjs","sources":["../../../../../../../packages/components/tree/src/model/useDragNode.ts"],"sourcesContent":["import { provide, ref } from 'vue'\nimport { addClass, isFunction, removeClass } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { InjectionKey, Ref, SetupContext } from 'vue'\nimport type {\n AllowDragFunction,\n AllowDropFunction,\n FakeNode,\n NodeDropType,\n} from '../tree.type'\nimport type TreeStore from './tree-store'\nimport type Node from './node'\n\ninterface TreeNode {\n node: Node\n $el?: HTMLElement\n}\n\ninterface DragOptions {\n event: DragEvent\n treeNode: TreeNode\n}\n\ninterface Props {\n props: {\n allowDrag?: AllowDragFunction\n allowDrop?: AllowDropFunction\n }\n ctx: SetupContext<string[]>\n el$: Ref<HTMLElement | null>\n dropIndicator$: Ref<HTMLElement | null>\n store: Ref<TreeStore>\n}\n\nexport interface DragEvents {\n treeNodeDragStart: (options: DragOptions) => void\n treeNodeDragOver: (options: DragOptions) => void\n treeNodeDragEnd: (event: DragEvent) => void\n}\n\nexport const dragEventsKey: InjectionKey<DragEvents> = Symbol('dragEvents')\n\nexport function useDragNodeHandler({\n props,\n ctx,\n el$,\n dropIndicator$,\n store,\n}: Props) {\n const ns = useNamespace('tree')\n const dragState = ref<{\n allowDrop: boolean\n dropType: NodeDropType | null\n draggingNode: TreeNode | null\n showDropIndicator: boolean\n dropNode: TreeNode | null\n }>({\n showDropIndicator: false,\n draggingNode: null,\n dropNode: null,\n allowDrop: true,\n dropType: null,\n })\n\n const treeNodeDragStart = ({ event, treeNode }: DragOptions) => {\n if (!event.dataTransfer) return\n if (isFunction(props.allowDrag) && !props.allowDrag(treeNode.node)) {\n event.preventDefault()\n return false\n }\n event.dataTransfer.effectAllowed = 'move'\n\n // wrap in try catch to address IE's error when first param is 'text/plain'\n try {\n // setData is required for draggable to work in FireFox\n // the content has to be '' so dragging a node out of the tree won't open a new tab in FireFox\n event.dataTransfer.setData('text/plain', '')\n } catch {}\n dragState.value.draggingNode = treeNode\n ctx.emit('node-drag-start', treeNode.node, event)\n }\n\n const treeNodeDragOver = ({ event, treeNode }: DragOptions) => {\n if (!event.dataTransfer) return\n const dropNode = treeNode\n const oldDropNode = dragState.value.dropNode\n if (oldDropNode && oldDropNode.node.id !== dropNode.node.id) {\n removeClass(oldDropNode.$el!, ns.is('drop-inner'))\n }\n const draggingNode = dragState.value.draggingNode\n if (!draggingNode || !dropNode) return\n\n let dropPrev = true\n let dropInner = true\n let dropNext = true\n let userAllowDropInner = true\n if (isFunction(props.allowDrop)) {\n dropPrev = props.allowDrop(draggingNode.node, dropNode.node, 'prev')\n userAllowDropInner = dropInner = props.allowDrop(\n draggingNode.node,\n dropNode.node,\n 'inner'\n )\n dropNext = props.allowDrop(draggingNode.node, dropNode.node, 'next')\n }\n event.dataTransfer.dropEffect =\n dropInner || dropPrev || dropNext ? 'move' : 'none'\n if (\n (dropPrev || dropInner || dropNext) &&\n oldDropNode?.node.id !== dropNode.node.id\n ) {\n if (oldDropNode) {\n ctx.emit('node-drag-leave', draggingNode.node, oldDropNode.node, event)\n }\n ctx.emit('node-drag-enter', draggingNode.node, dropNode.node, event)\n }\n\n if (dropPrev || dropInner || dropNext) {\n dragState.value.dropNode = dropNode\n } else {\n // Reset dragState.value.dropNode to null when allowDrop is transfer from true to false.(For issue #14704)\n dragState.value.dropNode = null\n }\n\n if (dropNode.node.nextSibling === draggingNode.node) {\n dropNext = false\n }\n if (dropNode.node.previousSibling === draggingNode.node) {\n dropPrev = false
|