40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { useCamera } from '@react-sigma/core'
|
|
import { useCallback } from 'react'
|
|
import Button from '@/components/ui/Button'
|
|
import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
|
|
import { controlButtonVariant } from '@/lib/constants'
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
/**
|
|
* Component that provides zoom controls for the graph viewer.
|
|
*/
|
|
const ZoomControl = () => {
|
|
const { zoomIn, zoomOut, reset } = useCamera({ duration: 200, factor: 1.5 })
|
|
const { t } = useTranslation();
|
|
|
|
const handleZoomIn = useCallback(() => zoomIn(), [zoomIn])
|
|
const handleZoomOut = useCallback(() => zoomOut(), [zoomOut])
|
|
const handleResetZoom = useCallback(() => reset(), [reset])
|
|
|
|
return (
|
|
<>
|
|
<Button variant={controlButtonVariant} onClick={handleZoomIn} tooltip={t("graphPanel.sideBar.zoomControl.zoomIn")} size="icon">
|
|
<ZoomInIcon />
|
|
</Button>
|
|
<Button variant={controlButtonVariant} onClick={handleZoomOut} tooltip={t("graphPanel.sideBar.zoomControl.zoomOut")} size="icon">
|
|
<ZoomOutIcon />
|
|
</Button>
|
|
<Button
|
|
variant={controlButtonVariant}
|
|
onClick={handleResetZoom}
|
|
tooltip={t("graphPanel.sideBar.zoomControl.resetZoom")}
|
|
size="icon"
|
|
>
|
|
<FullscreenIcon />
|
|
</Button>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ZoomControl
|