@artstesh/maps 1.0.10 → 1.1.0

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/format'), require('ol/extent'), require('ol/proj'), require('@artstesh/postboy'), require('rxjs'), require('rxjs/operators'), require('ol/source'), require('ol/interaction'), require('ol/interaction/Draw'), require('ol/layer/Tile'), require('ol/source/OSM'), require('ol/layer'), require('ol/loadingstrategy'), require('ol/geom/Polygon'), require('ol/source/Cluster'), require('ol/Map'), require('ol/View'), require('ol/Overlay'), require('ol/style/Style'), require('ol/style'), require('ol/proj/epsg4326')) :
-    typeof define === 'function' && define.amd ? define('maps-components', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/proj', '@artstesh/postboy', 'rxjs', 'rxjs/operators', 'ol/source', 'ol/interaction', 'ol/interaction/Draw', 'ol/layer/Tile', 'ol/source/OSM', 'ol/layer', 'ol/loadingstrategy', 'ol/geom/Polygon', 'ol/source/Cluster', 'ol/Map', 'ol/View', 'ol/Overlay', 'ol/style/Style', 'ol/style', 'ol/proj/epsg4326'], 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.postboy, global.rxjs, global.rxjs.operators, global.source, global.interaction, global.Draw, global.TileLayer, global.OSM, global.layer, global.loadingstrategy, global.Polygon, global.Cluster, global.Map, global.View, global.Overlay, global.Style, global.style, global.epsg4326));
-})(this, (function (exports, i0, i6, ol, geom, format, extent, proj, postboy, rxjs, operators, source, interaction, Draw, TileLayer, OSM, layer, loadingstrategy, Polygon, Cluster, Map, View, Overlay, Style, style, epsg4326) { '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('@artstesh/postboy'), require('ol/interaction'), require('ol/interaction/Draw'), require('ol/control'), require('rxjs/operators'), require('ol/source'), require('ol/layer/Tile'), require('ol/source/OSM'), require('ol/layer'), require('ol/loadingstrategy'), require('ol/geom/Polygon'), require('ol/source/Cluster'), require('rxjs'), require('ol/Map'), require('ol/View'), require('ol/Overlay'), require('ol/style/Style'), require('ol/style'), require('ol/proj/epsg4326')) :
+    typeof define === 'function' && define.amd ? define('maps-components', ['exports', '@angular/core', '@angular/common', 'ol', 'ol/geom', 'ol/format', 'ol/extent', 'ol/proj', '@artstesh/postboy', 'ol/interaction', 'ol/interaction/Draw', 'ol/control', 'rxjs/operators', 'ol/source', 'ol/layer/Tile', 'ol/source/OSM', 'ol/layer', 'ol/loadingstrategy', 'ol/geom/Polygon', 'ol/source/Cluster', 'rxjs', 'ol/Map', 'ol/View', 'ol/Overlay', 'ol/style/Style', 'ol/style', 'ol/proj/epsg4326'], 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.postboy, global.interaction, global.Draw, global.control, global.rxjs.operators, global.source, global.TileLayer, global.OSM, global.layer, global.loadingstrategy, global.Polygon, global.Cluster, global.rxjs, global.Map, global.View, global.Overlay, global.Style, global.style, global.epsg4326));
+})(this, (function (exports, i0, i6, ol, geom, format, extent, proj, postboy, interaction, Draw, control, operators, source, TileLayer, OSM, layer, loadingstrategy, Polygon, Cluster, rxjs, Map, View, Overlay, Style, style, epsg4326) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -676,6 +676,7 @@
     (function (DrawingType) {
         DrawingType[DrawingType["Polygon"] = 1] = "Polygon";
         DrawingType[DrawingType["Circle"] = 2] = "Circle";
+        DrawingType[DrawingType["Square"] = 3] = "Square";
     })(exports.DrawingType || (exports.DrawingType = {}));
 
     exports.FeatureOutputFormat = void 0;
@@ -883,6 +884,43 @@
     }(postboy.PostboyCallbackMessage));
     DrawSelectionAreaCommand.ID = '573d8a0d-f25b-42b7-9ad7-0ac6d86ac362';
 
+    var ModifyFeatureCommand = /** @class */ (function (_super) {
+        __extends(ModifyFeatureCommand, _super);
+        function ModifyFeatureCommand(model, style, format) {
+            if (format === void 0) { format = exports.FeatureOutputFormat.GeoJson; }
+            var _this = _super.call(this) || this;
+            _this.model = model;
+            _this.style = style;
+            _this.format = format;
+            return _this;
+        }
+        Object.defineProperty(ModifyFeatureCommand.prototype, "id", {
+            get: function () {
+                return ModifyFeatureCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ModifyFeatureCommand;
+    }(postboy.PostboyCallbackMessage));
+    ModifyFeatureCommand.ID = 'ead85caa-24c6-4844-a68c-2cea91774c8c';
+
+    var CancelFeatureModificationCommand = /** @class */ (function (_super) {
+        __extends(CancelFeatureModificationCommand, _super);
+        function CancelFeatureModificationCommand() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(CancelFeatureModificationCommand.prototype, "id", {
+            get: function () {
+                return CancelFeatureModificationCommand.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return CancelFeatureModificationCommand;
+    }(postboy.PostboyGenericMessage));
+    CancelFeatureModificationCommand.ID = '9c9fb40f-ea95-4704-8177-0e9ecabf36fa';
+
     var AddLayerCommand = /** @class */ (function (_super) {
         __extends(AddLayerCommand, _super);
         function AddLayerCommand(layer) {
@@ -1028,64 +1066,138 @@
     }(postboy.PostboyGenericMessage));
     DrawingFinishedEvent.ID = 'c724b68e-b4eb-4783-90f1-a8e31973fd36';
 
-    var GenerateDrawQuery = /** @class */ (function (_super) {
-        __extends(GenerateDrawQuery, _super);
-        function GenerateDrawQuery(layer, style, type) {
+    var DrawingGenerationService = /** @class */ (function () {
+        function DrawingGenerationService() {
+        }
+        DrawingGenerationService.getDraw = function (ev) {
+            return new interaction.Draw({
+                source: ev.layer.getSource(),
+                type: ev.type === exports.DrawingType.Polygon ? 'Polygon' : 'Circle',
+                style: ev.style,
+                geometryFunction: DrawingGenerationService.geometryFunc(ev.type),
+            });
+        };
+        DrawingGenerationService.geometryFunc = function (type) {
+            switch (type) {
+                case exports.DrawingType.Circle:
+                    return Draw.createRegularPolygon(32);
+                case exports.DrawingType.Square:
+                    return Draw.createRegularPolygon(4);
+            }
+            return undefined;
+        };
+        return DrawingGenerationService;
+    }());
+
+    var FeatureService = /** @class */ (function () {
+        function FeatureService() {
+        }
+        FeatureService.filterFeaturesInArea = function (query) {
+            return query.features.filter(function (f) { return FeatureService.booleanIntersects(query.area, f.getGeometry()); });
+        };
+        FeatureService.booleanIntersects = function (g1, g2) {
+            if (g2.getType() === 'Point')
+                return g1.intersectsCoordinate(g2.getCoordinates());
+            if (g2.getType() === 'Circle')
+                return g1.intersectsCoordinate(g2.getCenter());
+            if (g2.getType() === 'Polygon')
+                return g1.intersectsCoordinate(g2.getInteriorPoint().getCoordinates());
+            return false;
+        };
+        return FeatureService;
+    }());
+
+    var GetFeaturesInAreaQuery = /** @class */ (function (_super) {
+        __extends(GetFeaturesInAreaQuery, _super);
+        function GetFeaturesInAreaQuery(area, ignore) {
+            if (ignore === void 0) { ignore = new Set(); }
             var _this = _super.call(this) || this;
-            _this.layer = layer;
-            _this.style = style;
-            _this.type = type;
+            _this.area = area;
+            _this.ignore = ignore;
             return _this;
         }
-        Object.defineProperty(GenerateDrawQuery.prototype, "id", {
+        Object.defineProperty(GetFeaturesInAreaQuery.prototype, "id", {
             get: function () {
-                return GenerateDrawQuery.ID;
+                return GetFeaturesInAreaQuery.ID;
             },
             enumerable: false,
             configurable: true
         });
-        return GenerateDrawQuery;
+        return GetFeaturesInAreaQuery;
     }(postboy.PostboyCallbackMessage));
-    GenerateDrawQuery.ID = 'f01c99ba-0953-4ab5-82f9-04e6fbb678c1';
+    GetFeaturesInAreaQuery.ID = 'efcf4271-a07a-40e0-9f02-d4dade40b8ac';
 
-    var FilterFeaturesInAreaQuery = /** @class */ (function (_super) {
-        __extends(FilterFeaturesInAreaQuery, _super);
-        function FilterFeaturesInAreaQuery(area, features) {
+    var FilterFeaturesInAreaExecutor = /** @class */ (function (_super) {
+        __extends(FilterFeaturesInAreaExecutor, _super);
+        function FilterFeaturesInAreaExecutor(area, features) {
             var _this = _super.call(this) || this;
             _this.area = area;
             _this.features = features;
             return _this;
         }
-        Object.defineProperty(FilterFeaturesInAreaQuery.prototype, "id", {
+        Object.defineProperty(FilterFeaturesInAreaExecutor.prototype, "id", {
             get: function () {
-                return FilterFeaturesInAreaQuery.ID;
+                return FilterFeaturesInAreaExecutor.ID;
             },
             enumerable: false,
             configurable: true
         });
-        return FilterFeaturesInAreaQuery;
-    }(postboy.PostboyCallbackMessage));
-    FilterFeaturesInAreaQuery.ID = '36bb2d94-8028-4512-90dd-2386af3fc67c';
+        return FilterFeaturesInAreaExecutor;
+    }(postboy.PostboyExecutor));
+    FilterFeaturesInAreaExecutor.ID = '36bb2d94-8028-4512-90dd-2386af3fc67c';
 
-    var GetFeaturesInAreaQuery = /** @class */ (function (_super) {
-        __extends(GetFeaturesInAreaQuery, _super);
-        function GetFeaturesInAreaQuery(area, ignore) {
-            if (ignore === void 0) { ignore = new Set(); }
+    var GenerateDrawExecutor = /** @class */ (function (_super) {
+        __extends(GenerateDrawExecutor, _super);
+        function GenerateDrawExecutor(layer, style, type) {
             var _this = _super.call(this) || this;
-            _this.area = area;
-            _this.ignore = ignore;
+            _this.layer = layer;
+            _this.style = style;
+            _this.type = type;
             return _this;
         }
-        Object.defineProperty(GetFeaturesInAreaQuery.prototype, "id", {
+        Object.defineProperty(GenerateDrawExecutor.prototype, "id", {
             get: function () {
-                return GetFeaturesInAreaQuery.ID;
+                return GenerateDrawExecutor.ID;
             },
             enumerable: false,
             configurable: true
         });
-        return GetFeaturesInAreaQuery;
-    }(postboy.PostboyCallbackMessage));
-    GetFeaturesInAreaQuery.ID = 'efcf4271-a07a-40e0-9f02-d4dade40b8ac';
+        return GenerateDrawExecutor;
+    }(postboy.PostboyExecutor));
+    GenerateDrawExecutor.ID = 'f01c99ba-0953-4ab5-82f9-04e6fbb678c1';
+
+    var GenerateZoomControlExecutor = /** @class */ (function (_super) {
+        __extends(GenerateZoomControlExecutor, _super);
+        function GenerateZoomControlExecutor(settings) {
+            var _this = _super.call(this) || this;
+            _this.settings = settings;
+            return _this;
+        }
+        Object.defineProperty(GenerateZoomControlExecutor.prototype, "id", {
+            get: function () {
+                return GenerateZoomControlExecutor.ID;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return GenerateZoomControlExecutor;
+    }(postboy.PostboyExecutor));
+    GenerateZoomControlExecutor.ID = 'ff16a833-c68e-4b1a-bc23-c0d16b002810';
+
+    var ZoomControlFactory = /** @class */ (function () {
+        function ZoomControlFactory() {
+        }
+        ZoomControlFactory.build = function (settings) {
+            return new control.Zoom({
+                zoomInTipLabel: settings.zoomInLabel,
+                zoomOutTipLabel: settings.zoomOutLabel,
+                zoomInClassName: settings.zoomInClass,
+                zoomOutClassName: settings.zoomOutClass,
+                className: settings.controlClass,
+            });
+        };
+        return ZoomControlFactory;
+    }());
 
     var MapPostboyService = /** @class */ (function (_super) {
         __extends(MapPostboyService, _super);
@@ -1178,8 +1290,6 @@
             var _this = this;
             this.postboy.subscribe(GetFeaturesInAreaQuery.ID).subscribe(function (qr) {
                 var result = new Dictionary();
-                var queue = [];
-                var queries = [];
                 _this.layers.forEach(function (l) {
                     var _a, _b;
                     var layerName = l.get('name');
@@ -1188,14 +1298,10 @@
                     var source = l.getSource();
                     if (!!source['getSource'])
                         source = (_a = source) === null || _a === void 0 ? void 0 : _a.getSource();
-                    var query = new FilterFeaturesInAreaQuery(qr.area, (_b = source === null || source === void 0 ? void 0 : source.getFeatures()) !== null && _b !== void 0 ? _b : []);
-                    queue.push(query.result.pipe(operators.tap(function (r) {
-                        result.put(l.get('name'), r.map(function (e) { return (Object.assign({ id: e.getId() }, e.get(MapConstants.FeatureInfo))); }));
-                    })));
-                    queries.push(query);
+                    var features = _this.postboy.execute(new FilterFeaturesInAreaExecutor(qr.area, (_b = source === null || source === void 0 ? void 0 : source.getFeatures()) !== null && _b !== void 0 ? _b : []));
+                    result.put(layerName, features.map(function (e) { return (Object.assign({ id: e.getId() }, e.get(MapConstants.FeatureInfo))); }));
                 });
-                rxjs.forkJoin(queue).subscribe(function () { return qr.finish(result); });
-                queries.forEach(function (q) { return _this.postboy.fire(q); });
+                qr.finish(result);
             });
         };
         return MapManagementService;
@@ -1349,22 +1455,18 @@
             var _this = this;
             this.postboy.subscribe(StartDrawingCommand.ID).subscribe(function (ev) {
                 _this.draw(function (l) {
+                    var _a;
                     if (!l || !_this.map) {
                         _this.clearInteraction(l);
                         return;
                     }
-                    var drawQuery = new GenerateDrawQuery(l, ev.style, ev.type);
-                    drawQuery.result.subscribe(function (draw) {
-                        var _a;
-                        var cancelSub = _this.observeCancelation(ev, l);
-                        _this.drawInteraction = draw;
-                        (_a = _this.map) === null || _a === void 0 ? void 0 : _a.addInteraction(_this.drawInteraction);
-                        _this.drawInteraction.on('drawend', function (evt) {
-                            cancelSub.unsubscribe();
-                            _this.onEnd(evt, ev, l);
-                        });
+                    var cancelSub = _this.observeCancelation(ev, l);
+                    _this.drawInteraction = _this.postboy.execute(new GenerateDrawExecutor(l, ev.style, ev.type));
+                    (_a = _this.map) === null || _a === void 0 ? void 0 : _a.addInteraction(_this.drawInteraction);
+                    _this.drawInteraction.on('drawend', function (evt) {
+                        cancelSub.unsubscribe();
+                        _this.onEnd(evt, ev, l);
                     });
-                    _this.postboy.fire(drawQuery);
                 });
             });
         };
@@ -1412,59 +1514,108 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
-    var DrawingGenerationService = /** @class */ (function () {
-        function DrawingGenerationService(postboy) {
+    var FeatureModificationService = /** @class */ (function () {
+        function FeatureModificationService(postboy) {
             this.postboy = postboy;
         }
-        DrawingGenerationService.prototype.up = function () {
-            this.postboy.subscribe(GenerateDrawQuery.ID).subscribe(function (ev) {
-                ev.finish(new interaction.Draw({
-                    source: ev.layer.getSource(),
-                    type: exports.DrawingType[ev.type],
-                    style: ev.style,
-                    geometryFunction: ev.type !== exports.DrawingType.Circle ? undefined : Draw.createRegularPolygon(32),
-                }));
+        FeatureModificationService.prototype.up = function () {
+            this.observeModification();
+            this.observeMapRender();
+        };
+        FeatureModificationService.prototype.observeModification = function () {
+            var _this = this;
+            this.postboy.subscribe(ModifyFeatureCommand.ID).subscribe(function (ev) {
+                _this.defineLayer(function (l) {
+                    if (!l || !_this.map) {
+                        _this.clearInteraction(l);
+                        return;
+                    }
+                    _this.observeCancelation(ev, l);
+                    _this.initFeature(l, ev.model.feature);
+                    _this.addModify(ev);
+                    _this.addDragging(ev);
+                });
             });
         };
-        return DrawingGenerationService;
-    }());
-    DrawingGenerationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawingGenerationService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    DrawingGenerationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawingGenerationService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DrawingGenerationService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
-
-    var FeatureService = /** @class */ (function () {
-        function FeatureService(postboy) {
-            this.postboy = postboy;
-        }
-        FeatureService.prototype.up = function () {
-            this.postboy.subscribe(FilterFeaturesInAreaQuery.ID).subscribe(function (qr) {
-                qr.finish(qr.features.filter(function (f) { return FeatureService.booleanIntersects(qr.area, f.getGeometry()); }));
+        FeatureModificationService.prototype.initFeature = function (layer, feature) {
+            var _a, _b;
+            (_a = layer.getSource()) === null || _a === void 0 ? void 0 : _a.clear();
+            (_b = layer.getSource()) === null || _b === void 0 ? void 0 : _b.addFeature(feature);
+        };
+        FeatureModificationService.prototype.addModify = function (command) {
+            var _this = this;
+            var _a;
+            this.modify = new interaction.Modify({
+                features: new ol.Collection([command.model.feature]),
+                style: command.style,
             });
+            this.modify.on('modifyend', function () {
+                _this.onModified(command);
+                command.model.feature.changed();
+            });
+            (_a = this.map) === null || _a === void 0 ? void 0 : _a.addInteraction(this.modify);
         };
-        FeatureService.booleanIntersects = function (g1, g2) {
-            if (g2.getType() === 'Point')
-                return g1.intersectsCoordinate(g2.getCoordinates());
-            if (g2.getType() === 'Circle')
-                return g1.intersectsCoordinate(g2.getCenter());
-            if (g2.getType() === 'Polygon')
-                return g1.intersectsCoordinate(g2.getInteriorPoint().getCoordinates());
-            return false;
+        FeatureModificationService.prototype.addDragging = function (command) {
+            var _this = this;
+            var _a;
+            this.translate = new interaction.Translate({
+                features: new ol.Collection([command.model.feature]),
+                condition: function (ev) {
+                    var _a;
+                    var clone = command.model.feature.clone();
+                    (_a = clone.getGeometry()) === null || _a === void 0 ? void 0 : _a.scale(0.999);
+                    return clone.getGeometry().intersectsCoordinate(ev.coordinate);
+                },
+            });
+            this.translate.on('translateend', function () { return _this.onModified(command); });
+            (_a = this.map) === null || _a === void 0 ? void 0 : _a.addInteraction(this.translate);
         };
-        return FeatureService;
+        FeatureModificationService.prototype.onModified = function (command) {
+            command.next(command.format === exports.FeatureOutputFormat.GeoJson
+                ? new format.GeoJSON().writeFeature(command.model.feature)
+                : new format.WKT().writeFeature(command.model.feature));
+        };
+        FeatureModificationService.prototype.observeMapRender = function () {
+            var _this = this;
+            this.postboy.subscribe(MapRenderedEvent.ID).subscribe(function (m) {
+                _this.map = m.map;
+            });
+        };
+        FeatureModificationService.prototype.defineLayer = function (action) {
+            var query = new GetLayerQuery(MapConstants.DrawingLayerId);
+            query.result.subscribe(function (l) { return action(l); });
+            this.postboy.fire(query);
+        };
+        FeatureModificationService.prototype.observeCancelation = function (ev, layer) {
+            var _this = this;
+            return this.postboy
+                .subscribe(CancelFeatureModificationCommand.ID)
+                .pipe(operators.first())
+                .subscribe(function () {
+                ev.finish(null);
+                _this.clearInteraction(layer);
+            });
+        };
+        FeatureModificationService.prototype.clearInteraction = function (layer) {
+            var _a, _b;
+            if (this.modify)
+                (_a = this.map) === null || _a === void 0 ? void 0 : _a.removeInteraction(this.modify);
+            if (this.translate)
+                (_b = this.map) === null || _b === void 0 ? void 0 : _b.removeInteraction(this.translate);
+        };
+        return FeatureModificationService;
     }());
-    FeatureService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    FeatureService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureService, decorators: [{
+    FeatureModificationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureModificationService, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FeatureModificationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureModificationService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FeatureModificationService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: MapPostboyService }]; } });
 
     var MessageRegistratorService = /** @class */ (function (_super) {
         __extends(MessageRegistratorService, _super);
-        function MessageRegistratorService(service, management, state, mapFeature, interaction, drawing, drawGenerator, feature) {
+        function MessageRegistratorService(service, management, state, mapFeature, interaction, drawing, featureModification) {
             var _this = _super.call(this, service) || this;
-            _this.registerServices([management, state, interaction, mapFeature, drawing, drawGenerator, feature]);
+            _this.registerServices([management, state, interaction, mapFeature, drawing, featureModification]);
             return _this;
         }
         MessageRegistratorService.prototype._up = function () {
@@ -1482,18 +1633,24 @@
             this.registerSubject(StartDrawingCommand.ID);
             this.registerSubject(GetLayerQuery.ID);
             this.registerSubject(DrawingFinishedEvent.ID);
-            this.registerSubject(GenerateDrawQuery.ID);
-            this.registerSubject(FilterFeaturesInAreaQuery.ID);
             this.registerSubject(GetFeaturesInAreaQuery.ID);
             this.registerSubject(DrawSelectionAreaCommand.ID);
+            this.registerSubject(CancelFeatureModificationCommand.ID);
+            this.registerSubject(ModifyFeatureCommand.ID);
+            this.setExecutors();
+        };
+        MessageRegistratorService.prototype.setExecutors = function () {
+            this.registerExecutor(FilterFeaturesInAreaExecutor.ID, function (e) { return FeatureService.filterFeaturesInArea(e); });
+            this.registerExecutor(GenerateDrawExecutor.ID, function (e) { return DrawingGenerationService.getDraw(e); });
+            this.registerExecutor(GenerateZoomControlExecutor.ID, function (e) { return ZoomControlFactory.build(e.settings); });
         };
         return MessageRegistratorService;
     }(postboy.PostboyAbstractRegistrator));
-    MessageRegistratorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }, { token: DrawingService }, { token: DrawingGenerationService }, { token: FeatureService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    MessageRegistratorService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService, deps: [{ token: MapPostboyService }, { token: MapManagementService }, { token: MapStateService }, { token: MapFeatureService }, { token: MapClickService }, { token: DrawingService }, { token: FeatureModificationService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     MessageRegistratorService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageRegistratorService, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }, { type: DrawingGenerationService }, { type: FeatureService }]; } });
+            }], ctorParameters: function () { return [{ type: MapPostboyService }, { type: MapManagementService }, { type: MapStateService }, { type: MapFeatureService }, { type: MapClickService }, { type: DrawingService }, { type: FeatureModificationService }]; } });
 
     var TileLayerSettings = /** @class */ (function () {
         function TileLayerSettings() {
@@ -2135,6 +2292,7 @@
             DrawingService,
             DrawingGenerationService,
             FeatureService,
+            FeatureModificationService,
         ], usesInheritance: true, ngImport: i0__namespace, template: "<ng-content></ng-content>\r\n<lib-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\"></lib-osm-tile-layer>\r\n<lib-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></lib-feature-layer>\r\n", styles: ["lib-map-plate{position:relative;display:flex;flex-direction:column;height:100%}\n"], components: [{ type: OsmTileLayerComponent, selector: "lib-osm-tile-layer", inputs: ["url", "map"] }, { type: FeatureLayerComponent, selector: "lib-feature-layer", inputs: ["settings"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapPlateComponent, decorators: [{
                 type: i0.Component,
@@ -2152,6 +2310,7 @@
                             DrawingService,
                             DrawingGenerationService,
                             FeatureService,
+                            FeatureModificationService,
                         ],
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { settings: [{
@@ -2368,6 +2527,108 @@
                     type: i0.Input
                 }] } });
 
+    var ZoomControlSettings = /** @class */ (function () {
+        function ZoomControlSettings() {
+            this.controlClass = 'ol-zoom';
+            this.zoomInClass = 'ol-zoom-in';
+            this.zoomOutClass = 'ol-zoom-out';
+            this.zoomInLabel = 'Zoom In';
+            this.zoomOutLabel = 'Zoom Out';
+        }
+        ZoomControlSettings.copy = function (model) {
+            var result = new ZoomControlSettings();
+            result.controlClass = model.controlClass;
+            result.zoomInClass = model.zoomInClass;
+            result.zoomOutClass = model.zoomOutClass;
+            result.zoomInLabel = model.zoomInLabel;
+            result.zoomOutLabel = model.zoomOutLabel;
+            return result;
+        };
+        ZoomControlSettings.prototype.isSame = function (model) {
+            if (this.zoomInClass !== model.zoomInClass)
+                return false;
+            if (this.zoomOutClass !== model.zoomOutClass)
+                return false;
+            if (this.zoomInLabel !== model.zoomInLabel)
+                return false;
+            if (this.controlClass !== model.controlClass)
+                return false;
+            if (this.zoomOutLabel !== model.zoomOutLabel)
+                return false;
+            return true;
+        };
+        ZoomControlSettings.prototype.setZoomInLabel = function (zoomInLabel) {
+            return ZoomControlSettings.copy(Object.assign(Object.assign({}, this), { zoomInLabel: zoomInLabel }));
+        };
+        ZoomControlSettings.prototype.setZoomOutClass = function (zoomOutClass) {
+            return ZoomControlSettings.copy(Object.assign(Object.assign({}, this), { zoomOutClass: zoomOutClass }));
+        };
+        ZoomControlSettings.prototype.setZoomInClass = function (zoomInClass) {
+            return ZoomControlSettings.copy(Object.assign(Object.assign({}, this), { zoomInClass: zoomInClass }));
+        };
+        ZoomControlSettings.prototype.setZoomOutLabel = function (zoomOutLabel) {
+            return ZoomControlSettings.copy(Object.assign(Object.assign({}, this), { zoomOutLabel: zoomOutLabel }));
+        };
+        ZoomControlSettings.prototype.setControlClass = function (controlClass) {
+            return ZoomControlSettings.copy(Object.assign(Object.assign({}, this), { controlClass: controlClass }));
+        };
+        return ZoomControlSettings;
+    }());
+
+    var MapControlZoomComponent = /** @class */ (function (_super) {
+        __extends(MapControlZoomComponent, _super);
+        function MapControlZoomComponent(postboy) {
+            var _this = _super.call(this) || this;
+            _this.postboy = postboy;
+            _this._settings = new ZoomControlSettings();
+            _this.onDestroy = function () {
+                _this.eliminate();
+            };
+            _this.eliminate = function () { return !!_this.map && !!_this.control && _this.map.removeControl(_this.control); };
+            return _this;
+        }
+        Object.defineProperty(MapControlZoomComponent.prototype, "settings", {
+            set: function (value) {
+                if (!value || this._settings.isSame(value))
+                    return;
+                this._settings = value;
+                this.setControl();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        MapControlZoomComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.postboy
+                .subscribe(MapRenderedEvent.ID)
+                .pipe(operators.filter(function (m) { return !!m; }), operators.first())
+                .subscribe(function (m) {
+                _this.map = m.map;
+                _this.setControl();
+            });
+        };
+        MapControlZoomComponent.prototype.setControl = function () {
+            if (!this.map)
+                return;
+            this.control = this.postboy.execute(new GenerateZoomControlExecutor(this._settings));
+            this.map.addControl(this.control);
+        };
+        return MapControlZoomComponent;
+    }(DestructibleComponent));
+    MapControlZoomComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapControlZoomComponent, deps: [{ token: MapPostboyService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MapControlZoomComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MapControlZoomComponent, selector: "lib-map-control-zoom", 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: MapControlZoomComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'lib-map-control-zoom',
+                        template: '',
+                        styleUrls: [],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: MapPostboyService }]; }, propDecorators: { settings: [{
+                    type: i0.Input
+                }] } });
+
     var MapModule = /** @class */ (function () {
         function MapModule() {
         }
@@ -2382,13 +2643,15 @@
             MarkersComponent,
             TooltipComponent,
             PolygonsComponent,
-            ClusterLayerComponent], imports: [i6.CommonModule], exports: [MapPlateComponent,
+            ClusterLayerComponent,
+            MapControlZoomComponent], imports: [i6.CommonModule], exports: [MapPlateComponent,
             FeatureLayerComponent,
             MarkersComponent,
             TileLayerComponent,
             TooltipComponent,
             PolygonsComponent,
-            ClusterLayerComponent] });
+            ClusterLayerComponent,
+            MapControlZoomComponent] });
     MapModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, imports: [[i6.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapModule, decorators: [{
                 type: i0.NgModule,
@@ -2404,6 +2667,7 @@
                             TooltipComponent,
                             PolygonsComponent,
                             ClusterLayerComponent,
+                            MapControlZoomComponent,
                         ],
                         exports: [
                             MapPlateComponent,
@@ -2413,6 +2677,7 @@
                             TooltipComponent,
                             PolygonsComponent,
                             ClusterLayerComponent,
+                            MapControlZoomComponent,
                         ],
                     }]
             }] });
@@ -2465,6 +2730,25 @@
                 }),
             });
         };
+        PolygonStyleHelper.edit = function (fill, stroke, strokeWidth, pinRadius) {
+            if (strokeWidth === void 0) { strokeWidth = 1; }
+            if (pinRadius === void 0) { pinRadius = 5; }
+            return new Style__default["default"]({
+                image: new style.Circle({
+                    fill: new style.Fill({
+                        color: stroke,
+                    }),
+                    radius: pinRadius,
+                }),
+                fill: new style.Fill({
+                    color: fill,
+                }),
+                stroke: new style.Stroke({
+                    color: stroke,
+                    width: strokeWidth,
+                }),
+            });
+        };
         return PolygonStyleHelper;
     }());
 
@@ -2550,6 +2834,7 @@
      */
 
     exports.CancelDrawingCommand = CancelDrawingCommand;
+    exports.CancelFeatureModificationCommand = CancelFeatureModificationCommand;
     exports.CloseTooltipCommand = CloseTooltipCommand;
     exports.ClusterLayerComponent = ClusterLayerComponent;
     exports.ClusterLayerSettings = ClusterLayerSettings;
@@ -2558,6 +2843,7 @@
     exports.FeatureLayerComponent = FeatureLayerComponent;
     exports.FeatureLayerSettings = FeatureLayerSettings;
     exports.MapClickEvent = MapClickEvent;
+    exports.MapControlZoomComponent = MapControlZoomComponent;
     exports.MapLyrsLabel = MapLyrsLabel;
     exports.MapModule = MapModule;
     exports.MapMoveEndEvent = MapMoveEndEvent;
@@ -2569,6 +2855,7 @@
     exports.MarkerStyleHelper = MarkerStyleHelper;
     exports.MarkersComponent = MarkersComponent;
     exports.MessageRegistratorService = MessageRegistratorService;
+    exports.ModifyFeatureCommand = ModifyFeatureCommand;
     exports.OsmTileLayerComponent = OsmTileLayerComponent;
     exports.PolygonModel = PolygonModel;
     exports.PolygonStyleHelper = PolygonStyleHelper;
@@ -2580,6 +2867,7 @@
     exports.TileLayerSettings = TileLayerSettings;
     exports.TooltipComponent = TooltipComponent;
     exports.TooltipSettings = TooltipSettings;
+    exports.ZoomControlSettings = ZoomControlSettings;
 
     Object.defineProperty(exports, '__esModule', { value: true });