element-plus/es/hooks/use-draggable/index.mjs.map

A Component Library for Vue 3

{"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'\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 = 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 =\n        clientHeight -\n        targetTop -\n        (targetHeight < clientHeight ? targetHeight : 0) +\n        offsetY\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.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":";;;;AAKA,MAAa,gBACX,WACA,SACA,WACA,aACG;CACH,MAAM,YAAY;EAChB,SAAS;EACT,SAAS;EACV;CAED,MAAM,aAAa,IAAI,MAAM;CAE7B,MAAM,kBAAkB,OAAe,UAAkB;AACvD,MAAI,UAAU,OAAO;GACnB,MAAM,EAAE,SAAS,YAAY;GAC7B,MAAM,aAAa,UAAU,MAAM,uBAAuB;GAC1D,MAAM,aAAa,WAAW;GAC9B,MAAM,YAAY,WAAW;GAC7B,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;AAEF,OAAI,CAAC,UAAU,OAAO;AACpB,YAAQ,KAAK,IAAI,KAAK,IAAI,OAAO,QAAQ,EAAE,QAAQ;AACnD,YAAQ,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,EAAE,OAAO;;AAGnD,aAAU,UAAU;AACpB,aAAU,UAAU;AAEpB,aAAU,MAAM,MAAM,YAAY,aAAa,QAAQ,MAAM,CAAC,IAAI,QAChE,MACD,CAAC;;;CAIN,MAAM,eAAe,MAAkB;EACrC,MAAM,QAAQ,EAAE;EAChB,MAAM,QAAQ,EAAE;EAChB,MAAM,EAAE,SAAS,YAAY;EAE7B,MAAM,eAAe,MAAkB;AACrC,OAAI,CAAC,WAAW,MACd,YAAW,QAAQ;AAKrB,kBAHc,UAAU,EAAE,UAAU,OACtB,UAAU,EAAE,UAAU,MAER;;EAG9B,MAAM,kBAAkB;AACtB,cAAW,QAAQ;AACnB,YAAS,oBAAoB,aAAa,YAAY;AACtD,YAAS,oBAAoB,WAAW,UAAU;;AAGpD,WAAS,iBAAiB,aAAa,YAAY;AACnD,WAAS,iBAAiB,WAAW,UAAU;;CAGjD,MAAM,oBAAoB;AACxB,MAAI,QAAQ,SAAS,UAAU,OAAO;AACpC,WAAQ,MAAM,iBAAiB,aAAa,YAAY;AACxD,UAAO,iBAAiB,UAAU,eAAe;;;CAIrD,MAAM,qBAAqB;AACzB,MAAI,QAAQ,SAAS,UAAU,OAAO;AACpC,WAAQ,MAAM,oBAAoB,aAAa,YAAY;AAC3D,UAAO,oBAAoB,UAAU,eAAe;;;CAIxD,MAAM,sBAAsB;AAC1B,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,MAAI,UAAU,MACZ,WAAU,MAAM,MAAM,YAAY;;CAItC,MAAM,uBAAuB;EAC3B,MAAM,EAAE,SAAS,YAAY;AAE7B,iBAAe,SAAS,QAAQ;;AAGlC,iBAAgB;AACd,oBAAkB;AAChB,OAAI,UAAU,MACZ,cAAa;OAEb,eAAc;IAEhB;GACF;AAEF,uBAAsB;AACpB,gBAAc;GACd;AAEF,QAAO;EACL;EACA;EACA;EACD"}