@artstesh/maps 5.0.4 → 5.0.6

package/dist/fesm2022/maps-components-src-map.mjs

@@ -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 i4 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';
 
@@ -141,6 +144,33 @@ class MarkerModel {
     }
 }
 
+class PolygonModel {
+    info;
+    id;
+    lat;
+    lng;
+    _feature;
+    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);
+    }
+    constructor(feature, id, info) {
+        this.info = info;
+        this.id = id == null ? IdGenerator.get() : id;
+        this._feature = feature;
+        [this.lng, this.lat] = getCenter(this._feature.getGeometry()?.getExtent());
+    }
+    get feature() {
+        return this._feature;
+    }
+}
+
 class GenericMessage {
 }
 class CallbackMessage extends GenericMessage {
@@ -178,6 +208,18 @@ class MapClickEvent extends GenericMessage {
     }
 }
 
+class CloseTooltipCommand extends GenericMessage {
+    tooltipId;
+    static ID = '4896d52c-e34f-4994-bcfd-32832d12dbe4';
+    constructor(tooltipId) {
+        super();
+        this.tooltipId = tooltipId;
+    }
+    get id() {
+        return CloseTooltipCommand.ID;
+    }
+}
+
 class AddLayerCommand extends GenericMessage {
     layer;
     static ID = 'd93e250f-92bc-43ac-9c6a-46c521a1aaa5';
@@ -351,7 +393,7 @@ class MapClickService {
         const model = new MapClickEvent(ev.coordinate, {});
         this.map?.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])
@@ -389,6 +431,7 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.registerSubject(AddTileCommand.ID);
         this.registerSubject(RemoveTileCommand.ID);
         this.registerSubject(MapClickEvent.ID);
+        this.registerSubject(CloseTooltipCommand.ID);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapClickService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageRegistratorService });
@@ -732,6 +775,7 @@ class FeatureLayerComponent extends DestructibleComponent {
     postboy;
     factory;
     layer = null;
+    _settings = new FeatureLayerSettings();
     constructor(postboy, factory) {
         super();
         this.postboy = postboy;
@@ -743,7 +787,6 @@ class FeatureLayerComponent extends DestructibleComponent {
             .pipe(filter((m) => !!m), first())
             .subscribe((m) => this.initLayer());
     }
-    _settings = new FeatureLayerSettings();
     set settings(value) {
         if (!value || this._settings.isSame(value))
             return;
@@ -805,6 +848,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class TooltipSettings {
+    id;
+    containerClass = 'custom-tooltip-class';
+    show = (e) => true;
+    constructor(id) {
+        this.id = 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({ ...this, show });
+    }
+    setClass(containerClass) {
+        return TooltipSettings.copy({ ...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 {
+    postboy;
+    detector;
+    container;
+    _settings = new TooltipSettings();
+    map;
+    overlay;
+    show = false;
+    set settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.detector.detectChanges();
+    }
+    constructor(postboy, detector) {
+        super();
+        this.postboy = postboy;
+        this.detector = detector;
+    }
+    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;
+        });
+    }
+    removeOverlay = () => {
+        !!this.overlay && this.map?.removeOverlay(this.overlay);
+        this.show = false;
+    };
+    addOverlay(coordinates) {
+        this.removeOverlay();
+        this.overlay = new Overlay(this.options(coordinates));
+        this.map?.addOverlay(this.overlay);
+        this.show = true;
+        this.detector.detectChanges();
+    }
+    options = (coordinates) => {
+        return {
+            element: this.container?.nativeElement,
+            autoPan: false,
+            autoPanAnimation: { duration: 0 },
+            position: coordinates,
+        };
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, deps: [{ token: MapPostboyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { container: [{
+                type: ViewChild,
+                args: ['tip']
+            }], settings: [{
+                type: Input
+            }] } });
+
+class PolygonsComponent extends DestructibleComponent {
+    postboy;
+    layerName = '';
+    constructor(postboy) {
+        super();
+        this.postboy = postboy;
+    }
+    _polygons = [];
+    set polygons(value) {
+        this._polygons = value;
+        this.putPolygons();
+    }
+    ngOnInit() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(filter((m) => !!m), first())
+            .subscribe(() => this.putPolygons());
+    }
+    putPolygons() {
+        if (!this._polygons?.length)
+            return;
+        this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._polygons.map((m) => m.feature)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PolygonsComponent, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", ngImport: i0, type: PolygonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-polygons', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; }, propDecorators: { layerName: [{
+                type: Input
+            }], polygons: [{
+                type: Input
+            }] } });
+
 class MapModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MapModule, declarations: [DestructibleComponent,
@@ -812,7 +992,14 @@ class MapModule {
             TileLayerComponent,
             OsmTileLayerComponent,
             FeatureLayerComponent,
-            MarkersComponent], imports: [CommonModule], exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent] });
+            MarkersComponent,
+            TooltipComponent,
+            PolygonsComponent], imports: [CommonModule], exports: [MapPlateComponent,
+            FeatureLayerComponent,
+            MarkersComponent,
+            TileLayerComponent,
+            TooltipComponent,
+            PolygonsComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapModule, decorators: [{
@@ -826,8 +1013,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         OsmTileLayerComponent,
                         FeatureLayerComponent,
                         MarkersComponent,
+                        TooltipComponent,
+                        PolygonsComponent,
+                    ],
+                    exports: [
+                        MapPlateComponent,
+                        FeatureLayerComponent,
+                        MarkersComponent,
+                        TileLayerComponent,
+                        TooltipComponent,
+                        PolygonsComponent,
                     ],
-                    exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent],
                 }]
         }] });
 
@@ -854,6 +1050,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
  */
@@ -862,5 +1072,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-src-map.mjs.map