A bunch of cleanup and added stability

src/app/components/editSymbol/editSymbol.component.html

@@ -1,7 +1,7 @@
 <div class="pt-sm-2">
     <div class="d-flex flex-column-reverse flex-sm-row">
         <div class="flex-grow-1">
-            <mat-form-field appearance="fill" class="w-100 pr-sm-3">
+            <mat-form-field appearance="fill" class="w-100 pr-sm-3" style="max-width: 300px">
                 <mat-label>Label</mat-label>
                 <input matInput [(ngModel)]="symbol.label">
             </mat-form-field>

src/app/components/editSymbol/editSymbol.component.ts

@@ -21,9 +21,22 @@ export class EditSymbolComponent {
     }
 
     close() {
-        let latlng = this.mapItem.getLatLng();
+        if(this.mapItem.getRadius) {
-        this.symbol.latlng = {lat: latlng.lat, lng: latlng.lng};
+            let latlng = this.mapItem.getLatLng();
-        if(this.mapItem.getRadius) this.symbol['radius'] = this.mapItem.getRadius();
+            this.symbol.latlng = {lat: latlng.lat, lng: latlng.lng};
+            this.symbol['radius'] = this.mapItem.getRadius();
+        } else if(this.mapItem.getLatLngs) {
+            let path = this.mapItem.getLatLngs();
+            this.symbol.latlng = path[0].map(latlng => ({lat: latlng.lat, lng: latlng.lng}));
+        } else if(this.mapItem.getBounds) {
+            let bounds = this.mapItem.getBounds();
+            this.symbol.latlng = {lat: bounds['_northEast'].lat, lng: bounds['_northEast'].lng};
+            this.symbol['latlng2'] = {lat: bounds['_southWest'].lat, lng: bounds['_southWest'].lng};
+        } else if(this.mapItem.getLatLng) {
+            let latlng = this.mapItem.getLatLng();
+            this.symbol.latlng = {lat: latlng.lat, lng: latlng.lng};
+        }
+
         this.ref.dismiss(this.symbol);
     }
 

src/app/services/map.service.ts

@@ -132,6 +132,7 @@ export class MapService {
 
     newPolygon(p: Polygon) {
         let polygon = new L.Polygon(p.latlng, Object.assign({color: '#ff4141', autoPan: false}, p)).addTo(this.map);
+        if(p.label) polygon.bindTooltip(p.label, {permanent: true});
         polygon.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: p, item: polygon}));
         if(!p.noDelete) this.polygons.push(polygon);
         return polygon;

src/app/services/sync.service.ts

@@ -131,11 +131,13 @@ export class SyncService {
 
     mergeMaps(newMap: MapData, oldMap: MapData) {
         let map: MapData = {locations: {}};
+        let twoMinAgo = new Date();
+        twoMinAgo.setMinutes(twoMinAgo.getMinutes() - 2);
         Object.keys(newMap).forEach(key => {
             if(!map[key]) map[key] = {};
-            Object.keys(newMap[key]).forEach(id => map[key][id] = newMap[key][id]);
+            Object.keys(newMap[key]).filter(id => !newMap[key][id].deleted || newMap[key][id].updated > twoMinAgo)
+                .forEach(id => map[key][id] = newMap[key][id]);
         });
-
         Object.keys(oldMap).filter(key => key != 'locations').forEach(key => {
             if(!map[key]) map[key] = {};
             Object.keys(oldMap[key]).filter(id => {

src/app/views/map/map.component.ts

@@ -111,8 +111,15 @@ export class MapComponent implements OnDestroy, OnInit {
             if(this.sub == null && e.symbol) {
                 if(e.symbol.noClick) return;
                 this.syncService.freeze.next(true);
-                this.sub = this.bottomSheet.open(EditSymbolComponent, {data: e, disableClose: true, hasBackdrop: false}).afterDismissed().pipe(finalize(() => this.sub = null)).subscribe(symbol => {
+                let ref = this.bottomSheet.open(EditSymbolComponent, {data: e, disableClose: true, hasBackdrop: false});
-                    this.syncService.addCircle(symbol);
+                this.sub = ref.afterDismissed().pipe(finalize(() => {
+                    ref.dismiss();
+                    this.sub = null
+                })).subscribe(symbol => {
+                    if(e.item instanceof L.Circle) this.syncService.addCircle(symbol);
+                    else if(e.item instanceof L.Rectangle) this.syncService.addRectangle(symbol);
+                    else if(e.item instanceof L.Marker) this.syncService.addMarker(symbol);
+                    else if(e.item instanceof L.Polygon) this.syncService.addPolygon(symbol);
                     this.syncService.freeze.next(false);
                 });
             }
@@ -191,6 +198,7 @@ export class MapComponent implements OnDestroy, OnInit {
     };
 
     startDelete = () => {
+        if(this.sub) this.sub.unsubscribe();
         this.sub = this.map.click.pipe(skip(1), filter(e => !!e.symbol)).subscribe(e => {
             if (!!e.symbol && e.symbol.noDeleteTool) return;
             this.syncService.delete(e.symbol)

src/styles.scss

@@ -60,6 +60,10 @@ a[href^="https://maps.google.com/maps"]{display:none !important}
   background: rgba(0, 0, 0, 0.6) !important;
   border-color: rgba(0, 0, 0, 0.6) !important;
   color: white;
+
+  &:before {
+    border-right-color: rgba(0, 0, 0, 0.6) !important;
+  }
 }
 
 .leaflet-tooltip-bottom:before {