import { EventEmitter } from 'events' ; import { isEqual } from 'lodash' ; import ResizeObserver from 'resize-observer-polyfill' ; function getSize ( el ) { return [ el . clientWidth , el . clientHeight ] ; } /**
 *  ResizeChecker receives an element and emits a "resize" event every time it changes size.
 */ export class ResizeChecker extends EventEmitter { private destroyed : boolean = false ; private el : HTMLElement | null ; private observer : ResizeObserver | null ; private expectedSize : [ number , number ] | null = null ; constructor ( el , args = { } ) { super ( ) ; this . el = el ; this . observer = new ResizeObserver ( ( ) => { if ( this . expectedSize ) { const sameSize = isEqual ( getSize ( el ) , this . expectedSize ) ; this . expectedSize = null ; if ( sameSize ) { return ; } } this . emit ( 'resize' ) ; } ) ; if ( ! args . disabled ) { this . enable ( ) ; } } public enable ( ) { if ( this . destroyed ) { return ; } this . expectedSize = getSize ( this . el ! ) ; this . observer ! . observe ( this . el ! ) ; } /**
     *  Run a function and ignore all resizes that occur
     *  while it's running.
     */ public modifySizeWithoutTriggeringResize ( block ) { try { block ( ) ; } finally { if ( this . el ) { this . expectedSize = getSize ( this . el ) ; } } } /**
     * Tell the ResizeChecker to shutdown, stop listenings, and never
     * emit another resize event.
     *
     * Cleans up it's listeners and timers.
     */ public destroy ( ) { if ( this . destroyed ) { return ; } this . destroyed = true ; this . observer ! . disconnect ( ) ; this . observer = null ; this . expectedSize = null ; this . el = null ; this . removeAllListeners ( ) ; } }