@artstesh/maps 1.0.4 → 1.0.6

package/dist/fesm2015/maps-components.js

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import { Component, Injectable, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Feature } from 'ol';
 import { Point } from 'ol/geom';
+import { GeoJSON, WKT } from 'ol/format';
+import { getCenter } from 'ol/extent';
 import { useGeographic, get } from 'ol/proj';
 import { Subject } from 'rxjs';
 import { PostboyService, PostboyAbstractRegistrator } from '@artstesh/postboy';
@@ -14,6 +16,7 @@ import OSM from 'ol/source/OSM';
 import { filter, first } from 'rxjs/operators';
 import { XYZ, Vector } from 'ol/source';
 import { Vector as Vector$1 } from 'ol/layer';
+import Overlay from 'ol/Overlay';
 import Style from 'ol/style/Style';
 import { Icon, Circle, Fill, Stroke } from 'ol/style';
 
@@ -139,6 +142,29 @@ class MarkerModel {
     }
 }
 
+class PolygonModel {
+    constructor(feature, id, info) {
+        var _a;
+        this.info = info;
+        this.id = id == null ? IdGenerator.get() : id;
+        this._feature = feature;
+        [this.lng, this.lat] = getCenter((_a = this._feature.getGeometry()) === null || _a === void 0 ? void 0 : _a.getExtent());
+    }
+    static fromGeoJson(id, json, info) {
+        let feature = new GeoJSON().readFeature(json);
+        feature.setId(id);
+        return new PolygonModel(feature, id, info);
+    }
+    static fromWKT(id, wkt, info) {
+        let feature = new WKT().readFeature(wkt);
+        feature.setId(id);
+        return new PolygonModel(feature, id, info);
+    }
+    get feature() {
+        return this._feature;
+    }
+}
+
 class GenericMessage {
 }
 class CallbackMessage extends GenericMessage {
@@ -176,6 +202,17 @@ class MapClickEvent extends GenericMessage {
 }
 MapClickEvent.ID = '323df526-8d9c-49c6-83e8-6e9a1e7762f7';
 
+class CloseTooltipCommand extends GenericMessage {
+    constructor(tooltipId) {
+        super();
+        this.tooltipId = tooltipId;
+    }
+    get id() {
+        return CloseTooltipCommand.ID;
+    }
+}
+CloseTooltipCommand.ID = '4896d52c-e34f-4994-bcfd-32832d12dbe4';
+
 class AddLayerCommand extends GenericMessage {
     constructor(layer) {
         super();
@@ -343,7 +380,7 @@ class MapClickService {
         const model = new MapClickEvent(ev.coordinate, {});
         (_a = this.map) === null || _a === void 0 ? void 0 : _a.forEachFeatureAtPixel(ev.pixel, (f, l) => {
             this.getFeatureCollectionWithInner([f])
-                .filter((f) => !!f.getId())
+                .filter((f) => f.getId() != null)
                 .forEach((fs) => {
                 let layerName = l.get('name');
                 if (!model.entities[layerName])
@@ -381,6 +418,7 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.registerSubject(AddTileCommand.ID);
         this.registerSubject(RemoveTileCommand.ID);
         this.registerSubject(MapClickEvent.ID);
+        this.registerSubject(CloseTooltipCommand.ID);
     }
 }
 MessageRegistratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapClickService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -814,6 +852,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
+class TooltipSettings {
+    constructor(id) {
+        this.containerClass = 'custom-tooltip-class';
+        this.show = (e) => true;
+        this.id = id !== null && id !== void 0 ? id : IdGenerator.get();
+    }
+    static copy(model) {
+        const result = new TooltipSettings(model.id);
+        result.show = model.show;
+        result.containerClass = model.containerClass;
+        return result;
+    }
+    setShow(show) {
+        return TooltipSettings.copy(Object.assign(Object.assign({}, this), { show }));
+    }
+    setClass(containerClass) {
+        return TooltipSettings.copy(Object.assign(Object.assign({}, this), { containerClass }));
+    }
+    isSame(model) {
+        if (this.show !== model.show)
+            return false;
+        if (this.containerClass !== model.containerClass)
+            return false;
+        if (this.id !== model.id)
+            return false;
+        return true;
+    }
+}
+
+class TooltipComponent extends DestructibleComponent {
+    constructor(postboy, detector) {
+        super();
+        this.postboy = postboy;
+        this.detector = detector;
+        this._settings = new TooltipSettings();
+        this.show = false;
+        this.removeOverlay = () => {
+            var _a;
+            !!this.overlay && ((_a = this.map) === null || _a === void 0 ? void 0 : _a.removeOverlay(this.overlay));
+            this.show = false;
+        };
+        this.options = (coordinates) => {
+            var _a;
+            return {
+                element: (_a = this.container) === null || _a === void 0 ? void 0 : _a.nativeElement,
+                autoPan: false,
+                autoPanAnimation: { duration: 0 },
+                position: coordinates,
+            };
+        };
+    }
+    set settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.detector.detectChanges();
+    }
+    ngOnInit() {
+        this.subs.push(this.observeMapRender());
+        this.subs.push(this.observeMapClick());
+        this.subs.push(this.observeClose());
+    }
+    observeMapClick() {
+        return this.postboy.subscribe(MapClickEvent.ID).subscribe((ev) => {
+            this._settings.show(ev) ? this.addOverlay(ev.coordinates) : this.removeOverlay();
+        });
+    }
+    observeClose() {
+        return this.postboy
+            .subscribe(CloseTooltipCommand.ID)
+            .pipe(filter((ev) => ev.tooltipId === this._settings.id))
+            .subscribe(() => this.removeOverlay());
+    }
+    observeMapRender() {
+        return this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => {
+            this.map = m.map;
+        });
+    }
+    addOverlay(coordinates) {
+        var _a;
+        this.removeOverlay();
+        this.overlay = new Overlay(this.options(coordinates));
+        (_a = this.map) === null || _a === void 0 ? void 0 : _a.addOverlay(this.overlay);
+        this.show = true;
+        this.detector.detectChanges();
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TooltipComponent, deps: [{ token: MapPostboyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TooltipComponent, selector: "lib-tooltip", inputs: { settings: "settings" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["tip"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #tip [class]=\"['tooltip-wrapper', _settings.containerClass]\" [hidden]=\"!show\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".tooltip-wrapper{position:absolute}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-tooltip',
+                    templateUrl: './tooltip.component.html',
+                    styleUrls: ['./tooltip.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { container: [{
+                type: ViewChild,
+                args: ['tip']
+            }], settings: [{
+                type: Input
+            }] } });
+
+class PolygonsComponent extends DestructibleComponent {
+    constructor(postboy) {
+        super();
+        this.postboy = postboy;
+        this.layerName = '';
+        this._polygons = [];
+    }
+    set polygons(value) {
+        this._polygons = value;
+        this.putPolygons();
+    }
+    ngOnInit() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(filter((m) => !!m), first())
+            .subscribe(() => this.putPolygons());
+    }
+    putPolygons() {
+        var _a;
+        if (!((_a = this._polygons) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._polygons.map((m) => m.feature)));
+    }
+}
+PolygonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PolygonsComponent, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Component });
+PolygonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PolygonsComponent, selector: "lib-polygons", inputs: { layerName: "layerName", polygons: "polygons" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PolygonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-polygons',
+                    template: '',
+                    styleUrls: [],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; }, propDecorators: { layerName: [{
+                type: Input
+            }], polygons: [{
+                type: Input
+            }] } });
+
 class MapModule {
 }
 MapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -822,7 +1004,14 @@ MapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.
         TileLayerComponent,
         OsmTileLayerComponent,
         FeatureLayerComponent,
-        MarkersComponent], imports: [CommonModule], exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent] });
+        MarkersComponent,
+        TooltipComponent,
+        PolygonsComponent], imports: [CommonModule], exports: [MapPlateComponent,
+        FeatureLayerComponent,
+        MarkersComponent,
+        TileLayerComponent,
+        TooltipComponent,
+        PolygonsComponent] });
 MapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapModule, decorators: [{
             type: NgModule,
@@ -835,8 +1024,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         OsmTileLayerComponent,
                         FeatureLayerComponent,
                         MarkersComponent,
+                        TooltipComponent,
+                        PolygonsComponent,
+                    ],
+                    exports: [
+                        MapPlateComponent,
+                        FeatureLayerComponent,
+                        MarkersComponent,
+                        TileLayerComponent,
+                        TooltipComponent,
+                        PolygonsComponent,
                     ],
-                    exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent],
                 }]
         }] });
 
@@ -863,6 +1061,20 @@ class MarkerStyleHelper {
     }
 }
 
+class PolygonStyleHelper {
+    static simple(fill, stroke, strokeWidth = 1) {
+        return new Style({
+            fill: new Fill({
+                color: fill,
+            }),
+            stroke: new Stroke({
+                color: stroke,
+                width: strokeWidth,
+            }),
+        });
+    }
+}
+
 /*
  * Public API Surface of maps
  */
@@ -875,5 +1087,5 @@ class MarkerStyleHelper {
  * Generated bundle index. Do not edit.
  */
 
-export { CallbackMessage, FeatureLayerComponent, FeatureLayerSettings, GenericMessage, MapClickEvent, MapLyrs, MapLyrsLabel, MapModule, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, OsmTileLayerComponent, TileLayerComponent, TileLayerSettings };
+export { CallbackMessage, CloseTooltipCommand, FeatureLayerComponent, FeatureLayerSettings, GenericMessage, MapClickEvent, MapLyrs, MapLyrsLabel, MapModule, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, OsmTileLayerComponent, PolygonModel, PolygonStyleHelper, PolygonsComponent, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings };
 //# sourceMappingURL=maps-components.js.map