react-plot
Version:
Library of React components to render SVG 2D plots.
53 lines • 1.86 kB
JavaScript
import { useRef } from 'react';
import { usePlotControls, usePlotEvents, } from '../contexts/plotController/plotControllerContext.js';
export function usePan(options = {}) {
const { horizontalAxisId = 'x', verticalAxisId = 'y' } = options;
const click = useRef(false);
const plotControls = usePlotControls(options);
// TODO : cursor state
// const [cursor, setCursor] = useState<'' | 'grabbing' | 'grab'>('');
usePlotEvents({
// onKeyDown({ event: { altKey } }) {
// if (altKey) {
// setCursor('grab');
// }
// },
// onKeyUp({ event: { altKey } }) {
// if (!altKey) {
// setCursor('');
// }
// },
onPointerDown() {
// if (altKey) {
// setCursor('grabbing');
// }
click.current = true;
},
onPointerUp() {
// if (altKey) {
// setCursor('grab');
// }
click.current = false;
},
onPointerMove({ event: { altKey }, movement: { [horizontalAxisId]: xMovement, [verticalAxisId]: yMovement, }, domains: { [horizontalAxisId]: x, [verticalAxisId]: y }, }) {
if (!click.current || !altKey)
return;
plotControls.setAxes({
[horizontalAxisId]: {
min: x[0] - xMovement,
max: x[1] - xMovement,
},
[verticalAxisId]: {
min: y[0] - yMovement,
max: y[1] - yMovement,
},
});
},
onDoubleClick({ event: { button } }) {
if (button !== 0)
return;
plotControls.resetAxes([horizontalAxisId, verticalAxisId]);
},
}, options);
}
//# sourceMappingURL=usePan.js.map