in src/components/graph-controls.js [44:89]
function GraphControls({
maxZoom = DEFAULT_MAX_ZOOM,
minZoom = DEFAULT_MIN_ZOOM,
zoomLevel,
zoomToFit,
modifyZoom,
}: IGraphControlProps) {
// Modify current zoom of graph-view
const zoom = useCallback(
(e: any) => {
const sliderVal = e.target.value;
const zoomLevelNext = sliderToZoom(sliderVal, minZoom, maxZoom);
const delta = zoomLevelNext - zoomLevel;
if (zoomLevelNext <= (maxZoom || 0) && zoomLevelNext >= (minZoom || 0)) {
modifyZoom(delta);
}
},
[minZoom, maxZoom, zoomLevel, modifyZoom]
);
const min = useZoomLevelToSliderValue(minZoom, minZoom, maxZoom);
const max = useZoomLevelToSliderValue(maxZoom, minZoom, maxZoom);
const value = useZoomLevelToSliderValue(zoomLevel, minZoom, maxZoom);
return (
<div className="graph-controls">
<div className="slider-wrapper">
<span>-</span>
<input
type="range"
className="slider"
min={min}
max={max}
value={value}
onChange={zoom}
step="1"
/>
<span>+</span>
</div>
<button type="button" className="slider-button" onMouseDown={zoomToFit}>
<ExpandIcon />
</button>
</div>
);
}