ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

fixed drawing on mobile

Browse Source
This commit is contained in:
ztimson 2019-07-11 14:04:38 -04:00
parent e518c8e383
commit 2a9faadbbc
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/map/map.component.html
View File

@ -5,7 +5,7 @@
<small class="ml-1 text-muted">{{version}}</small> <small class="ml-1 text-muted">{{version}}</small>
<div class="ml-auto"> <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)="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><mat-icon>straighten</mat-icon></button>
<button mat-icon-button (click)="remove = !remove" [ngClass]="{'selected': remove}"><mat-icon>delete</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> <button *ngIf="physicsService.calibrate != null" mat-icon-button (click)="calibrate()"><mat-icon>explore</mat-icon></button>

31
src/app/map/map.component.ts
View File

@ -15,7 +15,7 @@ declare const google;
styleUrls: ['map.component.scss'] styleUrls: ['map.component.scss']
}) })
export class MapComponent { export class MapComponent {
drawListener; drawListener = [];
mapApi: any; mapApi: any;
markers = []; markers = [];
mobile = false; mobile = false;
@ -32,8 +32,6 @@ export class MapComponent {
if(!this.position) this.center(pos); if(!this.position) this.center(pos);
this.position = pos; this.position = pos;
this.position.heading = 45;
if(this.position.heading) { if(this.position.heading) {
let marker: HTMLElement = document.querySelector('img[src*="arrow.png"]'); let marker: HTMLElement = document.querySelector('img[src*="arrow.png"]');
if(marker) marker.style.transform = `rotate(${this.position.heading}deg)` if(marker) marker.style.transform = `rotate(${this.position.heading}deg)`
@ -79,21 +77,32 @@ export class MapComponent {
} }
draw() { draw() {
if(!this.drawListener) { if(!this.drawListener.length) {
this.mapApi.setOptions({draggable: false}); 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}); let poly = new google.maps.Polyline({map: this.mapApi, clickable: true});
google.maps.event.addListener(poly, 'click', () => { google.maps.event.addListener(poly, 'click', () => {
if(this.remove) poly.setMap(null); if(this.remove) poly.setMap(null);
}); });
let moveListener = google.maps.event.addListener(this.mapApi, (this.mobile ? 'touchmove' : 'mousemove'), e => poly.getPath().push(e.latLng)); let moveListener = [
google.maps.event.addListener(this.mapApi, (this.mobile ? 'touchend' : 'mouseup'), () => google.maps.event.removeListener(moveListener)); google.maps.event.addListener(this.mapApi, 'touchmove', e => poly.getPath().push(e.latLng)),
google.maps.event.addListener(poly, (this.mobile ? 'touchend' : 'mouseup'), () => google.maps.event.removeListener(moveListener)); 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 { } else {
this.mapApi.setOptions({draggable: true}); this.mapApi.setOptions({draggable: true});
google.maps.event.removeListener(this.drawListener); this.drawListener.forEach(listener => google.maps.event.removeListener(listener));
this.drawListener = null; this.drawListener = [];
} }
} }
} }