88 lines
2.6 KiB
JavaScript
88 lines
2.6 KiB
JavaScript
import React, { useEffect, useContext, useRef } from 'react';
|
||
import * as d3Zoom from 'd3-zoom';
|
||
import { select, event } from 'd3-selection';
|
||
import ReactSizeMe from 'react-sizeme';
|
||
|
||
import { GraphContext } from '../GraphContext';
|
||
import NodeRenderer from '../NodeRenderer';
|
||
import EdgeRenderer from '../EdgeRenderer';
|
||
import Selection from '../Selection';
|
||
import { updateTransform, updateSize, initD3, fitView } from '../state/actions';
|
||
import { useKeyPress } from '../hooks';
|
||
|
||
const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2])
|
||
|
||
const GraphView = (props) => {
|
||
const zoomPane = useRef(null);
|
||
const graphContext = useContext(GraphContext);
|
||
const shiftPressed = useKeyPress('Shift');
|
||
|
||
useEffect(() => {
|
||
const selection = select(zoomPane.current).call(d3ZoomInstance);
|
||
graphContext.dispatch(initD3({ zoom: d3ZoomInstance, selection }));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (shiftPressed) {
|
||
d3ZoomInstance.on('zoom', null);
|
||
} else {
|
||
d3ZoomInstance.on('zoom', () => {
|
||
if (event.sourceEvent && event.sourceEvent.target !== zoomPane.current) {
|
||
return false;
|
||
}
|
||
|
||
graphContext.dispatch(updateTransform(event.transform));
|
||
|
||
props.onMove();
|
||
});
|
||
|
||
if (graphContext.state.d3Selection) {
|
||
// we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
|
||
const graphTransform = d3Zoom.zoomIdentity
|
||
.translate(graphContext.state.transform[0], graphContext.state.transform[1])
|
||
.scale(graphContext.state.transform[2]);
|
||
|
||
graphContext.state.d3Selection.call(graphContext.state.d3Zoom.transform, graphTransform);
|
||
}
|
||
}
|
||
|
||
}, [shiftPressed]);
|
||
|
||
useEffect(
|
||
() => graphContext.dispatch(updateSize(props.size)),
|
||
[props.size.width, props.size.height]
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (graphContext.state.d3Initialised) {
|
||
props.onLoad({
|
||
nodes: graphContext.state.nodes,
|
||
edges: graphContext.state.edges,
|
||
fitView: () => graphContext.dispatch(fitView())
|
||
});
|
||
}
|
||
}, [graphContext.state.d3Initialised]);
|
||
|
||
useEffect(() => {
|
||
props.onChange({
|
||
nodes: graphContext.state.nodes,
|
||
edges: graphContext.state.edges,
|
||
});
|
||
});
|
||
|
||
return (
|
||
<div className="react-graph__renderer">
|
||
<NodeRenderer nodeTypes={props.nodeTypes} />
|
||
<EdgeRenderer width={graphContext.state.width} height={graphContext.state.height} />
|
||
{(shiftPressed || graphContext.state.selectedNodeIds.length) && <Selection />}
|
||
<div
|
||
className="react-graph__zoompane"
|
||
ref={zoomPane}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
|
||
export default ReactSizeMe.withSize({ monitorHeight: true })(GraphView);
|