import React , { useEffect } from 'react' ; import { AppState } from '@/store' ; import { ToolInstance } from '@/store/annotation/types' ; import { connect } from 'react-redux' ; import useSafeState from '@/hooks/useSafeSate' ; interface IProps { toolInstance : ToolInstance ; } const ZoomLevel = ( { toolInstance } ) => { const [ , forceRender ] = useSafeState < number > ( 0 ) ; useEffect ( ( ) => { if ( toolInstance ) { toolInstance . singleOn ( 'renderZoom' , ( ) => { forceRender ( ( s ) => s + 1 ) ; } ) ; } } , [ toolInstance ] ) ; const zoom = toolInstance ?. zoom ?? 1 ; return ( < span className = "zoomValue" > { ( zoom * 100 ) . toFixed ( 1 ) } % < /span>); } ; const mapStateToProps = ( state ) => ( { toolInstance : state . annotation . toolInstance , } ) ; export default connect ( mapStateToProps ) ( ZoomLevel ) ;