react-plot
Version:
Library of React components to render SVG 2D plots.
31 lines • 1.72 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { Line } from '../components/Annotations/Line.js';
import { Text } from '../components/Annotations/Text.js';
import { usePlotEvents } from '../contexts/plotController/plotControllerContext.js';
export function useCrossHair(options = {}) {
const [hover, setHover] = useState(null);
const { color = 'black', horizontalAxisId = 'x', verticalAxisId = 'y', lineStyle, textStyle, textTransform = '', } = options;
usePlotEvents({
onPointerMove({ coordinates }) {
setHover(coordinates);
},
onPointerLeave() {
setHover(null);
},
}, options);
const lineProps = {
color,
strokeWidth: '2',
style: lineStyle,
};
const textProps = {
transform: `translate(-3 -2) ${textTransform}`,
style: textStyle,
};
if (!hover)
return { annotations: null };
const annotations = (_jsxs(_Fragment, { children: [_jsx(Line, { xAxis: horizontalAxisId, yAxis: verticalAxisId, x1: "0%", x2: "100%", y1: hover[verticalAxisId], y2: hover[verticalAxisId], ...lineProps }), _jsx(Line, { xAxis: horizontalAxisId, yAxis: verticalAxisId, y1: "0%", y2: "100%", x1: hover[horizontalAxisId], x2: hover[horizontalAxisId], ...lineProps }), _jsxs(Text, { xAxis: horizontalAxisId, yAxis: verticalAxisId, textAnchor: "end", alignmentBaseline: "after-edge", x: hover[horizontalAxisId], y: hover[verticalAxisId], ...textProps, children: [hover[horizontalAxisId]?.toFixed(2), " ,", hover[verticalAxisId]?.toFixed(2)] })] }));
return { annotations };
}
//# sourceMappingURL=useCrossHair.js.map