nitropage/src/utils/function/throttle.ts

A free and open source, extensible visual page builder based on SolidStart.

import { throttle } from "es-toolkit";

const LINE_HEIGHT = 16 * 1.125;
const PAGE_HEIGHT =
  (typeof window !== "undefined" && window.innerHeight) || 800;
const DELTA_MODE_UNIT = [1, LINE_HEIGHT, PAGE_HEIGHT];

/**
 * Inspired by:
 * https://github.com/xiel/wheel-gestures/blob/b02412a93aa0e9e70d38c67c01e4293fb1c96c78/src/wheel-normalizer/wheel-normalizer.ts#L9C1-L22C2
 *
 * Original Licence:
 * MIT License / Copyright (c) 2020 Felix Leupold
 */
const normalizeWheel = (e: WheelEvent) => {
  const deltaX = e.deltaX * DELTA_MODE_UNIT[e.deltaMode];
  const deltaY = e.deltaY * DELTA_MODE_UNIT[e.deltaMode];
  const deltaZ = (e.deltaZ || 0) * DELTA_MODE_UNIT[e.deltaMode];

  return [deltaX, deltaY, deltaZ] as const;
};

export const throttleWheel = <T extends (evt: WheelEvent) => void>(cb: T) => {
  const slow = throttle(cb, 1000 / 2, { edges: ["leading"] });
  const medium = throttle(cb, 1000 / 4, { edges: ["leading"] });
  const fast = throttle(cb, 1000 / 16);

  return (evt: WheelEvent) => {
    const [_, deltaY] = normalizeWheel(evt);
    const delta = Math.abs(deltaY);
    const cb_ = delta < 1 ? slow : delta < 2 ? medium : delta < 60 ? fast : cb;
    return cb_(evt);
  };
};