react-plot/lib/components/Annotations/Arrow.js

Library of React components to render SVG 2D plots.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { usePosition } from '../../hooks.js';
import MarkerDefs from './MarkerDefs.js';
export function Arrow(props) {
    const { x1: x1Old, y1: y1Old, x2: x2Old, y2: y2Old, startPoint = 'none', endPoint = 'triangle', color = 'black', strokeWidth, markerSize, xAxis = 'x', yAxis = 'y', ...lineProps } = props;
    const { x: x1, y: y1 } = usePosition({
        x: x1Old,
        y: y1Old,
        xAxis,
        yAxis,
    });
    const { x: x2, y: y2 } = usePosition({
        x: x2Old,
        y: y2Old,
        xAxis,
        yAxis,
    });
    const startMarker = startPoint !== 'none'
        ? `url(#marker-${startPoint}-${x1}-${y1}-${x2}-${y2})`
        : undefined;
    const endMarker = endPoint !== 'none'
        ? `url(#marker-${endPoint}-${x1}-${y1}-${x2}-${y2})`
        : undefined;
    return (_jsxs("g", { children: [_jsx(MarkerDefs, { color: color, id: `${x1}-${y1}-${x2}-${y2}`, width: markerSize }), _jsx("line", { x1: x1, y1: y1, x2: x2, y2: y2, stroke: color, strokeWidth: strokeWidth, markerStart: startMarker, markerEnd: endMarker, ...lineProps })] }));
}
//# sourceMappingURL=Arrow.js.map