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

JBrowse 2 linear genome view

import { useEffect, useRef, useState } from 'react';
export function useSideScroll(model) {
    const [mouseDragging, setMouseDragging] = useState(false);
    const scheduled = useRef(false);
    const prevX = useRef(0);
    useEffect(() => {
        let cleanup = () => { };
        function globalMouseMove(event) {
            event.preventDefault();
            const currX = event.clientX;
            const distance = currX - prevX.current;
            if (distance) {
                if (!scheduled.current) {
                    scheduled.current = true;
                    window.requestAnimationFrame(() => {
                        model.horizontalScroll(-distance);
                        scheduled.current = false;
                        prevX.current = event.clientX;
                    });
                }
            }
        }
        function globalMouseUp() {
            prevX.current = 0;
            if (mouseDragging) {
                setMouseDragging(false);
            }
        }
        if (mouseDragging) {
            window.addEventListener('mousemove', globalMouseMove, true);
            window.addEventListener('mouseup', globalMouseUp, true);
            cleanup = () => {
                window.removeEventListener('mousemove', globalMouseMove, true);
                window.removeEventListener('mouseup', globalMouseUp, true);
            };
        }
        return cleanup;
    }, [model, mouseDragging]);
    function mouseDown(event) {
        if (event.shiftKey) {
            return;
        }
        const target = event.target;
        if (target.draggable || target.dataset.resizer) {
            return;
        }
        if (event.button === 0) {
            prevX.current = event.clientX;
            setMouseDragging(true);
        }
    }
    function mouseUp(event) {
        event.preventDefault();
        setMouseDragging(false);
    }
    return { mouseDown, mouseUp };
}