react-plot/lib/hooks/useStartMoveEnd.js

Library of React components to render SVG 2D plots.

import { useEffect, useRef, useState } from 'react';
import { usePlotEvents } from '../contexts/plotController/plotControllerContext.js';
export function useStartMoveEnd(options) {
    const ref = useRef(options);
    useEffect(() => {
        ref.current = options;
    }, [options]);
    const [data, setData] = useState(null);
    usePlotEvents({
        onPointerDown(result) {
            if (result.event.button !== 0 || result.event.altKey)
                return;
            const { coordinates, clampedCoordinates } = result;
            const position = { coordinates, clampedCoordinates };
            setData({ start: position });
            ref.current?.onStart?.(result, position, position);
        },
        onPointerMove(result) {
            // TODO: boolean that says if pointer is currently down?
            if (!data || result.event.altKey)
                return;
            const { coordinates, clampedCoordinates } = result;
            const position = { coordinates, clampedCoordinates };
            setData((data) => {
                if (!data)
                    return null;
                return {
                    ...data,
                    end: position,
                };
            });
            ref.current?.onMove?.(result, data.start, position);
        },
        onPointerUp(result) {
            if (result.event.button !== 0 || !data || result.event.altKey)
                return;
            setData(null);
            if (data.end) {
                ref.current?.onEnd?.(result, data.start, data.end);
            }
        },
    }, options);
    return data;
}
//# sourceMappingURL=useStartMoveEnd.js.map