36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { useCallback } from 'react'
|
|
import { useDominoStore, useDominoStoreInstance } from '../components/canvas'
|
|
|
|
export function useZoomActions(rootRef: React.RefObject<HTMLElement | null>) {
|
|
const store = useDominoStoreInstance()
|
|
const scale = useDominoStore(state => state.viewport.scale)
|
|
|
|
const handleZoom = useCallback(
|
|
(targetScale: number) => {
|
|
const { viewport, zoomViewport } = store.getState()
|
|
const multiplier = targetScale / viewport.scale
|
|
const container = rootRef.current
|
|
const centerX = (container?.offsetWidth || window.innerWidth) / 2
|
|
const centerY = (container?.offsetHeight || window.innerHeight) / 2
|
|
zoomViewport(multiplier, centerX, centerY, 0.02, 4)
|
|
},
|
|
[store, rootRef],
|
|
)
|
|
|
|
const stepZoom = useCallback(
|
|
(delta: number) => {
|
|
const { viewport } = store.getState()
|
|
const step = Math.sign(delta) * 0.02
|
|
const targetScale = Math.max(0.02, Math.min(4, viewport.scale + step))
|
|
handleZoom(targetScale)
|
|
},
|
|
[store, handleZoom],
|
|
)
|
|
|
|
return {
|
|
handleZoom,
|
|
stepZoom,
|
|
scale,
|
|
}
|
|
}
|