From 34e82ce85e627dd80f23a74cfa3c3bc42dabb65c Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Fri, 30 Aug 2019 14:40:37 -0400
Subject: [PATCH] Added square tool

---
 src/app/models/mapSymbol.ts        |  2 +-
 src/app/services/map.service.ts    | 10 +++++++++-
 src/app/views/map/map.component.ts | 20 +++++++++++++++++---
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/app/models/mapSymbol.ts b/src/app/models/mapSymbol.ts
index ee66cf2..f7da064 100644
--- a/src/app/models/mapSymbol.ts
+++ b/src/app/models/mapSymbol.ts
@@ -21,7 +21,7 @@ export interface Circle extends MapSymbol {
     radius?: number;
 }
 
-export interface Square extends MapSymbol {
+export interface Rectangle extends MapSymbol {
     latlng: LatLng;
     latlng2: LatLng;
 }
diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts
index 15ddd74..1b8e561 100644
--- a/src/app/services/map.service.ts
+++ b/src/app/services/map.service.ts
@@ -1,7 +1,7 @@
 import {BehaviorSubject} from "rxjs";
 import {latLngDistance} from "../utils";
 import {environment} from "../../environments/environment";
-import {Circle, LatLng, Marker, Measurement} from "../models/mapSymbol";
+import {Circle, LatLng, Marker, Measurement, Rectangle} from "../models/mapSymbol";
 
 declare const L;
 
@@ -151,6 +151,14 @@ export class MapService {
         return group;
     }
 
+    newRectangle(r: Rectangle) {
+        if(!r.color) r.color = '#ff4141';
+        let rect = new L.Rectangle([r.latlng, r.latlng2], r).addTo(this.map);
+        rect.symbol = r;
+        rect.on('click', e => this.click.next({event: e, symbol: rect}));
+        return rect;
+    }
+
     startDrawing() {
         this.lock();
         this.drawListener = e => {
diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts
index 66099df..e5a7fa5 100644
--- a/src/app/views/map/map.component.ts
+++ b/src/app/views/map/map.component.ts
@@ -35,10 +35,10 @@ export class MapComponent implements OnInit {
     measuringSubscription: Subscription;
 
     menu: ToolbarItem[] = [
-        {name: 'Marker', icon: 'room', toggle: true, click: () => { this.addMarker(); }},
+        {name: 'Marker', icon: 'room', toggle: true, click: () => this.addMarker()},
         {name: 'Draw', icon: 'create', toggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.stopDrawing()},
-        {name: 'Circle', icon: 'panorama_fish_eye', toggle: true, click: () => { this.addCircle(); }},
-        {name: 'Square', icon: 'crop_square', toggle: true},
+        {name: 'Circle', icon: 'panorama_fish_eye', toggle: true, click: () => this.addCircle()},
+        {name: 'Square', icon: 'crop_square', toggle: true, click: () => this.addRectangle()},
         {name: 'Polygon', icon: 'details', toggle: true},
         {name: 'Measure', icon: 'straighten', toggle: true, onEnabled: () => this.startMeasuring(), onDisabled: () => this.stopMeasuring()},
         {name: 'Delete', icon: 'delete', toggle: true},
@@ -121,6 +121,20 @@ export class MapComponent implements OnInit {
         });
     }
 
+    addRectangle() {
+        let lastPoint;
+        this.map.click.pipe(skip(1), take(2)).subscribe(e => {
+            if(lastPoint) {
+                this.menu[3].enabled = false;
+                console.log({latlng: lastPoint.getLatLng(), latlng2: e.event.latlng});
+                this.map.newRectangle({latlng: lastPoint.getLatLng(), latlng2: e.event.latlng});
+                this.map.delete(lastPoint);
+                return;
+            }
+            lastPoint = this.map.newMarker({latlng: e.event.latlng});
+        })
+    }
+
     center(pos?) {
         if(!pos) pos = {lat: this.position.latitude, lng: this.position.longitude};
         this.map.centerOn(pos);