lingo3d/lib/editor/hooks/usePan.js

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import { useEffect, useRef } from "preact/hooks";
import { stopPropagation } from "../utils/stopPropagation";
export default ({ onPanStart, onPanEnd, onPan } = {}) => {
    const elRef = useRef(null);
    useEffect(() => {
        const el = elRef.current;
        if (!el)
            return;
        stopPropagation(el);
        let panning = false;
        let clientX = 0;
        let clientY = 0;
        const delta = (e) => {
            const deltaX = e.clientX - clientX;
            const deltaY = e.clientY - clientY;
            clientX = e.clientX;
            clientY = e.clientY;
            return [deltaX, deltaY];
        };
        const handleDown = (e) => {
            panning = true;
            const evt = {
                clientX: (clientX = e.clientX),
                clientY: (clientY = e.clientY),
                deltaX: 0,
                deltaY: 0,
                currentTarget: el
            };
            onPanStart?.(evt);
            onPan?.(evt);
        };
        const handleUp = (e) => {
            if (!panning)
                return;
            panning = false;
            const [deltaX, deltaY] = delta(e);
            const evt = {
                clientX,
                clientY,
                deltaX,
                deltaY,
                currentTarget: el
            };
            onPan?.(evt);
            onPanEnd?.(evt);
        };
        const handleMove = (e) => {
            if (!panning)
                return;
            const [deltaX, deltaY] = delta(e);
            onPan?.({
                clientX,
                clientY,
                deltaX,
                deltaY,
                currentTarget: el
            });
        };
        el.addEventListener("mousedown", handleDown);
        document.addEventListener("mouseup", handleUp);
        document.addEventListener("mousemove", handleMove);
        return () => {
            el.removeEventListener("mousedown", handleDown);
            document.removeEventListener("mouseup", handleUp);
            document.removeEventListener("mousemove", handleMove);
        };
    }, []);
    return elRef;
};
//# sourceMappingURL=usePan.js.map