Merge branch 'release/1.12.0'

ddubrava · Apr 24, 2020 · adc87eb · adc87eb
2 parents ae47899 + f8d5a75
commit adc87eb
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 76 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 # Changelog
 All notable changes from v1.0.0 will be documented in this file.
 
+## [1.12.0] - 2020-04-24
+### Added
+- Support for changing ContentChild after map init (E.g. Issue#11)
+
 ## [1.11.4] - 2020-04-02
 ### Added
 - Export types: ILoadEvent & IEvent
@@ -115,6 +119,7 @@ All notable changes from v1.0.0 will be documented in this file.
 ## [1.0.0] - 2019-09-14
 - Release without changes
 
+[1.12.0]: https://github.com/ddubrava/angular-yandex-maps/compare/v1.11.4...v1.12.0
 [1.11.4]: https://github.com/ddubrava/angular-yandex-maps/compare/v1.11.3...v1.11.4
 [1.11.3]: https://github.com/ddubrava/angular-yandex-maps/compare/v1.11.2...v1.11.3
 [1.11.2]: https://github.com/ddubrava/angular-yandex-maps/compare/v1.11.0...v1.11.2

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-yandex-maps",
-  "version": "1.11.4",
+  "version": "1.12.0",
   "scripts": {
     "start": "ng serve",
     "build": "ng build angular8-yandex-maps",

diff --git a/projects/angular8-yandex-maps/package.json b/projects/angular8-yandex-maps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular8-yandex-maps",
-  "version": "1.11.4",
+  "version": "1.12.0",
   "description": "Angular module for Yandex.Maps",
   "repository": {
     "type": "git",

diff --git a/...ular8-yandex-maps/src/lib/components/yandex-control-component/yandex-control.component.ts b/...ular8-yandex-maps/src/lib/components/yandex-control-component/yandex-control.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { ILoadEvent } from '../../types/types';
+import { ILoadEvent } from '../../models/models';
 
 @Component({
   selector: 'angular-yandex-control',

diff --git a/...8-yandex-maps/src/lib/components/yandex-geoobject-component/yandex-geoobject.component.ts b/...8-yandex-maps/src/lib/components/yandex-geoobject-component/yandex-geoobject.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { IEvent, ILoadEvent } from '../../types/types';
+import { IEvent, ILoadEvent } from '../../models/models';
+import { generateRandomId } from '../../utils/utils';
 
 @Component({
   selector: 'angular-yandex-geoobject',
@@ -18,6 +19,12 @@ export class YandexGeoObjectComponent implements OnInit {
   @Output() public mouse = new EventEmitter<IEvent>();
   @Output() public multitouch = new EventEmitter<IEvent>();
 
+  public id: string;
+
+  // Yandex.Map API
+  private _map: any;
+  private _geoObject: any;
+
   constructor() {}
 
   public ngOnInit(): void {
@@ -34,16 +41,20 @@ export class YandexGeoObjectComponent implements OnInit {
   public initGeoObject(ymaps: any, map: any): void {
     const geoObject = new ymaps.GeoObject(this.feature, this.options);
 
+    this.id = generateRandomId();
+    this._map = map;
+    this._geoObject = geoObject;
+
     map.geoObjects.add(geoObject);
-    this.emitEvents(ymaps, geoObject);
+    this._emitEvents(ymaps, geoObject);
   }
 
   /**
-   * Emit events
-   * @param ymaps - class from Yandex.Map API
-   * @param multiroute - multiroute instance
+   * Add listeners on placemark events
+   * @param ymaps
+   * @param map
    */
-  public emitEvents(ymaps: any, geoObject: any): void {
+  private _emitEvents(ymaps: any, geoObject: any): void {
     this.load.emit({ ymaps, instance: geoObject });
 
     // Baloon
@@ -88,4 +99,8 @@ export class YandexGeoObjectComponent implements OnInit {
         (e: any) => this.multitouch.emit({ ymaps, instance: geoObject, type: e.originalEvent.type, event: e })
       );
   }
+
+  public ngOnDestroy(): void {
+    this._map.geoObjects.remove(this._geoObject);
+  }
 }
diff --git a/...ects/angular8-yandex-maps/src/lib/components/yandex-map-component/yandex-map.component.ts b/...ects/angular8-yandex-maps/src/lib/components/yandex-map-component/yandex-map.component.ts
@@ -1,21 +1,35 @@
-import { Component, OnInit, Input, ViewChild, ElementRef, ContentChildren, QueryList, Output, EventEmitter } from '@angular/core';
-import { YandexPlacemarkComponent } from '../yandex-placemark-component/yandex-placemark.component';
-import { YandexMultirouteComponent } from '../yandex-multiroute-component/yandex-multiroute.component';
-import { YandexGeoObjectComponent } from '../yandex-geoobject-component/yandex-geoobject.component';
+import {
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  QueryList,
+  ViewChild,
+} from '@angular/core';
+import { IEvent, ILoadEvent } from '../../models/models';
+import { Subscription } from 'rxjs';
 import { YandexControlComponent } from '../yandex-control-component/yandex-control.component';
+import { YandexGeoObjectComponent } from '../yandex-geoobject-component/yandex-geoobject.component';
 import { YandexMapService } from '../../services/yandex-map/yandex-map.service';
-import { take } from 'rxjs/operators';
+import { YandexMultirouteComponent } from '../yandex-multiroute-component/yandex-multiroute.component';
+import { YandexPlacemarkComponent } from '../yandex-placemark-component/yandex-placemark.component';
 import { generateRandomId } from '../../utils/utils';
-import { IEvent, ILoadEvent } from '../../types/types';
+import { take, startWith } from 'rxjs/operators';
 
 @Component({
   selector: 'angular-yandex-map',
   templateUrl: './yandex-map.component.html',
   styleUrls: ['./yandex-map.component.scss']
 })
-export class YandexMapComponent implements OnInit {
-  // Get MapContainer & components inside MapContainer
+export class YandexMapComponent implements OnInit, OnDestroy {
+  // Map container
   @ViewChild('container') public mapContainer: ElementRef;
+
+  // Components inside <angular-yandex-map>
   @ContentChildren(YandexPlacemarkComponent) public placemarks: QueryList<YandexPlacemarkComponent>;
   @ContentChildren(YandexMultirouteComponent) public multiroutes: QueryList<YandexMultirouteComponent>;
   @ContentChildren(YandexGeoObjectComponent) public geoObjects: QueryList<YandexGeoObjectComponent>;
@@ -38,14 +52,13 @@ export class YandexMapComponent implements OnInit {
   @Output() public mouse = new EventEmitter<IEvent>();
   @Output() public multitouch = new EventEmitter<IEvent>();
 
+  private _sub: Subscription;
+
   constructor(private _yandexMapService: YandexMapService) { }
 
   public ngOnInit(): void {
-    /**
-     * Init ymaps script
-     * OnSub create map & add object on the map
-     * If onlyInstance === true => only emit loadEvent
-     */
+    this._sub = new Subscription();
+
     this._yandexMapService.initScript()
       .pipe(take(1))
       .subscribe((ymaps: any) => {
@@ -56,10 +69,14 @@ export class YandexMapComponent implements OnInit {
 
         this._logErrors();
 
+        // Map
         const map = this._createMap(ymaps, generateRandomId());
 
-        this.emitEvents(ymaps, map);
-        this._addObjectsOnMap(ymaps, map);
+        // Events
+        this._emitEvents(ymaps, map);
+
+        // Objects
+        this._initObjects(ymaps, map);
       });
   }
 
@@ -70,13 +87,7 @@ export class YandexMapComponent implements OnInit {
     }
   }
 
-  /**
-   * Create map
-   * @param ymaps - class from Yandex.Map API
-   * @param id - unique id
-   */
   private _createMap(ymaps: any, id: string): any {
-    // Set unique map id & inline styles for container
     const containerElem: HTMLElement = this.mapContainer.nativeElement;
     containerElem.setAttribute('id', id);
     containerElem.style.cssText = 'width: 100%; height: 100%;';
@@ -87,52 +98,78 @@ export class YandexMapComponent implements OnInit {
   }
 
   /**
-   * Add ymaps entities/objects on map
-   * @param map - current map instance
+   * Add new objects on ContentChildren changes
+   * @param ymaps
+   * @param map
    */
-  private _addObjectsOnMap(ymaps: any, map: any): void {
-    // Placemarks with clusterer
-    const placemarks = [];
+  private _initObjects(ymaps: any, map: any): void {
+    // Placemarks
+    let clusterer: any;
 
-    this.placemarks.forEach((placemark: YandexPlacemarkComponent) => {
-      placemarks.push(placemark.initPlacemark(ymaps, map));
-    });
+    if (this.clusterer) {
+      clusterer = this._createClusterer(ymaps, map);
+    }
 
-    if (this.clusterer) this._createClusterer(ymaps, map, placemarks);
+    const placemarksSub = this.placemarks.changes
+      .pipe(startWith(this.placemarks))
+      .subscribe((list: QueryList<YandexPlacemarkComponent>) => {
+        list.forEach((placemark: YandexPlacemarkComponent) => {
+          if (!placemark.id) {
+            placemark.initPlacemark(ymaps, map, clusterer);
+          }
+
+          if (clusterer) {
+            clusterer.add(placemark.placemark);
+          }
+        });
+      });
 
     // Multiroutes
-    this.multiroutes.forEach((multiroute: YandexMultirouteComponent) => {
-      multiroute.initMultiroute(ymaps, map);
-    });
+    const multiroutesSub = this.multiroutes.changes
+      .pipe(startWith(this.multiroutes))
+      .subscribe((list: QueryList<YandexMultirouteComponent>) => {
+        list.forEach((multiroute: YandexMultirouteComponent) => {
+          if (!multiroute.id) {
+            multiroute.initMultiroute(ymaps, map);
+          }
+        });
+      });
 
     // GeoObjects
-    this.geoObjects.forEach((geoObject: YandexGeoObjectComponent) => {
-      geoObject.initGeoObject(ymaps, map);
-    });
+    const geoObjectsSub = this.geoObjects.changes
+      .pipe(startWith(this.geoObjects))
+      .subscribe((list: QueryList<YandexGeoObjectComponent>) => {
+        list.forEach((geoObject: YandexGeoObjectComponent) => {
+          if (!geoObject.id) {
+            geoObject.initGeoObject(ymaps, map);
+          }
+        });
+      });
 
     // Controls
     this.controls.forEach((control: YandexControlComponent) => {
       control.initControl(ymaps, map);
     });
+
+    this._sub
+      .add(placemarksSub)
+      .add(multiroutesSub)
+      .add(geoObjectsSub);
   }
 
-  /**
-   * Create clusterer for the provided GeoObjects
-   * @param geoObjects - Yandex.Map GeoObject class, can be Placemark, Polylin, Polygon, Circle etc.
-   */
-  private _createClusterer(ymaps: any, map: any, geoObjects: Array<any>): void {
+  private _createClusterer(ymaps: any, map: any): any {
     const clusterer = new ymaps.Clusterer(this.clusterer);
-
-    clusterer.add(geoObjects);
     map.geoObjects.add(clusterer);
+
+    return clusterer;
   }
 
   /**
-   * Emit events
-   * @param ymaps - class from Yandex.Map API
-   * @param map - map instance
+   * Add listeners on map events
+   * @param ymaps
+   * @param map
    */
-  public emitEvents(ymaps: any, map: any): void {
+  private _emitEvents(ymaps: any, map: any): void {
     this.load.emit({ ymaps, instance: map });
 
     // Action
@@ -177,4 +214,8 @@ export class YandexMapComponent implements OnInit {
         (e: any) => this.multitouch.emit({ ymaps, instance: map, type: e.originalEvent.type, event: e })
       );
   }
+
+  public ngOnDestroy(): void {
+    this._sub.unsubscribe();
+  }
 }
diff --git a/...yandex-maps/src/lib/components/yandex-multiroute-component/yandex-multiroute.component.ts b/...yandex-maps/src/lib/components/yandex-multiroute-component/yandex-multiroute.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
-import { IEvent, ILoadEvent } from '../../types/types';
+import { IEvent, ILoadEvent } from '../../models/models';
+import { generateRandomId } from '../../utils/utils';
 
 @Component({
   selector: 'angular-yandex-multiroute',
@@ -18,6 +19,12 @@ export class YandexMultirouteComponent implements OnInit {
   @Output() public mouse = new EventEmitter<IEvent>();
   @Output() public multitouch = new EventEmitter<IEvent>();
 
+  public id: string;
+
+  // Yandex.Map API
+  private _map: any;
+  private _multiroute: any;
+
   constructor() { }
 
   public ngOnInit(): void {
@@ -36,16 +43,20 @@ export class YandexMultirouteComponent implements OnInit {
       { ...this.model, referencePoints: this.referencePoints }, this.options
     );
 
+    this.id = generateRandomId();
+    this._map = map;
+    this._multiroute = multiroute;
+
     map.geoObjects.add(multiroute);
-    this.emitEvents(ymaps, multiroute);
+    this._emitEvents(ymaps, multiroute);
   }
 
   /**
-   * Emit events
-   * @param ymaps - class from Yandex.Map API
-   * @param multiroute - multiroute instance
+   * Add listeners on placemark events
+   * @param ymaps
+   * @param map
    */
-  public emitEvents(ymaps: any, multiroute: any): void {
+  private _emitEvents(ymaps: any, multiroute: any): void {
     this.load.emit({ ymaps, instance: multiroute });
 
     // Activeroutechange
@@ -83,4 +94,8 @@ export class YandexMultirouteComponent implements OnInit {
         (e: any) => this.multitouch.emit({ ymaps, instance: multiroute, type: e.originalEvent.type, event: e })
       );
   }
+
+  public ngOnDestroy(): void {
+    this._map.geoObjects.remove(this._multiroute);
+  }
 }
diff --git a/...ar8-yandex-maps/src/lib/components/yandex-panorama-component/yandex-panorama.component.ts b/...ar8-yandex-maps/src/lib/components/yandex-panorama-component/yandex-panorama.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, Input, ViewChild, ElementRef, Output, EventEmitter }
 import { YandexMapService } from '../../services/yandex-map/yandex-map.service';
 import { take } from 'rxjs/operators';
 import { generateRandomId } from '../../utils/utils';
-import { IEvent, ILoadEvent } from '../../types/types';
+import { IEvent, ILoadEvent } from '../../models/models';
 
 @Component({
   selector: 'angular-yandex-panorama',