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