@artstesh/maps 5.1.2 → 5.1.3

package/dist/fesm2022/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';
@@ -251,6 +251,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 {
     map;
     static ID = 'b6121807-3b89-4cd3-82cf-089d2cefdc4f';
@@ -367,6 +381,55 @@ class CancelFeatureModificationCommand extends PostboyGenericMessage {
     }
 }
 
+class AddControlCommand extends PostboyGenericMessage {
+    item;
+    static ID = '8e1c06eb-b395-4fe1-929c-ebf0805eeb49';
+    constructor(item) {
+        super();
+        this.item = item;
+    }
+    get id() {
+        return AddControlCommand.ID;
+    }
+}
+
+class RemoveControlCommand extends PostboyGenericMessage {
+    item;
+    static ID = '361641e0-804a-4930-8c27-0cea6330dbfc';
+    constructor(item) {
+        super();
+        this.item = item;
+    }
+    get id() {
+        return RemoveControlCommand.ID;
+    }
+}
+
+/**
+ * Forces map to move to a specific point
+ */
+class SetMapCenterCommand extends PostboyGenericMessage {
+    lat;
+    lng;
+    zoom;
+    static ID = 'd50e89c9-6707-4f8c-ab57-65fcef232182';
+    /**
+     *
+     * @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;
+    }
+}
+
 class AddLayerCommand extends PostboyGenericMessage {
     layer;
     static ID = 'd93e250f-92bc-43ac-9c6a-46c521a1aaa5';
@@ -679,7 +742,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);
@@ -688,6 +758,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);
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapStateService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapStateService });
 }
@@ -953,14 +1030,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
+class ControlsService {
+    postboy;
+    map;
+    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));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ControlsService, deps: [{ token: MapPostboyService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ControlsService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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);
@@ -984,12 +1098,12 @@ class MessageRegistratorService extends PostboyAbstractRegistrator {
         this.registerExecutor(GenerateDrawExecutor.ID, (e) => DrawingGenerationService.getDraw(e));
         this.registerExecutor(GenerateZoomControlExecutor.ID, (e) => ZoomControlFactory.build(e.settings));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }, { token: DrawingService }, { token: FeatureModificationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageRegistratorService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 {
     maxZoom = 19;
@@ -1603,6 +1717,7 @@ class MapPlateComponent extends DestructibleComponent {
             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: "16.2.12", ngImport: i0, type: MapPlateComponent, decorators: [{
@@ -1617,6 +1732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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
@@ -2067,5 +2183,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