import { Directive , EventEmitter , Input , NgZone , OnInit , Output } from '@angular/core' ; import { Control , Draw , DrawEvents , drawLocal } from 'leaflet' ; import 'leaflet-draw' ; import { LeafletDirective , LeafletDirectiveWrapper , LeafletUtil } from '@asymmetrik/ngx-leaflet' ; import { LeafletDrawUtil } from './leaflet-draw.util' ; @ Directive ( { selector : '[leafletDraw]' } ) export class LeafletDrawDirective implements OnInit { leafletDirective : LeafletDirectiveWrapper ; drawControl : Control . Draw ; @ Input ( 'leafletDrawOptions' ) drawOptions : Control . DrawConstructorOptions = null ; @ Input ( 'leafletDrawLocal' ) drawLocal : any = null ; @ Output ( 'leafletDrawReady' ) drawReady = new EventEmitter < Control . Draw > ( ) ; @ Output ( 'leafletDrawCreated' ) onDrawCreated = new EventEmitter < DrawEvents . Created > ( ) ; @ Output ( 'leafletDrawEdited' ) onDrawEdited = new EventEmitter < DrawEvents . Edited > ( ) ; @ Output ( 'leafletDrawDeleted' ) onDrawDeleted = new EventEmitter < DrawEvents . Deleted > ( ) ; @ Output ( 'leafletDrawStart' ) onDrawStart = new EventEmitter < DrawEvents . DrawStart > ( ) ; @ Output ( 'leafletDrawStop' ) onDrawStop = new EventEmitter < DrawEvents . DrawStop > ( ) ; @ Output ( 'leafletDrawVertex' ) onDrawVertex = new EventEmitter < DrawEvents . DrawVertex > ( ) ; @ Output ( 'leafletDrawEditStart' ) onDrawEditStart = new EventEmitter < DrawEvents . EditStart > ( ) ; @ Output ( 'leafletDrawEditMove' ) onDrawEditMove = new EventEmitter < DrawEvents . EditMove > ( ) ; @ Output ( 'leafletDrawEditResize' ) onDrawEditResize = new EventEmitter < DrawEvents . EditResize > ( ) ; @ Output ( 'leafletDrawEditVertex' ) onDrawEditVertex = new EventEmitter < DrawEvents . EditVertex > ( ) ; @ Output ( 'leafletDrawEditStop' ) onDrawEditStop = new EventEmitter < DrawEvents . EditStop > ( ) ; @ Output ( 'leafletDrawDeleteStart' ) onDrawDeleteStart = new EventEmitter < DrawEvents . DeleteStart > ( ) ; @ Output ( 'leafletDrawDeleteStop' ) onDrawDeleteStop = new EventEmitter < DrawEvents . DeleteStop > ( ) ; @ Output ( 'leafletDrawToolbarOpened' ) onDrawToolbarOpened = new EventEmitter < DrawEvents . ToolbarOpened > ( ) ; @ Output ( 'leafletDrawToolbarClosed' ) onDrawToolbarClosed = new EventEmitter < DrawEvents . ToolbarClosed > ( ) ; @ Output ( 'leafletDrawMarkerContext' ) onDrawMarkerContext = new EventEmitter < DrawEvents . MarkerContext > ( ) ; constructor ( leafletDirective , private zone ) { this . leafletDirective = new LeafletDirectiveWrapper ( leafletDirective ) ; } ngOnInit ( ) { this . leafletDirective . init ( ) ; if ( null != this . drawLocal ) { LeafletDrawUtil . deepLiteralCopy ( drawLocal , this . drawLocal ) ; } this . drawControl = new Control . Draw ( this . drawOptions ) ; this . leafletDirective . getMap ( ) . addControl ( this . drawControl ) ; const map = this . leafletDirective . getMap ( ) ; map . on ( Draw . Event . CREATED , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawCreated , e ) ) ; map . on ( Draw . Event . EDITED , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawEdited , e ) ) ; map . on ( Draw . Event . DELETED , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawDeleted , e ) ) ; map . on ( Draw . Event . DRAWSTART , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawStart , e ) ) ; map . on ( Draw . Event . DRAWSTOP , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawStop , e ) ) ; map . on ( Draw . Event . EDITSTART , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawEditStart , e ) ) ; map . on ( Draw . Event . EDITMOVE , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawEditMove , e ) ) ; map . on ( Draw . Event . EDITRESIZE , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawEditResize , e ) ) ; map . on ( Draw . Event . EDITVERTEX , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawEditVertex , e ) ) ; map . on ( Draw . Event . EDITSTOP , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawEditStop , e ) ) ; map . on ( Draw . Event . DELETESTART , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawDeleteStart , e ) ) ; map . on ( Draw . Event . DELETESTOP , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawDeleteStop , e ) ) ; map . on ( Draw . Event . TOOLBAROPENED , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawToolbarOpened , e ) ) ; map . on ( Draw . Event . TOOLBARCLOSED , ( e ) => LeafletUtil . handleEvent ( this . zone , this . onDrawToolbarClosed , e ) ) ; this . drawReady . emit ( this . drawControl ) ; } ngOnDestroy ( ) { this . leafletDirective . getMap ( ) . removeControl ( this . drawControl ) ; } public getDrawControl ( ) { return this . drawControl ; } }