| 1 |
- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-draggable/index.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\nimport { addUnit } from '@element-plus/utils'\nimport { clamp } from 'lodash-unified'\n\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 const transform = {\n offsetX: 0,\n offsetY: 0,\n }\n\n const isDragging = ref(false)\n\n const adjustPosition = (moveX: number, moveY: number) => {\n if (targetRef.value) {\n const { offsetX, offsetY } = transform\n const targetRect = targetRef.value.getBoundingClientRect()\n const targetLeft = Math.max(targetRect.left, 0)\n const targetTop = Math.max(targetRect.top, 0)\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 =\n clientHeight -\n targetTop -\n (targetHeight < clientHeight ? targetHeight : 0) +\n offsetY\n\n if (!overflow?.value) {\n moveX = clamp(moveX, minLeft, maxLeft)\n moveY = clamp(moveY, minTop, maxTop)\n }\n\n transform.offsetX = moveX\n transform.offsetY = moveY\n\n targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(\n moveY\n )})`\n }\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 onMousemove = (e: MouseEvent) => {\n if (!isDragging.value) {\n isDragging.value = true\n }\n const moveX = offsetX + e.clientX - downX\n const moveY = offsetY + e.clientY - downY\n\n adjustPosition(moveX, moveY)\n }\n\n const onMouseup = () => {\n isDragging.value = false\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 window.addEventListener('resize', updatePosition)\n }\n }\n\n const offDraggable = () => {\n if (dragRef.value && targetRef.value) {\n dragRef.value.removeEventListener('mousedown', onMousedown)\n window.removeEventListener('resize', updatePosition)\n }\n }\n\n const resetPosition = () => {\n transform.offsetX = 0\n transform.offsetY = 0\n\n if (targetRef.value) {\n targetRef.value.style.transform = ''\n }\n }\n\n const updatePosition = () => {\n const { offsetX, offsetY } = transform\n\n adjustPosition(offsetX, offsetY)\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 isDragging,\n resetPosition,\n updatePosition,\n }\n}\n"],"mappings":";;;;AAMA,MAAa,gBACX,WACA,SACA,WACA,aACG;CACH,MAAM,YAAY;EAChB,SAAS;EACT,SAAS;CACX;CAEA,MAAM,aAAa,IAAI,KAAK;CAE5B,MAAM,kBAAkB,OAAe,UAAkB;EACvD,IAAI,UAAU,OAAO;GACnB,MAAM,EAAE,SAAS,YAAY;GAC7B,MAAM,aAAa,UAAU,MAAM,sBAAsB;GACzD,MAAM,aAAa,KAAK,IAAI,WAAW,MAAM,CAAC;GAC9C,MAAM,YAAY,KAAK,IAAI,WAAW,KAAK,CAAC;GAC5C,MAAM,cAAc,WAAW;GAC/B,MAAM,eAAe,WAAW;GAEhC,MAAM,cAAc,SAAS,gBAAgB;GAC7C,MAAM,eAAe,SAAS,gBAAgB;GAE9C,MAAM,UAAU,CAAC,aAAa;GAC9B,MAAM,SAAS,CAAC,YAAY;GAC5B,MAAM,UAAU,cAAc,aAAa,cAAc;GACzD,MAAM,SACJ,eACA,aACC,eAAe,eAAe,eAAe,KAC9C;GAEF,IAAI,CAAC,UAAU,OAAO;IACpB,QAAQ,MAAM,OAAO,SAAS,OAAO;IACrC,QAAQ,MAAM,OAAO,QAAQ,MAAM;GACrC;GAEA,UAAU,UAAU;GACpB,UAAU,UAAU;GAEpB,UAAU,MAAM,MAAM,YAAY,aAAa,QAAQ,KAAK,EAAE,IAAI,QAChE,KACF,EAAE;EACJ;CACF;CAEA,MAAM,eAAe,MAAkB;EACrC,MAAM,QAAQ,EAAE;EAChB,MAAM,QAAQ,EAAE;EAChB,MAAM,EAAE,SAAS,YAAY;EAE7B,MAAM,eAAe,MAAkB;GACrC,IAAI,CAAC,WAAW,OACd,WAAW,QAAQ;GAErB,MAAM,QAAQ,UAAU,EAAE,UAAU;GACpC,MAAM,QAAQ,UAAU,EAAE,UAAU;GAEpC,eAAe,OAAO,KAAK;EAC7B;EAEA,MAAM,kBAAkB;GACtB,WAAW,QAAQ;GACnB,SAAS,oBAAoB,aAAa,WAAW;GACrD,SAAS,oBAAoB,WAAW,SAAS;EACnD;EAEA,SAAS,iBAAiB,aAAa,WAAW;EAClD,SAAS,iBAAiB,WAAW,SAAS;CAChD;CAEA,MAAM,oBAAoB;EACxB,IAAI,QAAQ,SAAS,UAAU,OAAO;GACpC,QAAQ,MAAM,iBAAiB,aAAa,WAAW;GACvD,OAAO,iBAAiB,UAAU,cAAc;EAClD;CACF;CAEA,MAAM,qBAAqB;EACzB,IAAI,QAAQ,SAAS,UAAU,OAAO;GACpC,QAAQ,MAAM,oBAAoB,aAAa,WAAW;GAC1D,OAAO,oBAAoB,UAAU,cAAc;EACrD;CACF;CAEA,MAAM,sBAAsB;EAC1B,UAAU,UAAU;EACpB,UAAU,UAAU;EAEpB,IAAI,UAAU,OACZ,UAAU,MAAM,MAAM,YAAY;CAEtC;CAEA,MAAM,uBAAuB;EAC3B,MAAM,EAAE,SAAS,YAAY;EAE7B,eAAe,SAAS,OAAO;CACjC;CAEA,gBAAgB;EACd,kBAAkB;GAChB,IAAI,UAAU,OACZ,YAAY;QAEZ,aAAa;EAEjB,CAAC;CACH,CAAC;CAED,sBAAsB;EACpB,aAAa;CACf,CAAC;CAED,OAAO;EACL;EACA;EACA;CACF;AACF"}
|
