@artstesh/maps 1.0.4 → 1.0.6

package/dist/bundles/maps-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ol'), require('ol/geom'), require('ol/proj'), require('rxjs'), require('@artstesh/postboy'), require('ol/Map'), require('ol/View'), require('ol/layer/Tile'), require('ol/source/OSM'), require('rxjs/operators'), require('ol/source'), require('ol/layer'), require('ol/style/Style'), require('ol/style')) :
-    typeof define === 'function' && define.amd ? define('maps-components', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/proj', 'rxjs', '@artstesh/postboy', 'ol/Map', 'ol/View', 'ol/layer/Tile', 'ol/source/OSM', 'rxjs/operators', 'ol/source', 'ol/layer', 'ol/style/Style', 'ol/style'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["maps-components"] = {}, global.ng.core, global.ng.common, global.ol, global.geom, global.proj, global.rxjs, global.postboy, global.Map, global.View, global.TileLayer, global.OSM, global.rxjs.operators, global.source, global.layer, global.Style, global.style));
-})(this, (function (exports, i0, i5, ol, geom, proj, rxjs, postboy, Map, View, TileLayer, OSM, operators, source, layer, Style, style) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ol'), require('ol/geom'), require('ol/format'), require('ol/extent'), require('ol/proj'), require('rxjs'), require('@artstesh/postboy'), require('ol/Map'), require('ol/View'), require('ol/layer/Tile'), require('ol/source/OSM'), require('rxjs/operators'), require('ol/source'), require('ol/layer'), require('ol/Overlay'), require('ol/style/Style'), require('ol/style')) :
+    typeof define === 'function' && define.amd ? define('maps-components', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/proj', 'rxjs', '@artstesh/postboy', 'ol/Map', 'ol/View', 'ol/layer/Tile', 'ol/source/OSM', 'rxjs/operators', 'ol/source', 'ol/layer', 'ol/Overlay', 'ol/style/Style', 'ol/style'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["maps-components"] = {}, global.ng.core, global.ng.common, global.ol, global.geom, global.format, global.extent, global.proj, global.rxjs, global.postboy, global.Map, global.View, global.TileLayer, global.OSM, global.rxjs.operators, global.source, global.layer, global.Overlay, global.Style, global.style));
+})(this, (function (exports, i0, i5, ol, geom, format, extent, proj, rxjs, postboy, Map, View, TileLayer, OSM, operators, source, layer, Overlay, Style, style) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,6 +30,7 @@
     var View__default = /*#__PURE__*/_interopDefaultLegacy(View);
     var TileLayer__default = /*#__PURE__*/_interopDefaultLegacy(TileLayer);
     var OSM__default = /*#__PURE__*/_interopDefaultLegacy(OSM);
+    var Overlay__default = /*#__PURE__*/_interopDefaultLegacy(Overlay);
     var Style__default = /*#__PURE__*/_interopDefaultLegacy(Style);
 
     var DestructibleComponent = /** @class */ (function () {
@@ -632,6 +633,35 @@
         return MarkerModel;
     }());
 
+    var PolygonModel = /** @class */ (function () {
+        function PolygonModel(feature, id, info) {
+            var _b;
+            var _a;
+            this.info = info;
+            this.id = id == null ? IdGenerator.get() : id;
+            this._feature = feature;
+            _b = __read(extent.getCenter((_a = this._feature.getGeometry()) === null || _a === void 0 ? void 0 : _a.getExtent()), 2), this.lng = _b[0], this.lat = _b[1];
+        }
+        PolygonModel.fromGeoJson = function (id, json, info) {
+            var feature = new format.GeoJSON().readFeature(json);
+            feature.setId(id);
+            return new PolygonModel(feature, id, info);
+        };
+        PolygonModel.fromWKT = function (id, wkt, info) {
+            var feature = new format.WKT().readFeature(wkt);
+            feature.setId(id);
+            return new PolygonModel(feature, id, info);
+        };
+        Object.defineProperty(PolygonModel.prototype, "feature", {
+            get: function () {
+                return this._feature;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return PolygonModel;
+    }());
+
     var GenericMessage = /** @class */ (function () {
         function GenericMessage() {
         }
@@ -689,6 +719,24 @@
     }(GenericMessage));
     MapClickEvent.ID = '323df526-8d9c-49c6-83e8-6e9a1e7762f7';
 
+    var CloseTooltipCommand = /** @class */ (function (_super) {
+        __extends(CloseTooltipCommand, _super);
+        function CloseTooltipCommand(tooltipId) {
+            var _this = _super.call(this) || this;
+            _this.tooltipId = tooltipId;
+            return _this;
+        }
+        Object.defineProperty(CloseTooltipCommand.prototype, "id", {
+            get: function () {
+                return CloseTooltipCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return CloseTooltipCommand;
+    }(GenericMessage));
+    CloseTooltipCommand.ID = '4896d52c-e34f-4994-bcfd-32832d12dbe4';
+
     var AddLayerCommand = /** @class */ (function (_super) {
         __extends(AddLayerCommand, _super);
         function AddLayerCommand(layer) {
@@ -905,7 +953,7 @@
             var model = new MapClickEvent(ev.coordinate, {});
             (_a = this.map) === null || _a === void 0 ? void 0 : _a.forEachFeatureAtPixel(ev.pixel, function (f, l) {
                 _this.getFeatureCollectionWithInner([f])
-                    .filter(function (f) { return !!f.getId(); })
+                    .filter(function (f) { return f.getId() != null; })
                     .forEach(function (fs) {
                     var layerName = l.get('name');
                     if (!model.entities[layerName])
@@ -946,6 +994,7 @@
             this.registerSubject(AddTileCommand.ID);
             this.registerSubject(RemoveTileCommand.ID);
             this.registerSubject(MapClickEvent.ID);
+            this.registerSubject(CloseTooltipCommand.ID);
         };
         return MessageRegistratorService;
     }(postboy.PostboyAbstractRegistrator));
@@ -1435,6 +1484,169 @@
                     type: i0.Input
                 }] } });
 
+    var TooltipSettings = /** @class */ (function () {
+        function TooltipSettings(id) {
+            this.containerClass = 'custom-tooltip-class';
+            this.show = function (e) { return true; };
+            this.id = id !== null && id !== void 0 ? id : IdGenerator.get();
+        }
+        TooltipSettings.copy = function (model) {
+            var result = new TooltipSettings(model.id);
+            result.show = model.show;
+            result.containerClass = model.containerClass;
+            return result;
+        };
+        TooltipSettings.prototype.setShow = function (show) {
+            return TooltipSettings.copy(Object.assign(Object.assign({}, this), { show: show }));
+        };
+        TooltipSettings.prototype.setClass = function (containerClass) {
+            return TooltipSettings.copy(Object.assign(Object.assign({}, this), { containerClass: containerClass }));
+        };
+        TooltipSettings.prototype.isSame = function (model) {
+            if (this.show !== model.show)
+                return false;
+            if (this.containerClass !== model.containerClass)
+                return false;
+            if (this.id !== model.id)
+                return false;
+            return true;
+        };
+        return TooltipSettings;
+    }());
+
+    var TooltipComponent = /** @class */ (function (_super) {
+        __extends(TooltipComponent, _super);
+        function TooltipComponent(postboy, detector) {
+            var _this = _super.call(this) || this;
+            _this.postboy = postboy;
+            _this.detector = detector;
+            _this._settings = new TooltipSettings();
+            _this.show = false;
+            _this.removeOverlay = function () {
+                var _a;
+                !!_this.overlay && ((_a = _this.map) === null || _a === void 0 ? void 0 : _a.removeOverlay(_this.overlay));
+                _this.show = false;
+            };
+            _this.options = function (coordinates) {
+                var _a;
+                return {
+                    element: (_a = _this.container) === null || _a === void 0 ? void 0 : _a.nativeElement,
+                    autoPan: false,
+                    autoPanAnimation: { duration: 0 },
+                    position: coordinates,
+                };
+            };
+            return _this;
+        }
+        Object.defineProperty(TooltipComponent.prototype, "settings", {
+            set: function (value) {
+                if (!value || this._settings.isSame(value))
+                    return;
+                this._settings = value;
+                this.detector.detectChanges();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TooltipComponent.prototype.ngOnInit = function () {
+            this.subs.push(this.observeMapRender());
+            this.subs.push(this.observeMapClick());
+            this.subs.push(this.observeClose());
+        };
+        TooltipComponent.prototype.observeMapClick = function () {
+            var _this = this;
+            return this.postboy.subscribe(MapClickEvent.ID).subscribe(function (ev) {
+                _this._settings.show(ev) ? _this.addOverlay(ev.coordinates) : _this.removeOverlay();
+            });
+        };
+        TooltipComponent.prototype.observeClose = function () {
+            var _this = this;
+            return this.postboy
+                .subscribe(CloseTooltipCommand.ID)
+                .pipe(operators.filter(function (ev) { return ev.tooltipId === _this._settings.id; }))
+                .subscribe(function () { return _this.removeOverlay(); });
+        };
+        TooltipComponent.prototype.observeMapRender = function () {
+            var _this = this;
+            return this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
+                _this.map = m.map;
+            });
+        };
+        TooltipComponent.prototype.addOverlay = function (coordinates) {
+            var _a;
+            this.removeOverlay();
+            this.overlay = new Overlay__default["default"](this.options(coordinates));
+            (_a = this.map) === null || _a === void 0 ? void 0 : _a.addOverlay(this.overlay);
+            this.show = true;
+            this.detector.detectChanges();
+        };
+        return TooltipComponent;
+    }(DestructibleComponent));
+    TooltipComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TooltipComponent, deps: [{ token: MapPostboyService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TooltipComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TooltipComponent, selector: "lib-tooltip", inputs: { settings: "settings" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["tip"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, 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__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TooltipComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-tooltip',
+                        templateUrl: './tooltip.component.html',
+                        styleUrls: ['./tooltip.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { container: [{
+                    type: i0.ViewChild,
+                    args: ['tip']
+                }], settings: [{
+                    type: i0.Input
+                }] } });
+
+    var PolygonsComponent = /** @class */ (function (_super) {
+        __extends(PolygonsComponent, _super);
+        function PolygonsComponent(postboy) {
+            var _this = _super.call(this) || this;
+            _this.postboy = postboy;
+            _this.layerName = '';
+            _this._polygons = [];
+            return _this;
+        }
+        Object.defineProperty(PolygonsComponent.prototype, "polygons", {
+            set: function (value) {
+                this._polygons = value;
+                this.putPolygons();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PolygonsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.postboy
+                .subscribe(MapRenderedEvent.ID)
+                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
+                .subscribe(function () { return _this.putPolygons(); });
+        };
+        PolygonsComponent.prototype.putPolygons = function () {
+            var _a;
+            if (!((_a = this._polygons) === null || _a === void 0 ? void 0 : _a.length))
+                return;
+            this.postboy.fire(new PlaceLayerFeaturesCommand(this.layerName, this._polygons.map(function (m) { return m.feature; })));
+        };
+        return PolygonsComponent;
+    }(DestructibleComponent));
+    PolygonsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PolygonsComponent, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PolygonsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PolygonsComponent, selector: "lib-polygons", inputs: { layerName: "layerName", polygons: "polygons" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PolygonsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-polygons',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }]; }, propDecorators: { layerName: [{
+                    type: i0.Input
+                }], polygons: [{
+                    type: i0.Input
+                }] } });
+
     var MapModule = /** @class */ (function () {
         function MapModule() {
         }
@@ -1446,7 +1658,14 @@
             TileLayerComponent,
             OsmTileLayerComponent,
             FeatureLayerComponent,
-            MarkersComponent], imports: [i5.CommonModule], exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent] });
+            MarkersComponent,
+            TooltipComponent,
+            PolygonsComponent], imports: [i5.CommonModule], exports: [MapPlateComponent,
+            FeatureLayerComponent,
+            MarkersComponent,
+            TileLayerComponent,
+            TooltipComponent,
+            PolygonsComponent] });
     MapModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, imports: [[i5.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, decorators: [{
                 type: i0.NgModule,
@@ -1459,8 +1678,17 @@
                             OsmTileLayerComponent,
                             FeatureLayerComponent,
                             MarkersComponent,
+                            TooltipComponent,
+                            PolygonsComponent,
+                        ],
+                        exports: [
+                            MapPlateComponent,
+                            FeatureLayerComponent,
+                            MarkersComponent,
+                            TileLayerComponent,
+                            TooltipComponent,
+                            PolygonsComponent,
                         ],
-                        exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent],
                     }]
             }] });
 
@@ -1493,6 +1721,24 @@
         return MarkerStyleHelper;
     }());
 
+    var PolygonStyleHelper = /** @class */ (function () {
+        function PolygonStyleHelper() {
+        }
+        PolygonStyleHelper.simple = function (fill, stroke, strokeWidth) {
+            if (strokeWidth === void 0) { strokeWidth = 1; }
+            return new Style__default["default"]({
+                fill: new style.Fill({
+                    color: fill,
+                }),
+                stroke: new style.Stroke({
+                    color: stroke,
+                    width: strokeWidth,
+                }),
+            });
+        };
+        return PolygonStyleHelper;
+    }());
+
     /*
      * Public API Surface of maps
      */
@@ -1506,6 +1752,7 @@
      */
 
     exports.CallbackMessage = CallbackMessage;
+    exports.CloseTooltipCommand = CloseTooltipCommand;
     exports.FeatureLayerComponent = FeatureLayerComponent;
     exports.FeatureLayerSettings = FeatureLayerSettings;
     exports.GenericMessage = GenericMessage;
@@ -1521,8 +1768,13 @@
     exports.MarkersComponent = MarkersComponent;
     exports.MessageRegistratorService = MessageRegistratorService;
     exports.OsmTileLayerComponent = OsmTileLayerComponent;
+    exports.PolygonModel = PolygonModel;
+    exports.PolygonStyleHelper = PolygonStyleHelper;
+    exports.PolygonsComponent = PolygonsComponent;
     exports.TileLayerComponent = TileLayerComponent;
     exports.TileLayerSettings = TileLayerSettings;
+    exports.TooltipComponent = TooltipComponent;
+    exports.TooltipSettings = TooltipSettings;
 
     Object.defineProperty(exports, '__esModule', { value: true });