import { ref , Ref , onMounted , onUnmounted } from "vue" ; import { nonNull } from "../common/common" ; import { createSvgPanZoomEx , SvgPanZoomInstance , SvgPanZoomOptions } from "../utility/svg-pan-zoom-ex" ; type Callback = ( ) => void ; enum State { INITIAL = 0 , MOUNTED = 1 , UNMOUNTED = 2 } export function useSvgPanZoom ( svg , options ) { const instance = ref < SvgPanZoomInstance > ( ) ; let state = State . INITIAL ; const mountedCallbacks = [ ] ; const unmountedCallbacks = [ ] ; const instanceMounted = ( ) => { state = State . MOUNTED ; mountedCallbacks . forEach ( c => c ( ) ) ; mountedCallbacks . length = 0 ; } ; const instanceUnmounted = ( ) => { state = State . UNMOUNTED ; unmountedCallbacks . forEach ( c => c ( ) ) ; unmountedCallbacks . length = 0 ; } ; onMounted ( ( ) => { const element = nonNull ( svg . value , "<svg>" ) ; const userInit = options . customEventsHandler ?. init ?? ( ( _ ) => { } ) ; const userDestroy = options . customEventsHandler ?. destroy ?? ( ( _ ) => { } ) ; const haltEventListeners = options . customEventsHandler ?. haltEventListeners ?? [ ] ; options . customEventsHandler = { init : o => { instance . value = o . instance ; userInit ( o ) ; instanceMounted ( ) ; } , destroy : o => { instanceUnmounted ( ) ; userDestroy ( o ) ; } , haltEventListeners } ; createSvgPanZoomEx ( element , options ) ; } ) ; onUnmounted ( ( ) => { instance . value ?. destroy ( ) ; instance . value = undefined ; } ) ; const onSvgPanZoomMounted = ( callback ) => { if ( state === State . INITIAL ) { mountedCallbacks . push ( callback ) ; } else if ( state === State . MOUNTED ) { callback ( ) ; } } ; const onSvgPanZoomUnmounted = ( callback ) => { if ( state === State . INITIAL || state === State . MOUNTED ) { unmountedCallbacks . push ( callback ) ; } else { callback ( ) ; } } ; return { svgPanZoom : instance , onSvgPanZoomMounted , onSvgPanZoomUnmounted } ; }