@artstesh/maps 1.1.1 → 1.1.3

package/dist/fesm2015/maps-components.js

@@ -6,11 +6,11 @@ import { Feature, Collection } from 'ol';
 import { Point, LineString } from 'ol/geom';
 import { GeoJSON, WKT } from 'ol/format';
 import { getCenter, createEmpty, extend } from 'ol/extent';
+import { Control, Zoom } from 'ol/control';
 import { get, useGeographic, transform } from 'ol/proj';
 import { PostboyGenericMessage, PostboyCallbackMessage, PostboyExecutor, PostboyService, PostboyAbstractRegistrator } from '@artstesh/postboy';
 import { Draw, Modify, Translate } from 'ol/interaction';
 import { createRegularPolygon, createBox } from 'ol/interaction/Draw';
-import { Zoom } from 'ol/control';
 import { first, filter, auditTime } from 'rxjs/operators';
 import { Vector, XYZ } from 'ol/source';
 import TileLayer from 'ol/layer/Tile';
@@ -247,6 +247,20 @@ class Dictionary {
     }
 }
 
+/**
+ *
+ * A control is a visible widget with a DOM element in a fixed position on the screen. They can involve user input (buttons), or be informational only; the position is determined using CSS. By default these are placed in the container with CSS class name ol-overlaycontainer-stopevent, but can use any outside DOM element.
+ * This is the base class for controls. You can use it for simple custom controls by creating the element with listeners, creating an instance:
+ * var myControl = new Control({element: myElement}); and then adding this to the map.
+ * The main advantage of having this as a control rather than a simple separate DOM element is that preventing propagation is handled for you. Controls will also be objects in a module:ol/Collection~Collection, so you can use their methods.
+ * You can also extend this base for your own control class. See examples/custom-controls for an example of how to do this.
+ */
+class MapControl extends Control {
+    constructor(options) {
+        super(options);
+    }
+}
+
 class MapRenderedEvent extends PostboyGenericMessage {
     constructor(map) {
         super();
@@ -347,6 +361,50 @@ class CancelFeatureModificationCommand extends PostboyGenericMessage {
 }
 CancelFeatureModificationCommand.ID = '9c9fb40f-ea95-4704-8177-0e9ecabf36fa';
 
+class AddControlCommand extends PostboyGenericMessage {
+    constructor(item) {
+        super();
+        this.item = item;
+    }
+    get id() {
+        return AddControlCommand.ID;
+    }
+}
+AddControlCommand.ID = '8e1c06eb-b395-4fe1-929c-ebf0805eeb49';
+
+class RemoveControlCommand extends PostboyGenericMessage {
+    constructor(item) {
+        super();
+        this.item = item;
+    }
+    get id() {
+        return RemoveControlCommand.ID;
+    }
+}
+RemoveControlCommand.ID = '361641e0-804a-4930-8c27-0cea6330dbfc';
+
+/**
+ * Forces map to move to a specific point
+ */
+class SetMapCenterCommand extends PostboyGenericMessage {
+    /**
+     *
+     * @param lat - the desired latitude
+     * @param lng - the desired longitude
+     * @param zoom - the desired zoom; doesn't change zoom if undefined
+     */
+    constructor(lat, lng, zoom) {
+        super();
+        this.lat = lat;
+        this.lng = lng;
+        this.zoom = zoom;
+    }
+    get id() {
+        return SetMapCenterCommand.ID;
+    }
+}
+SetMapCenterCommand.ID = 'd50e89c9-6707-4f8c-ab57-65fcef232182';
+
 class AddLayerCommand extends PostboyGenericMessage {
     constructor(layer) {
         super();
@@ -593,14 +651,14 @@ class MapManagementService {
     }
     observePlaceFeatures() {
         this.postboy.subscribe(PlaceLayerFeaturesCommand.ID).subscribe((c) => {
-            var _a;
+            var _a, _b;
             if (!this.layers.has(c.layer))
                 return;
             let source = this.layers.take(c.layer).getSource();
             if (!!source['getSource'])
                 source = (_a = source) === null || _a === void 0 ? void 0 : _a.getSource();
             source === null || source === void 0 ? void 0 : source.clear();
-            source === null || source === void 0 ? void 0 : source.addFeatures(c.features);
+            !!((_b = c.features) === null || _b === void 0 ? void 0 : _b.length) && (source === null || source === void 0 ? void 0 : source.addFeatures(c.features));
         });
     }
     observeRemoveLayer() {
@@ -640,7 +698,14 @@ class MapStateService {
         this.postboy = postboy;
     }
     up() {
-        this.postboy.subscribe(MapRenderedEvent.ID).subscribe((ev) => {
+        this.observeMapRendering();
+        this.observeCenter();
+    }
+    observeMapRendering() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(first())
+            .subscribe((ev) => {
             var _a;
             this.map = ev.map;
             (_a = this.map) === null || _a === void 0 ? void 0 : _a.on('moveend', () => {
@@ -651,6 +716,14 @@ class MapStateService {
             });
         });
     }
+    observeCenter() {
+        this.postboy.subscribe(SetMapCenterCommand.ID).subscribe((c) => {
+            var _a, _b;
+            (_a = this.map) === null || _a === void 0 ? void 0 : _a.getView().setCenter([c.lng, c.lat]);
+            if (c.zoom)
+                (_b = this.map) === null || _b === void 0 ? void 0 : _b.getView().setZoom(c.zoom);
+        });
+    }
 }
 MapStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapStateService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
 MapStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapStateService });
@@ -914,14 +987,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
+class ControlsService {
+    constructor(postboy) {
+        this.postboy = postboy;
+    }
+    up() {
+        this.observeMapRender();
+    }
+    observeMapRender() {
+        this.postboy
+            .subscribe(MapRenderedEvent.ID)
+            .pipe(first())
+            .subscribe((m) => {
+            this.map = m.map;
+            this.observeAdding();
+            this.observeRemoving();
+        });
+    }
+    observeAdding() {
+        this.postboy.subscribe(AddControlCommand.ID).subscribe((c) => { var _a; return (_a = this.map) === null || _a === void 0 ? void 0 : _a.addControl(c.item); });
+    }
+    observeRemoving() {
+        this.postboy
+            .subscribe(RemoveControlCommand.ID)
+            .subscribe((c) => { var _a; return (_a = this.map) === null || _a === void 0 ? void 0 : _a.removeControl(c.item); });
+    }
+}
+ControlsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ControlsService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
+ControlsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ControlsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ControlsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
+
 class MessageRegistratorService extends PostboyAbstractRegistrator {
-    constructor(service, management, state, mapFeature, interaction, drawing, featureModification) {
+    constructor(service, management, state, mapFeature, interaction, drawing, featureModification, controls) {
         super(service);
-        this.registerServices([management, state, interaction, mapFeature, drawing, featureModification]);
+        this.registerServices([management, state, interaction, mapFeature, drawing, featureModification, controls]);
     }
     _up() {
         this.registerReplay(MapRenderedEvent.ID);
         this.registerReplay(PlaceLayerFeaturesCommand.ID);
+        this.registerReplay(RemoveControlCommand.ID);
+        this.registerReplay(AddControlCommand.ID);
+        this.registerReplay(SetMapCenterCommand.ID);
         this.registerSubject(AddLayerCommand.ID);
         this.registerSubject(RemoveLayerCommand.ID);
         this.registerSubject(AddTileCommand.ID);
@@ -946,11 +1054,11 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.registerExecutor(GenerateZoomControlExecutor.ID, (e) => ZoomControlFactory.build(e.settings));
     }
 }
-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 }, { token: DrawingService }, { token: FeatureModificationService }], 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 }, { token: DrawingService }, { token: FeatureModificationService }, { token: ControlsService }], 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: MapFeatureService }, { type: MapClickService }, { type: DrawingService }, { type: FeatureModificationService }]; } });
+        }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }, { type: FeatureModificationService }, { type: ControlsService }]; } });
 
 class TileLayerSettings {
     constructor() {
@@ -1144,13 +1252,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }] } });
 
+/**
+ * A layer that is responsible for showing and styling main features on the map, such as markers and polygons
+ */
 class FeatureLayerSettings {
     constructor() {
+        /**
+         * The identifier of the field, it is autogenerated by default, but can be set manually
+         */
         this.name = IdGenerator.get();
+        /**
+         * The priority of showing - layers with higher zIndex cover others in case of collisions
+         */
         this.zIndex = 1;
+        /**
+         * The maximum zoom at which the layer is visible. 19 by default
+         */
         this.maxZoom = 19;
+        /**
+         * The minimum zoom at which the layer is visible. 0 by default
+         */
         this.minZoom = 0;
     }
+    /**
+     * Creates a clone of the existing settings
+     * @param model
+     */
     static copy(model) {
         const result = new FeatureLayerSettings();
         result.name = model.name;
@@ -1160,21 +1287,45 @@ class FeatureLayerSettings {
         result.style = model.style;
         return result;
     }
+    /**
+     Setter for {@link FeatureLayerSettings.zIndex}
+     * @param zIndex
+     */
     setZIndex(zIndex) {
         return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { zIndex }));
     }
+    /**
+     * Setter for {@link FeatureLayerSettings.name}
+     * @param name
+     */
     setName(name) {
         return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { name }));
     }
+    /**
+     * Setter for {@link FeatureLayerSettings.maxZoom}
+     * @param maxZoom
+     */
     setMaxZoom(maxZoom) {
         return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom }));
     }
+    /**
+     * Setter for {@link FeatureLayerSettings.minZoom}
+     * @param minZoom
+     */
     setMinZoom(minZoom) {
         return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom }));
     }
+    /**
+     * Setter for {@link FeatureLayerSettings.style}
+     * @param style
+     */
     setStyle(style) {
         return FeatureLayerSettings.copy(Object.assign(Object.assign({}, this), { style }));
     }
+    /**
+     * Checks if the model has the same content
+     * @param model - the object to compare
+     */
     isSame(model) {
         if (this.maxZoom !== model.maxZoom)
             return false;
@@ -1530,6 +1681,7 @@ MapPlateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         DrawingGenerationService,
         FeatureService,
         FeatureModificationService,
+        ControlsService,
     ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\r\n<art-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: ["url", "map"] }, { type: FeatureLayerComponent, selector: "art-feature-layer", inputs: ["settings"] }], directives: [{ type: i6.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,
@@ -1548,6 +1700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         DrawingGenerationService,
                         FeatureService,
                         FeatureModificationService,
+                        ControlsService,
                     ],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { settings: [{
@@ -1562,7 +1715,7 @@ class MarkersComponent extends DestructibleComponent {
         this._markers = [];
     }
     set markers(value) {
-        this._markers = value;
+        this._markers = value !== null && value !== void 0 ? value : [];
         this.putMarkers();
     }
     ngOnInit() {
@@ -1572,8 +1725,7 @@ class MarkersComponent extends DestructibleComponent {
             .subscribe(() => this.putMarkers());
     }
     putMarkers() {
-        var _a;
-        if (!((_a = this._markers) === null || _a === void 0 ? void 0 : _a.length))
+        if (!this._markers)
             return;
         this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._markers.map((m) => m.feature)));
     }
@@ -1706,7 +1858,7 @@ class PolygonsComponent extends DestructibleComponent {
         this._polygons = [];
     }
     set polygons(value) {
-        this._polygons = value;
+        this._polygons = value !== null && value !== void 0 ? value : [];
         this.putPolygons();
     }
     ngOnInit() {
@@ -2014,5 +2166,5 @@ class StringifyFeatureHelper {
  * Generated bundle index. Do not edit.
  */
 
-export { CancelDrawingCommand, CancelFeatureModificationCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, Dictionary, DrawSelectionAreaCommand, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, MapClickEvent, MapControlZoomComponent, MapLyrs, MapLyrsLabel, MapModule, MapMoveEndEvent, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, ModifyFeatureCommand, OsmTileLayerComponent, PolygonModel, PolygonStyleHelper, PolygonsComponent, StartDrawingCommand, StringifyFeatureHelper, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings, ZoomControlSettings };
+export { AddControlCommand, CancelDrawingCommand, CancelFeatureModificationCommand, CloseTooltipCommand, ClusterLayerComponent, ClusterLayerSettings, Dictionary, DrawSelectionAreaCommand, DrawingType, FeatureLayerComponent, FeatureLayerSettings, FeatureOutputFormat, MapClickEvent, MapControl, MapControlZoomComponent, MapLyrs, MapLyrsLabel, MapModule, MapMoveEndEvent, MapPlateComponent, MapPostboyService, MapRenderedEvent, MapSettings, MarkerModel, MarkerStyleHelper, MarkersComponent, MessageRegistratorService, ModifyFeatureCommand, OsmTileLayerComponent, PolygonModel, PolygonStyleHelper, PolygonsComponent, RemoveControlCommand, SetMapCenterCommand, StartDrawingCommand, StringifyFeatureHelper, TextStyleHelper, TileLayerComponent, TileLayerSettings, TooltipComponent, TooltipSettings, ZoomControlSettings };
 //# sourceMappingURL=maps-components.js.map