{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-draggable/index.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, watchEffect } from 'vue'\r\nimport { addUnit } from '@sgui-plus/utils/util'\r\nimport type { Ref, ComputedRef } from 'vue'\r\n\r\nexport const useDraggable = (\r\n  targetRef: Ref<HTMLElement | undefined>,\r\n  dragRef: Ref<HTMLElement | undefined>,\r\n  draggable: ComputedRef<boolean>,\r\n  emit?\r\n) => {\r\n  let transform = {\r\n    offsetX: 0,\r\n    offsetY: 0,\r\n  }\r\n\r\n  const onMousedown = (e: MouseEvent) => {\r\n    const downX = e.clientX\r\n    const downY = e.clientY\r\n    const { offsetX, offsetY } = transform\r\n\r\n    const targetRect = targetRef.value!.getBoundingClientRect()\r\n    const targetLeft = targetRect.left\r\n    const targetTop = targetRect.top\r\n    const targetWidth = targetRect.width\r\n    const targetHeight = targetRect.height\r\n\r\n    const clientWidth = document.documentElement.clientWidth\r\n    const clientHeight = document.documentElement.clientHeight\r\n\r\n    const minLeft = -targetLeft + offsetX\r\n    const minTop = -targetTop + offsetY\r\n    const maxLeft = clientWidth - targetLeft - targetWidth + offsetX\r\n    const maxTop = clientHeight - targetTop - targetHeight + offsetY\r\n\r\n    const onMousemove = (e: MouseEvent) => {\r\n      const moveX = Math.min(\r\n        Math.max(offsetX + e.clientX - downX, minLeft),\r\n        maxLeft\r\n      )\r\n      const moveY = Math.min(\r\n        Math.max(offsetY + e.clientY - downY, minTop),\r\n        maxTop\r\n      )\r\n\r\n      transform = {\r\n        offsetX: moveX,\r\n        offsetY: moveY,\r\n      }\r\n      targetRef.value!.style.transform = `translate(${addUnit(moveX)}, ${addUnit(\r\n        moveY\r\n      )})`\r\n    }\r\n\r\n    const onMouseup = () => {\r\n      if(emit) {\r\n        emit('dragEnd')\r\n      }\r\n      document.removeEventListener('mousemove', onMousemove)\r\n      document.removeEventListener('mouseup', onMouseup)\r\n    }\r\n\r\n    document.addEventListener('mousemove', onMousemove)\r\n    document.addEventListener('mouseup', onMouseup)\r\n    if(emit) {\r\n      emit('dragStart')\r\n    }\r\n  }\r\n\r\n  const onDraggable = () => {\r\n    if (dragRef.value && targetRef.value) {\r\n      dragRef.value.addEventListener('mousedown', onMousedown)\r\n    }\r\n  }\r\n\r\n  const offDraggable = () => {\r\n    if (dragRef.value && targetRef.value) {\r\n      dragRef.value.removeEventListener('mousedown', onMousedown)\r\n    }\r\n  }\r\n\r\n  onMounted(() => {\r\n    watchEffect(() => {\r\n      if (draggable.value) {\r\n        onDraggable()\r\n      } else {\r\n        offDraggable()\r\n      }\r\n    })\r\n  })\r\n\r\n  onBeforeUnmount(() => {\r\n    offDraggable()\r\n  })\r\n}\r\n"],"names":[],"mappings":"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"}