fix(contextmenu): handle ios mobile device (#1119)

demo/src/app/geo/search/search.component.html

@@ -14,7 +14,7 @@
     </span>
   </mat-card-content>
 
-  <igo-map-browser #mapBrowser [map]="map" [view]="view" igoOverlay [igoContextMenu]=actionbarMenu
+  <igo-map-browser #mapBrowser [map]="map" [view]="view" igoOverlay [igoContextMenu]=actionbarMenu igoLongPress
 
     igoSearchPointerSummary
     [igoSearchPointerSummaryDelay]="500"
@@ -25,6 +25,7 @@
 
   <igo-panel title="Search">
     <igo-search-bar
+      [term]="term"
       (pointerSummaryStatus)="onPointerSummaryStatusChange($event)"
       [searchSettings]="true"
       [store]="searchStore"

demo/src/app/geo/search/search.component.ts

@@ -21,8 +21,7 @@ import {
   Layer,
   ProjectionService,
   Research,
-  SearchResult,
-  SearchService
+  SearchResult
 } from '@igo2/geo';
 
 import { SearchState } from '@igo2/integration';
@@ -79,7 +78,6 @@ export class AppSearchComponent implements OnInit, OnDestroy {
     private mapService: MapService,
     private layerService: LayerService,
     private searchState: SearchState,
-    private searchService: SearchService,
     private mediaService: MediaService
   ) {
     this.mapService.setMap(this.map);
@@ -158,18 +156,17 @@ export class AppSearchComponent implements OnInit, OnDestroy {
       {
         id: 'coordinates',
         title: 'coordinates',
-        handler: this.onSearchCoordinate.bind(this)
+        handler: () => this.searchCoordinate(this.lonlat)
       },
       {
         id: 'googleMaps',
         title: 'googleMap',
-        handler: this.onOpenGoogleMaps.bind(this),
-        args: ['1']
+        handler: () => this.openGoogleMaps(this.lonlat),
       },
       {
         id: 'googleStreetView',
         title: 'googleStreetView',
-        handler: this.onOpenGoogleStreetView.bind(this)
+        handler: () => this.openGoogleStreetView(this.lonlat)
       }
     ]);
   }
@@ -206,31 +203,18 @@ export class AppSearchComponent implements OnInit, OnDestroy {
     return position;
   }
 
-  onPointerSearch(event) {
-    this.lonlat = event;
-    this.onSearchCoordinate();
-  }
-
-  onSearchCoordinate() {
+  searchCoordinate(lonlat) {
     this.searchStore.clear();
-    const results = this.searchService.reverseSearch(this.lonlat);
-
-    for (const i in results) {
-      if (results.length > 0) {
-        results[i].request.subscribe((_results: SearchResult<Feature>[]) => {
-          this.onSearch({ research: results[i], results: _results });
-        });
-      }
-    }
+    this.term = lonlat.map((c) => c.toFixed(6)).join(', ');
   }
 
-  onOpenGoogleMaps() {
-    window.open(GoogleLinks.getGoogleMapsCoordLink(this.lonlat[0], this.lonlat[1]));
+  openGoogleMaps(lonlat) {
+    window.open(GoogleLinks.getGoogleMapsCoordLink(lonlat[0], lonlat[1]));
   }
 
-  onOpenGoogleStreetView() {
+  openGoogleStreetView(lonlat) {
     window.open(
-      GoogleLinks.getGoogleStreetViewLink(this.lonlat[0], this.lonlat[1])
+      GoogleLinks.getGoogleStreetViewLink(lonlat[0], lonlat[1])
     );
   }
 }

packages/common/src/lib/context-menu/context-menu.directive.ts

@@ -30,9 +30,22 @@ export class ContextMenuDirective {
     private elementRef: ElementRef
   ) {}
 
+  @HostListener('longpress', ['$event'])
   @HostListener('contextmenu', ['$event'])
-  public onContextMenu(e: MouseEvent): void {
-    const {x, y} = e;
+  public onContextMenu(e: MouseEvent | TouchEvent): void {
+    let x;
+    let y;
+    if (e instanceof TouchEvent) {
+      x = e.touches[0].pageX;
+      y = e.touches[0].pageY;
+    } else if (e instanceof MouseEvent) {
+      x = e.x;
+      y = e.y;
+    }
+    if (!x || !y) {
+      return;
+    }
+
     this.close();
     e.preventDefault();
     this.menuPosition.emit({ x, y });

packages/common/src/lib/context-menu/context-menu.module.ts

@@ -1,10 +1,11 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { ContextMenuDirective } from './context-menu.directive';
+import { LongPressDirective } from './long-press.directive';
 
 @NgModule({
   imports: [],
-  declarations: [ContextMenuDirective],
-  exports: [ContextMenuDirective]
+  declarations: [ContextMenuDirective, LongPressDirective],
+  exports: [ContextMenuDirective, LongPressDirective]
 })
 export class IgoContextMenuModule {
   static forRoot(): ModuleWithProviders<IgoContextMenuModule> {

packages/common/src/lib/context-menu/index.ts

@@ -1 +1,2 @@
 export * from './context-menu.directive';
+export * from './long-press.directive';

packages/common/src/lib/context-menu/long-press.directive.ts

@@ -0,0 +1,30 @@
+import { Directive, HostListener, Output, EventEmitter } from '@angular/core';
+
+@Directive({
+  selector: '[igoLongPress]'
+})
+export class LongPressDirective {
+  private touchTimeout: any;
+  @Output() longpress = new EventEmitter();
+
+  constructor() { }
+
+
+  @HostListener('touchstart', ['$event'])
+  public touchstart(e: TouchEvent) {
+    this.touchTimeout = setTimeout(() => {
+      this.longpress.emit(e);
+    }, 400);
+  }
+  @HostListener('touchmove')
+  @HostListener('touchcancel')
+  @HostListener('touchend')
+  public touchend() {
+    this.touchEnd();
+  }
+
+
+  private touchEnd() {
+    clearTimeout(this.touchTimeout);
+  }
+}