@jbrowse/plugin-linear-genome-view/esm/LinearGenomeView/components/useWheelScroll.js

JBrowse 2 linear genome view

import { useEffect, useRef } from 'react';
export function useWheelScroll(ref, model) {
    const delta = useRef(0);
    const timeout = useRef(null);
    const scheduled = useRef(false);
    useEffect(() => {
        const curr = ref.current;
        function onWheel(event) {
            if (event.ctrlKey) {
                event.preventDefault();
                delta.current += event.deltaY / 500;
                model.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));
                if (timeout.current) {
                    clearTimeout(timeout.current);
                }
                timeout.current = setTimeout(() => {
                    model.setScaleFactor(1);
                    model.zoomTo(delta.current > 0
                        ? model.bpPerPx * (1 + delta.current)
                        : model.bpPerPx / (1 - delta.current), event.clientX - ((curr === null || curr === void 0 ? void 0 : curr.getBoundingClientRect().left) || 0));
                    delta.current = 0;
                }, 300);
            }
            else {
                if (Math.abs(event.deltaX) > Math.abs(2 * event.deltaY)) {
                    event.preventDefault();
                }
                delta.current += event.deltaX;
                if (!scheduled.current) {
                    scheduled.current = true;
                    window.requestAnimationFrame(() => {
                        model.horizontalScroll(delta.current);
                        delta.current = 0;
                        scheduled.current = false;
                    });
                }
            }
        }
        if (curr) {
            curr.addEventListener('wheel', onWheel);
            return () => {
                curr.removeEventListener('wheel', onWheel);
            };
        }
        return () => { };
    }, [model, ref]);
}