From 2a9faadbbc4864f02ad852ead5b6d49ff8176f37 Mon Sep 17 00:00:00 2001
From: ztimson <ztimson@psdrcs.com>
Date: Thu, 11 Jul 2019 14:04:38 -0400
Subject: [PATCH] fixed drawing on mobile

---
 src/app/map/map.component.html |  2 +-
 src/app/map/map.component.ts   | 31 ++++++++++++++++++++-----------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html
index e3697e4..11e3ce3 100644
--- a/src/app/map/map.component.html
+++ b/src/app/map/map.component.html
@@ -5,7 +5,7 @@
     <small class="ml-1 text-muted">{{version}}</small>
     <div class="ml-auto">
         <button mat-icon-button (click)="mode = 'marker'" [ngClass]="{'selected': mode == 'marker'}"><mat-icon>room</mat-icon></button>
-        <button mat-icon-button (click)="draw()" [ngClass]="{'selected': !!drawListener}"><mat-icon>create</mat-icon></button>
+        <button mat-icon-button (click)="draw()" [ngClass]="{'selected': drawListener.length}"><mat-icon>create</mat-icon></button>
         <button mat-icon-button><mat-icon>straighten</mat-icon></button>
         <button mat-icon-button (click)="remove = !remove" [ngClass]="{'selected': remove}"><mat-icon>delete</mat-icon></button>
         <button *ngIf="physicsService.calibrate != null" mat-icon-button (click)="calibrate()"><mat-icon>explore</mat-icon></button>
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 69c589f..215037f 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -15,7 +15,7 @@ declare const google;
     styleUrls: ['map.component.scss']
 })
 export class MapComponent {
-    drawListener;
+    drawListener = [];
     mapApi: any;
     markers = [];
     mobile = false;
@@ -32,8 +32,6 @@ export class MapComponent {
                 if(!this.position) this.center(pos);
                 this.position = pos;
 
-                this.position.heading = 45;
-
                 if(this.position.heading) {
                     let marker: HTMLElement = document.querySelector('img[src*="arrow.png"]');
                     if(marker) marker.style.transform = `rotate(${this.position.heading}deg)`
@@ -79,21 +77,32 @@ export class MapComponent {
     }
 
     draw() {
-        if(!this.drawListener) {
+        if(!this.drawListener.length) {
             this.mapApi.setOptions({draggable: false});
-            this.drawListener = google.maps.event.addDomListener(this.mapApi.getDiv(), (this.mobile ? 'touchstart' : 'mousedown'), () => {
+
+            let drawHander = () => {
                 let poly = new google.maps.Polyline({map: this.mapApi, clickable: true});
                 google.maps.event.addListener(poly, 'click', () => {
                     if(this.remove) poly.setMap(null);
                 });
-                let moveListener = google.maps.event.addListener(this.mapApi, (this.mobile ? 'touchmove' : 'mousemove'), e => poly.getPath().push(e.latLng));
-                google.maps.event.addListener(this.mapApi, (this.mobile ? 'touchend' : 'mouseup'), () => google.maps.event.removeListener(moveListener));
-                google.maps.event.addListener(poly, (this.mobile ? 'touchend' : 'mouseup'), () => google.maps.event.removeListener(moveListener));
-            });
+                let moveListener = [
+                    google.maps.event.addListener(this.mapApi, 'touchmove', e => poly.getPath().push(e.latLng)),
+                    google.maps.event.addListener(this.mapApi, 'mousemove', e => poly.getPath().push(e.latLng))
+                ];
+                google.maps.event.addListener(this.mapApi, 'touchend', () => moveListener.forEach(listener => google.maps.event.removeListener(listener)));
+                google.maps.event.addListener(this.mapApi, 'mouseup', () => moveListener.forEach(listener => google.maps.event.removeListener(listener)));
+                google.maps.event.addListener(poly, 'touchend', () => moveListener.forEach(listener => google.maps.event.removeListener(listener)));
+                google.maps.event.addListener(poly, 'mouseup', () => moveListener.forEach(listener => google.maps.event.removeListener(listener)));
+            };
+
+            this.drawListener = [
+                google.maps.event.addDomListener(this.mapApi.getDiv(), 'touchstart', drawHander),
+                google.maps.event.addDomListener(this.mapApi.getDiv(), 'mousedown', drawHander)
+            ]
         } else {
             this.mapApi.setOptions({draggable: true});
-            google.maps.event.removeListener(this.drawListener);
-            this.drawListener = null;
+            this.drawListener.forEach(listener => google.maps.event.removeListener(listener));
+            this.drawListener = [];
         }
     }
 }