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>
<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>

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

@ -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 = [];
}
}
}