53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import { useEffect, MutableRefObject } from 'react';
|
|
import { zoom } from 'd3-zoom';
|
|
import { select, event } from 'd3-selection';
|
|
|
|
import { useStoreState, useStoreActions } from '../store/hooks';
|
|
|
|
interface UseD3ZoomParams {
|
|
zoomPane: MutableRefObject<Element | null>;
|
|
selectionKeyPressed: boolean;
|
|
onMove?: () => void;
|
|
}
|
|
|
|
export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): void => {
|
|
const d3Zoom = useStoreState((s) => s.d3Zoom);
|
|
|
|
const initD3 = useStoreActions((actions) => actions.initD3);
|
|
const updateTransform = useStoreActions((actions) => actions.updateTransform);
|
|
|
|
useEffect(() => {
|
|
if (zoomPane.current) {
|
|
const nextD3ZoomInstance = zoom();
|
|
const selection = select(zoomPane.current).call(nextD3ZoomInstance);
|
|
initD3({ zoom: nextD3ZoomInstance, selection });
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!d3Zoom) {
|
|
return;
|
|
}
|
|
|
|
if (selectionKeyPressed) {
|
|
d3Zoom.on('zoom', null);
|
|
} else {
|
|
d3Zoom.on('zoom', () => {
|
|
if (!event.sourceEvent || (event.sourceEvent && event.sourceEvent.target !== zoomPane.current)) {
|
|
return;
|
|
}
|
|
|
|
updateTransform(event.transform);
|
|
|
|
if (onMove) {
|
|
onMove();
|
|
}
|
|
});
|
|
}
|
|
|
|
return () => {
|
|
d3Zoom.on('zoom', null);
|
|
};
|
|
}, [selectionKeyPressed, d3Zoom]);
|
|
};
|