Merge 4e6967b into 824a91e

ts/image-overlay.directive.ts

@@ -21,33 +21,187 @@ import { TRANSPARENT_PIXEL } from './consts';
 import { LayerGroupProvider } from './layer-group.provider';
 import { LayerProvider } from './layer.provider';
 
+/**
+ * Angular2 directive for Leaflet image overlays.
+ *
+ * *You can use this directive in an Angular2 template after importing `YagaModule`.*
+ *
+ * How to use in a template:
+ * ```html
+ * <yaga-map>
+ *     <yaga-image-overlay
+ *         [(url)]="..."
+ *         [(display)]="..."
+ *         [(opacity)]="..."
+ *         [(zIndex)]="..."
+ *         [(bounds)]="..."
+ *         [(north)]="..."
+ *         [(east)]="..."
+ *         [(south)]="..."
+ *         [(west)]="..."
+ *
+ *         (add)="..."
+ *         (remove)="..."
+ *         (popupopen)="..."
+ *         (popupclose)="..."
+ *         (tooltipopen)="..."
+ *         (tooltipclose)="..."
+ *         (click)="..."
+ *         (dbclick)="..."
+ *         (mousedown)="..."
+ *         (mouseover)="..."
+ *         (mouseout)="..."
+ *         (contextmenu)="..."
+ *
+ *         [crossOrigin]="..."
+ *         [alt]="..."
+ *         [interactive]="..."
+ *         [attribution]="..."
+ *         >
+ *     </yaga-image-overlay>
+ * </yaga-map>
+ * ```
+ *
+ * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay Original Leaflet documentation
+ * @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=Image-Overlay%20Directive Unit-Test
+ * @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/image-overlay.directive.js.html Test coverage
+ * @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/imageoverlaydirective.html API documentation
+ * @example https://leaflet-ng2.yagajs.org/latest/examples/image-overlay-directive
+ */
 @Directive({
     providers: [ LayerProvider ],
     selector: 'yaga-image-overlay',
 })
 export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
+    /**
+     * Two-Way bound property for the URL.
+     * Use it with `<yaga-image-overlay [(url)]="someValue">` or
+     * `<yaga-image-overlay (urlChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-seturl Original Leaflet documentation
+     */
     @Output() public urlChange: EventEmitter<string> = new EventEmitter();
+    /**
+     * Two-Way bound property for the display status of the layer.
+     * Use it with `<yaga-image-overlay [(display)]="someValue">`
+     * or `<yaga-image-overlay (displayChange)="processEvent($event)">`
+     */
     @Output() public displayChange: EventEmitter<boolean> = new EventEmitter();
+    /**
+     * Two-Way bound property for the opacity of the layer.
+     * Use it with `<yaga-image-overlay [(opacity)]="someValue">`
+     * or `<yaga-image-overlay (opacityChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-opacity Original Leaflet documentation
+     */
     @Output() public opacityChange: EventEmitter<number> = new EventEmitter();
     // maybe implement -> @Output() public zIndexChange: EventEmitter<number> = new EventEmitter();
 
+    /**
+     * Two-Way bound property for the bounds of the image.
+     * Use it with `<yaga-image-overlay [(bounds)]="someValue">`
+     * or `<yaga-image-overlay (opacityChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
+     */
     @Output() public boundsChange: EventEmitter<LatLngBounds> = new EventEmitter();
+    /**
+     * Two-Way bound property for the north bounds of the image.
+     * Use it with `<yaga-image-overlay [(north)]="someValue">`
+     * or `<yaga-image-overlay (northChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
+     */
     @Output() public northChange: EventEmitter<number> = new EventEmitter();
+    /**
+     * Two-Way bound property for the east bounds of the image.
+     * Use it with `<yaga-image-overlay [(east)]="someValue">`
+     * or `<yaga-image-overlay (eastChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
+     */
     @Output() public eastChange: EventEmitter<number> = new EventEmitter();
+    /**
+     * Two-Way bound property for the south bounds of the image.
+     * Use it with `<yaga-image-overlay [(south)]="someValue">`
+     * or `<yaga-image-overlay (southChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
+     */
     @Output() public southChange: EventEmitter<number> = new EventEmitter();
+    /**
+     * Two-Way bound property for the west bounds of the image.
+     * Use it with `<yaga-image-overlay [(west)]="someValue">`
+     * or `<yaga-image-overlay (westChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
+     */
     @Output() public westChange: EventEmitter<number> = new EventEmitter();
 
+    /**
+     * From leaflet fired add event.
+     * Use it with `<yaga-image-overlay (add)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-add Original Leaflet documentation
+     */
     @Output('add') public addEvent: EventEmitter<LeafletEvent> = new EventEmitter();
+    /**
+     * From leaflet fired remove event.
+     * Use it with `<yaga-image-overlay (remove)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-remove Original Leaflet documentation
+     */
     @Output('remove') public removeEvent: EventEmitter<LeafletEvent> = new EventEmitter();
+    /**
+     * From leaflet fired popupopen event.
+     * Use it with `<yaga-image-overlay (popupopen)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-popupopen Original Leaflet documentation
+     */
     @Output('popupopen') public popupopenEvent: EventEmitter<PopupEvent> = new EventEmitter();
+    /**
+     * From leaflet fired popupclose event.
+     * Use it with `<yaga-image-overlay (popupclose)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-popupclose Original Leaflet documentation
+     */
     @Output('popupclose') public popupcloseEvent: EventEmitter<PopupEvent> = new EventEmitter();
+    /**
+     * From leaflet fired tooltipopen event.
+     * Use it with `<yaga-image-overlay (tooltipopen)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-tooltipopen Original Leaflet documentation
+     */
     @Output('tooltipopen') public tooltipopenEvent: EventEmitter<TooltipEvent> = new EventEmitter();
+    /**
+     * From leaflet fired tooltipclose event.
+     * Use it with `<yaga-image-overlay (tooltipclose)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-tooltipclose Original Leaflet documentation
+     */
     @Output('tooltipclose') public tooltipcloseEvent: EventEmitter<TooltipEvent> = new EventEmitter();
+    /**
+     * From leaflet fired click event.
+     * Use it with `<yaga-image-overlay (click)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-click Original Leaflet documentation
+     */
     @Output('click') public clickEvent: EventEmitter<LeafletMouseEvent> = new EventEmitter();
+    /**
+     * From leaflet fired dbclick event.
+     * Use it with `<yaga-image-overlay (dbclick)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-dbclick Original Leaflet documentation
+     */
     @Output('dbclick') public dbclickEvent: EventEmitter<LeafletMouseEvent> = new EventEmitter();
+    /**
+     * From leaflet fired mousedown event.
+     * Use it with `<yaga-image-overlay (mousedown)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-mousedown Original Leaflet documentation
+     */
     @Output('mousedown') public mousedownEvent: EventEmitter<LeafletMouseEvent> = new EventEmitter();
+    /**
+     * From leaflet fired mouseover event.
+     * Use it with `<yaga-image-overlay (mouseover)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-mouseover Original Leaflet documentation
+     */
     @Output('mouseover') public mouseoverEvent: EventEmitter<LeafletMouseEvent> = new EventEmitter();
+    /**
+     * From leaflet fired mouseout event.
+     * Use it with `<yaga-image-overlay (mouseout)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-mouseout Original Leaflet documentation
+     */
     @Output('mouseout') public mouseoutEvent: EventEmitter<LeafletMouseEvent> = new EventEmitter();
+    /**
+     * From leaflet fired contextmenu event.
+     * Use it with `<yaga-image-overlay (contextmenu)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-contextmenu Original Leaflet documentation
+     */
     @Output('contextmenu') public contextmenuEvent: EventEmitter<LeafletMouseEvent> = new EventEmitter();
 
     constructor(
@@ -107,38 +261,64 @@ export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
         });
     }
 
+    /**
+     * This function gets called from Angular on destroy of the html-component.
+     * @link https://angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html
+     */
     public ngOnDestroy(): void {
         this.removeFrom((this as any)._map);
     }
 
+    /**
+     * Derived method of the original setUrl method.
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-seturl Original Leaflet documentation
+     */
     public setUrl(url: string): this {
         if (this.url === url) {
             return;
         }
         this.urlChange.emit(url);
         return super.setUrl(url);
     }
+    /**
+     * Two-Way bound property for the URL.
+     * Use it with `<yaga-image-overlay [(url)]="someValue">` or `<yaga-image-overlay [url]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-seturl Original Leaflet documentation
+     */
     @Input() public set url(val: string) {
         this.setUrl(val);
     }
     public get url(): string {
         return (this as any)._url;
     }
 
+    /**
+     * Derived method of the original setOpacity method.
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setopacity Original Leaflet documentation
+     */
     public setOpacity(val: number): this {
         if (this.opacity === val) {
             return;
         }
         this.opacityChange.emit(val);
         return super.setOpacity(val);
     }
+    /**
+     * Two-Way bound property for the opacity.
+     * Use it with `<yaga-image-overlay [(opacity)]="someValue">` or `<yaga-image-overlay [opacity]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setopacity Original Leaflet documentation
+     */
     @Input() public set opacity(val: number) {
         this.setOpacity(val);
     }
     public get opacity(): number {
         return this.options.opacity;
     }
 
+    /**
+     * Two-Way bound property for the display status of the layer.
+     * Use it with `<yaga-image-overlay [(display)]="someValue">` or `<yaga-image-overlay [display]="someValue">`
+     */
     @Input() public set display(val: boolean) {
         const isDisplayed: boolean = this.display;
         if (isDisplayed === val) {
@@ -173,6 +353,10 @@ export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
             }
         }
     }
+    /**
+     * Two-Way bound property for the display status of the layer.
+     * Use it with `<yaga-image-overlay [(display)]="someValue">` or `<yaga-image-overlay [display]="someValue">`
+     */
     public get display(): boolean {
         let pane: HTMLElement;
         let container: HTMLElement;
@@ -194,6 +378,10 @@ export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
         return false;
     }
 
+    /**
+     * Derived method of the original setBounds method.
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-setbounds Original Leaflet documentation
+     */
     public setBounds(val: LatLngBoundsExpression): this {
         super.setBounds(latLngBounds((val as any)));
 
@@ -205,12 +393,20 @@ export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
 
         return this;
     }
+    /**
+     * Two-Way bound property for the bounds of the image.
+     * Use it with `<yaga-image-overlay [(bounds)]="someValue">` or `<yaga-image-overlay [bounds]="someValue">`
+     */
     @Input() public set bounds(val: LatLngBounds) {
         this.setBounds(val);
     }
     public get bounds(): LatLngBounds {
         return this.getBounds();
     }
+    /**
+     * Two-Way bound property for the north bounds of the image.
+     * Use it with `<yaga-image-overlay [(north)]="someValue">` or `<yaga-image-overlay [north]="someValue">`
+     */
     @Input() public set north(val: number) {
         const oldBounds: LatLngBounds = this.getBounds();
 
@@ -226,6 +422,10 @@ export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
     public get north(): number {
         return this.getBounds().getNorth();
     }
+    /**
+     * Two-Way bound property for the east bounds of the image.
+     * Use it with `<yaga-image-overlay [(east)]="someValue">` or `<yaga-image-overlay [east]="someValue">`
+     */
     @Input() public set east(val: number) {
         const oldBounds: LatLngBounds = this.getBounds();
         super.setBounds(latLngBounds([
@@ -239,6 +439,10 @@ export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
     public get east(): number {
         return this.getBounds().getEast();
     }
+    /**
+     * Two-Way bound property for the south bounds of the image.
+     * Use it with `<yaga-image-overlay [(south)]="someValue">` or `<yaga-image-overlay [south]="someValue">`
+     */
     @Input() public set south(val: number) {
         const oldBounds: LatLngBounds = this.getBounds();
         super.setBounds(latLngBounds([
@@ -252,6 +456,10 @@ export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
     public get south(): number {
         return this.getBounds().getSouth();
     }
+    /**
+     * Two-Way bound property for the west bounds of the image.
+     * Use it with `<yaga-image-overlay [(west)]="someValue">` or `<yaga-image-overlay [west]="someValue">`
+     */
     @Input() public set west(val: number) {
         const oldBounds: LatLngBounds = this.getBounds();
         super.setBounds(latLngBounds([
@@ -266,6 +474,11 @@ export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
         return this.getBounds().getWest();
     }
 
+    /**
+     * Input for the crossOrigin.
+     * Use it with `<yaga-image-overlay [crossOrigin]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-crossorigin Original Leaflet documentation
+     */
     @Input() public set crossOrigin(val: boolean) {
         this.options.crossOrigin = val;
         this.getElement().crossOrigin = val ? '' : undefined;
@@ -274,13 +487,23 @@ export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
         return this.options.crossOrigin;
     }
 
+    /**
+     * Input for the alternative text.
+     * Use it with `<yaga-image-overlay [alt]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-alt Original Leaflet documentation
+     */
     @Input() public set alt(val: string) {
         this.options.alt = val;
         this.getElement().alt = val;
     }
     public get alt(): string {
         return this.getElement().getAttribute('alt');
     }
+    /**
+     * Input for the state of interaction.
+     * Use it with `<yaga-image-overlay [interactive]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-interactive Original Leaflet documentation
+     */
     @Input() public set interactive(val: boolean) {
         this.options.interactive = val;
         this.onRemove(((this as any)._map as any));
@@ -289,6 +512,12 @@ export class ImageOverlayDirective extends ImageOverlay implements OnDestroy  {
     public get interactive(): boolean {
         return this.options.interactive;
     }
+
+    /**
+     * Input for the attribution.
+     * Use it with `<yaga-image-overlay [attribution]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#imageoverlay-attribution Original Leaflet documentation
+     */
     @Input() public set attribution(val: string) {
         if ((this as any)._map && (this as any)._map.attributionControl) {
             ((this as any)._map.attributionControl as Control.Attribution).removeAttribution(this.getAttribution());