@artstesh/maps 1.0.6 → 1.0.7

package/dist/fesm2015/maps-components-src-map.js

@@ -5,7 +5,7 @@ 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 { getCenter, createEmpty, extend } from 'ol/extent';
 import { useGeographic, get } from 'ol/proj';
 import { Subject } from 'rxjs';
 import { PostboyService, PostboyAbstractRegistrator } from '@artstesh/postboy';
@@ -17,8 +17,11 @@ 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 { bbox } from 'ol/loadingstrategy';
+import { fromExtent } from 'ol/geom/Polygon';
+import Cluster from 'ol/source/Cluster';
 import Style from 'ol/style/Style';
-import { Icon, Circle, Fill, Stroke } from 'ol/style';
+import { Icon, Circle, Fill, Stroke, Text } from 'ol/style';
 
 class DestructibleComponent {
     constructor() {
@@ -122,6 +125,10 @@ class IdGenerator {
 }
 IdGenerator.collection = 'ABCDEFGHIJKLMNOPQRSTUVWXTZ0123456789'.split('');
 
+class MapConstants {
+}
+MapConstants.FeatureInfo = 'f-info';
+
 class MarkerModel {
     constructor(lat, lng, id, info) {
         this.lat = lat;
@@ -137,7 +144,7 @@ class MarkerModel {
         const feature = new Feature(new Point([this.lng, this.lat]));
         feature.setId(this.id);
         if (this.info)
-            feature.set('info', this.info);
+            feature.set(MapConstants.FeatureInfo, this.info);
         return feature;
     }
 }
@@ -191,10 +198,11 @@ class MapRenderedEvent extends GenericMessage {
 MapRenderedEvent.ID = 'b6121807-3b89-4cd3-82cf-089d2cefdc4f';
 
 class MapClickEvent extends GenericMessage {
-    constructor(coordinates, entities) {
+    constructor(coordinates, entities, features) {
         super();
         this.coordinates = coordinates;
         this.entities = entities;
+        this.features = features;
     }
     get id() {
         return MapClickEvent.ID;
@@ -269,6 +277,18 @@ class RemoveTileCommand extends GenericMessage {
 }
 RemoveTileCommand.ID = 'c36ccc0b-5638-4819-b148-2de57a59a5b7';
 
+class FitToFeaturesCommand extends GenericMessage {
+    constructor(features, zoomAfter = 0) {
+        super();
+        this.features = features;
+        this.zoomAfter = zoomAfter;
+    }
+    get id() {
+        return FitToFeaturesCommand.ID;
+    }
+}
+FitToFeaturesCommand.ID = '76cdc091-3793-4b6c-82f7-1e0334cf08a8';
+
 class MapPostboyService extends PostboyService {
     constructor() {
         super(...arguments);
@@ -323,11 +343,14 @@ class MapManagementService {
     }
     observePlaceFeatures() {
         this.postboy.subscribe(PlaceLayerFeaturesCommand.ID).subscribe((c) => {
-            var _a, _b, _c;
+            var _a, _b;
             if (!this.layers[c.layer])
                 return;
-            (_b = (_a = this.layers[c.layer]) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear();
-            (_c = this.layers[c.layer].getSource()) === null || _c === void 0 ? void 0 : _c.addFeatures(c.features);
+            let source = (_a = this.layers[c.layer]) === null || _a === void 0 ? void 0 : _a.getSource();
+            if (!!source['getSource'])
+                source = (_b = source) === null || _b === void 0 ? void 0 : _b.getSource();
+            source === null || source === void 0 ? void 0 : source.clear();
+            source === null || source === void 0 ? void 0 : source.addFeatures(c.features);
         });
     }
     observeRemoveLayer() {
@@ -359,6 +382,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
+class MapFeatureService {
+    constructor(postboy) {
+        this.postboy = postboy;
+    }
+    up() {
+        this.observeMapRender();
+        this.observeFitToFeatures();
+    }
+    observeMapRender() {
+        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((m) => {
+            this.map = m.map;
+        });
+    }
+    observeFitToFeatures() {
+        this.postboy.subscribe(FitToFeaturesCommand.ID).subscribe((m) => {
+            this.fitToGeometries(m.features.map((f) => f.getGeometry()), m.zoomAfter);
+        });
+    }
+    fitToGeometries(geometries, zoomAfter) {
+        if (!(geometries === null || geometries === void 0 ? void 0 : geometries.length) || !this.map)
+            return;
+        const extent = createEmpty();
+        geometries.forEach((g) => extend(extent, g.getExtent()));
+        this.map.getView().fit(extent);
+        this.map.getView().setZoom(this.map.getView().getZoom() + zoomAfter);
+    }
+}
+MapFeatureService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapFeatureService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
+MapFeatureService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapFeatureService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapFeatureService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
 class MapClickService {
     constructor(postboy) {
         this.postboy = postboy;
@@ -377,7 +433,7 @@ class MapClickService {
     }
     onClick(ev) {
         var _a;
-        const model = new MapClickEvent(ev.coordinate, {});
+        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() != null)
@@ -385,7 +441,10 @@ class MapClickService {
                 let layerName = l.get('name');
                 if (!model.entities[layerName])
                     model.entities[layerName] = [];
-                model.entities[layerName].push(f.getId());
+                if (!model.features[layerName])
+                    model.features[layerName] = [];
+                model.entities[layerName].push(Object.assign({ id: fs.getId() }, fs.get(MapConstants.FeatureInfo)));
+                model.features[layerName].push(fs);
             });
         });
         return model;
@@ -406,9 +465,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
         }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
 class MessageRegistratorService extends PostboyAbstractRegistrator {
-    constructor(service, management, state, interaction) {
+    constructor(service, management, state, feature, interaction) {
         super(service);
-        this.registerServices([management, state, interaction]);
+        this.registerServices([management, state, interaction, feature]);
     }
     _up() {
         this.registerReplay(MapRenderedEvent.ID);
@@ -419,13 +478,14 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.registerSubject(RemoveTileCommand.ID);
         this.registerSubject(MapClickEvent.ID);
         this.registerSubject(CloseTooltipCommand.ID);
+        this.registerSubject(FitToFeaturesCommand.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 });
+MessageRegistratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }], target: i0.ɵɵFactoryTarget.Injectable });
 MessageRegistratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageRegistratorService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MessageRegistratorService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapClickService }]; } });
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }]; } });
 
 class MapPlateFactory {
     build(settings) {
@@ -547,7 +607,7 @@ class MapPlateComponent extends DestructibleComponent {
     }
 }
 MapPlateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapPlateComponent, deps: [{ token: i0.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MapPlateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MapPlateComponent, selector: "lib-map-plate", inputs: { settings: "settings" }, providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MapPlateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MapPlateComponent, selector: "lib-map-plate", inputs: { settings: "settings" }, providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService, MapFeatureService], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapPlateComponent, decorators: [{
             type: Component,
             args: [{
@@ -555,7 +615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     templateUrl: './map-plate.component.html',
                     styleUrls: ['./map-plate.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService],
+                    providers: [MessageRegistratorService, MapStateService, MapManagementService, MapClickService, MapFeatureService],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { settings: [{
                 type: Input
@@ -996,6 +1056,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
+class ClusterLayerSettings {
+    constructor() {
+        this.name = IdGenerator.get();
+        this.zIndex = 1;
+        this.maxZoom = 19;
+        this.minZoom = 0;
+        this.distance = 20;
+        this.bbox = false;
+    }
+    static copy(model) {
+        const result = new ClusterLayerSettings();
+        result.name = model.name;
+        result.maxZoom = model.maxZoom;
+        result.minZoom = model.minZoom;
+        result.zIndex = model.zIndex;
+        result.bbox = model.bbox;
+        result.distance = model.distance;
+        result.style = model.style;
+        return result;
+    }
+    setZIndex(zIndex) {
+        return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex }));
+    }
+    setDistance(distance) {
+        return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { distance }));
+    }
+    setName(name) {
+        return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { name }));
+    }
+    setMaxZoom(maxZoom) {
+        return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom }));
+    }
+    setMinZoom(minZoom) {
+        return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom }));
+    }
+    setBbox(bbox) {
+        return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { bbox }));
+    }
+    setStyle(style) {
+        return ClusterLayerSettings.copy(Object.assign(Object.assign({}, this), { style }));
+    }
+    isSame(model) {
+        if (this.maxZoom !== model.maxZoom)
+            return false;
+        if (this.minZoom !== model.minZoom)
+            return false;
+        if (this.zIndex !== model.zIndex)
+            return false;
+        if (this.name !== model.name)
+            return false;
+        if (this.distance !== model.distance)
+            return false;
+        if (this.bbox !== model.bbox)
+            return false;
+        if (this.style !== model.style)
+            return false;
+        return true;
+    }
+}
+
+class ClusterLayerManager {
+    constructor(settings, layer, postboy) {
+        this.settings = settings;
+        this.layer = layer;
+        this.postboy = postboy;
+        this.observeClick();
+    }
+    observeClick() {
+        this.postboy.subscribe(MapClickEvent.ID).subscribe((m) => {
+            var _a, _b;
+            if (((_b = (_a = m.features[this.settings.name]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 1) {
+                this.postboy.fire(new FitToFeaturesCommand(m.features[this.settings.name], -1));
+            }
+        });
+    }
+}
+
+class ClusterLayerFactory {
+    build(settings, postboy) {
+        const source = new Vector({
+            strategy: settings.bbox ? bbox : undefined,
+        });
+        const cluster = new Cluster({
+            distance: settings.distance,
+            source: source,
+            geometryFunction: (feature) => {
+                var _a, _b;
+                const geom = feature.getGeometry();
+                if ((geom === null || geom === void 0 ? void 0 : geom.getType()) == 'Point') {
+                    return geom;
+                }
+                else if ((geom === null || geom === void 0 ? void 0 : geom.getType()) == 'Polygon') {
+                    return (_a = geom) === null || _a === void 0 ? void 0 : _a.getInteriorPoint();
+                }
+                else if ((geom === null || geom === void 0 ? void 0 : geom.getType()) == 'MultiPolygon') {
+                    return (_b = fromExtent(geom.getExtent())) === null || _b === void 0 ? void 0 : _b.getInteriorPoint();
+                }
+                return undefined;
+            },
+        });
+        const layer = new Vector$1({
+            source: cluster,
+            maxZoom: settings.maxZoom || undefined,
+            minZoom: settings.minZoom || undefined,
+            zIndex: settings.zIndex || 0,
+        });
+        layer.setStyle(this.styleFunc(settings));
+        layer.set('name', settings.name);
+        return new ClusterLayerManager(settings, layer, postboy);
+    }
+    styleFunc(settings) {
+        return (feature) => {
+            const features = feature.get('features');
+            if (!settings.style)
+                return undefined;
+            return settings.style(features.map((f) => (Object.assign({ id: f.getId() }, f.get(MapConstants.FeatureInfo)))));
+        };
+    }
+}
+ClusterLayerFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClusterLayerFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ClusterLayerFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClusterLayerFactory, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClusterLayerFactory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ClusterLayerComponent extends DestructibleComponent {
+    constructor(postboy, factory) {
+        super();
+        this.postboy = postboy;
+        this.factory = factory;
+        this.manager = null;
+        this._settings = new ClusterLayerSettings();
+        this.onDestroy = () => this.removeLayer();
+    }
+    ngOnInit() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(filter((m) => !!m), first())
+            .subscribe((m) => this.initLayer());
+    }
+    set settings(value) {
+        if (!value || this._settings.isSame(value))
+            return;
+        this._settings = value;
+        this.initLayer();
+    }
+    initLayer() {
+        this.removeLayer();
+        this.manager = this.factory.build(this._settings, this.postboy);
+        this.postboy.fire(new AddLayerCommand(this.manager.layer));
+    }
+    removeLayer() {
+        var _a;
+        if ((_a = this.manager) === null || _a === void 0 ? void 0 : _a.layer)
+            this.postboy.fire(new RemoveLayerCommand(this.manager.layer));
+    }
+}
+ClusterLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClusterLayerComponent, deps: [{ token: MapPostboyService }, { token: ClusterLayerFactory }], target: i0.ɵɵFactoryTarget.Component });
+ClusterLayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ClusterLayerComponent, selector: "lib-cluster-layer", inputs: { settings: "settings" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ClusterLayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-cluster-layer',
+                    template: '',
+                    styleUrls: [],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: ClusterLayerFactory }]; }, propDecorators: { settings: [{
+                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 });
@@ -1006,12 +1240,14 @@ MapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.
         FeatureLayerComponent,
         MarkersComponent,
         TooltipComponent,
-        PolygonsComponent], imports: [CommonModule], exports: [MapPlateComponent,
+        PolygonsComponent,
+        ClusterLayerComponent], imports: [CommonModule], exports: [MapPlateComponent,
         FeatureLayerComponent,
         MarkersComponent,
         TileLayerComponent,
         TooltipComponent,
-        PolygonsComponent] });
+        PolygonsComponent,
+        ClusterLayerComponent] });
 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,
@@ -1026,6 +1262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         MarkersComponent,
                         TooltipComponent,
                         PolygonsComponent,
+                        ClusterLayerComponent,
                     ],
                     exports: [
                         MapPlateComponent,
@@ -1034,6 +1271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         TileLayerComponent,
                         TooltipComponent,
                         PolygonsComponent,
+                        ClusterLayerComponent,
                     ],
                 }]
         }] });
@@ -1059,6 +1297,10 @@ class MarkerStyleHelper {
             }),
         });
     }
+    static withText(style, text) {
+        style.setText(text);
+        return style;
+    }
 }
 
 class PolygonStyleHelper {
@@ -1075,6 +1317,19 @@ class PolygonStyleHelper {
     }
 }
 
+class TextStyleHelper {
+    static get(text, font, color) {
+        return new Text({
+            text: text,
+            font: font,
+            textAlign: 'center',
+            fill: new Fill({
+                color: color,
+            }),
+        });
+    }
+}
+
 /*
  * Public API Surface of maps
  */
@@ -1083,5 +1338,5 @@ class PolygonStyleHelper {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { CallbackMessage, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, FeatureLayerComponent, FeatureLayerSettings, GenericMessage, MapClickEvent, MapLyrs, MapLyrsLabel, MapModule, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, OsmTileLayerComponent, PolygonModel, PolygonStyleHelper, PolygonsComponent, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings };
 //# sourceMappingURL=maps-components-src-map.js.map