@extclp/vexip-ui/es/components/scrollbar/hooks.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"hooks.mjs","sources":["../../../components/scrollbar/hooks.ts"],"sourcesContent":["import { ref } from 'vue'\r\n\r\nimport { USE_TOUCH, noop } from '@vexip-ui/utils'\r\nimport { ScrollbarType } from './symbol'\r\n\r\nimport type { Ref } from 'vue'\r\n\r\nexport function useTrack({\r\n  currentScroll = ref(0),\r\n  trackSpeed = ref(2),\r\n  track = ref(null),\r\n  bar = ref(null),\r\n  tracking = ref(false),\r\n  type = ref(ScrollbarType.VERTICAL),\r\n  barLength = ref(35),\r\n  disabled = ref(false),\r\n  onDown = noop,\r\n  onMove = noop,\r\n  onUp = noop,\r\n  onScroll = noop,\r\n}: {\r\n  currentScroll: Ref<number>,\r\n  type: Ref<ScrollbarType>,\r\n  trackSpeed?: Ref<number>,\r\n  track?: Ref<HTMLElement | null | undefined>,\r\n  bar?: Ref<HTMLElement | null | undefined>,\r\n  tracking?: Ref<boolean>,\r\n  barLength?: Ref<number>,\r\n  disabled?: Ref<boolean>,\r\n  onDown?: (scroll: number) => void,\r\n  onMove?: (scroll: number) => void,\r\n  onUp?: (scroll: number) => void,\r\n  onScroll?: (scroll: number) => void,\r\n}) {\r\n  let length: number\r\n  let startAt: number\r\n  let cursorAt: number\r\n  let targetScroll: number\r\n  let forward = true\r\n  let processing = false\r\n\r\n  function animateMoveBar() {\r\n    if (!tracking.value) return\r\n\r\n    processing = true\r\n\r\n    const speedRate = computeSpeedRate(targetScroll, currentScroll.value)\r\n    let changed = false\r\n\r\n    if (forward) {\r\n      if (currentScroll.value < targetScroll) {\r\n        currentScroll.value += speedRate * trackSpeed.value\r\n        changed = true\r\n      }\r\n    } else if (currentScroll.value > targetScroll) {\r\n      currentScroll.value -= speedRate * trackSpeed.value\r\n      changed = true\r\n    }\r\n\r\n    if (changed) {\r\n      verifyScroll()\r\n      onScroll(currentScroll.value)\r\n    }\r\n\r\n    if (\r\n      tracking.value && forward\r\n        ? currentScroll.value < targetScroll\r\n        : currentScroll.value > targetScroll\r\n    ) {\r\n      requestAnimationFrame(animateMoveBar)\r\n    } else {\r\n      processing = false\r\n    }\r\n  }\r\n\r\n  function handleMouseDown(event: PointerEvent) {\r\n    if (disabled.value || event.button > 0) {\r\n      return false\r\n    }\r\n\r\n    event.stopPropagation()\r\n    event.preventDefault()\r\n\r\n    if (!track.value || !bar.value) return false\r\n\r\n    document.addEventListener('pointermove', handleMouseMove)\r\n    document.addEventListener('pointerup', handleMouseUp)\r\n\r\n    const rect = track.value.getBoundingClientRect()\r\n    const barRect = bar.value.getBoundingClientRect()\r\n\r\n    let position: number\r\n\r\n    if (type.value === ScrollbarType.VERTICAL) {\r\n      length = rect.height\r\n      startAt = barRect.top - rect.top\r\n      cursorAt = barRect.top\r\n      position = startAt + event.clientY - cursorAt\r\n    } else {\r\n      length = rect.width\r\n      startAt = barRect.left - rect.left\r\n      cursorAt = barRect.left\r\n      position = startAt + event.clientX - cursorAt\r\n    }\r\n\r\n    targetScroll = Math.max(\r\n      0,\r\n      Math.min((position / length / (100 - barLength.value / 2)) * 1e4, 100),\r\n    )\r\n    forward = targetScroll >= currentScroll.value\r\n\r\n    tracking.value = true\r\n\r\n    onDown(currentScroll.value)\r\n    animateMoveBar()\r\n  }\r\n\r\n  function handleMouseMove(event: PointerEvent) {\r\n    event.stopPropagation()\r\n\r\n    if (!USE_TOUCH) {\r\n      event.preventDefault()\r\n    }\r\n\r\n    onMove(currentScroll.value)\r\n\r\n    let position: number\r\n\r\n    if (type.value === ScrollbarType.VERTICAL) {\r\n      position = startAt + event.clientY - cursorAt\r\n    } else {\r\n      position = startAt + event.clientX - cursorAt\r\n    }\r\n\r\n    targetScroll = Math.max(\r\n      0,\r\n      Math.min((position / length / (100 - barLength.value / 2)) * 1e4, 100),\r\n    )\r\n\r\n    !processing && animateMoveBar()\r\n  }\r\n\r\n  function handleMouseUp(event: PointerEvent) {\r\n    event.preventDefault()\r\n\r\n    document.removeEventListener('pointermove', handleMouseMove)\r\n    document.removeEventListener('pointerup', handleMouseUp)\r\n\r\n    tracking.value = false\r\n\r\n    onUp(currentScroll.value)\r\n  }\r\n\r\n  function verifyScroll() {\r\n    currentScroll.value = Math.max(0, Math.min(currentScroll.value, 100))\r\n  }\r\n\r\n  return {\r\n    currentScroll,\r\n    trackSpeed,\r\n    track,\r\n    bar,\r\n    tracking,\r\n    type,\r\n    barLength,\r\n    disabled,\r\n\r\n    handleMouseDown,\r\n  }\r\n}\r\n\r\nfunction computeSpeedRate(start: number, end: number) {\r\n  const span = Math.abs(start - end)\r\n\r\n  for (let i = 0; i < 5; ++i) {\r\n    if (span < (i + 1) * 20) {\r\n      return 1 + 0.25 * i\r\n    }\r\n  }\r\n\r\n  return 2\r\n}\r\n"],"names":["useTrack","currentScroll","ref","trackSpeed","track","bar","tracking","type","ScrollbarType","barLength","disabled","onDown","noop","onMove","onUp","onScroll","length","startAt","cursorAt","targetScroll","forward","processing","animateMoveBar","speedRate","computeSpeedRate","changed","verifyScroll","handleMouseDown","event","handleMouseMove","handleMouseUp","rect","barRect","position","USE_TOUCH","start","end","span","i"],"mappings":"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"}