@artstesh/maps 1.0.0 → 1.0.2

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

@@ -729,23 +729,41 @@
     }(GenericMessage));
     RemoveLayerCommand.ID = 'ab484e0e-e185-45cd-8434-12101f3c7eb1';
 
-    var ClearLayerCommand = /** @class */ (function (_super) {
-        __extends(ClearLayerCommand, _super);
-        function ClearLayerCommand(layer) {
+    var AddTileCommand = /** @class */ (function (_super) {
+        __extends(AddTileCommand, _super);
+        function AddTileCommand(layer) {
             var _this = _super.call(this) || this;
             _this.layer = layer;
             return _this;
         }
-        Object.defineProperty(ClearLayerCommand.prototype, "id", {
+        Object.defineProperty(AddTileCommand.prototype, "id", {
             get: function () {
-                return ClearLayerCommand.ID;
+                return AddTileCommand.ID;
             },
             enumerable: false,
             configurable: true
         });
-        return ClearLayerCommand;
+        return AddTileCommand;
     }(GenericMessage));
-    ClearLayerCommand.ID = 'd02842b7-fa62-458d-b1e4-12dd814610c5';
+    AddTileCommand.ID = '25b7df28-72ce-4453-9fe6-54285a2fdc57';
+
+    var RemoveTileCommand = /** @class */ (function (_super) {
+        __extends(RemoveTileCommand, _super);
+        function RemoveTileCommand(layer) {
+            var _this = _super.call(this) || this;
+            _this.layer = layer;
+            return _this;
+        }
+        Object.defineProperty(RemoveTileCommand.prototype, "id", {
+            get: function () {
+                return RemoveTileCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return RemoveTileCommand;
+    }(GenericMessage));
+    RemoveTileCommand.ID = 'c36ccc0b-5638-4819-b148-2de57a59a5b7';
 
     var MapPostboyService = /** @class */ (function () {
         function MapPostboyService() {
@@ -778,7 +796,8 @@
             service.register(AddLayerCommand.ID, new rxjs.Subject());
             service.register(PlaceLayerFeaturesCommand.ID, new rxjs.ReplaySubject(1));
             service.register(RemoveLayerCommand.ID, new rxjs.Subject());
-            service.register(ClearLayerCommand.ID, new rxjs.Subject());
+            service.register(AddTileCommand.ID, new rxjs.Subject());
+            service.register(RemoveTileCommand.ID, new rxjs.Subject());
         }
         return MessageRegistratorService;
     }());
@@ -810,19 +829,29 @@
             this.observeAddLayer();
             this.observeRemoveLayer();
             this.observePlaceFeatures();
-            this.observeClearLayer();
+            this.observeAddTile();
+            this.observeRemoveTile();
         }
-        MapManagementService.prototype.observeMapRender = function () {
+        MapManagementService.prototype.observeRemoveTile = function () {
             var _this = this;
-            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
-                _this.map = m.map;
+            this.postboy.subscribe(RemoveTileCommand.ID).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.removeLayer(c.layer);
             });
         };
-        MapManagementService.prototype.observeClearLayer = function () {
+        MapManagementService.prototype.observeAddTile = function () {
             var _this = this;
-            this.postboy.subscribe(ClearLayerCommand.ID).subscribe(function (c) {
-                var _a, _b;
-                (_b = (_a = _this.layers[c.layer]) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear();
+            this.postboy.subscribe(AddTileCommand.ID).subscribe(function (c) {
+                if (!_this.map)
+                    return;
+                _this.map.addLayer(c.layer);
+            });
+        };
+        MapManagementService.prototype.observeMapRender = function () {
+            var _this = this;
+            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
+                _this.map = m.map;
             });
         };
         MapManagementService.prototype.observeAddLayer = function () {
@@ -1023,15 +1052,143 @@
                     type: i0.Input
                 }] } });
 
+    var TileLayerSettings = /** @class */ (function () {
+        function TileLayerSettings() {
+            this.maxZoom = 19;
+            this.minZoom = 0;
+            this.opacity = 0.6;
+            this.url = '';
+            this.projection = 'EPSG:3857';
+        }
+        TileLayerSettings.copy = function (model) {
+            var result = new TileLayerSettings();
+            result.maxZoom = model.maxZoom;
+            result.minZoom = model.minZoom;
+            result.projection = model.projection;
+            result.opacity = model.opacity;
+            result.url = model.url;
+            return result;
+        };
+        TileLayerSettings.prototype.setUrl = function (url) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { url: url }));
+        };
+        TileLayerSettings.prototype.setMaxZoom = function (maxZoom) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
+        };
+        TileLayerSettings.prototype.setMinZoom = function (minZoom) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
+        };
+        TileLayerSettings.prototype.setOpacity = function (opacity) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { opacity: opacity }));
+        };
+        TileLayerSettings.prototype.setProjection = function (projection) {
+            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { projection: projection }));
+        };
+        TileLayerSettings.prototype.isSame = function (model) {
+            if (this.maxZoom !== model.maxZoom)
+                return false;
+            if (this.minZoom !== model.minZoom)
+                return false;
+            if (this.url !== model.url)
+                return false;
+            if (this.projection !== model.projection)
+                return false;
+            if (this.opacity !== model.opacity)
+                return false;
+            return true;
+        };
+        return TileLayerSettings;
+    }());
+
+    var TileLayerFactory = /** @class */ (function () {
+        function TileLayerFactory() {
+        }
+        TileLayerFactory.prototype.build = function (settings) {
+            var source$1 = new source.XYZ({
+                tileSize: 256,
+                maxZoom: settings.maxZoom || 14,
+                minZoom: settings.minZoom || 1,
+                projection: proj.get(settings.projection),
+                tileUrlFunction: this.getTileFunc(settings),
+                crossOrigin: 'Anonymous',
+            });
+            return new TileLayer__default["default"]({ source: source$1, opacity: settings.opacity });
+        };
+        TileLayerFactory.prototype.getTileFunc = function (settings) {
+            var _this = this;
+            return function (tileCoord) {
+                var zoom = tileCoord[0];
+                var x = tileCoord[1];
+                var y = tileCoord[2];
+                var normalizedCoord = _this.getNormalizedCoord({ x: x, y: y }, zoom);
+                var bound = 1 << zoom;
+                return settings.url
+                    .replace('{x}', String((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.x) || x))
+                    .replace('{z}', String(zoom))
+                    .replace('{y}', String(bound - ((normalizedCoord === null || normalizedCoord === void 0 ? void 0 : normalizedCoord.y) || y) - 1));
+            };
+        };
+        TileLayerFactory.prototype.getNormalizedCoord = function (coord, zoom) {
+            var y = coord.y;
+            var x = coord.x;
+            var tileRange = 1 << zoom;
+            if (y < 0 || y >= tileRange)
+                return null;
+            if (x < 0 || x >= tileRange)
+                x = ((x % tileRange) + tileRange) % tileRange;
+            return { x: x, y: y };
+        };
+        return TileLayerFactory;
+    }());
+    TileLayerFactory.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TileLayerFactory.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerFactory, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
+
     var TileLayerComponent = /** @class */ (function (_super) {
         __extends(TileLayerComponent, _super);
-        function TileLayerComponent() {
-            return _super.call(this) || this;
+        function TileLayerComponent(postboy, factory) {
+            var _this = _super.call(this) || this;
+            _this.postboy = postboy;
+            _this.factory = factory;
+            _this._settings = new TileLayerSettings();
+            _this.onDestroy = function () { return _this.removeLayer(); };
+            return _this;
         }
+        TileLayerComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.postboy
+                .subscribe(MapRenderedEvent.ID)
+                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
+                .subscribe(function (m) { return _this.initLayer(); });
+        };
+        Object.defineProperty(TileLayerComponent.prototype, "settings", {
+            set: function (value) {
+                if (!value || this._settings.isSame(value))
+                    return;
+                this._settings = value;
+                this.initLayer();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TileLayerComponent.prototype.initLayer = function () {
+            this.removeLayer();
+            this.layer = this.factory.build(this._settings);
+            this.postboy.fire(new AddTileCommand(this.layer));
+        };
+        TileLayerComponent.prototype.removeLayer = function () {
+            if (this.layer)
+                this.postboy.fire(new RemoveTileCommand(this.layer));
+        };
         return TileLayerComponent;
     }(DestructibleComponent));
-    TileLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TileLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TileLayerComponent, selector: "lib-tile-layer", usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TileLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TileLayerComponent, deps: [{ token: MapPostboyService }, { token: TileLayerFactory }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TileLayerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TileLayerComponent, selector: "lib-tile-layer", inputs: { settings: "settings" }, 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: TileLayerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1040,7 +1197,9 @@
                         styleUrls: [],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return []; } });
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: TileLayerFactory }]; }, propDecorators: { settings: [{
+                    type: i0.Input
+                }] } });
 
     var FeatureLayerSettings = /** @class */ (function () {
         function FeatureLayerSettings() {
@@ -1228,7 +1387,7 @@
             TileLayerComponent,
             OsmTileLayerComponent,
             FeatureLayerComponent,
-            MarkersComponent], imports: [i5.CommonModule], exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent] });
+            MarkersComponent], imports: [i5.CommonModule], exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent] });
     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,
@@ -1242,52 +1401,10 @@
                             FeatureLayerComponent,
                             MarkersComponent,
                         ],
-                        exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent],
+                        exports: [MapPlateComponent, FeatureLayerComponent, MarkersComponent, TileLayerComponent],
                     }]
             }] });
 
-    var TileLayerSettings = /** @class */ (function () {
-        function TileLayerSettings() {
-            this.name = 'tiles';
-            this.maxZoom = 19;
-            this.minZoom = 0;
-            this.opacity = 1;
-            this.url = '';
-        }
-        TileLayerSettings.copy = function (model) {
-            var result = new TileLayerSettings();
-            result.name = model.name;
-            result.maxZoom = model.maxZoom;
-            result.minZoom = model.minZoom;
-            result.url = model.url;
-            return result;
-        };
-        TileLayerSettings.prototype.setUrl = function (url) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { url: url }));
-        };
-        TileLayerSettings.prototype.setName = function (name) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { name: name }));
-        };
-        TileLayerSettings.prototype.setMaxZoom = function (maxZoom) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { maxZoom: maxZoom }));
-        };
-        TileLayerSettings.prototype.setMinZoom = function (minZoom) {
-            return TileLayerSettings.copy(Object.assign(Object.assign({}, this), { minZoom: minZoom }));
-        };
-        TileLayerSettings.prototype.isSame = function (model) {
-            if (this.maxZoom !== model.maxZoom)
-                return false;
-            if (this.minZoom !== model.minZoom)
-                return false;
-            if (this.url !== model.url)
-                return false;
-            if (this.name !== model.name)
-                return false;
-            return true;
-        };
-        return TileLayerSettings;
-    }());
-
     var MarkerStyleHelper = /** @class */ (function () {
         function MarkerStyleHelper() {
         }