@artstesh/maps 4.1.1 → 4.1.3

package/dist/fesm2020/maps-components.mjs

@@ -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';
@@ -246,6 +246,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();
@@ -346,6 +360,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();
@@ -598,7 +656,7 @@ class MapManagementService {
             if (!!source['getSource'])
                 source = source?.getSource();
             source?.clear();
-            source?.addFeatures(c.features);
+            !!c.features?.length && source?.addFeatures(c.features);
         });
     }
     observeRemoveLayer() {
@@ -637,7 +695,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) => {
             this.map = ev.map;
             this.map?.on('moveend', () => {
                 const zoom = Math.floor(this.map?.getView().getZoom() || -1);
@@ -646,6 +711,13 @@ class MapStateService {
             });
         });
     }
+    observeCenter() {
+        this.postboy.subscribe(SetMapCenterCommand.ID).subscribe((c) => {
+            this.map?.getView().setCenter([c.lng, c.lat]);
+            if (c.zoom)
+                this.map?.getView().setZoom(c.zoom);
+        });
+    }
 }
 MapStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapStateService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
 MapStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapStateService });
@@ -900,14 +972,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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) => this.map?.addControl(c.item));
+    }
+    observeRemoving() {
+        this.postboy
+            .subscribe(RemoveControlCommand.ID)
+            .subscribe((c) => this.map?.removeControl(c.item));
+    }
+}
+ControlsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ControlsService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
+ControlsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ControlsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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);
@@ -932,11 +1039,11 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.registerExecutor(GenerateZoomControlExecutor.ID, (e) => ZoomControlFactory.build(e.settings));
     }
 }
-MessageRegistratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "15.2.10", 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: "15.2.10", ngImport: i0, type: MessageRegistratorService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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() {
@@ -1119,13 +1226,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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;
@@ -1135,21 +1261,45 @@ class FeatureLayerSettings {
         result.style = model.style;
         return result;
     }
+    /**
+     Setter for {@link FeatureLayerSettings.zIndex}
+     * @param zIndex
+     */
     setZIndex(zIndex) {
         return FeatureLayerSettings.copy({ ...this, zIndex });
     }
+    /**
+     * Setter for {@link FeatureLayerSettings.name}
+     * @param name
+     */
     setName(name) {
         return FeatureLayerSettings.copy({ ...this, name });
     }
+    /**
+     * Setter for {@link FeatureLayerSettings.maxZoom}
+     * @param maxZoom
+     */
     setMaxZoom(maxZoom) {
         return FeatureLayerSettings.copy({ ...this, maxZoom });
     }
+    /**
+     * Setter for {@link FeatureLayerSettings.minZoom}
+     * @param minZoom
+     */
     setMinZoom(minZoom) {
         return FeatureLayerSettings.copy({ ...this, minZoom });
     }
+    /**
+     * Setter for {@link FeatureLayerSettings.style}
+     * @param style
+     */
     setStyle(style) {
         return FeatureLayerSettings.copy({ ...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;
@@ -1491,6 +1641,7 @@ MapPlateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: ["url", "map"] }, { kind: "component", type: FeatureLayerComponent, selector: "art-feature-layer", inputs: ["settings"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapPlateComponent, decorators: [{
             type: Component,
@@ -1504,6 +1655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DrawingGenerationService,
                         FeatureService,
                         FeatureModificationService,
+                        ControlsService,
                     ], 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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { settings: [{
                 type: Input
@@ -1517,7 +1669,7 @@ class MarkersComponent extends DestructibleComponent {
         this._markers = [];
     }
     set markers(value) {
-        this._markers = value;
+        this._markers = value ?? [];
         this.putMarkers();
     }
     ngOnInit() {
@@ -1527,7 +1679,7 @@ class MarkersComponent extends DestructibleComponent {
             .subscribe(() => this.putMarkers());
     }
     putMarkers() {
-        if (!this._markers?.length)
+        if (!this._markers)
             return;
         this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._markers.map((m) => m.feature)));
     }
@@ -1647,7 +1799,7 @@ class PolygonsComponent extends DestructibleComponent {
         this._polygons = [];
     }
     set polygons(value) {
-        this._polygons = value;
+        this._polygons = value ?? [];
         this.putPolygons();
     }
     ngOnInit() {
@@ -1945,5 +2097,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.mjs.map