adb-shared 6.2.5 → 6.2.7

package/fesm2022/adb-shared.mjs

@@ -14,7 +14,8 @@ import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, FormControl, FormGroup, FormArray, Validators, ReactiveFormsModule } from '@angular/forms';
 import { delay, debounceTime, switchMap, map, catchError as catchError$1, finalize } from 'rxjs/operators';
 import * as Leaflet from 'leaflet';
-import 'leaflet-draw';
+import Leaflet__default from 'leaflet';
+import '@geoman-io/leaflet-geoman-free';
 
 class EnvironmentService {
     constructor(environment) {
@@ -2951,6 +2952,7 @@ class PolygonDrawerInput {
         this.subscriptions = new Subscription();
         this.mapId = "" + Math.floor(Math.random() * Date.now());
         this.polygonDraw = false;
+        this.shapeLayer = null;
         // ControlValueAccessor
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -2971,29 +2973,33 @@ class PolygonDrawerInput {
         this.subscriptions.unsubscribe();
     }
     initDraw() {
-        // Clean tooltips
-        Leaflet.drawLocal.draw.handlers.rectangle.tooltip = {};
-        Leaflet.drawLocal.draw.handlers.simpleshape.tooltip = {};
-        Leaflet.drawLocal.draw.handlers.polygon.tooltip = {};
-        Leaflet.drawLocal.draw.toolbar.undo.title = "";
-        Leaflet.drawLocal.draw.toolbar.finish.title = "";
-        Leaflet.drawLocal.draw.toolbar.actions.title = "";
-        this.map.on("draw:created", (event) => {
-            if (event.layerType === "polygon") {
-                this.polygonDraw = false;
-                this.clearShape();
-                this.shapeLayer = Leaflet.geoJson(event.layer.toGeoJSON());
-                this.shapeLayer.interactive = false;
-                this.map.addLayer(this.shapeLayer);
-                this.map.fitBounds(this.shapeLayer.getBounds());
-                this.onChange(event.layer.toGeoJSON());
-            }
+        this.map.pm.removeControls();
+        this.map.pm.enableDraw('Polygon', {
+            tooltips: false,
+            finishOn: 'snap',
+            snapDistance: 35,
+            snapMiddle: false
+        });
+        this.map.on("pm:create", (e) => {
+            if (e.shape !== "Polygon")
+                return;
+            this.polygonDraw = false;
+            this.map.pm.disableDraw();
+            this.clearShape();
+            this.shapeLayer = Leaflet__default.geoJSON(e.layer.toGeoJSON(), {
+                interactive: false
+            });
+            this.map.addLayer(this.shapeLayer);
+            this.map.fitBounds(this.shapeLayer.getBounds());
+            this.onChange(e.layer.toGeoJSON());
+            this.map.removeLayer(e.layer);
         });
     }
     renderInitialShape() {
         if (this.geoJson?.type === "Feature") {
-            this.shapeLayer = Leaflet.geoJson(this.geoJson);
-            this.shapeLayer.interactive = false;
+            this.shapeLayer = Leaflet__default.geoJSON(this.geoJson, {
+                interactive: false
+            });
             this.map.addLayer(this.shapeLayer);
             this.map.fitBounds(this.shapeLayer.getBounds());
         }
@@ -3002,10 +3008,6 @@ class PolygonDrawerInput {
         }
     }
     clearShape() {
-        if (this.drawLayer) {
-            this.map.removeLayer(this.drawLayer);
-            this.drawLayer = null;
-        }
         if (this.shapeLayer) {
             this.map.removeLayer(this.shapeLayer);
             this.shapeLayer = null;
@@ -3013,20 +3015,22 @@ class PolygonDrawerInput {
     }
     onDrawPolygon() {
         this.polygonDraw = true;
-        this.drawLayer = new Leaflet.Draw.Polygon(this.map, {
-            allowIntersection: false
+        this.map.pm.enableDraw("Polygon", {
+            allowSelfIntersection: false,
+            snappable: false
         });
-        this.drawLayer.enable();
+    }
+    onUndoStep() {
+        const draw = this.map.pm.Draw?.Polygon;
+        draw?._removeLastVertex();
     }
     onDeleteShape() {
         this.clearShape();
+        this.map.pm.disableDraw();
         this.polygonDraw = false;
         this.onChange(null);
         this.map.setView([62, 17], 5);
     }
-    onUndoStep() {
-        this.drawLayer?.deleteLastVertex();
-    }
     writeValue(geoJson) {
         this.geoJson = geoJson;
     }
@@ -3044,7 +3048,7 @@ class PolygonDrawerInput {
                 useExisting: forwardRef((() => PolygonDrawerInput)),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"mb-1 d-flex gap-1 flex-wrap align-items-start\">\r\n  <button class=\"btn btn-secondary\" type=\"button\" [disabled]=\"shapeLayer||drawLayer\" (click)=\"onDrawPolygon()\" title=\"Polygon\">\r\n    <span class=\"fas fa-draw-polygon\"></span> {{'OBSERVATION.DRAW'|translate}}\r\n  </button>\r\n  @if (shapeLayer||drawLayer) {\r\n    <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onDeleteShape()\" title=\"Ta bort\">\r\n      <span class=\"fas fa-times\"></span>\r\n    </button>\r\n  }\r\n  @if (polygonDraw) {\r\n    <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onUndoStep()\" title=\"\u00C5ngra\">\r\n      <span class=\"fas fa-undo\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n<div [id]=\"mapId\" class=\"border\" style=\"height:20rem\"></div>", dependencies: [{ kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<div class=\"mb-1 d-flex gap-1 flex-wrap align-items-start\">\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onDrawPolygon()\" title=\"Polygon\">\r\n    <span class=\"fas fa-draw-polygon\"></span> {{'OBSERVATION.DRAW'|translate}}\r\n  </button>\r\n  @if (polygonDraw) {\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onDeleteShape()\" title=\"Ta bort\">\r\n    <span class=\"fas fa-times\"></span>\r\n  </button>\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onUndoStep()\" title=\"\u00C5ngra\">\r\n    <span class=\"fas fa-undo\"></span>\r\n  </button>\r\n  }\r\n</div>\r\n<div [id]=\"mapId\" class=\"border\" style=\"height:20rem\"></div>", dependencies: [{ kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: PolygonDrawerInput, decorators: [{
             type: Component,
@@ -3054,7 +3058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: forwardRef((() => PolygonDrawerInput)),
                             multi: true
                         }
-                    ], template: "<div class=\"mb-1 d-flex gap-1 flex-wrap align-items-start\">\r\n  <button class=\"btn btn-secondary\" type=\"button\" [disabled]=\"shapeLayer||drawLayer\" (click)=\"onDrawPolygon()\" title=\"Polygon\">\r\n    <span class=\"fas fa-draw-polygon\"></span> {{'OBSERVATION.DRAW'|translate}}\r\n  </button>\r\n  @if (shapeLayer||drawLayer) {\r\n    <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onDeleteShape()\" title=\"Ta bort\">\r\n      <span class=\"fas fa-times\"></span>\r\n    </button>\r\n  }\r\n  @if (polygonDraw) {\r\n    <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onUndoStep()\" title=\"\u00C5ngra\">\r\n      <span class=\"fas fa-undo\"></span>\r\n    </button>\r\n  }\r\n</div>\r\n<div [id]=\"mapId\" class=\"border\" style=\"height:20rem\"></div>" }]
+                    ], template: "<div class=\"mb-1 d-flex gap-1 flex-wrap align-items-start\">\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onDrawPolygon()\" title=\"Polygon\">\r\n    <span class=\"fas fa-draw-polygon\"></span> {{'OBSERVATION.DRAW'|translate}}\r\n  </button>\r\n  @if (polygonDraw) {\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onDeleteShape()\" title=\"Ta bort\">\r\n    <span class=\"fas fa-times\"></span>\r\n  </button>\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"onUndoStep()\" title=\"\u00C5ngra\">\r\n    <span class=\"fas fa-undo\"></span>\r\n  </button>\r\n  }\r\n</div>\r\n<div [id]=\"mapId\" class=\"border\" style=\"height:20rem\"></div>" }]
         }] });
 
 var AdbMapFilterType;