import { useEffect , useState } from 'react' ; export type Action = { onZoomUp : ( ) => void ; onZoomDown : ( ) => void ; onReset : ( ) => void ; onWheel : ( event : WheelEvent ) => void ; } ; export default function useScaler ( initial ) { const [ scale , setScale ] = useState ( initial ) ; useEffect ( ( ) => { window . document . addEventListener ( 'keydown' , function ( event ) { if ( ( event . ctrlKey === true || event . metaKey === true ) && ( event . which === 61 || event . which === 107 || event . which === 173 || event . which === 109 || event . which === 187 || event . which === 189 ) ) { event . preventDefault ( ) ; } } , false ) ; window . addEventListener ( 'mousewheel' , ( event ) => { if ( event . ctrlKey === true || event . metaKey ) { event . preventDefault ( ) ; } } , { passive : false } ) ; window . addEventListener ( 'DOMMouseScroll' , ( event ) => { if ( event . ctrlKey === true || event . metaKey ) { event . preventDefault ( ) ; } } , { passive : false } ) ; } , [ ] ) ; return [ scale , { onZoomUp : ( ) => setScale ( scale + 10 ) , onZoomDown : ( ) => scale > 10 && setScale ( scale - 10 ) , onReset : ( ) => setScale ( initial ) , onWheel : ( event ) => { if ( ! event . ctrlKey ) return ; event . deltaY > 0 ? scale > 10 && setScale ( scale - 5 ) : setScale ( scale + 5 ) ; } , } , ] ; }