You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
8.5 KiB
1 line
8.5 KiB
{"ast":null,"code":"import { onMounted, watchEffect, onBeforeUnmount } from 'vue';\nimport '../../utils/index.mjs';\nimport { addUnit } from '../../utils/dom/style.mjs';\nconst useDraggable = (targetRef, dragRef, draggable, overflow) => {\n let transform = {\n offsetX: 0,\n offsetY: 0\n };\n const onMousedown = e => {\n const downX = e.clientX;\n const downY = e.clientY;\n const {\n offsetX,\n offsetY\n } = transform;\n const targetRect = targetRef.value.getBoundingClientRect();\n const targetLeft = targetRect.left;\n const targetTop = targetRect.top;\n const targetWidth = targetRect.width;\n const targetHeight = targetRect.height;\n const clientWidth = document.documentElement.clientWidth;\n const clientHeight = document.documentElement.clientHeight;\n const minLeft = -targetLeft + offsetX;\n const minTop = -targetTop + offsetY;\n const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;\n const maxTop = clientHeight - targetTop - targetHeight + offsetY;\n const onMousemove = e2 => {\n let moveX = offsetX + e2.clientX - downX;\n let moveY = offsetY + e2.clientY - downY;\n if (!(overflow == null ? void 0 : overflow.value)) {\n moveX = Math.min(Math.max(moveX, minLeft), maxLeft);\n moveY = Math.min(Math.max(moveY, minTop), maxTop);\n }\n transform = {\n offsetX: moveX,\n offsetY: moveY\n };\n if (targetRef.value) {\n targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`;\n }\n };\n const onMouseup = () => {\n document.removeEventListener(\"mousemove\", onMousemove);\n document.removeEventListener(\"mouseup\", onMouseup);\n };\n document.addEventListener(\"mousemove\", onMousemove);\n document.addEventListener(\"mouseup\", onMouseup);\n };\n const onDraggable = () => {\n if (dragRef.value && targetRef.value) {\n dragRef.value.addEventListener(\"mousedown\", onMousedown);\n }\n };\n const offDraggable = () => {\n if (dragRef.value && targetRef.value) {\n dragRef.value.removeEventListener(\"mousedown\", onMousedown);\n }\n };\n const resetPosition = () => {\n transform = {\n offsetX: 0,\n offsetY: 0\n };\n if (targetRef.value) {\n targetRef.value.style.transform = \"none\";\n }\n };\n onMounted(() => {\n watchEffect(() => {\n if (draggable.value) {\n onDraggable();\n } else {\n offDraggable();\n }\n });\n });\n onBeforeUnmount(() => {\n offDraggable();\n });\n return {\n resetPosition\n };\n};\nexport { useDraggable };","map":{"version":3,"names":["useDraggable","targetRef","dragRef","draggable","overflow","transform","offsetX","offsetY","onMousedown","e","downX","clientX","downY","clientY","targetRect","value","getBoundingClientRect","targetLeft","left","targetTop","top","targetWidth","width","targetHeight","height","clientWidth","document","documentElement","clientHeight","minLeft","minTop","maxLeft","maxTop","onMousemove","e2","moveX","moveY","Math","min","max","style","addUnit","onMouseup","removeEventListener","addEventListener","onDraggable","offDraggable","resetPosition","onMounted","watchEffect","onBeforeUnmount"],"sources":["../../../../../packages/hooks/use-draggable/index.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, watchEffect } from 'vue'\nimport { addUnit } from '@element-plus/utils'\nimport type { ComputedRef, Ref } from 'vue'\n\nexport const useDraggable = (\n targetRef: Ref<HTMLElement | undefined>,\n dragRef: Ref<HTMLElement | undefined>,\n draggable: ComputedRef<boolean>,\n overflow?: ComputedRef<boolean>\n) => {\n let transform = {\n offsetX: 0,\n offsetY: 0,\n }\n\n const onMousedown = (e: MouseEvent) => {\n const downX = e.clientX\n const downY = e.clientY\n const { offsetX, offsetY } = transform\n\n const targetRect = targetRef.value!.getBoundingClientRect()\n const targetLeft = targetRect.left\n const targetTop = targetRect.top\n const targetWidth = targetRect.width\n const targetHeight = targetRect.height\n\n const clientWidth = document.documentElement.clientWidth\n const clientHeight = document.documentElement.clientHeight\n\n const minLeft = -targetLeft + offsetX\n const minTop = -targetTop + offsetY\n const maxLeft = clientWidth - targetLeft - targetWidth + offsetX\n const maxTop = clientHeight - targetTop - targetHeight + offsetY\n\n const onMousemove = (e: MouseEvent) => {\n let moveX = offsetX + e.clientX - downX\n let moveY = offsetY + e.clientY - downY\n\n if (!overflow?.value) {\n moveX = Math.min(Math.max(moveX, minLeft), maxLeft)\n moveY = Math.min(Math.max(moveY, minTop), maxTop)\n }\n\n transform = {\n offsetX: moveX,\n offsetY: moveY,\n }\n\n if (targetRef.value) {\n targetRef.value.style.transform = `translate(${addUnit(\n moveX\n )}, ${addUnit(moveY)})`\n }\n }\n\n const onMouseup = () => {\n document.removeEventListener('mousemove', onMousemove)\n document.removeEventListener('mouseup', onMouseup)\n }\n\n document.addEventListener('mousemove', onMousemove)\n document.addEventListener('mouseup', onMouseup)\n }\n\n const onDraggable = () => {\n if (dragRef.value && targetRef.value) {\n dragRef.value.addEventListener('mousedown', onMousedown)\n }\n }\n\n const offDraggable = () => {\n if (dragRef.value && targetRef.value) {\n dragRef.value.removeEventListener('mousedown', onMousedown)\n }\n }\n\n const resetPosition = () => {\n transform = {\n offsetX: 0,\n offsetY: 0,\n }\n if (targetRef.value) {\n targetRef.value.style.transform = 'none'\n }\n }\n\n onMounted(() => {\n watchEffect(() => {\n if (draggable.value) {\n onDraggable()\n } else {\n offDraggable()\n }\n })\n })\n\n onBeforeUnmount(() => {\n offDraggable()\n })\n\n return {\n resetPosition,\n }\n}\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |