react-plot/lib/hooks/useDrawPath.js

Library of React components to render SVG 2D plots.

import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { Polygon } from '../components/Annotations/Polygon.js';
import { Polyline } from '../components/Annotations/Polyline.js';
import { useStartMoveEnd } from './useStartMoveEnd.js';
export function useDrawPath(options = {}) {
    const { controllerId, disabled, horizontalAxisId = 'x', verticalAxisId = 'y', color = 'black', close = false, style, onDraw, onEnd, } = options;
    const [data, setData] = useState(null);
    useStartMoveEnd({
        controllerId,
        disabled,
        onStart(result) {
            setData([result.clampedCoordinates]);
        },
        onMove(result) {
            setData((previousData) => {
                if (!previousData)
                    return null;
                const { clampedCoordinates } = result;
                let isDuplicated = true;
                for (const key in clampedCoordinates) {
                    if (previousData.at(-1)[key] !==
                        clampedCoordinates[key]) {
                        isDuplicated = false;
                        break;
                    }
                }
                if (isDuplicated)
                    return previousData;
                return previousData.concat(clampedCoordinates);
            });
            onDraw?.(points);
        },
        onEnd() {
            if (!data)
                return;
            setData(null);
            onEnd?.(points);
        },
    });
    const points = useMemo(() => {
        if (!data)
            return [];
        return data.map((d) => ({
            x: d[horizontalAxisId],
            y: d[verticalAxisId],
        }));
    }, [data, horizontalAxisId, verticalAxisId]);
    return {
        annotations: data !== null ? (close ? (_jsx(Polygon, { xAxis: horizontalAxisId, yAxis: verticalAxisId, color: color, style: style, points: points })) : (_jsx(Polyline, { xAxis: horizontalAxisId, yAxis: verticalAxisId, color: color, style: style, points: points }))) : null,
    };
}
//# sourceMappingURL=useDrawPath.js.map