From 9cbc9f12933004049ddf1d33a827ab02456bc258 Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Mon, 2 Nov 2020 21:00:13 +0100
Subject: [PATCH] Implement event handlers

---
 .../aol/item-layers/item-layers.component.ts  | 56 ++++++++++++++++---
 1 file changed, 48 insertions(+), 8 deletions(-)

diff --git a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
index adbc501..5c4b144 100644
--- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
@@ -1,8 +1,7 @@
-import { Component, Host, Input, Output, EventEmitter, Optional, QueryList, OnInit, AfterViewInit, OnChanges, SimpleChanges, SkipSelf, forwardRef, Inject, InjectionToken } from '@angular/core';
-import { HttpClient } from "@angular/common/http";
-import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
+import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
+import { LayerGroupComponent, MapComponent } from 'ngx-openlayers';
 import { ItemService,IItem,AppConfig } from '@farmmaps/common';
-import { IItemLayer,ItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
+import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
 import { ILayerData} from '../../../models/layer.data';
 import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map';
 import {Extent} from 'ol/extent';
@@ -17,7 +16,6 @@ import { Vector as VectorLayer } from 'ol/layer';
 import VectorTileSource from 'ol/source/VectorTile';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import {GeoJSON,MVT} from 'ol/format';
-import { from } from 'rxjs';
 
 @Component({
   selector: 'fm-map-item-layers',
@@ -27,12 +25,16 @@ import { from } from 'rxjs';
   ]
 })
 
-export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit {
+export class ItemLayersComponent extends LayerGroupComponent implements OnChanges, OnInit,OnDestroy {
   @Input() itemLayers: IItemLayer[];
   @Input() itemLayer: IItemLayer;
+  @Output() onFeatureSelected: EventEmitter<string> = new EventEmitter<string>();
+  @Output() onFeatureHover: EventEmitter<string> = new EventEmitter<string>();
   private _apiEndPoint: string;
   private initialized:boolean = false;
-
+  private mapEventHandlerInstalled = false;
+  private selectedFeatures = {};
+  
   constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
     super(map);
     this._apiEndPoint = appConfig.getConfig("apiEndPoint");
@@ -284,6 +286,20 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     this.initialized=true;
   }
 
+  installMapEventHandler() {
+    if(!this.mapEventHandlerInstalled) {
+      this.map.instance.on(['click', 'pointermove'],this.mapEventHandler);
+      this.mapEventHandlerInstalled=true;
+    }
+  }
+
+  unInstallMapEventHandler() {
+    if(this.mapEventHandlerInstalled) {
+      this.map.instance.un(['click', 'pointermove'],this.mapEventHandler);
+      this.mapEventHandlerInstalled=false;
+    }
+  }
+
   addOrUpdateOlLayer(itemLayer:IItemLayer,index:number):Layer {
     if(!itemLayer) return null;
     var olLayers = this.instance.getLayers();
@@ -333,20 +349,44 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     }
   }
 
+  mapEventHandler = (event) => {
+    //if(event.type === 'click' && !this.onFeatureSelected.observers.length) return;
+    //if(event.type === 'pointermode' && !this.onFeatureHover.observers.length) return;
+    if(this.itemLayer && this.itemLayer.layer) {
+       this.itemLayer.layer.getFeatures(event.pixel).then((features) => {
+         this.selectedFeatures = {};
+         if(!features.length) return;
+        let fid = features[0].getId();
+        this.selectedFeatures[fid] = features[0];    
+        console.debug(features[0]);
+        //this.itemLayer.layer.changed();         
+       })
+    }    
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (this.instance && this.initialized) {
       if (changes['itemLayers']) {
         var itemLayers = changes['itemLayers'].currentValue as IItemLayer[];
         this.updateLayers(itemLayers);
       }
-      if (changes['itemLayer']) {
+      if (changes['itemLayer']) {      
         var itemLayer = changes['itemLayer'].currentValue as IItemLayer;
+        this.itemLayer = itemLayer
         if(itemLayer) {
+          if(itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
+            this.installMapEventHandler();
+          }
           this.updateLayers([itemLayer]);
         } else {
           this.updateLayers([]);
+          this.unInstallMapEventHandler();
         }
       }
     }
   }
+
+  ngOnDestroy() {
+    this.unInstallMapEventHandler();
+  }
 }