@artstesh/maps 4.0.4 → 4.0.6

package/dist/fesm2020/maps-components.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';
 
@@ -139,6 +142,28 @@ class MarkerModel {
     }
 }
 
+class PolygonModel {
+    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 {
@@ -176,6 +201,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();
@@ -340,7 +376,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])
@@ -378,6 +414,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: "15.2.10", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapClickService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -783,6 +820,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+class TooltipSettings {
+    constructor(id) {
+        this.containerClass = 'custom-tooltip-class';
+        this.show = (e) => true;
+        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 {
+    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;
+        this._settings = new TooltipSettings();
+        this.show = false;
+        this.removeOverlay = () => {
+            !!this.overlay && this.map?.removeOverlay(this.overlay);
+            this.show = false;
+        };
+        this.options = (coordinates) => {
+            return {
+                element: this.container?.nativeElement,
+                autoPan: false,
+                autoPanAnimation: { duration: 0 },
+                position: coordinates,
+            };
+        };
+    }
+    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) {
+        this.removeOverlay();
+        this.overlay = new Overlay(this.options(coordinates));
+        this.map?.addOverlay(this.overlay);
+        this.show = true;
+        this.detector.detectChanges();
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, deps: [{ token: MapPostboyService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", 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 {
+    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() {
+        if (!this._polygons?.length)
+            return;
+        this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._polygons.map((m) => m.feature)));
+    }
+}
+PolygonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PolygonsComponent, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Component });
+PolygonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", 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 {
 }
 MapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -791,7 +958,14 @@ MapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         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: "15.2.10", ngImport: i0, type: MapModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapModule, decorators: [{
             type: NgModule,
@@ -804,8 +978,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         OsmTileLayerComponent,
                         FeatureLayerComponent,
                         MarkersComponent,
+                        TooltipComponent,
+                        PolygonsComponent,
+                    ],
+                    exports: [
+                        MapPlateComponent,
+                        FeatureLayerComponent,
+                        MarkersComponent,
+                        TileLayerComponent,
+                        TooltipComponent,
+                        PolygonsComponent,
                     ],
-                    exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent],
                 }]
         }] });
 
@@ -832,6 +1015,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
  */
@@ -844,5 +1041,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.mjs.map