60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { useEffect, MutableRefObject } from 'react';
|
|
import { zoom, zoomIdentity } 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;
|
|
}
|
|
|
|
const d3ZoomInstance = zoom()
|
|
.scaleExtent([0.5, 2])
|
|
.filter(() => !event.button);
|
|
|
|
export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): void => {
|
|
const transform = useStoreState((s) => s.transform);
|
|
const d3Selection = useStoreState((s) => s.d3Selection);
|
|
const d3Zoom = useStoreState((s) => s.d3Zoom);
|
|
|
|
const initD3 = useStoreActions((actions) => actions.initD3);
|
|
const updateTransform = useStoreActions((actions) => actions.updateTransform);
|
|
|
|
useEffect(() => {
|
|
if (zoomPane.current) {
|
|
const selection = select(zoomPane.current).call(d3ZoomInstance);
|
|
initD3({ zoom: d3ZoomInstance, selection });
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (selectionKeyPressed) {
|
|
d3ZoomInstance.on('zoom', null);
|
|
} else {
|
|
d3ZoomInstance.on('zoom', () => {
|
|
if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
|
|
return;
|
|
}
|
|
|
|
updateTransform(event.transform);
|
|
|
|
if (onMove) {
|
|
onMove();
|
|
}
|
|
});
|
|
|
|
if (d3Selection && d3Zoom) {
|
|
// we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
|
|
const graphTransform = zoomIdentity.translate(transform[0], transform[1]).scale(transform[2]);
|
|
d3Selection.call(d3Zoom.transform, graphTransform);
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
d3ZoomInstance.on('zoom', null);
|
|
};
|
|
}, [selectionKeyPressed]);
|
|
};
|